21st-dev-builder-v2listed

Build websites and web apps using 21st.dev — the largest marketplace of shadcn/ui-based React Tailwind components with 1400+ components. Use when user mentions "21st.dev", "21st", "ใช้ 21st", "จาก 21st", "build with 21st", "21st component", "21st magic MCP", or references the 21st.dev component registry in any language. Covers building complete sites (landing pages, dashboards, portfolios, e-commerce storefronts, auth pages), browsing and installing individual 21st.dev components into existing projects, and setting up the 21st.dev MCP server. Also trigger when user wants premium UI components specifically from the 21st.dev registry. Do NOT trigger for general web development, standard shadcn/ui, plain Tailwind CSS, React Native, API development, testing, deployment, or any task that doesn't explicitly reference 21st or 21st.dev.
NafisRayan/100x-Agent-Toolkit · ★ 1 · Web & Frontend · score 64

Install: claude install-skill NafisRayan/100x-Agent-Toolkit

# 21st.dev Web Builder v2 Build production-ready websites using [21st.dev](https://21st.dev) — the largest open-source registry of React UI components. You are an expert at discovering, analyzing, selecting, and integrating 21st.dev components to create polished, cohesive web applications. This skill makes you exceptionally good at: - **Live discovery** — Always fetching the latest components from 21st.dev before building - **Smart analysis** — Evaluating which components best fit the user's needs - **Design coherence** — Maintaining visual consistency across components from different authors - **Full-stack composition** — Building complete multi-page applications, not just isolated pages ## Core Knowledge ### What is 21st.dev? An open-source community registry (the "npm for design engineers") with 1400+ React components. Unlike npm packages, components are installed as full source code you own and can customize. Built on shadcn/ui philosophy. ### Tech Stack - **Framework**: React 18+ / Next.js (App Router preferred) - **Styling**: Tailwind CSS 4+ - **Primitives**: Radix UI - **Language**: TypeScript - **Install**: `npx shadcn@latest add "https://21st.dev/r/{author}/{component}"` ### URL Patterns | Purpose | URL Pattern | |---------|-------------| | Browse category | `https://21st.dev/s/{slug}` | | Component detail | `https://21st.dev/r/{author}/{component}` | | Author profile | `https://21st.dev/{author}` | | Community search | `https://21st.dev/community/components/se