Frontend Design and UI Skills

Best for: Making any new interface look intentional instead of templated

The most installed design skill in the registry, and the second most installed skill overall. Anthropic's frontend-design tells the agent to approach every brief as the design lead at a studio whose clients have already rejected templated proposals. It demands deliberate choices about palette, typography, and layout that are specific to the brief, plus one real aesthetic risk the agent can justify.

The instructions are unusually concrete about what generic looks like. The hero must work as a thesis for the page instead of the stock big-number-plus-gradient pattern, typography has to carry personality rather than deliver content neutrally, and structural devices like numbered markers are only allowed when the content genuinely is a sequence. If the brief is vague, the skill makes the agent pin down the subject, audience, and the page's single job before designing anything.

• Official Anthropic skill, 650K installs at snapshot
• Forces subject-grounded palette, type, and layout decisions
• Explicitly bans the template answers, like gradient stat heroes
• Works for new builds and reshaping existing interfaces

Best for: Landing pages, portfolios, and redesigns that need a premium feel

The community's favorite anti-slop skill, and at nearly 13,000 words of instructions, the deepest design framework in this list. Its scope is deliberately narrow: landing pages, portfolios, and redesigns. Dashboards and multi-step product UI are explicitly out. Every rule is contextual; the agent reads the brief first and pulls only what fits.

Its signature move is the Design Read: before generating anything, the agent must state in one line how it interprets the brief, for example a B2B SaaS landing for technical buyers with a Linear-style minimalist language. The skill covers vibe words, reference URLs, audience analysis, and quiet constraints like regulated industries that override aesthetics. Redesigns start with an audit of existing brand assets before anything gets replaced.

• Brief inference first: the agent states its Design Read up front
• Contextual rule system spanning almost 13K words
• Audit-first process for redesigns, preserving brand assets
• Scoped honestly: landing pages and portfolios, never dashboards

Best for: Writing and reviewing React or Next.js code that stays fast

Vercel Engineering's performance rulebook for React and Next.js, packaged as a skill: 70 rules across 8 categories, each with a stable ID and ordered by impact so the agent fixes what matters first. Eliminating request waterfalls and bundle size sit at the top as critical, ahead of server-side performance, data fetching, and re-render optimization.

The rules are specific enough to act on mechanically: run independent awaits through Promise.all, import directly instead of through barrel files, defer analytics until after hydration, start promises early and await late in API routes. For teams on Next.js, this is the closest thing to having Vercel's own review checklist run on every generated component.

• Maintained by Vercel, 543K installs at snapshot
• 70 rules with stable IDs, ordered by performance impact
• Waterfall elimination and bundle size treated as critical
• Useful for generation, review, and refactoring alike

Best for: Projects built on shadcn/ui and component registries

The official skill from the shadcn/ui project. It wires the agent into the shadcn CLI: pulling live project context with the info command, searching component registries before writing any custom UI, fetching docs per component, and composing pages from existing parts, so a settings page becomes Tabs plus Card plus form controls rather than bespoke markup.

Its enforced style rules read like a lint config for taste: className is for layout only, flex with gap replaces space-x utilities, semantic tokens like bg-primary replace raw color values, and overlay components keep their own stacking so nobody hand-writes z-index. It detects the project's package runner and adapts commands for npm, pnpm, or bun.

• Official skill from the shadcn/ui project itself
• Registry search first, custom components as a last resort
• Enforced styling rules with correct and incorrect code pairs
• Reads live project state through the shadcn CLI

Best for: Building token-based design systems on Tailwind v4

A focused guide to doing design systems the Tailwind v4 way. The centerpiece is v4's CSS-first configuration: theme tokens defined in an @theme block instead of tailwind.config.ts, OKLCH color values for better perceptual consistency, dark mode through a custom variant, and entry animations with native @starting-style.

It includes a straight migration table from v3 patterns to their v4 equivalents, which matters because agents trained on years of v3 code will happily generate configuration that no longer applies. If your project is on Tailwind 4 and the agent keeps reaching for tailwind.config.ts, this skill is the correction.

