Uithing
BayBreezy/ui-thing
Manages UI Thing components, prose, blocks, themes, shortcuts, docs, and MCP-driven workflows in Nuxt projects and in the UI Thing source repo.
A skill your agent uses when adding, configuring, or debugging shadcn-vue in a Vue or Nuxt project.
Install Shadcn Vue Skilld
$ npx skills add skilld-dev/vue-ecosystem-skills --skill shadcn-vue-skilld -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install skilld-dev/vue-ecosystem-skills shadcn-vue-skilld --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/skilld-dev/vue-ecosystem-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/shadcn-vue-skilld .claude/skills/shadcn-vue-skilld && rm -rf skills-srcUse ~/.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/
Install the "shadcn-vue-skilld" agent skill from https://github.com/skilld-dev/vue-ecosystem-skills/tree/main/skills/shadcn-vue-skilld into .claude/skills/shadcn-vue-skilld/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "shadcn-vue-skilld", 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 install https://github.com/skilld-dev/vue-ecosystem-skills/tree/main/skills/shadcn-vue-skilldType 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.
$ npx skills add skilld-dev/vue-ecosystem-skills --skill shadcn-vue-skilld -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install skilld-dev/vue-ecosystem-skills shadcn-vue-skilld --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/skilld-dev/vue-ecosystem-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/shadcn-vue-skilld .agents/skills/shadcn-vue-skilld && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "shadcn-vue-skilld" agent skill from https://github.com/skilld-dev/vue-ecosystem-skills/tree/main/skills/shadcn-vue-skilld into .agents/skills/shadcn-vue-skilld/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "shadcn-vue-skilld", 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.
$ npx skills add skilld-dev/vue-ecosystem-skills --skill shadcn-vue-skilld -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install skilld-dev/vue-ecosystem-skills shadcn-vue-skilld --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/skilld-dev/vue-ecosystem-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/shadcn-vue-skilld .cursor/skills/shadcn-vue-skilld && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "shadcn-vue-skilld" agent skill from https://github.com/skilld-dev/vue-ecosystem-skills/tree/main/skills/shadcn-vue-skilld into .cursor/skills/shadcn-vue-skilld/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "shadcn-vue-skilld", 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 https://github.com/skilld-dev/vue-ecosystem-skills.git --path skills/shadcn-vue-skilld--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add skilld-dev/vue-ecosystem-skills --skill shadcn-vue-skilld -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install skilld-dev/vue-ecosystem-skills shadcn-vue-skilld --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/skilld-dev/vue-ecosystem-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/shadcn-vue-skilld .gemini/skills/shadcn-vue-skilld && rm -rf skills-srcUse ~/.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/
Install the "shadcn-vue-skilld" agent skill from https://github.com/skilld-dev/vue-ecosystem-skills/tree/main/skills/shadcn-vue-skilld into .gemini/skills/shadcn-vue-skilld/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "shadcn-vue-skilld", 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.
$ gh skill install skilld-dev/vue-ecosystem-skills shadcn-vue-skilldInstalls 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).
$ npx skills add skilld-dev/vue-ecosystem-skills --skill shadcn-vue-skilld -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/skilld-dev/vue-ecosystem-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/shadcn-vue-skilld .github/skills/shadcn-vue-skilld && rm -rf skills-srcUse ~/.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/
Install the "shadcn-vue-skilld" agent skill from https://github.com/skilld-dev/vue-ecosystem-skills/tree/main/skills/shadcn-vue-skilld into .github/skills/shadcn-vue-skilld/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "shadcn-vue-skilld", 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.
$ npx skills add skilld-dev/vue-ecosystem-skills --skill shadcn-vue-skilld -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install skilld-dev/vue-ecosystem-skills shadcn-vue-skilld --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/skilld-dev/vue-ecosystem-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/shadcn-vue-skilld .opencode/skills/shadcn-vue-skilld && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "shadcn-vue-skilld" agent skill from https://github.com/skilld-dev/vue-ecosystem-skills/tree/main/skills/shadcn-vue-skilld into .opencode/skills/shadcn-vue-skilld/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "shadcn-vue-skilld", 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-vue-skilld- GitHub stars
- 181
- Token cost
- ~1.2k tokens
- SKILL.md length
- 415 words
- Files
- 7 (incl. references)
- Skills in repo
- 34
- Repo updated
- First seen
- Licence
- MIT
At a glance
A skill your agent uses when adding, configuring, or debugging shadcn-vue in a Vue or Nuxt project.
- Debugging shadcn-vue in a Vue
- SKILL.md covers What it does, Core workflow, Rules that prevent bugs and Command map, plus 4 more sections
- Calls pnpm and npm; reaches shadcn-vue.com
- Tasks that involve Design systems
What it does
Shadcn Vue Skilld is an agent skill from skilld-dev/vue-ecosystem-skills. Use when adding, configuring, or debugging shadcn-vue in a Vue or Nuxt project. Covers shadcn-vue CLI commands (init, add, apply, view, search, docs, info, diff, migrate, build, mcp), components.json, styles, presets, fonts, icon libraries, registries, the MCP server, and the programmatic API. Gives exact flags and config keys for shadcn-vue 2.8.2.
Its SKILL.md is about 1.2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 7 other files, including reference files (for example `references/changes-2.7-2.8.md`, `references/cli.md` and `references/components-json.md`).
It sits in Frontend & Design, covering Design systems. It works with Vue.js, shadcn/ui, Model Context Protocol and Nuxt. The repository describes itself as: Agent Skills for the Vue ecosystem, written from current docs, issues, and releases. The licence is MIT.
When your agent uses it
- Debugging shadcn-vue in a Vue
- Tasks that involve Design systems
Example prompts
- “/shadcn-vue-skilld”
What it can do on your machine
Read from SKILL.md and the folder at commit c8994af. 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
Shell commands in SKILL.md call:
pnpmnpm
From the folder's file list and the shell code blocks in SKILL.md.
Network
Hosts in commands or code, which the agent is likely to contact:
shadcn-vue.com
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 Vue Skilld loads about 1.2k tokens when it runs, and up to ~6.9k if it reads all its reference files. Until then it costs about 92 tokens; SKILL.md has 415 words of instructions outside code blocks.
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 skilld-dev/vue-ecosystem-skills at commit c8994af, republished under its MIT licence (© skilld-dev). 415 words, ~1,249 tokens.
Download SKILL.mdSave it as
.claude/skills/shadcn-vue-skilld/SKILL.md (or your agent's skills folder). This skill also uses 6 other files; get the full folder from GitHub.- name
- shadcn-vue-skilld
- description
- Use when adding, configuring, or debugging shadcn-vue in a Vue or Nuxt project. Covers shadcn-vue CLI commands (init, add, apply, view, search, docs, info, diff, migrate, build, mcp), components.json, styles, presets, fonts, icon libraries, registries, the MCP server, and the programmatic API. Gives exact flags and config keys for shadcn-vue 2.8.2.
shadcn-vue
Version: shadcn-vue@2.8.2 (prepared source package.json:4; npm latest dist-tag, checked 2026-09-22).
Stack: Vue 3.5+, reka-ui ^2.10.1, Tailwind CSS ^4.3.2 (package.json:68,88,91). One base: reka.
Run the CLI with pnpm dlx shadcn-vue@latest <command> (or npx, npm exec, bunx).
What it does
The CLI copies component source files into your project and installs their npm dependencies.
You own the copied code. Edit components/ui/** freely; re-running add with -o, --overwrite replaces your edits.
Core workflow
# New or existing project: write components.json, install deps, set up CSS
pnpm dlx shadcn-vue@latest init
# Add components (also: URL, local file, @namespace/item, owner/repo/item)
pnpm dlx shadcn-vue@latest add button card dialog
# Preview without writing, then install
pnpm dlx shadcn-vue@latest add sidebar --dry-run
pnpm dlx shadcn-vue@latest add sidebar
# Usage docs and examples for a component
pnpm dlx shadcn-vue@latest docs buttonRules that prevent bugs
- Item names resolve in this order: URL, local file,
@namespace/item,owner/repo/item[#ref], then plain name in the default registry (dist/registry-hxzbzXMt.js:1870-1891, https://www.shadcn-vue.com/docs/cli#add). - Preset names have no prefix in 2.8.x:
vega,nova,maia,lyra,mira,luma,sera(dist/registry-hxzbzXMt.js:3141-3244). Older docs and the 2.6.x baseline usedreka-vegastyle names; those fail now. See changes. toastandtoasterare deprecated; usesonner(dist/transform-menu-CLNZ5vUh.js:446-454).lucide-vue-nextis the legacy icon package; current lucide package is@lucide/vue(dist/transform-menu-CLNZ5vUh.js:457,dist/icons/index.d.ts:3-10). Runmigrate iconsto switch libraries.- Registry style ids stay prefixed: the
vegastyle fetches fromreka-vega(dist/registry-hxzbzXMt.js:492-496). Fallback style id isnew-york-v4. apply <preset>rewrites UI components, fonts, and CSS variables. Commit first; the CLI warns the same (dist/index.js:2252-2254).- Registry env:
SHADCN_VUE_URLandREGISTRY_URLoverride the defaulthttps://shadcn-vue.com/r(dist/transform-menu-CLNZ5vUh.js:2-3). Use for local registry testing. - Builtin namespace is
@shadcn(dist/transform-menu-CLNZ5vUh.js:445). Third-party namespaces must be configured incomponents.jsonunderregistries.
Show full SKILL.md (200 more words)Show less
Command map
| Command | Purpose | Key options |
|---|---|---|
init (alias create) | Set up project, write components.json | -p <preset>, -t <template>, --style, --icon-library, --font, -b <base-color>, -d, --silent |
add | Install items | -o, -a, -p <path>, --dry-run, --diff, --view |
apply | Apply a preset to an existing project | -y |
view | Inspect items before install | -c <cwd> |
search (alias list) | Fuzzy search registries (@name args) | -q, -l, -o |
docs | Component docs and examples | --json, -b <base> |
info | Project setup report | --json |
diff | Compare installed item against registry | -y |
migrate | icons or rtl migration | -l, [path] |
build | Build registry.json into registry JSON | -o <path> |
mcp init | Write MCP client config | --client claude|cursor|vscode |
Full flags: cli reference.
Configuration
components.json at project root drives everything. Key fields: style, typescript, tailwind.css, tailwind.baseColor, aliases, iconLibrary, rtl, pointer, menuColor, menuAccent, registries.
Full schema and examples: components-json reference.
Styles and presets
Seven named presets (vega to sera), eight valid styles in encoded preset codes (adds rhea), five icon libraries, 24 fonts. Details and tables: styles reference.
Programmatic API
Import from shadcn-vue, shadcn-vue/registry, shadcn-vue/schema, shadcn-vue/utils, shadcn-vue/icons, shadcn-vue/preset, shadcn-vue/mcp, shadcn-vue/tailwind.css (package.json:27-59).
Exports and error classes: registries reference.
References
© skilld-dev, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 6 other files (references) in skills/shadcn-vue-skilld of skilld-dev/vue-ecosystem-skills.
- SKILL.md
- references/changes-2.7-2.8.md
- references/cli.md
- references/components-json.md
- references/mcp.md
- references/registries.md
- references/styles-and-presets.md
Open the folder on GitHubat commit c8994af
Compare with similar skills
Shadcn Vue Skilld 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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Shadcn Vue Skilld this skillskilld-dev/vue-ecosystem-skills | 181 | — | ~1.2k | Automated safety check: Pass | MIT | |
| UithingBayBreezy/ui-thing | 729 | — | ~1.3k | Automated safety check: Pass | Custom licence | |
| Create Docsvictorgarciaesgi/nuxt-typed-router | 413 | 2 repos | ~2.8k | Automated safety check: Pass | MIT | |
| Light Frontend DesignLight0305/Light-skills | 641 | — | ~3.1k | Automated safety check: Pass | MIT | |
| Shadcn Vuesecondsky/claude-skills | 227 | — | ~3.3k | Automated safety check: Pass | MIT | |
| Activepieces Design Systemactivepieces/activepieces | 25k | — | ~3.6k | Automated safety check: Pass | Custom licence |
Similar skills
Create Docs
victorgarciaesgi/nuxt-typed-router
Create complete documentation sites for projects. An agent skill from victorgarciaesgi/nuxt-typed-router.
Light Frontend Design
Light0305/Light-skills
Light 按需工程技能·前端设计：把模糊的「做个好看的界面」落成能跑的 React/Tailwind/shadcn 代码 + 设计决策说明—— 有视觉记忆点(signature element)、风格自洽(design tokens 一致)、适配场景(学术海报/数据大屏/管理后台/移动端/营销 landing 信息密度各不同)、反「一眼 AI」(紫蓝渐变/Inter/16px 圆角/巨型…
Shadcn Vue
secondsky/claude-skills
shadcn-vue for Vue/Nuxt with Reka UI components and Tailwind.
Activepieces Design System
activepieces/activepieces
Design system for Activepieces (open-source AI automation platform, "open source replacement for Zapier").
Better Design
marvkr/better-design
Build, improve, and review production interfaces with the Better Design MCP.
More from skilld-dev/vue-ecosystem-skills
All 34 skills in this repoFloating UI Vue Skilld
skilld-dev/vue-ecosystem-skills
Floating UI for Vue (@floating-ui/vue@2.0.1). An agent skill from skilld-dev/vue-ecosystem-skills.
Formkit Core Skilld
skilld-dev/vue-ecosystem-skills
A skill your agent uses whenever writing, debugging, or reviewing code that imports @formkit/core — FormKit's framework-agnostic core (node trees, values, events, hooks, message stores, ledgers…
Pinia Colada Skilld
skilld-dev/vue-ecosystem-skills
Data fetching layer for Vue built on Pinia. An agent skill from skilld-dev/vue-ecosystem-skills.
Pinia Skilld
skilld-dev/vue-ecosystem-skills
A skill your agent uses when writing, debugging, or refactoring code that imports "pinia", the Vue 3 store library.
Primevue Skilld
skilld-dev/vue-ecosystem-skills
A skill your agent uses when writing, debugging, or updating code that imports primevue (PrimeVue v5, UI component library for Vue 3).
Quasar Skilld
skilld-dev/vue-ecosystem-skills
Build, configure, and debug apps with the Quasar framework (quasar npm package, v2.33.1).
Related
Categories
Questions about Shadcn Vue Skilld
What does Shadcn Vue Skilld do?
A skill your agent uses when adding, configuring, or debugging shadcn-vue in a Vue or Nuxt project. Shadcn Vue Skilld is an agent skill from skilld-dev/vue-ecosystem-skills. Use when adding, configuring, or debugging shadcn-vue in a Vue or Nuxt project.
When should I use Shadcn Vue Skilld?
Shadcn Vue Skilld fits situations like: debugging shadcn-vue in a Vue; tasks that involve Design systems.
How do I install Shadcn Vue Skilld in Claude Code?
Run `npx skills add skilld-dev/vue-ecosystem-skills --skill shadcn-vue-skilld -a claude-code`. Or copy the skill folder (skills/shadcn-vue-skilld in skilld-dev/vue-ecosystem-skills) into .claude/skills/shadcn-vue-skilld in your project. Claude Code loads it when a task matches its description.
How do I install Shadcn Vue Skilld in Codex?
Run `npx skills add skilld-dev/vue-ecosystem-skills --skill shadcn-vue-skilld -a codex`. Or copy the skill folder (skills/shadcn-vue-skilld in skilld-dev/vue-ecosystem-skills) into .agents/skills/shadcn-vue-skilld in your project. Codex loads it when a task matches its description.
Can I use Shadcn Vue Skilld 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 skilld-dev/vue-ecosystem-skills --skill shadcn-vue-skilld -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-vue-skilld, .gemini/skills/shadcn-vue-skilld, .github/skills/shadcn-vue-skilld and .opencode/skills/shadcn-vue-skilld in your project.
What does Shadcn Vue Skilld need to run?
Going by SKILL.md and its folder, Shadcn Vue Skilld needs the command-line tools its instructions call (pnpm and npm).
Does Shadcn Vue Skilld access the network?
SKILL.md names 1 domain. In commands or code: shadcn-vue.com; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.
Is Shadcn Vue Skilld 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 Vue Skilld use?
Shadcn Vue Skilld 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 Vue Skilld use?
About 1.2k tokens (SKILL.md is roughly 5k 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 5.7k tokens, read only when the agent opens those files.
What are the alternatives to Shadcn Vue Skilld?
Skills that share tags, products or a category with Shadcn Vue Skilld: Uithing (BayBreezy/ui-thing, 729 stars), Create Docs (victorgarciaesgi/nuxt-typed-router, 413 stars), Light Frontend Design (Light0305/Light-skills, 641 stars) and Shadcn Vue (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 Vue Skilld?
skilld-dev (a GitHub organization) maintains it in skilld-dev/vue-ecosystem-skills, which has 181 GitHub stars. The repository holds 34 skills in this directory. The repository was last updated on September 22, 2026.
Source: skilld-dev/vue-ecosystem-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.