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-tell-inspectorDiagnoses why a design reads as generated or template-built - scans the artifact against a 22-row anti-pattern table where every row names the tell, the perceptual mechanism behind it, and the skill that fixes it, then returns a severity-ranked, slug-routed fix list. Use when someone asks "why does this design feel AI-generated", "this looks like a template and I cannot say why", "what makes this page feel generic", "find the tells in this landing page", "why does this feel cheap even though it is clean", or work passes technical review yet reads mass-produced at a glance. Do NOT use for a general critique of usability and flow - use design-critique instead; to set up the design language that prevents the tells, use premium-design-foundations.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
• Prototype VariantsUse when someone says "give me three versions of this pricing card", "build a few takes on the empty state and let me flip through them", or "prototype some variations of this button". Builds several genuinely different working versions of ONE component behind a live picker, then stops and lets you choose and promote the one that feels right. Requires a filesystem and ideally a dev server. Best run when you explicitly ask for it. Do NOT use to build a single component, to critique designs that already exist (use design-critique), to explore pre-code design direction (use interface-design), or to work through a whole multi-screen flow.Design