• Targets Tailwind v4 CSS-first configuration specifically
• Semantic token architecture with OKLCH color values
• v3 to v4 migration table for retraining agent habits
• Covers variants, dark mode, and accessible components

Best for: Bootstrapping a project with an existing site's design language

Point it at a public website and it reverse-engineers the design primitives: likely primary and accent colors, detected fonts, and spacing, radius, and shadow scales. Under the hood it drives a Playwright-based CLI, then normalizes the raw extraction into starter token files, tokens.json and tokens.css, ready to drop into a project.

The SKILL.md is refreshingly honest about limits, and instructs the agent to be too: results initialize a design system rather than reproduce one pixel-perfectly, a single page is never proof of a whole product's design language, and nothing overwrites existing styles without confirmation. That candor is why it earns its 125K installs.

• Extracts colors, fonts, spacing, radius, and shadow scales
• Generates starter tokens.json and tokens.css files
• Explicit safety boundaries against overwriting existing styles
• Useful for matching a client or competitor visual language

Best for: Teams designing screens in Google's Stitch

Part of Google Labs' skill suite for Stitch, their AI design tool. The agent analyzes an existing Stitch project through the Stitch MCP server, pulls screen metadata, HTML source, and theme information, and synthesizes a semantic design system into a DESIGN.md file: the visual language written down as prose and color values.

That file becomes the source of truth for prompting Stitch to generate new screens that match the existing design language, which addresses the consistency problem every AI design tool has across sessions. It requires the Stitch MCP server, so treat it as a specialist pick for Stitch users, sitting alongside sibling skills for design generation and React component export.

• Official Google Labs skill for the Stitch design tool
• Turns designed screens into a reusable DESIGN.md spec
• Solves cross-session design consistency for generated screens
• Part of a suite covering generation, export, and theming

Best for: Reviewing generated UI before it ships

The review counterpart to the design skills above. Ask the agent to review your UI and it audits the specified files against Vercel's Web Interface Guidelines, a large rulebook spanning accessibility, UX patterns, forms, typography, and performance, reporting findings in a terse file and line format you can work through like lint output.

A clever detail: the skill fetches the latest guidelines from the source repository on every run instead of baking rules into the SKILL.md. Reviews always use the current rulebook, and the skill itself stays tiny. With 455K installs it is the standard closing step for agent-built frontends.

• Audit-style output as file:line findings
• Fetches the newest guidelines fresh on every run
• Covers accessibility, UX, forms, and typography together
• Pairs naturally with any generation skill on this page

Best for: Naming the exact animation you want before you prompt for it

A different kind of skill from Emil Kowalski, the design engineer behind the Sonner and Vaul libraries. Describe a motion effect loosely, the bouncy thing when a popover opens, the iOS rubber-band scroll, and it returns the precise term: pop in, rubber-banding, stagger, origin-aware animation. Vocabulary first, because you cannot prompt well for an effect you cannot name.

The glossary is authoritative and the skill quotes it verbatim, disambiguating close pairs like morph versus crossfade versus shared element transition. Install counts are modest, but it comes from one of the most respected voices in web motion, and its sibling skills in the same repo, review-animations and improve-animations, extend the same expertise to critiquing and fixing motion.

• Turns vague motion descriptions into precise terminology
• Written by the creator of Sonner and Vaul
• Disambiguates close terms so prompts land correctly
• Sibling skills review and improve existing animations

Best for: Making agent-built UI genuinely accessible

A WCAG 2.2 playbook from Addy Osmani, engineering leader on the Chrome team. It is organized around the POUR principles with clear conformance targets: level A must pass, AA should pass since it is a legal requirement in many jurisdictions, AAA where it is practical. Agents get incorrect and correct code side by side for every pattern.

Coverage runs from alt text and accessible names for icon buttons through contrast ratio tables, keyboard navigation, focus management, and assistive technology support. Accessibility is the single most common failure of AI-generated UI, and this skill turns it from an afterthought into checkable rules the agent applies while writing markup.

• Based on WCAG 2.2 with A, AA, and AAA targets
• Written by a Chrome team engineering leader
• Incorrect and correct code pairs for every rule
• Covers contrast, keyboard, focus, and screen readers