skills.rest
falentio
falentioCOMMUNITY
Explore all skills by this author →
GitHub

shadcn-vue

Manages shadcn-vue components, presets, and styling rules for Vue and Nuxt projects.

Updated Aug 22, 2026
Search Tags:#vue#cli#component library#tailwind#nuxt#shadcn-vue#ui composition
One-click install
npx skills add https://github.com/falentio/cimi --skill shadcn-vue-falentio
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn-vue
Source: https://github.com/falentio/cimi/tree/main/.agents/skills/shadcn-vue
Command: npx skills add https://github.com/falentio/cimi --skill shadcn-vue-falentio

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building consistent Vue UIs with shadcn-vue requires knowing the correct CLI commands, component composition rules, and styling conventions, and mistakes like wrong imports, missing group wrappers, or raw color classes lead to broken or inconsistent interfaces. ## Core Features & Use Cases - Component lifecycle management: Search registries, add, update, and smart-merge components using the shadcn-vue CLI with dry-run and diff previews. - Enforced composition and styling rules: Apply Incorrect/Correct patterns for forms, icons, overlays, semantic colors, and Tailwind class usage. - Preset and theme workflows: Initialize projects with named presets or preset codes, switch themes via overwrite, merge, or skip strategies, and customize CSS variables. - Use Case: When asked to build a settings page, the skill checks installed components, fetches docs for Tabs, Card, and Field, then composes them following the enforced rules with semantic tokens. ## Quick Start Ask the assistant to add a shadcn-vue button and card component to the current project and compose them into a simple dashboard card.

Frequently Asked Questions about shadcn-vue

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add shadcn-vue components to my project?▼

Run npx shadcn-vue@latest add followed by component names, using the package runner matching your project (npx, pnpm dlx, or bunx). Check installed components first with npx shadcn-vue@latest info to avoid re-adding existing ones.

How do I update shadcn-vue components without losing local changes?▼

Use npx shadcn-vue@latest add <component> --dry-run to list affected files, then --diff per file to compare upstream changes. Merge manually where local modifications exist, and never use --overwrite without explicit approval.

Does shadcn-vue work with Nuxt and Vite projects?▼

Yes, the CLI supports nuxt, vite, astro, and laravel templates. Run npx shadcn-vue@latest info to detect your framework, Tailwind version, aliases, and resolved paths before adding components.

How do I switch shadcn-vue presets or themes?▼

Use npx shadcn-vue@latest apply <code> to overwrite, or init --preset <code> --force --no-reinstall to merge or skip component updates. Preset codes are opaque strings from shadcn-vue.com that the CLI resolves directly.

Why should I avoid space-y and raw color classes in shadcn-vue?▼

The skill's styling rules require flex with gap-* instead of space-x-*/space-y-*, and semantic tokens like bg-primary instead of raw colors like bg-blue-500. This keeps components consistent with the theme's CSS variables across light and dark modes.

Related Skills

Explore More Software Engineering Skills→
skaile-aiskaile-ai

prog-expert-scadcn

Configure shadcn-nuxt with components.json registry and Tailwind CSS v4 in Nuxt projects.

Official
Advanced
silvainfmsilvainfm
2

reflex-dev

Build full-stack web apps with Python state and UI components.

Community
Advanced
VirtoCommerceVirtoCommerce
2

qa-storybook

Detect visual and behavioral regressions in Storybook components through structured QA testing.

Official
Advanced
a35506322a35506322

primevue

Standardize PrimeVue component implementation and form validation for Vue 3 projects.

Community
Basic