Agent skill

Shadcn

shadcn/ui component library best practices and patterns (formerly shadcn-ui).

Install Shadcn

skills CLI

$ npx skills add pproenca/dot-skills --skill shadcn -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install pproenca/dot-skills shadcn --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/pproenca/dot-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/.curated/shadcn .claude/skills/shadcn && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "shadcn" agent skill from https://github.com/pproenca/dot-skills/tree/master/skills/.curated/shadcn into .claude/skills/shadcn/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "shadcn", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/pproenca/dot-skills/tree/master/skills/.curated/shadcn

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add pproenca/dot-skills --skill shadcn -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install pproenca/dot-skills shadcn --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/pproenca/dot-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/.curated/shadcn .agents/skills/shadcn && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "shadcn" agent skill from https://github.com/pproenca/dot-skills/tree/master/skills/.curated/shadcn into .agents/skills/shadcn/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "shadcn", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add pproenca/dot-skills --skill shadcn -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install pproenca/dot-skills shadcn --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/pproenca/dot-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/.curated/shadcn .cursor/skills/shadcn && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "shadcn" agent skill from https://github.com/pproenca/dot-skills/tree/master/skills/.curated/shadcn into .cursor/skills/shadcn/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "shadcn", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/pproenca/dot-skills.git --path skills/.curated/shadcn

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add pproenca/dot-skills --skill shadcn -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install pproenca/dot-skills shadcn --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/pproenca/dot-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/.curated/shadcn .gemini/skills/shadcn && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "shadcn" agent skill from https://github.com/pproenca/dot-skills/tree/master/skills/.curated/shadcn into .gemini/skills/shadcn/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "shadcn", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install pproenca/dot-skills shadcn

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add pproenca/dot-skills --skill shadcn -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/pproenca/dot-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/.curated/shadcn .github/skills/shadcn && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "shadcn" agent skill from https://github.com/pproenca/dot-skills/tree/master/skills/.curated/shadcn into .github/skills/shadcn/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "shadcn", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add pproenca/dot-skills --skill shadcn -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install pproenca/dot-skills shadcn --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/pproenca/dot-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/.curated/shadcn .opencode/skills/shadcn && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "shadcn" agent skill from https://github.com/pproenca/dot-skills/tree/master/skills/.curated/shadcn into .opencode/skills/shadcn/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "shadcn", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: shadcn
GitHub stars: 214
Token cost: ~2.5k tokens
SKILL.md length: 627 words
Files: 64 (incl. references, assets)
Skills in repo: 182
Repo updated: Aug 15, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

shadcn/ui component library best practices and patterns (formerly shadcn-ui).

Works in 10 steps: CLI & Project Setup (CRITICAL) → Component Architecture (CRITICAL) → Accessibility Preservation (CRITICAL) → …
Tasks involving Radix primitives
SKILL.md covers When to Apply, Rule Categories by Priority, Quick Reference and How to Use, plus 2 more sections
Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Shadcn is an agent skill from pproenca/dot-skills. shadcn/ui component library best practices and patterns (formerly shadcn-ui). This skill should be used when writing, reviewing, or refactoring shadcn/ui components to ensure proper architecture, accessibility, and performance. Triggers on tasks involving Radix primitives, Tailwind styling, form validation with React Hook Form, data tables, theming, or component composition patterns.

Its SKILL.md is about 2.5k tokens, which your agent loads only when the skill is triggered. The skill folder holds 66 other files, including reference files and assets (for example `AGENTS.md`, `README.md` and `assets/templates/_template.md`).

It sits in Frontend & Design, covering React components, Design systems and Theming and dark mode. It works with shadcn/ui, Radix UI and Tailwind CSS. The repository describes itself as: A collection of AI agent skills following the Agent Skills open format. The licence is MIT.

When your agent uses it

Tasks involving Radix primitives
Tailwind styling
Form validation with React Hook Form
Component composition patterns

Example prompts

“/shadcn”

Workflow steps

10 steps, taken from the step headings in SKILL.md.

CLI & Project Setup (CRITICAL)
Component Architecture (CRITICAL)
Accessibility Preservation (CRITICAL)
Styling & Theming (HIGH)
Form Patterns (HIGH)
Data Display (MEDIUM-HIGH)
Layout & Navigation (MEDIUM)
Component Composition (MEDIUM)
Performance Optimization (MEDIUM)
State Management (LOW-MEDIUM)

