Best shadcn/ui skills for AI coding (2026)
web-artifacts-builder is the best shadcn/ui skill for AI coding - 148k GitHub stars, 65k installs. Strong alternatives: shadcn-ui and shadcn-ui.
Curated shadcn/ui component skills for React and Next.js for builders, ranked by real adoption (installs, then GitHub stars). Part of Frontend & Design - see the full best design skills shortlist.
Curated by Skillselion · ranked by adoption from the skills.sh registry & GitHub.
The top 12 shadcn/ui skills
| # | Skill | Author | Repo | For | Stars | Installs |
|---|---|---|---|---|---|---|
| 1 |  web-artifacts-builderScaffold React + shadcn/ui artifact repos, develop multi-component UIs, and bundle them into single HTML files for Claude-style web artifacts. | anthropics | anthropics/skills | Claude CodeCursorCodexGrok | 148k | 65k |
| 2 |  shadcn-uiDiscover, install, and customize shadcn/ui components with MCP-assisted metadata instead of guessing Radix or Base UI dependencies. | google-labs-code | google-labs-code/stitch-skills | Claude CodeCursorCodexGrok | 5.9k | 40.1k |
| 3 |  shadcn-uiInitialize shadcn/ui, add accessible Radix-based components, and build validated forms with React Hook Form, Zod, and Tailwind theming. | giuseppe-trisciuoglio | giuseppe-trisciuoglio/developer-kit | Claude CodeCursorCodexGrok | 271 | 18.2k |
| 4 |  ai-elementsInstall and compose Vercel AI Elements on shadcn/ui to ship conversation, message, tool, and prompt-input UIs for Next.js chat products. | vercel | vercel/ai-elements | Claude CodeCursorCodexGrok | 2.1k | 11.6k |
| 5 |  app-store-screenshotsScaffold a Next.js + ShadCN screenshot editor to design and bulk-export App Store and Google Play marketing screenshots at every required device resolution. | parthjadhav | parthjadhav/app-store-screenshots | Claude CodeCursorCodexGrok | 5.5k | 8.6k |
| 6 |  tailwind-v4-shadcnCustomize shadcn/ui on Tailwind v4 with semantic tokens, @theme inline colors, and v3→v4 migration patterns without breaking dark mode. | secondsky | secondsky/claude-skills | Claude CodeCursorCodexGrok | 165 | 5.5k |
| 7 |  nextjs-react-typescriptApply opinionated Next.js App Router, React Server Components, TypeScript, Shadcn, Radix, and Tailwind patterns while implementing UI for a solo SaaS or marketing app. | mindrally | mindrally/skills | Claude CodeCursorCodexGrok | 133 | 3.6k |
| 8 |  shadcnAdd, search, fix, and compose shadcn/ui components via the official CLI against your components.json setup. | shadcn-ui | shadcn-ui/ui | Claude CodeCursorCodexGrok | 0 | 3.2k |
| 9 |  shadcn-uiInstall and compose shadcn/ui components with correct variants, forms wiring, and pnpm add commands while building React UIs. | jezweb | jezweb/claude-skills | Claude CodeCursorCodexGrok | 841 | 2.9k |
| 10 | tailwind-v4-shadcn Bootstrap React + Vite apps with Tailwind CSS v4 and shadcn/ui using the @theme inline CSS-variable pattern without the usual color and dark-mode pitfalls. | jezweb | jezweb/claude-skills | Claude CodeCursorCodexGrok | 841 | 2.7k |
| 11 | tailwind-theme-builder Generate Tailwind v4 and shadcn/ui-compatible light and dark theme tokens so a solo builder’s app matches the official shadcn pattern without hand-rolling CSS variables. | jezweb | jezweb/claude-skills | Claude CodeCursorCodexGrok | 841 | 2.6k |
| 12 |  extract-designPull colors, type, spacing, and component patterns from any live URL into Tailwind, React, shadcn, Figma, and token files for faster UI rebuilds. | manavarya09 | manavarya09/design-extract | Claude CodeCursorCodexGrok | 3.1k | 2.4k |
Common questions
What is the best skill for shadcn/ui?
web-artifacts-builder is the top-ranked shadcn/ui skill, with 65k installs and 148k GitHub stars - Scaffold React + shadcn/ui artifact repos, develop multi-component UIs, and bundle them into single HTML files for Claude-style web artifacts..
How are these shadcn/ui skills ranked?
By real adoption - installs first, then GitHub stars - across curated skills matching shadcn/ui component skills for React and Next.js. Data from the skills.sh registry and GitHub.
How do I install web-artifacts-builder?
Run: npx skills add https://github.com/anthropics/skills --skill web-artifacts-builder