[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6EG4YX631AFZ6ZMSFT2PQJS":3,"skill-same:01M6EG4YX631AFZ6ZMSFT2PQJS":59},{"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":22,"publishedAt":26,"linkOnly":27,"markdownContent":28,"markdownBody":28,"frontMatter":29,"refName":30,"commitSha":31,"skillDirectory":32,"forksCount":33,"repositoryHtmlUrl":34,"repositoryHomepageUrl":35,"ownerHtmlUrl":36,"ownerBlogUrl":6,"ownerDescription":37,"updatedAt":38,"install":39,"resources":52},"01M6EG4YX631AFZ6ZMSFT2PQJS","shadcn-ui",null,"ComeOnOliver\u002Fskillshub","ComeOnOliver","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F43215937?v=4","01M6E5JNFECJAAVFE0W7SMWWD2","Haoran Shu","01M6E5JNNDQS7AJZDYFQ8TPZCK",66,"MIT","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002FTerminalSkills\u002Fskills\u002Fshadcn-ui\u002FSKILL.md",[17],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[23,24,25],"shadcn","ui","shadcn ui","2026-11-10 10:12:30",false,"# shadcn\u002Fui — Copy-Paste Component Library\n\nYou are an expert in shadcn\u002Fui, the collection of reusable React components built with Radix UI and Tailwind CSS. You help developers build beautiful, accessible interfaces by copying components directly into their project (not installed as a dependency) — providing full ownership and customization of every component including buttons, dialogs, forms, tables, command palettes, toasts, and 40+ primitives.\n\n## Core Capabilities\n\n### Installation and Usage\n\n```bash\n# Initialize in your project\nnpx shadcn@latest init\n\n# Add components (copies source code into your project)\nnpx shadcn@latest add button dialog card input form table\nnpx shadcn@latest add command toast dropdown-menu sheet tabs\n\n# Components are now in your project at components\u002Fui\u002F\n```\n\n```tsx\n\u002F\u002F Full ownership — edit anything\nimport { Button } from \"@\u002Fcomponents\u002Fui\u002Fbutton\";\nimport { Card, CardContent, CardHeader, CardTitle } from \"@\u002Fcomponents\u002Fui\u002Fcard\";\nimport { Input } from \"@\u002Fcomponents\u002Fui\u002Finput\";\nimport { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from \"@\u002Fcomponents\u002Fui\u002Fdialog\";\nimport { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from \"@\u002Fcomponents\u002Fui\u002Fform\";\nimport { useForm } from \"react-hook-form\";\nimport { z } from \"zod\";\nimport { zodResolver } from \"@hookform\u002Fresolvers\u002Fzod\";\n\nconst schema = z.object({\n  name: z.string().min(2, \"Name must be at least 2 characters\"),\n  email: z.string().email(\"Invalid email\"),\n});\n\nfunction CreateUserDialog() {\n  const form = useForm\u003Cz.infer\u003Ctypeof schema>>({\n    resolver: zodResolver(schema),\n    defaultValues: { name: \"\", email: \"\" },\n  });\n\n  return (\n    \u003CDialog>\n      \u003CDialogTrigger asChild>\n        \u003CButton>Add User\u003C\u002FButton>\n      \u003C\u002FDialogTrigger>\n      \u003CDialogContent>\n        \u003CDialogHeader>\n          \u003CDialogTitle>Create User\u003C\u002FDialogTitle>\n        \u003C\u002FDialogHeader>\n        \u003CForm {...form}>\n          \u003Cform onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-4\">\n            \u003CFormField control={form.control} name=\"name\" render={({ field }) => (\n              \u003CFormItem>\n                \u003CFormLabel>Name\u003C\u002FFormLabel>\n                \u003CFormControl>\u003CInput placeholder=\"John Doe\" {...field} \u002F>\u003C\u002FFormControl>\n                \u003CFormMessage \u002F>\n              \u003C\u002FFormItem>\n            )} \u002F>\n            \u003CFormField control={form.control} name=\"email\" render={({ field }) => (\n              \u003CFormItem>\n                \u003CFormLabel>Email\u003C\u002FFormLabel>\n                \u003CFormControl>\u003CInput placeholder=\"john@example.com\" {...field} \u002F>\u003C\u002FFormControl>\n                \u003CFormMessage \u002F>\n              \u003C\u002FFormItem>\n            )} \u002F>\n            \u003CButton type=\"submit\" className=\"w-full\">Create\u003C\u002FButton>\n          \u003C\u002Fform>\n        \u003C\u002FForm>\n      \u003C\u002FDialogContent>\n    \u003C\u002FDialog>\n  );\n}\n```\n\n### Data Table\n\n```tsx\nimport { DataTable } from \"@\u002Fcomponents\u002Fui\u002Fdata-table\";\nimport { ColumnDef } from \"@tanstack\u002Freact-table\";\nimport { Badge } from \"@\u002Fcomponents\u002Fui\u002Fbadge\";\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from \"@\u002Fcomponents\u002Fui\u002Fdropdown-menu\";\nimport { MoreHorizontal } from \"lucide-react\";\n\nconst columns: ColumnDef\u003CUser>[] = [\n  { accessorKey: \"name\", header: \"Name\" },\n  { accessorKey: \"email\", header: \"Email\" },\n  {\n    accessorKey: \"role\",\n    header: \"Role\",\n    cell: ({ row }) => \u003CBadge variant={row.original.role === \"admin\" ? \"default\" : \"secondary\"}>{row.original.role}\u003C\u002FBadge>,\n  },\n  {\n    id: \"actions\",\n    cell: ({ row }) => (\n      \u003CDropdownMenu>\n        \u003CDropdownMenuTrigger asChild>\u003CButton variant=\"ghost\" size=\"icon\">\u003CMoreHorizontal className=\"h-4 w-4\" \u002F>\u003C\u002FButton>\u003C\u002FDropdownMenuTrigger>\n        \u003CDropdownMenuContent>\n          \u003CDropdownMenuItem onClick={() => editUser(row.original)}>Edit\u003C\u002FDropdownMenuItem>\n          \u003CDropdownMenuItem className=\"text-red-600\" onClick={() => deleteUser(row.original.id)}>Delete\u003C\u002FDropdownMenuItem>\n        \u003C\u002FDropdownMenuContent>\n      \u003C\u002FDropdownMenu>\n    ),\n  },\n];\n\nfunction UsersPage() {\n  return \u003CDataTable columns={columns} data={users} searchKey=\"name\" \u002F>;\n}\n```\n\n### Command Palette\n\n```tsx\nimport { CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from \"@\u002Fcomponents\u002Fui\u002Fcommand\";\n\nfunction CommandPalette() {\n  const [open, setOpen] = useState(false);\n\n  useEffect(() => {\n    const down = (e: KeyboardEvent) => {\n      if (e.key === \"k\" && (e.metaKey || e.ctrlKey)) { e.preventDefault(); setOpen(true); }\n    };\n    document.addEventListener(\"keydown\", down);\n    return () => document.removeEventListener(\"keydown\", down);\n  }, []);\n\n  return (\n    \u003CCommandDialog open={open} onOpenChange={setOpen}>\n      \u003CCommandInput placeholder=\"Type a command or search...\" \u002F>\n      \u003CCommandList>\n        \u003CCommandEmpty>No results found.\u003C\u002FCommandEmpty>\n        \u003CCommandGroup heading=\"Actions\">\n          \u003CCommandItem onSelect={() => navigate(\"\u002Fdashboard\")}>? Dashboard\u003C\u002FCommandItem>\n          \u003CCommandItem onSelect={() => navigate(\"\u002Fsettings\")}>⚙️ Settings\u003C\u002FCommandItem>\n          \u003CCommandItem onSelect={() => createNewProject()}>➕ New Project\u003C\u002FCommandItem>\n        \u003C\u002FCommandGroup>\n      \u003C\u002FCommandList>\n    \u003C\u002FCommandDialog>\n  );\n}\n```\n\n## Installation\n\n```bash\nnpx shadcn@latest init                     # Setup (adds tailwind config, utils, etc.)\nnpx shadcn@latest add [component]          # Add specific components\n```\n\n## Best Practices\n\n1. **Not a dependency** — Components are copied into your project; you own the code, customize freely\n2. **Radix primitives** — Built on Radix UI; fully accessible (ARIA, keyboard navigation) out of the box\n3. **Tailwind styling** — All styles via Tailwind classes; customize with your design tokens in `globals.css`\n4. **Variant system** — Uses `class-variance-authority` (cva) for component variants; extend with your own\n5. **Form integration** — `Form` component wraps react-hook-form + zod; type-safe validation built-in\n6. **Theme** — CSS variables in `globals.css`; switch light\u002Fdark by changing variables; `next-themes` for toggle\n7. **Composition** — Components are composable primitives; build complex UIs by combining simple parts\n8. **Registry** — Browse all components at ui.shadcn.com; preview before adding to your project\n",{},"main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002FTerminalSkills\u002Fskills\u002Fshadcn-ui",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":40,"prompt":50,"zipAvailable":51},[41,44,47],{"tool":42,"command":43},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill shadcn-ui",{"tool":45,"command":46},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill shadcn-ui",{"tool":48,"command":49},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill shadcn-ui","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002FTerminalSkills\u002Fskills\u002Fshadcn-ui\u002FSKILL.md",true,[53],{"path":54,"resourceType":55,"resourceTypeDesc":56,"sizeBytes":57,"sourceHtmlUrl":58},"references\u002Facceptance-criteria.md","REFERENCE","参考文档",2205,"https:\u002F\u002Fgithub.com\u002FThamielis\u002F.agents\u002Fblob\u002Fmain\u002Fskills\u002Fwiki-architect\u002Freferences\u002Facceptance-criteria.md",[60,74,84,93,99,106],{"skillNo":61,"name":62,"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":63,"categories":64,"keywords":70,"publishedAt":26},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[65],{"categoryNo":66,"categoryName":67,"taxonomyType":68,"taxonomyTypeDesc":69},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[71,72,73],"model","model hierarchy","model hierarchy skill",{"skillNo":75,"name":76,"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":77,"categories":78,"keywords":80,"publishedAt":26},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[79],{"categoryNo":66,"categoryName":67,"taxonomyType":68,"taxonomyTypeDesc":69},[81,82,83],"MCP","zoom","zoom mcp",{"skillNo":85,"name":86,"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":87,"categories":88,"keywords":89,"publishedAt":26},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[90,91,92,82],"sdk","zoom apps sdk","apps",{"skillNo":94,"name":95,"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":96,"categories":97,"keywords":98,"publishedAt":26},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[95],{"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":105,"publishedAt":26},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[104],{"categoryNo":66,"categoryName":67,"taxonomyType":68,"taxonomyTypeDesc":69},[101],{"skillNo":107,"name":108,"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":109,"categories":110,"keywords":111,"publishedAt":26},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[108]]