{
  "$schema": "https://top-agent-skills.com/schemas/catalog.v1.json",
  "type": "primary-category",
  "slug": "frontend-design",
  "title": "Frontend & UI Design",
  "shortTitle": "Frontend & UI",
  "description": "Distinctive UI generation, design systems, brand guidelines, and theming for production-grade frontends.",
  "canonical": "https://top-agent-skills.com/top-skills-for-frontend-design",
  "alternates": {
    "html": "https://top-agent-skills.com/top-skills-for-frontend-design",
    "markdown": "https://top-agent-skills.com/top-skills-for-frontend-design.md",
    "json": "https://top-agent-skills.com/top-skills-for-frontend-design.json"
  },
  "rubricVersion": "1.0",
  "methodology": "https://top-agent-skills.com/about/methodology",
  "contentLastUpdated": "2026-07-14",
  "count": 20,
  "topPick": {
    "slug": "frontend-design",
    "name": "frontend-design",
    "score": 92,
    "tagline": "Escape generic AI-generated UIs. Forces a bold, distinctive design direction before any code is written.",
    "url": "https://top-agent-skills.com/skill/frontend-design"
  },
  "ranking": [
    {
      "rank": 1,
      "slug": "frontend-design",
      "name": "frontend-design",
      "score": 92,
      "tagline": "Escape generic AI-generated UIs. Forces a bold, distinctive design direction before any code is written.",
      "bestFor": "Greenfield landing pages, marketing sites, and any UI that should feel intentional rather than templated.",
      "notIdealFor": "Ports of an existing design system — frontend-design pushes a bold direction that may overwrite established tokens.",
      "provenance": "anthropic",
      "publisher": "Anthropic",
      "license": "MIT",
      "compatibility": [
        "claude-code",
        "claude-ai",
        "claude-api",
        "cursor",
        "codex",
        "gemini-cli",
        "antigravity"
      ],
      "install": "npx skills add github.com/anthropics/skills --skill frontend-design",
      "url": "https://top-agent-skills.com/skill/frontend-design",
      "json": "https://top-agent-skills.com/skill/frontend-design.json"
    },
    {
      "rank": 2,
      "slug": "react-email",
      "name": "react-email",
      "score": 59,
      "tagline": "Build cross-client HTML emails as React components, with a visual editor and Resend-ready rendering.",
      "bestFor": "Authoring transactional email templates (welcome, reset, receipt, notification) as type-safe React components that render across email clients.",
      "notIdealFor": "Plain-text-only sends or teams not using React — the value is the React Email component model.",
      "provenance": "verified-org",
      "publisher": "Resend",
      "license": "MIT",
      "compatibility": [
        "claude-code",
        "cursor",
        "codex"
      ],
      "install": "npx skills add resend/resend-skills",
      "url": "https://top-agent-skills.com/skill/react-email",
      "json": "https://top-agent-skills.com/skill/react-email.json"
    },
    {
      "rank": 3,
      "slug": "workos-widgets",
      "name": "workos-widgets",
      "score": 54,
      "tagline": "Drop-in WorkOS widgets with backend token wiring across every major framework.",
      "bestFor": "Embedding WorkOS user-management UI in an existing app without rebuilding auth screens.",
      "notIdealFor": null,
      "provenance": "anthropic",
      "publisher": "Anthropic",
      "license": "MIT",
      "compatibility": [
        "claude-code",
        "cursor",
        "codex",
        "antigravity"
      ],
      "install": "Built into Claude Code. Invoke with /workos-widgets.",
      "url": "https://top-agent-skills.com/skill/workos-widgets",
      "json": "https://top-agent-skills.com/skill/workos-widgets.json"
    },
    {
      "rank": 4,
      "slug": "web-artifacts-builder",
      "name": "web-artifacts-builder",
      "score": 52,
      "tagline": "Self-contained HTML artifacts with React + shadcn/ui — no build step, just paste and run.",
      "bestFor": "Demos, prototypes, and one-off interactive artifacts.",
      "notIdealFor": null,
      "provenance": "anthropic",
      "publisher": "Anthropic",
      "license": "MIT",
      "compatibility": [
        "claude-code",
        "claude-ai",
        "claude-api",
        "cursor",
        "codex"
      ],
      "install": "npx skills add github.com/anthropics/skills --skill web-artifacts-builder",
      "url": "https://top-agent-skills.com/skill/web-artifacts-builder",
      "json": "https://top-agent-skills.com/skill/web-artifacts-builder.json"
    },
    {
      "rank": 5,
      "slug": "accessibility-review",
      "name": "accessibility-review",
      "score": 52,
      "tagline": "Pre-handoff a11y audit that catches what design QA misses.",
      "bestFor": "Reviewing a design or live page against WCAG 2.1 AA before engineering handoff or production deploy.",
      "notIdealFor": "Replacing manual screen-reader testing with assistive tech in real environments.",
      "provenance": "anthropic",
      "publisher": "Anthropic",
      "license": "MIT",
      "compatibility": [
        "claude-code",
        "claude-ai",
        "claude-api",
        "cursor",
        "codex",
        "antigravity"
      ],
      "install": "claude plugin install design",
      "url": "https://top-agent-skills.com/skill/accessibility-review",
      "json": "https://top-agent-skills.com/skill/accessibility-review.json"
    },
    {
      "rank": 6,
      "slug": "shopify-storefront",
      "name": "shopify-storefront",
      "score": 51,
      "tagline": "Shopify Storefront API: cart, checkout, metafields, customer accounts, Hydrogen patterns.",
      "bestFor": "Headless Shopify storefronts where you want the agent to build commerce flows correctly.",
      "notIdealFor": null,
      "provenance": "verified-org",
      "publisher": "Shopify",
      "license": "MIT",
      "compatibility": [
        "claude-code",
        "cursor",
        "codex"
      ],
      "install": "npx skills add shopify/skills",
      "url": "https://top-agent-skills.com/skill/shopify-storefront",
      "json": "https://top-agent-skills.com/skill/shopify-storefront.json"
    },
    {
      "rank": 7,
      "slug": "theme-factory",
      "name": "theme-factory",
      "score": 50,
      "tagline": "Single seed prompt → cohesive token system. Tokens that look intentional, not generated.",
      "bestFor": "Bootstrapping a design system from a vibe.",
      "notIdealFor": null,
      "provenance": "anthropic",
      "publisher": "Anthropic",
      "license": "MIT",
      "compatibility": [
        "claude-code",
        "claude-ai",
        "cursor"
      ],
      "install": "npx skills add github.com/anthropics/skills --skill theme-factory",
      "url": "https://top-agent-skills.com/skill/theme-factory",
      "json": "https://top-agent-skills.com/skill/theme-factory.json"
    },
    {
      "rank": 8,
      "slug": "vercel-web-design-guidelines",
      "name": "vercel-web-design-guidelines",
      "score": 49,
      "tagline": "100+ accessibility and UX rules from Vercel, applied as a structural audit on your UI code.",
      "bestFor": "Pre-PR audits, accessibility compliance, design system enforcement.",
      "notIdealFor": null,
      "provenance": "verified-org",
      "publisher": "Vercel",
      "license": "MIT",
      "compatibility": [
        "claude-code",
        "cursor",
        "codex"
      ],
      "install": "npx skills add github.com/vercel-labs/agent-skills --skill web-design-guidelines",
      "url": "https://top-agent-skills.com/skill/vercel-web-design-guidelines",
      "json": "https://top-agent-skills.com/skill/vercel-web-design-guidelines.json"
    },
    {
      "rank": 9,
      "slug": "vercel-react-best-practices",
      "name": "vercel-react-best-practices",
      "score": 49,
      "tagline": "57 React/Next.js performance rules, applied as a structural review on your code.",
      "bestFor": "Performance reviews on React/Next.js codebases.",
      "notIdealFor": null,
      "provenance": "verified-org",
      "publisher": "Vercel",
      "license": "MIT",
      "compatibility": [
        "claude-code",
        "cursor",
        "codex"
      ],
      "install": "npx skills add github.com/vercel-labs/agent-skills --skill vercel-react-best-practices",
      "url": "https://top-agent-skills.com/skill/vercel-react-best-practices",
      "json": "https://top-agent-skills.com/skill/vercel-react-best-practices.json"
    },
    {
      "rank": 10,
      "slug": "shadcn-context",
      "name": "shadcn-context",
      "score": 49,
      "tagline": "shadcn/ui context: components, patterns, and the right composition by default.",
      "bestFor": "Teams using shadcn/ui who want the agent to honor component conventions.",
      "notIdealFor": null,
      "provenance": "verified-org",
      "publisher": "shadcn",
      "license": "MIT",
      "compatibility": [
        "claude-code",
        "cursor"
      ],
      "install": "npx skills add shadcn/ui",
      "url": "https://top-agent-skills.com/skill/shadcn-context",
      "json": "https://top-agent-skills.com/skill/shadcn-context.json"
    },
    {
      "rank": 11,
      "slug": "next-js-app-router",
      "name": "next-js-app-router",
      "score": 49,
      "tagline": "Next.js App Router by the book. Server components, streaming, parallel routes.",
      "bestFor": "Next.js 13+ teams that want App Router patterns idiomatic and not Pages-Router-flavored.",
      "notIdealFor": null,
      "provenance": "verified-org",
      "publisher": "Vercel",
      "license": "MIT",
      "compatibility": [
        "claude-code",
        "cursor",
        "codex"
      ],
      "install": "npx skills add github.com/vercel-labs/agent-skills --skill next-js-app-router",
      "url": "https://top-agent-skills.com/skill/next-js-app-router",
      "json": "https://top-agent-skills.com/skill/next-js-app-router.json"
    },
    {
      "rank": 12,
      "slug": "design-critique",
      "name": "design-critique",
      "score": 49,
      "tagline": "Senior-designer feedback on demand. Hierarchy, usability, consistency, motion.",
      "bestFor": "Mid-process design review when you need a second pair of eyes before sharing with stakeholders.",
      "notIdealFor": null,
      "provenance": "anthropic",
      "publisher": "Anthropic",
      "license": "MIT",
      "compatibility": [
        "claude-code",
        "claude-ai",
        "cursor",
        "antigravity"
      ],
      "install": "claude plugin install design",
      "url": "https://top-agent-skills.com/skill/design-critique",
      "json": "https://top-agent-skills.com/skill/design-critique.json"
    },
    {
      "rank": 13,
      "slug": "design-handoff",
      "name": "design-handoff",
      "score": 49,
      "tagline": "Turn a final design into a spec engineers can implement directly.",
      "bestFor": "The moment a design is approved and engineering needs implementation-ready specs.",
      "notIdealFor": null,
      "provenance": "anthropic",
      "publisher": "Anthropic",
      "license": "MIT",
      "compatibility": [
        "claude-code",
        "claude-ai",
        "cursor",
        "antigravity"
      ],
      "install": "claude plugin install design",
      "url": "https://top-agent-skills.com/skill/design-handoff",
      "json": "https://top-agent-skills.com/skill/design-handoff.json"
    },
    {
      "rank": 14,
      "slug": "design-system",
      "name": "design-system",
      "score": 49,
      "tagline": "Design-system hygiene at speed. Audit, document, extend.",
      "bestFor": "Teams maintaining a real design system that has grown organically.",
      "notIdealFor": null,
      "provenance": "anthropic",
      "publisher": "Anthropic",
      "license": "MIT",
      "compatibility": [
        "claude-code",
        "cursor",
        "antigravity"
      ],
      "install": "claude plugin install design",
      "url": "https://top-agent-skills.com/skill/design-system",
      "json": "https://top-agent-skills.com/skill/design-system.json"
    },
    {
      "rank": 15,
      "slug": "ux-copy",
      "name": "ux-copy",
      "score": 49,
      "tagline": "Microcopy that respects the user. Errors, empty states, CTAs, onboarding.",
      "bestFor": "Designers, PMs, and engineers writing the strings users actually read.",
      "notIdealFor": null,
      "provenance": "anthropic",
      "publisher": "Anthropic",
      "license": "MIT",
      "compatibility": [
        "claude-code",
        "claude-ai",
        "cursor",
        "antigravity"
      ],
      "install": "claude plugin install design",
      "url": "https://top-agent-skills.com/skill/ux-copy",
      "json": "https://top-agent-skills.com/skill/ux-copy.json"
    },
    {
      "rank": 16,
      "slug": "brand-guidelines",
      "name": "brand-guidelines",
      "score": 48,
      "tagline": "Lock generated UIs to a brand. Anthropic's own guidelines, formalized as a skill.",
      "bestFor": "Internal branded artifacts, landing pages that need to match a brand exactly.",
      "notIdealFor": null,
      "provenance": "anthropic",
      "publisher": "Anthropic",
      "license": "MIT",
      "compatibility": [
        "claude-code",
        "claude-ai",
        "claude-api"
      ],
      "install": "npx skills add github.com/anthropics/skills --skill brand-guidelines",
      "url": "https://top-agent-skills.com/skill/brand-guidelines",
      "json": "https://top-agent-skills.com/skill/brand-guidelines.json"
    },
    {
      "rank": 17,
      "slug": "composition-patterns",
      "name": "composition-patterns",
      "score": 47,
      "tagline": "Boolean prop hell → compound components. Cleaner React component APIs by construction.",
      "bestFor": "Component library refactoring, API design improvements.",
      "notIdealFor": null,
      "provenance": "verified-org",
      "publisher": "Vercel",
      "license": "MIT",
      "compatibility": [
        "claude-code",
        "cursor"
      ],
      "install": "npx skills add github.com/vercel-labs/agent-skills --skill composition-patterns",
      "url": "https://top-agent-skills.com/skill/composition-patterns",
      "json": "https://top-agent-skills.com/skill/composition-patterns.json"
    },
    {
      "rank": 18,
      "slug": "expo-skills",
      "name": "expo-skills",
      "score": 47,
      "tagline": "Expo workflows: navigation, EAS, OTA, native modules.",
      "bestFor": "React Native + Expo teams.",
      "notIdealFor": null,
      "provenance": "verified-org",
      "publisher": "Expo",
      "license": "MIT",
      "compatibility": [
        "claude-code",
        "cursor"
      ],
      "install": "npx skills add expo/skills",
      "url": "https://top-agent-skills.com/skill/expo-skills",
      "json": "https://top-agent-skills.com/skill/expo-skills.json"
    },
    {
      "rank": 19,
      "slug": "publishing-astro-websites",
      "name": "publishing-astro-websites",
      "score": 42,
      "tagline": "Astro from scaffold to live site — content collections, search, i18n, multi-host deploy.",
      "bestFor": "Content and docs sites built on Astro that need the agent to handle the full path from project structure to a deployed static build.",
      "notIdealFor": "Non-Astro stacks, or apps that need server-rendered runtime rather than a static build.",
      "provenance": "community",
      "publisher": "SpillwaveSolutions",
      "license": "MIT",
      "compatibility": [
        "claude-code"
      ],
      "install": "npx skills add github.com/spillwavesolutions/publishing-astro-websites-agentic-skill",
      "url": "https://top-agent-skills.com/skill/publishing-astro-websites",
      "json": "https://top-agent-skills.com/skill/publishing-astro-websites.json"
    },
    {
      "rank": 20,
      "slug": "web-asset-generator",
      "name": "web-asset-generator",
      "score": 41,
      "tagline": "Favicons, app icons, social cards — generated at all the right sizes.",
      "bestFor": "Pre-launch asset generation, social-card production at scale.",
      "notIdealFor": null,
      "provenance": "community",
      "publisher": "alonw0",
      "license": "MIT",
      "compatibility": [
        "claude-code"
      ],
      "install": "npx skills add alonw0/web-asset-generator",
      "url": "https://top-agent-skills.com/skill/web-asset-generator",
      "json": "https://top-agent-skills.com/skill/web-asset-generator.json"
    }
  ],
  "faqs": [
    {
      "question": "What does a frontend design Skill do that a prompt cannot?",
      "answer": "It loads brand and design-system rules once and applies them across every subsequent UI generation in the session. A prompt has to restate the constraints each time and drifts. A Skill is the persistent style guide the agent reads from."
    },
    {
      "question": "Do design Skills work with Figma?",
      "answer": "Some do — they pair with the Figma MCP server to read frames and tokens. The official Figma plugin ships its own Skills (figma-generate-design, figma-code-connect) that bridge designs and code in both directions."
    },
    {
      "question": "Can I use these Skills for design systems documentation?",
      "answer": "Yes. Several Skills auto-generate component docs (variants, states, accessibility notes) and audit existing systems for naming inconsistencies or hardcoded values."
    },
    {
      "question": "Which agent is best for UI generation?",
      "answer": "Claude Code and Cursor are the most common targets — both have strong filesystem control needed to write a new component into an existing repo. Antigravity ships a richer pre-installed set."
    },
    {
      "question": "Are these Skills accessibility-aware?",
      "answer": "The top-ranked Skills include WCAG 2.1 AA constraints in their system prompt — color-contrast, keyboard navigation, focus rings, touch targets. The lower-ranked community Skills often don't."
    }
  ],
  "license": "https://creativecommons.org/licenses/by/4.0/",
  "attribution": "Top Agent Skills (https://top-agent-skills.com)"
}