SkillsAdd

smithery.ai

shadcn-vue

>- Context and reference for building UI with shadcn-vue components. Load when adding, modifying, or debugging UI components.

First seen Apr 1, 2026

Installation

$ npx skills add https://smithery.ai
View on skills.sh ↗ Website ↗

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

shadcn-ui Similar name
google-labs-code/stitch-skills 50.7K installs
shadcn Similar name
vercel-labs/json-render

Pre-built shadcn/ui components for json-render. Use when working with @json-render/shadcn, addi…

2.1K installs
shadcn-svelte Similar name
vercel-labs/json-render

Pre-built shadcn-svelte components for json-render Svelte apps. Use when working with @json-ren…

938 installs
shadcn Similar name
shadcn/ui 271.7K installs
shadcn Similar name
shadcn-ui/ui

Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and com…

49.6K installs
shadcn-ui Similar name
giuseppe-trisciuoglio/developer-kit 21K installs

Also in this package

Other skills from smithery.ai · top by installs.

npx skills add https://smithery.ai
smithery-ai-cli 7.8K frontend-design 6.2K skill-creator 2.5K ck:ui-ux-pro-max 1.3K pdf 1.2K xlsx 966 pptx 894 docx 884 webapp-testing 1 web-design-reviewer 657

Browse all from smithery.ai

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 1,575 B
  • docs SUMMARY.md 140 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 7 installs

SKILL.md

shadcn-vue

Context skill for working with shadcn-vue components.

Announce: "I'm loading shadcn-vue context for component work."

Key Facts

  • Built on Reka UI primitives (not Radix like React version)
  • Uses Tailwind CSS for styling
  • Forms integrate with VeeValidate + zod
  • CLI: npx shadcn-vue@latest add [component]

When Stuck

Fetch docs with webfetch for the component you need:

Category Components Base URL
Form form, button, input, select, checkbox, switch https://www.shadcn-vue.com/docs/components/[name]
Layout sidebar, tabs, accordion, navigation-menu same pattern
Overlay dialog, sheet, popover, tooltip, dropdown-menu same pattern
Feedback alert, sonner (toast), progress, badge, skeleton same pattern
Display card, table, avatar same pattern

Full LLM reference: https://www.shadcn-vue.com/llms.txt

Component Patterns in This Project

Check existing components in src/components/ui/ before adding new ones.

Common patterns used:

  • Toast notifications via Sonner
  • Forms with VeeValidate + zod schemas
  • Dialog for modals, Sheet for slide-overs

Do NOT

  • Import from @radix-vue directly - use Reka UI via shadcn-vue
  • Create custom styles when a variant exists
  • Skip checking if component already exists in src/components/ui/