shadcn-vue skill for agents
shadcn-vue skill
The shadcn-vue skill reads your project settings and teaches an agent to add components, forms and themes of the Vue port of shadcn/ui by its rules
- 10,714 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- The skill lets the agent run `npx shadcn-vue@latest` in the shell, which executes package code from npm
- The `add` command writes component sources into the project and installs dependencies, and `--overwrite` replaces files
- Components from third-party registries bring in other people's code, which the skill asks the agent to read after adding
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/shadcn-vue-skillDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The skill lets the agent run `npx shadcn-vue@latest` in the shell, which executes package code from npm
- The `add` command writes component sources into the project and installs dependencies, and `--overwrite` replaces files
- Components from third-party registries bring in other people's code, which the skill asks the agent to read after adding
This is third-party code. Review the repository files before installing.
What it does
The `shadcn-vue` skill from the unovue/shadcn-vue repository gives an agent knowledge of the Vue port of shadcn/ui and activates when the project has a `components.json`. On every interaction it runs `npx shadcn-vue@latest info --json` and puts project data into context: the framework, the Tailwind version, import aliases, the base library `reka`, the icon set, the list of installed components and file paths. With this data the agent picks the right imports and edits the stylesheet named in `tailwindCssFile`. Work follows an order: check which components are already installed, find the one you need with `search`, get documentation and example URLs with `docs`, and only then add code through `add`. Updating an installed component goes through `add --dry-run` and `--diff` file by file to keep your edits, and `--overwrite` without your approval is forbidden. If you did not name a registry, the agent asks where to take a block from. When switching a preset (`nova`, `vega`, `maia`, `lyra`, `mira`, `luma` or a code) it offers to overwrite, merge or skip components. Rules in four files of the `rules/` folder cover typical mistakes: spacing through `gap-*` instead of `space-y-*`, forms built on `FieldGroup` and `Field`, `ToggleGroup` for sets of 2 to 7 options, mandatory `DialogTitle` and `AvatarFallback`, icons through `data-icon` without sizes, notifications through `vue-sonner` and colors only from semantic tokens.
Who it is for. For frontend developers on Vue, Nuxt and Vite who build interfaces with shadcn-vue and want the agent to add components by the library's rules.
Good fit when
- A Vue, Nuxt, Vite or Astro project already has a `components.json`, and the agent has to build screens from shadcn-vue components
- You need a sign-in or settings form built from `FieldGroup`, `Field` and `InputGroup` with correct error markup
- You need to switch the styling preset to a code like `a2r6bw` and keep edits in installed components
- Components come from third-party registries, and after adding them the imports and missing sub-components have to be checked
- You need to pull in a newer version of a component without losing local changes
Not a fit when
- The project has no `components.json`: the skill activates only together with that file
- The project is on React: the catalog has a separate shadcn/ui skill for the original library
- You use another component library for Vue: the skill knows the shadcn-vue API on top of `reka`
- You need only registry search: the CLI starts the MCP server itself with `shadcn-vue mcp`, and the skill is not required for that
Example request
Add a profile form with name and email fields to the settings page using shadcn-vue components and check the importsLimitations
- The skill is marked as invoked automatically only. It lets the agent run `npx shadcn-vue@latest`, `pnpm dlx shadcn-vue@latest` and `bunx --bun shadcn-vue@latest` in the shell.
- Every interaction runs `npx shadcn-vue@latest info --json`, and the package is taken at the `latest` version.
- The skill has one base library, `reka`. There are four templates: `nuxt`, `vite`, `astro` and `laravel`.
- The skill does not guess a registry: if you did not name one, for example `@shadcn`, the agent asks. Files from third-party registries sometimes contain imports like `@/components/ui/...`, and they have to be checked against your aliases.
- The `apply` command works only in an existing project with a `components.json`. MIT license.
How to disable. Delete the `shadcn-vue` folder from the agent's skills directory, where `npx skills add` put it. Installed components and the `components.json` file stay in the project and work without the skill.
FAQ
How do I install the shadcn-vue skill?
Run `npx skills add unovue/shadcn-vue`. After that the agent picks the skill up on its own when working with shadcn-vue components; there is no separate invoke command.
When does the skill activate?
When it finds a `components.json` file in the project. It then gets the project settings from `shadcn-vue info --json` and adds them to the agent's context before each response.
Which presets and templates are supported?
Named presets are `nova`, `vega`, `maia`, `lyra`, `mira` and `luma`. A preset code like `a2r6bw` comes from the shadcn-vue.com site. Project templates are `nuxt`, `vite`, `astro` and `laravel`. A new project is created by `init --name my-app --preset nova`.
How do I update a component without losing edits?
Run `add <component> --dry-run` to see affected files and `add <component> --diff <file>` for each. If there are no local edits the file can be overwritten, and if there are, the agent reads it and applies upstream changes by hand. The skill forbids fetching files from GitHub directly.
How does the skill require forms to be written?
The form layout is built on `FieldGroup` and `Field`; a `div` with `space-y-*` does not fit. An error is marked with `data-invalid` on `Field` and `aria-invalid` on the input. A button inside an input goes through `InputGroup` and `InputGroupAddon`, and related checkboxes are grouped in a `FieldSet` with a `FieldLegend`.
Does the project have an MCP server?
Yes, `shadcn-vue mcp` starts it over stdio and `shadcn-vue mcp init` writes the settings for Claude Code, Cursor, VS Code and OpenCode. For Codex the settings go into `~/.codex/config.toml` by hand. The server searches, shows and installs components from registries, while project settings are still read by `info`.
Discussion
No questions or reviews yet.
Related
Skillsshadcn-svelte skill for agents
shadcn-svelte
A shadcn-svelte skill: the agent reads components.json, adds components with the CLI and builds forms, dialogs and cards by the library's rules
Official shadcn/ui skill and MCP server: the agent searches registries, adds components via the CLI and follows the library's rules
A set of skills for Vue 3 development: Composition API practices, router, Pinia, testing, JSX, Options API and debugging
A skill that picks and installs beUI animated React components through the public MCP or the shadcn registry instead of hand-built widgets
Skill and MCP server for Shaders: the agent builds backgrounds, glass, gradients and cursor effects on WebGPU for React, Vue, Svelte, Solid and JS
A skill set for the Vue, Vite and Nuxt stack: the author's conventions plus digests of official tool documentation
Comparison with similar tools
Entries that share the main search query, and how they differ.
| Entry | Official | Authentication | Repository stars | Main difference |
|---|---|---|---|---|
| shadcn-vue skill for agents (this entry) | yes | 10,714 | ||
| shadcn/ui | no | 126,216 | the skill and MCP server for the original shadcn/ui library, while shadcn-vue is its port to Vue | |
| Shadcn UI MCP Server | no | key is optional | 3,066 | a community MCP server that gives an agent sources, demos and blocks of shadcn/ui components for React, Svelte, Vue and React Native |
README in short
The repository holds the documentation site in `apps/v4` (pages about skills and MCP, an `llms.txt` file), the CLI source in `packages/cli` with the `mcp` command, an older site in `deprecated/www` and component registries in JSON. The skill sits in `skills/shadcn-vue`: the main `SKILL.md`, the references `cli.md`, `customization.md` and `mcp.md`, and a `rules/` folder with rules on styling, forms, component structure and icons. The front page briefly describes the project as a set of open-source components and points to the documentation, the sponsors section and the contributing guide.
README badge
Original SKILL.md
--- name: shadcn-vue description: Manages shadcn-vue components and projects — adding, searching, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn-vue, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn-vue init", "create an app with --preset", or "switch to --preset". user-invocable: false allowed-tools: Bash(npx shadcn-vue@latest *), Bash(pnpm dlx shadcn-vue@latest *), Bash(bunx --bun shadcn-vue@latest *) --- # shadcn-vue A framework for building ui, components and design systems. Components are added as source code to the user's project via the CLI. > **IMPORTANT:** Run all CLI commands using the project's package runner: `npx shadcn-vue@latest`, `pnpm dlx shadcn-vue@latest`, or `bunx --bun shadcn-vue@latest` — based on the project's `packageManager`. Examples below use `npx shadcn-vue@latest` but substitute the correct runner for the project. ## Current Project Context ```json !`npx shadcn-vue@latest info --json` ``` The JSON above contains the project config and installed components. Use `npx shadcn-vue@latest docs <component>` to get documentation and example URLs for any component. ## Principles 1. **Use existing components first.** Use `npx shadcn-vue@latest search` to check registries before writing custom UI. Check community registries too. 2. **Compose, don't reinvent.** Settings page = Tabs + Card + form controls. Dashboard = Sidebar + Card + Chart + Table. 3. **Use built-in variants before custom styles.** `variant="outline"`, `size="sm"`, etc. 4. **Use semantic colors.** `bg-primary`, `text-muted-foreground` — never raw values like `bg-blue-500`. ## Critical Rules These rules are **always enforced**. Each links to a file with Incorrect/Correct code pairs. ### Styling & Tailwind → [styling.md](./rules/styling.md) - **`class` for layout, not styling.** Never override component colors or typography. - **No `space-x-*` or `space-y-*`.** Use `flex` with `gap-*`. For vertical stacks, `flex flex-col gap-*`. - **Use `size-*` when width and height are equal.** `size-10` not `w-10 h-10`. - **Use `truncate` shorthand.** Not `overflow-hidden text-ellipsis whitespace-nowrap`. - **No manual `dark:` color overrides.** Use semantic tokens (`bg-background`, `text-muted-foreground`). - **Use `cn()` for conditional classes.** Don't write manual template literal ternaries. - **No manual `z-index` on overlay components.** Dialog, Sheet, Popover, etc. handle their own stacking. ### Forms & Inputs → [forms.md](./rules/forms.md) - **Forms use `FieldGroup` + `Field`.** Never use raw `div` with `space-y-*` or `grid gap-*` for form layout.