菜单
Component usage patterns for shadcn-vue — a Vue component distribution system built on Reka UI and Tailwind CSS. Covers component APIs, forms with VeeValidate/TanStack Form, data tables, sidebar, charts, theming, and custom registries.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
Generates concise, intent-driven Git commit messages in imperative mood. Use when the user asks to create, write, draft, make, generate, or suggest a commit message, says "commit these changes" or "what should I commit?", or asks for help with a Git commit.
Generate GitHub release notes for the upcoming version, following the Keep a Changelog 1.1.0 spec. Use when the user is preparing a release and asks to "draft release notes", "generate release notes", "create GitHub release notes", "產生 release notes", "準備發布", "產生發布說明", or similar pre-release phrasings. Return the notes directly in chat as ready-to-paste Markdown — do NOT create or modify CHANGELOG.md or any other file.
Ultra-compressed communication mode. Cuts token usage ~75% by dropping filler, articles, and pleasantries while keeping full technical accuracy. Use when user says "caveman mode", "talk like caveman", "use caveman", "less tokens", "be brief", or invokes /caveman.
Disciplined diagnosis loop for hard bugs and performance regressions. Reproduce → minimise → hypothesise → instrument → fix → regression-test. Use when user says "diagnose this" / "debug this", reports a bug, says something is broken/throwing/failing, or describes a performance regression.
Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".
Grilling session that challenges your plan against the existing domain model, sharpens terminology, and updates documentation (CONTEXT.md, ADRs) inline as decisions crystallise. Use when user wants to stress-test a plan against their project's language and documented decisions.
| name | shadcn-vue |
| description | Component usage patterns for shadcn-vue — a Vue component distribution system built on Reka UI and Tailwind CSS. Covers component APIs, forms with VeeValidate/TanStack Form, data tables, sidebar, charts, theming, and custom registries. |
| metadata | {"author":"Lucas Yang","version":"2026.06.15","source":"Generated from https://github.com/unovue/shadcn-vue, scripts located at https://github.com/ycs77/skills"} |
The skill is based on shadcn-vue (latest, Reka UI v2 + Tailwind CSS v4), generated at 2026-06-15.
shadcn-vue is a code distribution system for Vue components. Instead of installing a package, you copy component source code into your project for full control. Components are built on Reka UI (headless primitives) and styled with Tailwind CSS.
Key conventions:
npx shadcn-vue@latest add <component>@/components/ui/<component>@/lib/utils (provides cn class merge helper)@/composables/new-york style (default style is deprecated)| Topic | Description | Reference |
|---|---|---|
| Project Setup & CLI | CLI commands, components.json config, project initialization | core-setup |
| Theming & Dark Mode | CSS variables, color conventions, dark mode setup | core-theming |
| Topic | Description | Reference |
|---|---|---|
| Button & ButtonGroup | Button variants, ButtonGroup, split buttons | components-button |
| Input Components | Input, InputGroup, Textarea, NumberField, InputOTP, PinInput, TagsInput | components-input |
| Selection Controls | Checkbox, RadioGroup, Switch, Toggle, ToggleGroup, Slider | components-selection-controls |
| Select & Command | Select, NativeSelect, Combobox, Command palette | components-select |
| Date Components | Calendar, DatePicker, RangeCalendar | components-date-picker |
| Topic | Description | Reference |
|---|---|---|
| Display Components | Card, Table, Avatar, Item, Empty, Badge, Kbd, Label, Spinner, Skeleton, Progress | components-data-display |
| Topic | Description | Reference |
|---|---|---|
| Dialog & Panels | Dialog, AlertDialog, Sheet, Drawer, Popover, HoverCard, Tooltip | components-overlay |
| Menus | DropdownMenu, ContextMenu, Menubar | components-menu |
| Topic | Description | Reference |
|---|---|---|
| Navigation | Breadcrumb, NavigationMenu, Tabs, Pagination, Stepper | components-navigation |
| Layout & Feedback | Accordion, Collapsible, Separator, AspectRatio, Resizable, ScrollArea, Carousel, Alert, Toast/Sonner | components-layout |
| Topic | Description | Reference |
|---|---|---|
| Field Component | Accessible form field system with labels, descriptions, errors, groups | features-field |
| Forms: VeeValidate | Form validation with VeeValidate + Zod + Field component | features-form-vee-validate |
| Forms: TanStack Form | Form validation with TanStack Form + Zod + Field component | features-form-tanstack |
| Data Table | TanStack Table with sorting, filtering, pagination, selection, expanding | features-data-table |
| Sidebar | Composable sidebar with menus, collapsible groups, theming | features-sidebar |
| Charts | Unovis-based charts with ChartConfig, tooltips, legends | features-charts |
| Topic | Description | Reference |
|---|---|---|
| Custom Registry | Building and distributing custom component registries | advanced-registry |