What is the shadcn-vue skill?
The shadcn-vue skill is a SKILL.md in the unovue/shadcn-vue repository. It runs the CLI info command to load your project config, then tells an AI coding agent how to search, add, update and review components, with enforced rules for styling, forms, composition and icons. Rule files sit in a rules folder.
Before it writes any code, the skill runs npx shadcn-vue@latest info --json and reads the result. That JSON holds your aliases, Tailwind version, icon library, installed components and file paths, so advice matches the actual project instead of defaults.
The skill lives in the skills folder of the shadcn-vue repository, a Vue port of shadcn-ui where components are added to your project as source code through the CLI. It is set to not be user invocable.
What the folder contains
- SKILL.md with principles, critical rules, a component selection table and the workflow.
- cli.md, customization.md and mcp.md for deeper reference.
- A rules folder with composition.md, forms.md, icons.md and styling.md, each with incorrect and correct code pairs.
Rules the skill enforces
- Use class for layout only, and flex with gap-* instead of space-x or space-y.
- Use semantic colors such as bg-primary, never raw values like bg-blue-500.
- Build forms with FieldGroup and Field, with data-invalid and aria-invalid for validation.
- Always give Dialog, Sheet and Drawer a title, even if hidden with sr-only.
- Pass icons as objects, use data-icon inside buttons and skip sizing classes.
How the workflow runs
The agent checks installed components, searches registries, fetches docs through the docs command, adds or updates with preview flags such as --dry-run and --diff, fixes imports in third-party registry items, then rereads what it added and corrects violations.
Who the shadcn-vue skill is for
Best for
- Vue and Nuxt projects with a components.json file that use shadcn-vue components.
- Preset changes. The skill asks whether to overwrite, merge or skip existing components.
- Teams that want consistent form and overlay composition across many pages. See also tailwind-design-system.
Not for
- Non Vue projects. See also the shadcn skill.
- Setups with no components.json, since the skill reads that project config. See also shadcn-improve.
Use it with UiChemy
This skill produces Vue code. UiChemy Composer is an AI visual editor that writes real HTML, CSS and JS inside Elementor or Gutenberg, and Figma to WordPress converts Figma designs. Click Get Started on uichemy.com. See also shadcn-mcp.
How to install shadcn-vue Skill: Add and Compose Vue UI Components
git clone https://github.com/unovue/shadcn-vue.gitClone the repository
Run
git clone https://github.com/unovue/shadcn-vue.git. The skill is the skills/shadcn-vue folder on the dev branch, which also holds cli.md, customization.md, mcp.md and rules.Copy the folder
Copy skills/shadcn-vue with its rules subfolder into the place your agent loads skills from. The README gives no skill command and names no agent folder.
Allow the CLI commands
The skill's frontmatter allows npx, pnpm dlx and bunx runs of shadcn-vue@latest. In Claude Code, check that those Bash permissions are not blocked.
Work inside a project
Open a Vue or Nuxt project that has a components.json file, then ask the agent to add or fix a component. Documentation is at shadcn-vue.com.
Check that it loaded
Ask the agent to add a login form. It should read the project info first, check installed components, run the docs command and build the layout with FieldGroup and Field.
Key features
- Live project contextThe info command output is injected into the skill, giving the agent aliases, Tailwind version, base, icon library and resolved paths.
- Existing components firstThe agent searches registries and checks installed components before it writes custom UI, and composes pages from Card, Tabs, Sidebar and Table.
- Critical rules by areaStyling, forms, composition and icons each have enforced rules, linked to files with incorrect and correct code pairs.
- Component selection tableMaps needs such as toggles, overlays, feedback and menus to components, including Chart which wraps Unovis.
- Docs before codeThe agent runs the docs command and fetches the returned URLs when creating or fixing a component, rather than guessing the API.
- Safe updatesUpdate flows use --dry-run and --diff to preview changes, merge upstream edits with local changes and confirm before any overwrite.
- Preset switchingApplying a preset code offers overwrite, merge or skip, with matching CLI commands for each choice.
- Third party import fixesComponents from community registries are checked for hardcoded import paths that do not match your aliases.
- Post add reviewAfter any add, the agent reads the new files, looks for missing sub-components and swaps icon imports to your configured icon library.
- Explicit registry choiceIf you do not name a registry, the skill asks which to use and never picks one on your behalf.
Frequently asked questions
What is the shadcn-vue skill?
It is a skill in the unovue/shadcn-vue repository that helps an AI coding agent manage shadcn-vue projects. It covers adding, searching, fixing, debugging, styling and composing components, and it reads project context from the CLI before it acts.
How do I install the shadcn-vue skill?
The README does not give a skill command, so clone unovue/shadcn-vue and copy skills/shadcn-vue, including its rules folder, into the place your agent loads skills from. The skill then expects a project with a components.json file.
Does the skill need the shadcn-vue CLI?
Yes, it runs commands through the project's package runner, such as npx shadcn-vue@latest, pnpm dlx or bunx. Its frontmatter allows exactly those Bash patterns. Project info, docs, search, add and apply commands all come from that CLI.
How does the skill handle forms and validation?
It requires FieldGroup and Field for layout, and warns against raw div wrappers with spacing classes. Validation uses data-invalid on Field and aria-invalid on the control, while disabled state uses data-disabled on Field and the disabled attribute on the control.
What does the skill say about presets?
Applying a preset code can use the apply command or init with the preset flag. When switching, the agent asks whether to overwrite, merge or skip. Preset codes do not encode the base, so scratch directories need a base flag.
Which AI agents can use the shadcn-vue skill?
The repository does not list supported agents. It is a standard SKILL.md folder, so Claude Code, Cursor, Codex or another agent may load it if that tool supports skill folders. Its frontmatter allowed-tools line is written for Bash based agents.
What license is the skill under?
The unovue/shadcn-vue repository is MIT licensed, according to GitHub and the README, which links the LICENSE file. The README describes the project as open source and open code, and the skill folder sits inside that same repository.