Shadcn Vue
Scaffold shadcn-vue with Nuxt, Tailwind, color mode, and CSS-variable theming so your agent ships consistent Vue UI fast.
Overview
shadcn-vue is an agent skill for the Build phase that configures shadcn-vue, Nuxt, Tailwind, and CSS-variable theming for Vue apps.
Install
npx skills add https://github.com/noartem/laravel-vue-skills --skill shadcn-vueWhat is this skill?
- shadcn-vue components.json with new-york style and slate base color
- Nuxt modules for @nuxtjs/tailwindcss and @nuxtjs/color-mode with system/light preference
- Path aliases for @/components/ui, composables, and lib utils
- Tailwind v4-style @import tailwindcss plus HSL CSS variables for light/dark-ready tokens
- compatibilityDate and devtools defaults for current Nuxt workflows
Adoption & trust: 709 installs on skills.sh; 9 GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
You want shadcn-vue on Nuxt but your agent keeps mixing wrong aliases, Tailwind entry files, or theme tokens.
Who is it for?
Indie builders starting or standardizing a Nuxt + Vue dashboard or marketing site with shadcn-vue primitives.
Skip if: React/Next shadcn setups, Laravel-only backends with no Vue frontend, or teams that already have a locked design system unrelated to shadcn-vue.
When should I use this skill?
You are scaffolding or fixing shadcn-vue + Nuxt + Tailwind theming and path aliases in a Vue frontend.
What do I get? / Deliverables
After the skill runs, your repo has aligned components.json, Nuxt Tailwind/color-mode config, and token CSS ready for shadcn-vue component installs.
- components.json for shadcn-vue
- Nuxt config snippets for Tailwind and color mode
- Global CSS with semantic HSL variables
Recommended Skills
Journey fit
UI kit and Tailwind wiring belong on the canonical Build → Frontend shelf where screens and design tokens are assembled. Component aliases, new-york style, and global CSS variables are frontend scaffolding, not backend or ship gates.
How it compares
Use for Vue/Nuxt shadcn-vue bootstrap, not the Auth0 or React Native mobile integration skills.
Common Questions / FAQ
Who is shadcn-vue for?
Solo and indie builders using Nuxt or Vue with Tailwind who want shadcn-vue defaults applied correctly by their coding agent.
When should I use shadcn-vue?
During Build → Frontend when you add or fix shadcn-vue on Nuxt—setting components.json, Tailwind cssPath, color mode, and CSS variables before installing UI blocks.
Is shadcn-vue safe to install?
Review the Security Audits panel on this Prism page and inspect the skill source in your repo before letting an agent write config into production projects.
SKILL.md
READMESKILL.md - Shadcn Vue
{ "$schema": "https://shadcn-vue.com/schema.json", "style": "new-york", "tailwind": { "config": "", "css": "src/assets/index.css", "baseColor": "slate", "cssVariables": true, "prefix": "" }, "rsc": false, "tsx": false, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "composables": "@/composables" } } // https://nuxt.com/docs/api/configuration/nuxt-config export default defineNuxtConfig({ modules: [ '@nuxtjs/tailwindcss', '@nuxtjs/color-mode' ], tailwindcss: { cssPath: '~/assets/css/tailwind.css', configPath: 'tailwind.config.js' }, colorMode: { classSuffix: '', preference: 'system', fallback: 'light', storageKey: 'nuxt-color-mode' }, devtools: { enabled: true }, compatibilityDate: '2025-11-10' }) @import "tailwindcss"; @tailwind base; @tailwind components; @tailwind utilities; :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 221.2 83.2% 53.3%; --radius: 0.5rem; --chart-1: 220 70% 50%; --chart-2: 160 60% 45%; --chart-3: 30 80% 55%; --chart-4: 280 65% 60%; --chart-5: 340 75% 55%; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 217.2 91.2% 59.8%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 224.3 76.3% 48%; } { "compilerOptions": { "target": "ES2020", "useDefineForClassFields": true, "module": "ESNext", "lib": ["ES2020", "DOM", "DOM.Iterable"], "skipLibCheck": true, /* Bundler mode */ "moduleResolution": "bundler", "allowImportingTsExtensions": true, "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "jsx": "preserve", /* Linting */ "strict": true, "noUnusedLocals": true, "noUnusedParameters": true, "noFallthroughCasesInSwitch": true, /* Path Aliases - CRITICAL for shadcn-vue */ "baseUrl": ".", "paths": { "@/*": ["./src/*"] } }, "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"], "references": [{ "path": "./tsconfig.node.json" }] } import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import tailwindcss from '@tailwindcss/vite' import path from 'path' // https://vitejs.dev/config/ export default defineConfig({ plugins: [ vue(), tailwindcss() ], resolve: { alias: { '@': path.resolve(__dirname, './src') } } }) # Accordion **Description:** A vertically stacked set of interactive headings that each reveal a section of content. --- ::component-preview --- name: AccordionDemo class: '[&_.preview>div]:sm:max-w-[80%] **:[.preview]:min-h-[400px]' description: An accordion with three items align: start --- :: ## Installation ::code-tabs ::tabs-list ::tabs-trigger{value="cli"} CLI :: ::tabs-trigger{value="manual"} Manual :: :: ::tabs-content{value="cli"} ```bash npx shadcn-vue@late