oyi77/1ai-skills/21st-dev

Overview

This skill is the roadmap for becoming a 21st-century developer: the modern toolkit, workflow, and career operating system for shipping software with AI assistance. Use it when leveling up your development practice or onboarding into a modern stack. It covers the skills and habits that compound.

21st.dev — UI Component Registry for AI Agents

21st.dev is a UI component registry designed for AI coding agents. It provides MCP tools to search 12,000+ community components, generate new UI with variants, search logos, and publish/share components.

Source: 21st.dev | MCP: docs.21st.dev/mcp

When to Use

• Building UI with an AI agent and need production-ready components
• Searching for React/Next.js/Tailwind components by category
• Generating new UI components with variants
• Searching for logos by industry/style
• Publishing your own components to a team library
• Need design system tokens or theme generation

MCP Setup

21st.dev exposes an HTTP MCP server. Get an API key at 21st.dev/mcp.

{
  "mcpServers": {
    "21st": {
      "url": "https://21st.dev/api/mcp",
      "headers": { "x-api-key": "YOUR_21ST_API_KEY" }
    }
  }
}

Or install via CLI:

npx @21st-dev/cli@latest init --client claude  # or: cursor | vscode | windsurf | codex

Core MCP Tools

Workflow

1. Search for Existing Components

User: "Find a hero section for a SaaS landing page"
→ search("hero section SaaS landing") → returns matching components
→ Select best fit → retrieve code → adapt to project

2. Generate New UI

User: "Create a pricing table with 3 tiers"
→ generate("pricing table 3 tiers monthly annual toggle")
→ Returns component code + variants
→ Select variant → integrate

3. Logo Search

User: "Find a minimal tech logo"
→ search_logo("minimal tech startup")
→ Returns logo options → select → download

4. Publish Component

User: "Publish this button component to 21st"
→ publish(component_code, metadata)
→ Component available in registry

Component Categories

• Hero — Landing page heroes, headers, CTAs
• Pricing — Pricing tables, toggle, comparison
• Navigation — Navbars, sidebars, breadcrumbs
• Forms — Login, signup, contact, multi-step
• Cards — Product, feature, testimonial, blog
• Tables — Data tables, dashboards, pricing
• Footers — Simple, multi-column, newsletter
• Testimonials — Quotes, ratings, carousels
• CTAs — Call-to-action sections
• Features — Feature grids, icon lists
• Stats — Metrics, counters, KPIs
• FAQ — Accordions, toggles
• Blog — Post cards, lists, grids
• Gallery — Image grids, lightboxes
• Modals — Dialogs, drawers, popovers
• Authentication — Login, register, forgot password
• Empty States — No data, 404, loading
• Onboarding — Tours, tooltips, walkthroughs

Supported Stacks

• React / Next.js
• Tailwind CSS
• shadcn/ui
• HTML/CSS
• Vue (limited)
• Astro (limited)

Integration with Other Skills

• ui-ux-pro-max — Use 21st.dev to find components that match the design system generated by ui-ux-pro-max
• shadcn/ui — Many 21st components are built on shadcn/ui primitives
• tailwind-advanced — Components use Tailwind classes; customize with tailwind-advanced patterns
• frontend-design — Use 21st components as starting points for custom designs

When NOT to Use

• Need a full page layout (use ui-ux-pro-max design system generation)
• Need complex animations (use motion.dev)
• Need brand identity (use brand skill)
• Need backend/API components (not a 21st.dev use case)
• Project doesn't use React/Tailwind (limited support for other stacks)

Red Flags

• Copy-pasting without adaptation: Always customize components to match your design system
• Ignoring accessibility: Verify components meet WCAG standards before shipping
• Over-reliance on registry: Custom designs often outperform generic components
• Not checking license: Verify component license before commercial use

Verification

• [ ] Component matches design system tokens
• [ ] Accessibility verified (contrast, keyboard nav, ARIA)
• [ ] Responsive at all breakpoints
• [ ] License checked for commercial use
• [ ] Customized to match brand identity

Process

1. Analyze UI requirements
2. Search 21st.dev for matching components
3. Select best-fit component(s)
4. Generate variants if needed
5. Customize to match design system
6. Verify accessibility and responsiveness
7. Integrate into project

Anti-Rationalization Table