How do I install the Use Shadcn skill?

Run npx skillmds@latest add blockmatic/use-shadcn in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Use Shadcn skill do?

Build shadcn/ui components following monorepo structure and coding standards. Use when the user types /use-shadcn. It is listed under Productivity on SkillMD.

Is Use Shadcn safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Use Shadcn?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Use Shadcn free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Use Shadcn?

blockmatic (@blockmatic) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Use Shadcn by blockmatic — Agent Skill

Name: Use Shadcn
Author: blockmatic

File contents

Purpose

Build shadcn/ui components following monorepo structure and coding standards.

Steps

Use MCP servers: Use shadcnui-official for single components/variants/canonical patterns, use shadcnui-jpisnice-react for full blocks/demos/page templates, only call MCP when unsure about implementation or encountering errors
Install in @repo/ui: Install components in packages/ui/src/components/, ensure components.json points to @repo/ui/lib/utils and @repo/ui/components, follow existing component organization patterns
Follow monorepo import patterns: Import from @repo/ui/components/* never directly from packages/ui, use @repo/ui/lib/utils for utilities like cn, import Radix primitives from @repo/ui/radix never directly from @radix-ui/react-*
Apply coding standards: Follow TypeScript rules (interfaces, type inference, RORO pattern), use class-variance-authority (cva) for variants, apply mobile-first responsive design, follow linting rules (Biome + ESLint)
Verify and test: Run pnpm lint:fix to ensure code quality, verify imports work correctly in consuming apps, test component functionality and responsiveness
Surfaces, not only primitives: After the component is installed, reshape screens with /use-frontend — do not treat a new primitive as the whole UI job

Completion

Read completion evidence before reporting completion.

Frequently asked questions

Use Shadcn