What it can do on your machine

Read from SKILL.md and the folder at commit cf93c57. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Shadcn loads about 2.5k tokens when it runs, and up to ~35k if it reads all its reference files. Until then it costs about 98 tokens; SKILL.md has 627 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~98
When it runs · the whole SKILL.md, loaded when a task matches: ~2.5k
With references · SKILL.md plus every file in references/, read only if the agent opens them: ~35k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from pproenca/dot-skills at commit cf93c57, republished under its MIT licence (© pproenca). 627 words, ~2,501 tokens.

Download SKILL.mdSave it as .claude/skills/shadcn/SKILL.md (or your agent's skills folder). This skill also uses 63 other files; get the full folder from GitHub.

name: shadcn
description: shadcn/ui component library best practices and patterns (formerly shadcn-ui). This skill should be used when writing, reviewing, or refactoring shadcn/ui components to ensure proper architecture, accessibility, and performance. Triggers on tasks involving Radix primitives, Tailwind styling, form validation with React Hook Form, data tables, theming, or component composition patterns.

shadcn/ui Community Best Practices

Comprehensive best practices guide for shadcn/ui applications, maintained by the shadcn/ui community. Contains 58 rules across 10 categories, prioritized by impact to guide automated refactoring and code generation.

When to Apply

Reference these guidelines when:

Installing and configuring shadcn/ui in a project
Writing new shadcn/ui components or composing primitives
Implementing forms with React Hook Form and Zod validation
Building data tables or handling large dataset displays
Customizing themes or adding dark mode support
Reviewing code for accessibility compliance

Rule Categories by Priority

Priority	Category	Impact	Prefix
1	CLI & Project Setup	CRITICAL	`setup-`
2	Component Architecture	CRITICAL	`arch-`
3	Accessibility Preservation	CRITICAL	`ally-`
4	Styling & Theming	HIGH	`style-`
5	Form Patterns	HIGH	`form-`
6	Data Display	MEDIUM-HIGH	`data-`
7	Layout & Navigation	MEDIUM	`layout-`
8	Component Composition	MEDIUM	`comp-`
9	Performance Optimization	MEDIUM	`perf-`
10	State Management	LOW-MEDIUM	`state-`

Quick Reference

1. CLI & Project Setup (CRITICAL)

setup-components-json - Configure components.json before adding components
setup-path-aliases - Configure TypeScript path aliases to match components.json
setup-cn-utility - Create the cn utility before using components
setup-use-cli-not-copy - Use CLI to add components instead of copy-paste
setup-css-variables-theme - Enable CSS variables for consistent theming
setup-rsc-configuration - Set RSC flag based on framework support

2. Component Architecture (CRITICAL)

arch-use-asChild-for-custom-triggers - Use asChild prop for custom trigger elements
arch-preserve-radix-primitive-structure - Maintain Radix compound component hierarchy
arch-extend-variants-with-cva - Use Class Variance Authority for type-safe variants
arch-use-cn-for-class-merging - Use cn() utility for safe Tailwind class merging
arch-forward-refs-for-composable-components - Forward refs for form and focus integration
arch-isolate-component-variants - Separate base styles from variant-specific styles

3. Accessibility Preservation (CRITICAL)

ally-preserve-aria-attributes - Keep Radix ARIA attributes intact
ally-provide-sr-only-labels - Add screen reader labels for icon buttons
ally-maintain-focus-management - Preserve focus trapping in modals
ally-preserve-keyboard-navigation - Keep WAI-ARIA keyboard patterns
ally-ensure-color-contrast - Maintain WCAG color contrast ratios
ally-dialog-title-required - Always include DialogTitle for screen readers
ally-form-field-labels - Associate labels with form controls
ally-aria-invalid-errors - Use aria-invalid for form error states
ally-checkbox-label-association - Wrap Checkbox with Label for click target
ally-focus-visible-styles - Preserve focus visible styles for keyboard navigation

4. Styling & Theming (HIGH)

style-use-css-variables-for-theming - Use CSS variables for theme colors
style-avoid-important-overrides - Never use !important for style overrides
style-use-tailwind-theme-extend - Extend Tailwind theme for design tokens
style-consistent-spacing-scale - Use consistent Tailwind spacing scale
style-responsive-design-patterns - Apply mobile-first responsive design
style-dark-mode-support - Support dark mode with CSS variables

5. Form Patterns (HIGH)

form-use-react-hook-form-integration - Integrate with React Hook Form
form-use-zod-for-schema-validation - Use Zod for type-safe validation
form-show-validation-errors-correctly - Show errors at appropriate times
form-handle-async-validation - Debounce async validation calls
form-reset-form-state-correctly - Reset form state after submission

Show full SKILL.md (236 more words)Show less

6. Data Display (MEDIUM-HIGH)

data-use-tanstack-table-for-complex-tables - Use TanStack Table for sorting/filtering
data-virtualize-large-lists - Virtualize lists with 100+ items
data-use-skeleton-loading-states - Use Skeleton for loading states
data-paginate-server-side - Paginate large datasets server-side
data-empty-states-with-guidance - Provide actionable empty states

layout-sidebar-provider - Wrap layout with SidebarProvider
layout-sidebar-collapsible - Configure sidebar collapsible behavior
layout-sidebar-groups - Organize sidebar navigation with groups
layout-sheet-mobile-nav - Use Sheet for mobile navigation overlay
layout-breadcrumb-navigation - Implement breadcrumbs for deep navigation

8. Component Composition (MEDIUM)

comp-compose-with-compound-components - Use compound component patterns
comp-use-drawer-for-mobile-modals - Use Drawer on mobile devices
comp-combine-command-with-popover - Create searchable selects with Command
comp-nest-dialogs-correctly - Manage nested dialog focus correctly
comp-create-reusable-form-fields - Extract reusable form field components
comp-use-slot-pattern-for-flexibility - Use slot pattern for flexible content

9. Performance Optimization (MEDIUM)

perf-lazy-load-heavy-components - Lazy load components over 50KB
perf-memoize-expensive-renders - Memoize list items and expensive components
perf-optimize-icon-imports - Use direct imports for Lucide icons
perf-avoid-unnecessary-rerenders-in-forms - Isolate form field watching
perf-debounce-search-inputs - Debounce search and filter inputs

10. State Management (LOW-MEDIUM)

state-prefer-uncontrolled-for-simple-inputs - Use uncontrolled for simple forms
state-lift-state-to-appropriate-level - Lift state to lowest common ancestor
state-use-controlled-dialog-state - Control dialogs for programmatic access
state-colocate-state-with-components - Keep state close to where it's used

How to Use

Read individual reference files for detailed explanations and code examples:

Section definitions - Category structure and impact levels
Rule template - Template for adding new rules

Full Compiled Document

For a single-file reference containing all rules, see AGENTS.md.

Reference Files

File	Description
AGENTS.md	Complete compiled guide with all rules
references/_sections.md	Category definitions and ordering
assets/templates/_template.md	Template for new rules
metadata.json	Version and reference information

Files

SKILL.md and 63 other files (references, assets) in skills/.curated/shadcn of pproenca/dot-skills.

SKILL.md
AGENTS.md
README.md
assets/templates/_template.md
metadata.json
references/_sections.md
references/ally-aria-invalid-errors.md
references/ally-checkbox-label-association.md
references/ally-dialog-title-required.md
references/ally-ensure-color-contrast.md
references/ally-focus-visible-styles.md
references/ally-form-field-labels.md
references/ally-maintain-focus-management.md
references/ally-preserve-aria-attributes.md
references/ally-preserve-keyboard-navigation.md
references/ally-provide-sr-only-labels.md
references/arch-extend-variants-with-cva.md
references/arch-forward-refs-for-composable-components.md
… and 46 more

Open the folder on GitHubat commit cf93c57

Compare with similar skills

Shadcn next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Shadcn compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Shadcn this skillpproenca/dot-skills	214	—	~2.5k	Automated safety check: Pass	MIT	1 mo ago
Shadcn Tailwind UILiarMTTT/TavernWeave	148	—	~1.7k	Automated safety check: Pass	Custom licence	3 days ago
UI StylingOhh-889/skyroc	795	13 repos	~2.5k	Automated safety check: Pass	MIT	1 mo ago
UI Design Systemtry-works/role-model	117	—	~5k	Automated safety check: Pass	MIT	today
Tailwind V4 Shadcnsecondsky/claude-skills	227	—	~4k	Automated safety check: Pass	MIT	9 days ago
Extract DesignManavarya09/design-extract	4.2k	—	~786	Automated safety check: Notes	MIT	8 days ago

Similar skills

Shadcn Tailwind UI
LiarMTTT/TavernWeave
Build, restyle, or review accessible React interfaces that use shadcn/ui, Radix UI primitives, and Tailwind CSS.
148 GitHub stars~1.7k tokensUpdated 3 days ago
Frontend & DesignAuto-check passed
UI Styling
Ohh-889/skyroc
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs.
795 GitHub starsUsed in 13 repos~2.5k tokens
Frontend & DesignAuto-check passed
UI Design System
try-works/role-model
React UI component systems with TailwindCSS + Radix + shadcn/ui.
117 GitHub stars~5k tokensUpdated today
Frontend & DesignAuto-check passed
Tailwind V4 Shadcn
secondsky/claude-skills
| Production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React.
227 GitHub stars~4k tokensUpdated 9 days ago
Frontend & DesignAuto-check passed
Extract Design
Manavarya09/design-extract
Extract the full design language from any website URL. An agent skill from Manavarya09/design-extract.
4.2k GitHub stars~786 tokensUpdated 8 days ago
Frontend & DesignAuto-check: notes
Unslop UI
JCarterJohnson/vibecoded-design-tells
Strips the cues that make a website read as AI-generated and forces a deliberate, project-specific design choice instead of the model's default.
508 GitHub stars~1.9k tokensUpdated 3 mo ago
Frontend & DesignAuto-check passed

Questions about Shadcn

What does Shadcn do?

shadcn/ui component library best practices and patterns (formerly shadcn-ui). Shadcn is an agent skill from pproenca/dot-skills. shadcn/ui component library best practices and patterns (formerly shadcn-ui).

When should I use Shadcn?

Shadcn fits situations like: tasks involving Radix primitives; tailwind styling; form validation with React Hook Form; component composition patterns.

How do I install Shadcn in Claude Code?

Run `npx skills add pproenca/dot-skills --skill shadcn -a claude-code`. Or copy the skill folder (skills/.curated/shadcn in pproenca/dot-skills) into .claude/skills/shadcn in your project. Claude Code loads it when a task matches its description.

How do I install Shadcn in Codex?

Run `npx skills add pproenca/dot-skills --skill shadcn -a codex`. Or copy the skill folder (skills/.curated/shadcn in pproenca/dot-skills) into .agents/skills/shadcn in your project. Codex loads it when a task matches its description.

Can I use Shadcn in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add pproenca/dot-skills --skill shadcn -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/shadcn, .gemini/skills/shadcn, .github/skills/shadcn and .opencode/skills/shadcn in your project.

What does Shadcn need to run?

SKILL.md names no scripts, command-line tools or credentials: Shadcn is instructions for the agent only.

Does Shadcn access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Shadcn safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Shadcn use?

Shadcn is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Shadcn use?

About 2.5k tokens (SKILL.md is roughly 10k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 33k tokens, read only when the agent opens those files.

What are the alternatives to Shadcn?

Skills that share tags, products or a category with Shadcn: Shadcn Tailwind UI (LiarMTTT/TavernWeave, 148 stars), UI Styling (Ohh-889/skyroc, 795 stars), UI Design System (try-works/role-model, 117 stars) and Tailwind V4 Shadcn (secondsky/claude-skills, 227 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Shadcn?

pproenca (a GitHub user) maintains it in pproenca/dot-skills, which has 214 GitHub stars. The repository holds 182 skills in this directory. The repository was last updated on August 15, 2026.

Source: pproenca/dot-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Shadcn

Facts

At a glance

What it does

When your agent uses it

Example prompts

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

shadcn/ui Community Best Practices

When to Apply

Rule Categories by Priority

Quick Reference

1. CLI & Project Setup (CRITICAL)

2. Component Architecture (CRITICAL)

3. Accessibility Preservation (CRITICAL)

4. Styling & Theming (HIGH)

5. Form Patterns (HIGH)

6. Data Display (MEDIUM-HIGH)

7. Layout & Navigation (MEDIUM)

8. Component Composition (MEDIUM)

9. Performance Optimization (MEDIUM)

10. State Management (LOW-MEDIUM)

How to Use

Full Compiled Document

Reference Files

Files

Compare with similar skills

Similar skills

More from pproenca/dot-skills

Related

Questions about Shadcn