shadcn-ui/SKILL.md
shadcn/ui — copy-owned React component library built on Radix UI and Tailwind CSS. Use when building with shadcn/ui or asking about its components, CLI, theming, configuration, or integration with Next.js, Vite, Remix, or other frameworks. Fetch live documentation for up-to-date details.
npx skillsauth add mikkelkrogsholm/dev-skills shadcn-uiInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
CRITICAL: Your training data for shadcn/ui is unreliable. APIs change between versions and memorized patterns may be wrong or deprecated. Before writing any code, you MUST use
WebFetchto read the live docs:
WebFetch("https://ui.shadcn.com/llms.txt")Do not proceed without fetching this URL first. Never assume a component API exists — verify against current docs.
shadcn/ui is a collection of accessible, composable React components built on Radix UI primitives and styled with Tailwind CSS — components are copied into your project via CLI, giving you full ownership of the source code.
Form component wraps react-hook-form with built-in Zod validation. Adding formik, react-final-form, or additional validation packages is redundant.components.json controls path aliases, Tailwind config, and component style — always check this file exists and is correctly configured before adding components. An incorrect tailwind.config path or missing CSS variable setup in globals.css causes components to render without styles.shadcn add and shadcn diff operate per-component. When suggesting upgrades, list each component individually; bulk update scripts must be written manually.development
Zod — TypeScript-first schema validation with static type inference. Use when building with Zod or asking about schema definitions, type inference, parsing, transformations, refinements, coercion, error handling, or integration with forms, APIs, or tRPC. Fetch live documentation for up-to-date details.
tools
Vite — next-generation frontend build tool with instant dev server and optimized production builds. Use when building with Vite or asking about its APIs, configuration, plugins, SSR, environment variables, or integration with frameworks. Fetch live documentation for up-to-date details.
tools
Upstash — serverless Redis, QStash, and Vector database with per-request pricing optimized for edge and serverless environments. Use when building with Upstash or asking about its Redis client, QStash message queuing, rate limiting, workflows, or vector search. Fetch live documentation for up-to-date details.
tools
Turso — edge-hosted SQLite database built on libSQL with embedded replicas, multi-tenancy, and low-latency global distribution. Use when building with Turso or asking about its libSQL client, embedded replicas, database-per-tenant patterns, auth tokens, sync, or integration with Drizzle or other ORMs. Fetch live documentation for up-to-date details.