skills.rest
bramanda48
bramanda48COMMUNITY
Explore all skills by this author →
WebsiteGitHub

shadcn-vue

Manages shadcn-vue components, presets, and styling rules via the CLI.

Updated Sep 17, 2026
Search Tags:#ui#components#vue#cli#tailwind#iconify#shadcn-vue
One-click install
npx skills add https://github.com/bramanda48/skills --skill shadcn-vue-bramanda48
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn-vue
Source: https://github.com/bramanda48/skills/tree/main/skills/shadcn-vue
Command: npx skills add https://github.com/bramanda48/skills --skill shadcn-vue-bramanda48

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Working with shadcn-vue involves many CLI commands, composition rules, and styling conventions that are easy to get wrong, leading to broken component structure, inconsistent styling, and incorrect icon usage. ## Core Features & Use Cases - CLI-driven component management: Initialize projects, apply presets, add, search, view, and update components using the shadcn-vue CLI with smart merge for upstream updates. - Enforced composition and styling rules: Critical rules for forms (FieldGroup/Field), component composition (Groups, Titles, Card structure), Tailwind styling (semantic colors, gap-, size-), and Iconify-based icons. - Theming and customization: Manage CSS variables, dark mode, custom colors for Tailwind v3/v4, and preset switching with overwrite, merge, or skip strategies. - Use Case: When asked to add a login form to a Nuxt project, the skill checks installed components, fetches docs, adds the needed components, rewrites icon imports to Iconify, and composes the form with FieldGroup and Field following all critical rules. ## Quick Start Ask the AI to add a button and card component to your shadcn-vue project and build a settings form following the skill's composition rules.

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 your project's package runner (npx, pnpm dlx, or bunx). Check installed components first with npx shadcn-vue@latest info, and fetch docs with npx shadcn-vue@latest docs before using a component.

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

Use the smart merge workflow: run add with --dry-run to see affected files, then --diff per file to compare upstream changes. Overwrite files without local edits, and manually merge files you have customized. Never use --overwrite without explicit approval.

Does shadcn-vue support Iconify as an icon library?▼

The CLI only supports lucide, tabler, hugeicons, phosphor, and remixicon as iconLibrary values; there is no iconify option. After adding components, rewrite the generated icon imports to @iconify/vue using the string-based <Icon icon="prefix:name" /> component.

How do I switch shadcn-vue presets in an existing project?▼

Choose overwrite, merge, or skip first. Use npx shadcn-vue@latest apply <code> to overwrite, or init --preset <code> --force --no-reinstall to update only config and CSS. The apply command only works in a project with a components.json file.

Why should forms use FieldGroup and Field instead of divs?▼

FieldGroup and Field provide consistent layout, labeling, and validation state handling through data-invalid and data-disabled attributes. Raw divs with space-y-* break the validation styling and accessibility conventions that shadcn-vue form controls rely on.

Related Skills

Explore More Software Engineering Skills→
lrstanleylrstanley

shadcn-vue

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

Community
Advanced
PatternsDevPatternsDev
235

components

Create reusable Vue single-file components with template, script setup, and styles.

Official
Intermediate
woweyawoweya
1

symfony-ux-icons

Render scalable SVG icons in Symfony Twig templates via Iconify and local assets.

Community
Intermediate
richardhowesrichardhowes

component-hierarchy

Enforce ShadCN-Vue, custom, and feature component import order in Vue projects.

Community
Basic