skills.rest
lrstanley
lrstanleyCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

shadcn-vue

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building consistent Vue interfaces 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 values lead to broken or inconsistent UI. ## Core Features & Use Cases - CLI-driven component management: Add, search, view, update, and smart-merge components from registries using the shadcn-vue CLI with dry-run and diff previews. - Enforced composition and styling rules: Built-in Incorrect/Correct guidance for forms, icons, Tailwind styling, and component structure such as FieldGroup, ToggleGroup, and semantic color tokens. - Preset and theme workflows: Initialize projects with named presets or preset codes, switch themes via overwrite, merge, or skip strategies, and customize CSS variables for Tailwind v3 or v4. - Use Case: When asked to build a settings page in a Nuxt project, the skill reads the project context via npx shadcn-vue@latest info, fetches component docs, and composes Tabs, Card, and Field components following the enforced rules. ## Quick Start Ask the AI to add a dialog and form components to your shadcn-vue project and build a settings page following the project's configured style and icon library.

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, such as button card dialog. Check installed components first with npx shadcn-vue@latest info, and use the package runner matching your project's packageManager field.

How do I apply a shadcn-vue preset code to an existing project?▼

Use npx shadcn-vue@latest apply followed by the preset code, such as a2r6bw, inside a project with a components.json file. To preserve customized components, use init --preset with --force --no-reinstall and smart-merge components individually.

Does shadcn-vue work with Nuxt, Vite, and Laravel?▼

Yes, the CLI supports nuxt, vite, astro, and laravel templates during init. The info command detects your framework automatically and adjusts aliases, paths, and conventions accordingly.

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

Run add with --dry-run to list affected files, then --diff per file to compare upstream changes. Manually merge upstream updates into files with local modifications, and never use --overwrite without explicit approval.

Why should I avoid space-y and raw Tailwind colors in shadcn-vue?▼

The skill's styling rules require flex with gap utilities instead of space-x or space-y, and semantic tokens like bg-primary instead of raw colors like bg-blue-500. This keeps components themeable through CSS variables and consistent 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
Benmore-StudioBenmore-Studio
1

pcs-new-service

Generate a complete PCS microservice scaffold with FastAPI, Kafka, and Docker.

Official
Advanced
phananhtuan09phananhtuan09

frontend-design-fundamentals

Standardize UI visuals with responsive layouts, typography, spacing, and WCAG-compliant color contrast.

Community
Intermediate
a35506322a35506322

primevue

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

Community
Basic