Claude skills for frontend design

The default AI interface look is a purple gradient and three equal cards. These skills, including Anthropic’s official design skill, push past it.

• Frontend DesignOfficial Anthropic skill. Guides Claude to create distinctive, production-grade UIs - not the default Inter + purple gradient.Design
• Next.js App RouterBuilds and reviews Next.js App Router code - server/client component boundaries, data fetching, caching and revalidation choices, streaming with Suspense, and Server Action mutations - and delivers routes where every dynamic-vs-cached decision is explicit. Use when someone asks "should this be a client component", "why is my data stale", "where do I put use client", "how do I stream this page", or "how do server actions work". Do NOT use for Vercel-specific runtime and cost tuning of an already-built app - use next-on-vercel-perf instead; for edge middleware and ISR deployment topology - use vercel-edge-and-isr instead; for framework-agnostic Core Web Vitals work - use web-performance instead; for designing an application-wide cache layer beyond the framework - use caching-strategy instead.Coding
• Design QA ChecklistRuns an ordered design QA pass over an implemented UI - layout, type, color, states, motion, content - against the design spec, with concrete tolerances and a filed defect list. Use when someone asks "QA this build against the designs", "does the implementation match Figma", "is this ready for design sign-off", or before releasing a UI change. Do NOT use for critiquing the design itself - use design-critique instead; for a full WCAG conformance audit, use accessibility-audit; for writing the spec the build is checked against, use design-handoff-doc.Design
• Design SystemBuilds three-layer design token architectures (primitive → semantic → component), component specs, and Tailwind themes, plus brand-compliant HTML slides with Chart.js and a contextual layout decision system.Design
• WordPress Design SystemBuild and review WordPress UIs with the WordPress Design System - components, design tokens, color primitives, spacing/typography scales, and @wordpress/components, sourced from the canonical WPDS MCP server.Design
• Component API DesignDesigns React/Vue component APIs - props, composition, event handling, accessibility.Design