shadcn-vue-admin
Provides project-specific guidance for building and maintaining Vue 3 admin interfaces with shadcn-vue and modern web stacks.
Install
mkdir -p .claude/skills/shadcn-vue-admin && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/2484" && unzip -o skill.zip -d .claude/skills/shadcn-vue-admin && rm skill.zipInstalls to .claude/skills/shadcn-vue-admin
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Build and maintain the shadcn-vue-admin Vue 3 + Vite + TypeScript admin dashboard with shadcn-vue, Tailwind, Pinia, Vue Router, i18n, and TanStack Query. Use for UI/layout changes, page additions, routing updates, theme/auth work, and component integration in this repo.Key capabilities
- →Add new pages to dashboard
- →Integrate shadcn-vue components
- →Update routing and authentication logic
- →Manage state with Pinia
- →Perform linting and build checks
How it works
It follows a structured architecture using Vue 3 Composition API, Tailwind CSS, and shadcn-vue components to maintain consistency.
Inputs & outputs
When to use shadcn-vue-admin
- →Add new pages to dashboard
- →Integrate shadcn-vue components
- →Update routing and auth logic
- →Run linting and build checks
About this skill
Purpose and scope
Maintain this Vue 3 admin dashboard repository: pages and layouts, component integration, routing/auth, theming and i18n, data tables, and form validation.
Codebase map
- App entry:
src/main.ts,src/App.vue - Routing:
src/router/ - Layouts and pages:
src/layouts/,src/pages/ - Components:
src/components/(including shadcn-vue style UI) - State:
src/stores/ - Composables:
src/composables/ - Utils and constants:
src/utils/,src/lib/,src/constants/ - Plugins:
src/plugins/
References
- System knowledge map: references/SYSTEM_KNOWLEDGE_MAP.md
- Testing strategy: references/testing-strategy.md
Standard workflow
- Read existing implementations in the target directory and reuse established patterns and styles.
- Prefer existing shadcn-vue components and shared utilities to avoid duplication.
- Only change public APIs when necessary; avoid large-scale formatting unrelated code.
Commands and checks
- Dev server:
pnpm dev - Build (CI-like check):
pnpm build - Lint fix:
pnpm lint:fix
Requirements:
- Run
pnpm buildfor any non-copy-only change. - Run
pnpm lint:fixafter code changes. - If you modify core logic (
src/lib/**,src/utils/**,src/composables/**,src/services/**,src/router/**,src/stores/**):- If test scripts exist (e.g.
pnpm test/pnpm test:unit), add/update tests and run them. - If no test scripts exist, tests are optional but recommended; include “Testing Notes” in the change description.
- If test scripts exist (e.g.
Design and implementation conventions
- Use Vue 3 Composition API with TypeScript.
- Prefer tanstack/vue-form + zod for form validation.
- Follow existing theming strategy in
src/assets/andsrc/stores/theme.ts. - Follow the existing structure for i18n in
src/plugins/i18n/.
Common task guides
Add a page
- Create a page component under
src/pages/. - Register routing/menu via
src/router/if needed. - Use existing layouts and shared components for consistent spacing and typography.
Add a component
- Reuse
src/components/ui/and existing shadcn-vue components first. - If it should be shared, place it under
src/components/to avoid page-level duplication.
Update theme/styles
- Prefer Tailwind and theme files in
src/assets/. - Avoid heavy inline styles; keep components maintainable.
Output requirements
After changes, provide a concise summary and list any commands run (if any).
When not to use it
- →Duplicating existing UI components
- →Large-scale formatting of unrelated code
Prerequisites
Limitations
- →Requires pnpm build for verification
- →Must follow existing i18n structure
How it compares
It enforces project-specific patterns for routing, state, and theming to prevent architectural drift.
Compared to similar skills
shadcn-vue-admin side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| shadcn-vue-admin (this skill) | 6 | 2mo | No flags | Intermediate |
| screenshot-to-code | 204 | 2mo | No flags | Beginner |
| web-artifacts-builder | 49 | 3mo | Review | Intermediate |
| svelte-ui-design | 23 | 9mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
screenshot-to-code
OneWave-AI
Convert UI screenshots into working HTML/CSS/React/Vue code. Detects design patterns, components, and generates responsive layouts. Use this when users provide screenshots of websites, apps, or UI designs and want code implementation.
web-artifacts-builder
anthropics
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
svelte-ui-design
XIYO
ALWAYS use this skill for ANY Svelte component styling, design, or UI work. Svelte 5 UI design system using Tailwind CSS 4, Skeleton Labs design tokens/presets/Tailwind Components, and Bits UI headless components. Covers class composition, color systems, interactive components, forms, overlays, and all visual design.
frontend-ui-dark-ts
microsoft
Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations. Use when creating dashboards, admin panels, or data-rich interfaces with a refined dark aesthetic.
ui
nuxt
Build UIs with @nuxt/ui v4 — 125+ accessible Vue components with Tailwind CSS theming. Use when creating interfaces, customizing themes to match a brand, building forms, or composing layouts like dashboards, docs sites, and chat interfaces.
designer-skills
llama-farm
Designer subsystem patterns for LlamaFarm. Covers React 18, TanStack Query, TailwindCSS, and Radix UI.