[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6FDT2B9XS5WFZ2HGSCV3N10":3,"skill-same:01M6FDT2B9XS5WFZ2HGSCV3N10":56},{"skillNo":4,"name":5,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":25,"publishedAt":29,"linkOnly":30,"markdownContent":31,"markdownBody":31,"frontMatter":32,"refName":33,"commitSha":34,"skillDirectory":35,"forksCount":36,"repositoryHtmlUrl":37,"repositoryHomepageUrl":38,"ownerHtmlUrl":39,"ownerBlogUrl":6,"ownerDescription":40,"updatedAt":41,"install":42,"resources":55},"01M6FDT2B9XS5WFZ2HGSCV3N10","shadcn-vue",null,"ComeOnOliver\u002Fskillshub","ComeOnOliver","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F43215937?v=4","01M6E5JNFECJAAVFE0W7SMWWD2","Haoran Shu","01M6E5JNNDQS7AJZDYFQ8TPZCK",67,"MIT","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fnoartem\u002Fskills\u002Fshadcn-vue\u002FSKILL.md",[17,22],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发",[26,27,28],"shadcn","vue","shadcn vue","2026-11-10 10:12:30",false,"# shadcn-vue\n\n---\n\n## Quick Start (3 Minutes)\n\n### For Vue Projects (Vite)\n\n#### 1. Initialize shadcn-vue\n\n```bash\nnpx shadcn-vue@latest init\n```\n\n**During initialization**:\n\n- Style: `New York` or `Default` (cannot change later!)\n- Base color: `Slate` (recommended)\n- CSS variables: `Yes` (required for dark mode)\n\n#### 2. Configure TypeScript Path Aliases\n\n```json\n\u002F\u002F tsconfig.json\n{\n  \"compilerOptions\": {\n    \"baseUrl\": \".\",\n    \"paths\": {\n      \"@\u002F*\": [\".\u002Fsrc\u002F*\"]\n    }\n  }\n}\n```\n\n#### 3. Configure Vite\n\n```typescript\n\u002F\u002F vite.config.ts\nimport { defineConfig } from \"vite\";\nimport vue from \"@vitejs\u002Fplugin-vue\";\nimport tailwindcss from \"@tailwindcss\u002Fvite\"; \u002F\u002F Tailwind v4\nimport path from \"path\";\n\nexport default defineConfig({\n  plugins: [vue(), tailwindcss()],\n  resolve: {\n    alias: {\n      \"@\": path.resolve(__dirname, \".\u002Fsrc\"),\n    },\n  },\n});\n```\n\n#### 4. Add Your First Component\n\n```bash\nnpx shadcn-vue@latest add button\n```\n\n---\n\n## Quick Reference\n\n| Need                    | Command or file                                    |\n| ----------------------- | -------------------------------------------------- |\n| Initialize project      | `npx shadcn-vue@latest init`                       |\n| Add component           | `npx shadcn-vue@latest add button`                 |\n| Add multiple components | `npx shadcn-vue@latest add button card dialog`     |\n| Build registry JSON     | `npx shadcn-vue@latest build`                      |\n| Generate component docs | `npx tsx scripts\u002Fgenerate-shadcn-components.ts`    |\n| Enable CSS variables    | `components.json` → `tailwind.cssVariables: true`  |\n| Add registry namespace  | `components.json` → `registries` map               |\n| Opencode MCP init       | `npx shadcn-vue@latest mcp init --client opencode` |\n| Codex MCP config        | `~\u002F.codex\u002Fconfig.toml` with `mcp_servers.shadcn`   |\n\n---\n\n## Bundled Resources\n\n**Templates** (`templates\u002F`):\n\n- `quick-setup.ts` - Complete setup guide for Vue\u002FNuxt with examples (190 lines)\n\n**References** (`references\u002F`):\n\n- `cli.md` - CLI commands and options\n- `mcp.md` - MCP setup, client configs, prompts\n- `theming.md` - Theming and `cssVariables`\n- `error-catalog.md` - All 7 documented issues with solutions (267 lines)\n- `component-examples.md` - All 50+ component examples with code\n- `dark-mode-setup.md` - Complete dark mode implementation guide\n- `data-tables.md` - Data tables with TanStack Table\n\n**Component Documentation** (`components\u002F`):\n\n- `references\u002Fcomponents.md` - Index of all shadcn-vue components\n- `components\u002F\u003Ccomponent>.md` - Individual component documentation with installation, usage, and examples\n\n**Official Documentation**:\n\n- shadcn-vue Docs: https:\u002F\u002Fshadcn-vue.com\n- Reka UI Docs: https:\u002F\u002Freka-ui.com\n- GitHub: https:\u002F\u002Fgithub.com\u002Fradix-vue\u002Fshadcn-vue\n\n---\n\n## When to Load References\n\nLoad these references based on the task:\n\n1. **Load `references\u002Ferror-catalog.md` when:**\n   - User encounters \"component not found\" or import errors\n   - Setup commands fail or configuration issues arise\n   - Tailwind CSS variables or TypeScript paths broken\n   - **Trigger phrases:** \"not working\", \"error\", \"fails to\", \"broken\"\n\n2. **Load `references\u002Fcomponents.md` when:**\n   - User asks what components are available (names, categories, status)\n   - User needs to add\u002Fuse a component and wants the correct install\u002Fimport paths\n   - You need to confirm a component exists before recommending a custom build\n\n3. **Load `references\u002Fcomponent-examples.md` when:**\n   - User asks \"how do I implement [component]?\"\n   - Need copy-paste examples for specific components\n   - Building forms, tables, navigation, or data display\n   - **Trigger phrases:** \"example\", \"how to use\", \"implement\", \"code sample\"\n\n4. **Load `references\u002Fcli.md` when:**\n   - User asks how to run the CLI (`init`, `add`, `update`) or what prompts mean\n   - Need the exact command\u002Fflags for installing one or more components\n   - Troubleshooting CLI-related issues (registry, paths, overwrites)\n\n5. **Load `references\u002Fdark-mode-setup.md` when:**\n   - Implementing dark mode \u002F theme switching\n   - User mentions Vue 3 + Vite, Nuxt, or Astro setup\n   - Need composable patterns for theme management\n   - **Trigger phrases:** \"dark mode\", \"theme\", \"light\u002Fdark\", \"color scheme\"\n\n6. **Load `references\u002Ftheming.md` when:**\n   - User wants to customize theme tokens via CSS variables (`cssVariables`, `:root`, `.dark`)\n   - Need to wire Tailwind to CSS-variable-based colors and radii\n   - Setting up\u002Fadjusting design tokens (colors, radius, typography) for shadcn-vue\n\n7. **Load `references\u002Fmcp.md` when:**\n   - Setting up MCP server for opencode, Codex, Cursor, VS Code\n   - Configuring registries in `components.json`\n   - Troubleshooting missing components or registry namespaces\n   - **Trigger phrases:** \"MCP\", \"opencode\", \"codex\", \"cursor\", \"registry\"\n\n8. **Load `references\u002Fdata-tables.md` when:**\n   - Building sortable\u002Ffilterable\u002Fpaginated tables\n   - User mentions TanStack Table or `DataTable`\n   - **Trigger phrases:** \"data table\", \"table\", \"tanstack\", \"sorting\", \"pagination\"\n\n---\n\n## Critical Rules\n\n### Always Do\n\n✅ **Run `init` before adding components**\n\n- Creates required configuration and utilities\n- Sets up path aliases\n\n✅ **Use CSS variables for theming** (`cssVariables: true`)\n\n- Enables dark mode support\n- Flexible theme customization\n\n✅ **Configure TypeScript path aliases**\n\n- Required for component imports\n- Must match `components.json` aliases\n\n✅ **Keep components.json in version control**\n\n- Team members need same configuration\n- Documents project setup\n\n### Never Do\n\n❌ **Don't change `style` after initialization**\n\n- Requires complete reinstall\n- Reinitialize in new directory instead\n\n❌ **Don't mix Radix Vue and Reka UI v2**\n\n- Incompatible component APIs\n- Use one or the other\n\n❌ **Don't skip TypeScript configuration**\n\n- Component imports will fail\n- IDE autocomplete won't work\n\n❌ **Don't use without Tailwind CSS**\n\n- Components are styled with Tailwind\n- Won't render correctly\n\n---\n\n## Common Mistakes\n\n- Running `add` before `init` and missing `components.json`.\n- Forgetting to enable the MCP server in the client UI\u002Fconfig.\n- Mis-typed registry namespaces (`@namespace\u002Fcomponent`).\n- Using CSS variable classes without `tailwind.cssVariables: true`.\n\n---\n\n## CLI Commands Reference\n\n### init Command\n\n```bash\n# Initialize in current directory\nnpx shadcn-vue@latest init\n\n# Initialize in specific directory (monorepo)\nnpx shadcn-vue@latest init -c .\u002Fapps\u002Fweb\n```\n\n### add Command\n\n```bash\n# Add single component\nnpx shadcn-vue@latest add button\n\n# Add multiple components\nnpx shadcn-vue@latest add button card dialog\n\n# Add all components\nnpx shadcn-vue@latest add --all\n```\n\n### diff Command\n\n```bash\n# Check for component updates\nnpx shadcn-vue@latest diff button\n```\n\n### mcp Command\n\n```bash\n# Initialize MCP for specific client\nnpx shadcn-vue@latest mcp init --client opencode\nnpx shadcn-vue@latest mcp init --client codex\nnpx shadcn-vue@latest mcp init --client cursor\nnpx shadcn-vue@latest mcp init --client vscode\n```\n\n---\n\n## Configuration\n\nshadcn-vue uses `components.json` to configure:\n\n- Component paths (`@\u002Fcomponents\u002Fui`)\n- Utils location (`@\u002Flib\u002Futils`)\n- Tailwind config paths\n- TypeScript paths\n\n**Full example:** See `templates\u002Fcomponents.json` or generate via `npx shadcn-vue@latest init`\n\n---\n\n## Utils Library\n\nThe `@\u002Flib\u002Futils.ts` file provides the `cn()` helper for merging Tailwind classes:\n\n- Combines multiple className strings\n- Uses `clsx` + `tailwind-merge` for conflict resolution\n\n**Auto-generated** by `shadcn-vue init` - no manual setup needed.\n",{},"main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002Fnoartem\u002Fskills\u002Fshadcn-vue",24,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub","https:\u002F\u002Fskillshub.wtf","https:\u002F\u002Fgithub.com\u002FComeOnOliver","AI & Blockchain Engineer\r\n","2026-06-24 22:07:19",{"source":7,"skillName":5,"commands":43,"prompt":53,"zipAvailable":54},[44,47,50],{"tool":45,"command":46},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill shadcn-vue",{"tool":48,"command":49},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill shadcn-vue",{"tool":51,"command":52},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill shadcn-vue","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fnoartem\u002Fskills\u002Fshadcn-vue\u002FSKILL.md",true,[],[57,67,77,86,92,99],{"skillNo":58,"name":59,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":60,"categories":61,"keywords":63,"publishedAt":29},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[62],{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},[64,65,66],"model","model hierarchy","model hierarchy skill",{"skillNo":68,"name":69,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":70,"categories":71,"keywords":73,"publishedAt":29},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[72],{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},[74,75,76],"MCP","zoom","zoom mcp",{"skillNo":78,"name":79,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":80,"categories":81,"keywords":82,"publishedAt":29},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[83,84,85,75],"sdk","zoom apps sdk","apps",{"skillNo":87,"name":88,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":89,"categories":90,"keywords":91,"publishedAt":29},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[88],{"skillNo":93,"name":94,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":95,"categories":96,"keywords":98,"publishedAt":29},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[97],{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},[94],{"skillNo":100,"name":101,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":102,"categories":103,"keywords":104,"publishedAt":29},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[101]]