# 21st-dev-builder-v2

A skill that walks the agent through the 21st.dev registry: it finds components, picks the fitting ones and assembles pages and apps in React and Tailwind.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 468 installs · ★ 3
- Author: trin-zenityx
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/trin-zenityx/21st-dev-builder-v2/tree/HEAD/SKILL.md
- Updated: 2026-03-12
- HTML: https://affpapa.org/en/nevibecode/skills/21st-dev-builder-v2

## What it does

The skill fires when a request names 21st.dev or asks for a component from that registry. The agent then checks whether the project is ready — `package.json`, `tailwind.config.*`, `components.json` — splits the job into sections and hunts for components in the matching categories. A landing page pulls from `hero`, `features`, `pricing`, `testimonials`, `cta`, `footers`, `navbars`; a dashboard from `sidebar`, `cards`, `tables`, `tabs`; auth screens from `sign-ins`, `sign-ups`, `forms`.

Discovery runs against live pages. The agent opens a category at `https://21st.dev/s/{slug}`, digs into a component at `https://21st.dev/r/{author}/{component}`, and falls back to `site:21st.dev` searches when browsing is not enough. Components land in the project with `npx shadcn@latest add "https://21st.dev/r/{author}/{component}"` as full source you own and can edit. When the `21st_magic_component_builder` tool is present it becomes the main generation path; otherwise web search plus the npx install covers the same ground.

The stack is fixed: React 18+ or Next.js with the App Router, Tailwind CSS 4+, Radix UI primitives, TypeScript. On Vue, Svelte or React Native the skill has nothing to offer. Candidates are judged on functional fit, the live preview, how well they sit next to already chosen blocks, and dark mode support. For visual consistency the author suggests taking related blocks from a single author.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add trin-zenityx/21st-dev-builder-v2 --skill 21st-dev-builder-v2 -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/21st-dev-builder-v2/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/21st-dev-builder-v2/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add trin-zenityx/21st-dev-builder-v2 --skill 21st-dev-builder-v2 -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/21st-dev-builder-v2/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add trin-zenityx/21st-dev-builder-v2 --skill 21st-dev-builder-v2 -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/21st-dev-builder-v2/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install trin-zenityx/21st-dev-builder-v2 21st-dev-builder-v2
```

2. **Manually: put the files in place**
- File: `.github/skills/21st-dev-builder-v2/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add trin-zenityx/21st-dev-builder-v2 --skill 21st-dev-builder-v2 -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/trin-zenityx/21st-dev-builder-v2
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/21st-dev-builder-v2/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add trin-zenityx/21st-dev-builder-v2 --skill 21st-dev-builder-v2 -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/trin-zenityx/21st-dev-builder-v2/tree/HEAD/SKILL.md

## When to use it
- assemble a landing page from ready-made sections instead of hand-coding
- find a component for a specific dashboard or form section
- add a 21st.dev component to an existing Next.js project
- keep components from different authors visually consistent
- set up the 21st.dev MCP server for component generation

## Example prompts
- Build a SaaS landing page from 21st.dev components: hero, features, pricing and a footer
- Find a dashboard sidebar component on 21st.dev and install it into my project
- Make a sign-in page from 21st.dev components, dark mode required

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [hyperframes](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes.md) — skill · 1200000 installs
- [hyperframes-cli](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes-cli.md) — skill · 1300000 installs
- [webapp-testing](https://affpapa.org/en/nevibecode/skills/webapp-testing.md) — skill · 186758 installs

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md