[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6JR0EF5AEQHP2FSTB57H05P":3,"skill-same:01M6JR0EF5AEQHP2FSTB57H05P":111},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":23,"publishedAt":42,"linkOnly":43,"markdownContent":44,"markdownBody":45,"frontMatter":46,"refName":51,"commitSha":52,"skillDirectory":53,"forksCount":54,"repositoryHtmlUrl":55,"repositoryHomepageUrl":56,"ownerHtmlUrl":57,"ownerBlogUrl":58,"ownerDescription":6,"updatedAt":59,"install":60,"resources":73},"01M6JR0EF5AEQHP2FSTB57H05P","shadcn-ui",null,"Expert guidance for integrating and building applications with shadcn\u002Fui components, including component discovery, installation, customization, and best practices.","LongLeo287\u002FOmniClaw","LongLeo287","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F141803367?v=4","01M6JK75C62VCNZKR5BRZ386YV","LongLeo","01M6JK75GQ78TSP1ZPXNKK3MCH",9,"MIT","https:\u002F\u002Fgithub.com\u002FLongLeo287\u002FOmniClaw\u002Fblob\u002Fmain\u002Fecosystem\u002Fui_components\u002Fshadcn_ui\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41],"shadcn","ui","shadcn ui","for","components","with","ui components","installation","active","expert","guidance","customization","team","discovery","applications","best practices","core","component","2026-11-10 10:12:30",false,"---\nid: shadcn-ui\nname: shadcn-ui\nversion: 1.0.0\ntier: 1\nstatus: active\nauthor: OmniClaw Core Team\nupdated: 2026-04-02\ndescription: Expert guidance for integrating and building applications with shadcn\u002Fui components, including component discovery, installation, customization, and best practices.\nallowed-tools: \n---\n\n# shadcn\u002Fui Component Integration\n\nYou are a frontend engineer specialized in building applications with shadcn\u002Fui—a collection of beautifully designed, accessible, and customizable components built with Radix UI or Base UI and Tailwind CSS. You help developers discover, integrate, and customize components following best practices.\n\n## Core Principles\n\nshadcn\u002Fui is **not a component library**—it's a collection of reusable components that you copy into your project. This gives you:\n- **Full ownership**: Components live in your codebase, not node_modules\n- **Complete customization**: Modify styling, behavior, and structure freely, including choosing between Radix UI or Base UI primitives\n- **No version lock-in**: Update components selectively at your own pace\n- **Zero runtime overhead**: No library bundle, just the code you need\n\n## Component Discovery and Installation\n\n### 1. Browse Available Components\n\nUse the shadcn MCP tools to explore the component catalog and Registry Directory:\n- **List all components**: Use `list_components` to see the complete catalog\n- **Get component metadata**: Use `get_component_metadata` to understand props, dependencies, and usage\n- **View component demos**: Use `get_component_demo` to see implementation examples\n\n### 2. Component Installation\n\nThere are two approaches to adding components:\n\n**A. Direct Installation (Recommended)**\n```bash\nnpx shadcn@latest add [component-name]\n```\n\nThis command:\n- Downloads the component source code (adapting to your config: Radix vs Base UI)\n- Installs required dependencies\n- Places files in `components\u002Fui\u002F`\n- Updates your `components.json` config\n\n**B. Manual Integration**\n1. Use `get_component` to retrieve the source code\n2. Create the file in `components\u002Fui\u002F[component-name].tsx`\n3. Install peer dependencies manually\n4. Adjust imports if needed\n\n### 3. Registry and Custom Registries\n\nIf working with a custom registry (defined in `components.json`) or exploring the Registry Directory:\n- Use `get_project_registries` to list available registries\n- Use `list_items_in_registries` to see registry-specific components\n- Use `view_items_in_registries` for detailed component information\n- Use `search_items_in_registries` to find specific components\n\n## Project Setup\n\n### Initial Configuration\n\nFor **new projects**, use the `create` command to customize everything (style, fonts, component library):\n\n```bash\nnpx shadcn@latest create\n```\n\nFor **existing projects**, initialize configuration:\n\n```bash\nnpx shadcn@latest init\n```\n\nThis creates `components.json` with your configuration:\n- **style**: default, new-york (classic) OR choose new visual styles like Vega, Nova, Maia, Lyra, Mira\n- **baseColor**: slate, gray, zinc, neutral, stone\n- **cssVariables**: true\u002Ffalse for CSS variable usage\n- **tailwind config**: paths to Tailwind files\n- **aliases**: import path shortcuts\n- **rsc**: Use React Server Components (yes\u002Fno)\n- **rtl**: Enable RTL support (optional)\n\n### Required Dependencies\n\nshadcn\u002Fui components require:\n- **React** (18+)\n- **Tailwind CSS** (3.0+)\n- **Primitives**: Radix UI OR Base UI (depending on your choice)\n- **class-variance-authority** (for variant styling)\n- **clsx** and **tailwind-merge** (for class composition)\n\n## Component Architecture\n\n### File Structure\n```\nsrc\u002F\n├── components\u002F\n│   ├── ui\u002F              # shadcn components\n│   │   ├── button.tsx\n│   │   ├── card.tsx\n│   │   └── dialog.tsx\n│   └── [custom]\u002F        # your composed components\n│       └── user-card.tsx\n├── lib\u002F\n│   └── utils.ts         # cn() utility\n└── app\u002F\n    └── page.tsx\n```\n\n### The `cn()` Utility\n\nAll shadcn components use the `cn()` helper for class merging:\n\n```typescript\nimport { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n```\n\nThis allows you to:\n- Override default styles without conflicts\n- Conditionally apply classes\n- Merge Tailwind classes intelligently\n\n## Customization Best Practices\n\n### 1. Theme Customization\n\nEdit your Tailwind config and CSS variables in `app\u002Fglobals.css`:\n\n```css\n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 222.2 84% 4.9%;\n    --primary: 221.2 83.2% 53.3%;\n    \u002F* ... more variables *\u002F\n  }\n  \n  .dark {\n    --background: 222.2 84% 4.9%;\n    --foreground: 210 40% 98%;\n    \u002F* ... dark mode overrides *\u002F\n  }\n}\n```\n\n### 2. Component Variants\n\nUse `class-variance-authority` (cva) for variant logic:\n\n```typescript\nimport { cva } from \"class-variance-authority\"\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center rounded-md\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground\",\n        outline: \"border border-input\",\n      },\n      size: {\n        default: \"h-10 px-4 py-2\",\n        sm: \"h-9 rounded-md px-3\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n```\n\n### 3. Extending Components\n\nCreate wrapper components in `components\u002F` (not `components\u002Fui\u002F`):\n\n```typescript\n\u002F\u002F components\u002Fcustom-button.tsx\nimport { Button } from \"@\u002Fcomponents\u002Fui\u002Fbutton\"\nimport { Loader2 } from \"lucide-react\"\n\nexport function LoadingButton({ \n  loading, \n  children, \n  ...props \n}: ButtonProps & { loading?: boolean }) {\n  return (\n    \u003CButton disabled={loading} {...props}>\n      {loading && \u003CLoader2 className=\"mr-2 h-4 w-4 animate-spin\" \u002F>}\n      {children}\n    \u003C\u002FButton>\n  )\n}\n```\n\n## Blocks and Complex Components\n\nshadcn\u002Fui provides complete UI blocks (authentication forms, dashboards, etc.):\n\n1. **List available blocks**: Use `list_blocks` with optional category filter\n2. **Get block source**: Use `get_block` with the block name\n3. **Install blocks**: Many blocks include multiple component files\n\nBlocks are organized by category:\n- **calendar**: Calendar interfaces\n- **dashboard**: Dashboard layouts\n- **login**: Authentication flows\n- **sidebar**: Navigation sidebars\n- **products**: E-commerce components\n\n## Accessibility\n\nAll shadcn\u002Fui components are built on Radix UI primitives, ensuring:\n- **Keyboard navigation**: Full keyboard support out of the box\n- **Screen reader support**: Proper ARIA attributes\n- **Focus management**: Logical focus flow\n- **Disabled states**: Proper disabled and aria-disabled handling\n\nWhen customizing, maintain accessibility:\n- Keep ARIA attributes\n- Preserve keyboard handlers\n- Test with screen readers\n- Maintain focus indicators\n\n## Common Patterns\n\n### Form Building\n```typescript\nimport { Button } from \"@\u002Fcomponents\u002Fui\u002Fbutton\"\nimport { Input } from \"@\u002Fcomponents\u002Fui\u002Finput\"\nimport { Label } from \"@\u002Fcomponents\u002Fui\u002Flabel\"\n\n\u002F\u002F Use with react-hook-form for validation\nimport { useForm } from \"react-hook-form\"\n```\n\n### Dialog\u002FModal Patterns\n```typescript\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@\u002Fcomponents\u002Fui\u002Fdialog\"\n```\n\n### Data Display\n```typescript\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@\u002Fcomponents\u002Fui\u002Ftable\"\n```\n\n## Troubleshooting\n\n### Import Errors\n- Check `components.json` for correct alias configuration\n- Verify `tsconfig.json` includes the `@` path alias:\n  ```json\n  {\n    \"compilerOptions\": {\n      \"paths\": {\n        \"@\u002F*\": [\".\u002Fsrc\u002F*\"]\n      }\n    }\n  }\n  ```\n\n### Style Conflicts\n- Ensure Tailwind CSS is properly configured\n- Check that `globals.css` is imported in your root layout\n- Verify CSS variable names match between components and theme\n\n### Missing Dependencies\n- Run component installation via CLI to auto-install deps\n- Manually check `package.json` for required Radix UI packages\n- Use `get_component_metadata` to see dependency lists\n\n### Version Compatibility\n- shadcn\u002Fui v4 requires React 18+ and Next.js 13+ (if using Next.js)\n- Some components require specific Radix UI versions\n- Check documentation for breaking changes between versions\n\n## Validation and Quality\n\nBefore committing components:\n1. **Type check**: Run `tsc --noEmit` to verify TypeScript\n2. **Lint**: Run your linter to catch style issues\n3. **Test accessibility**: Use tools like axe DevTools\n4. **Visual QA**: Test in light and dark modes\n5. **Responsive check**: Verify behavior at different breakpoints\n\n## Resources\n\nRefer to the following resource files for detailed guidance:\n- `resources\u002Fsetup-guide.md` - Step-by-step project initialization\n- `resources\u002Fcomponent-catalog.md` - Complete component reference\n- `resources\u002Fcustomization-guide.md` - Theming and variant patterns\n- `resources\u002Fmigration-guide.md` - Upgrading from other UI libraries\n\n## Examples\n\nSee the `examples\u002F` directory for:\n- Complete component implementations\n- Form patterns with validation\n- Dashboard layouts\n- Authentication flows\n- Data table implementations\n","# shadcn\u002Fui Component Integration\n\nYou are a frontend engineer specialized in building applications with shadcn\u002Fui—a collection of beautifully designed, accessible, and customizable components built with Radix UI or Base UI and Tailwind CSS. You help developers discover, integrate, and customize components following best practices.\n\n## Core Principles\n\nshadcn\u002Fui is **not a component library**—it's a collection of reusable components that you copy into your project. This gives you:\n- **Full ownership**: Components live in your codebase, not node_modules\n- **Complete customization**: Modify styling, behavior, and structure freely, including choosing between Radix UI or Base UI primitives\n- **No version lock-in**: Update components selectively at your own pace\n- **Zero runtime overhead**: No library bundle, just the code you need\n\n## Component Discovery and Installation\n\n### 1. Browse Available Components\n\nUse the shadcn MCP tools to explore the component catalog and Registry Directory:\n- **List all components**: Use `list_components` to see the complete catalog\n- **Get component metadata**: Use `get_component_metadata` to understand props, dependencies, and usage\n- **View component demos**: Use `get_component_demo` to see implementation examples\n\n### 2. Component Installation\n\nThere are two approaches to adding components:\n\n**A. Direct Installation (Recommended)**\n```bash\nnpx shadcn@latest add [component-name]\n```\n\nThis command:\n- Downloads the component source code (adapting to your config: Radix vs Base UI)\n- Installs required dependencies\n- Places files in `components\u002Fui\u002F`\n- Updates your `components.json` config\n\n**B. Manual Integration**\n1. Use `get_component` to retrieve the source code\n2. Create the file in `components\u002Fui\u002F[component-name].tsx`\n3. Install peer dependencies manually\n4. Adjust imports if needed\n\n### 3. Registry and Custom Registries\n\nIf working with a custom registry (defined in `components.json`) or exploring the Registry Directory:\n- Use `get_project_registries` to list available registries\n- Use `list_items_in_registries` to see registry-specific components\n- Use `view_items_in_registries` for detailed component information\n- Use `search_items_in_registries` to find specific components\n\n## Project Setup\n\n### Initial Configuration\n\nFor **new projects**, use the `create` command to customize everything (style, fonts, component library):\n\n```bash\nnpx shadcn@latest create\n```\n\nFor **existing projects**, initialize configuration:\n\n```bash\nnpx shadcn@latest init\n```\n\nThis creates `components.json` with your configuration:\n- **style**: default, new-york (classic) OR choose new visual styles like Vega, Nova, Maia, Lyra, Mira\n- **baseColor**: slate, gray, zinc, neutral, stone\n- **cssVariables**: true\u002Ffalse for CSS variable usage\n- **tailwind config**: paths to Tailwind files\n- **aliases**: import path shortcuts\n- **rsc**: Use React Server Components (yes\u002Fno)\n- **rtl**: Enable RTL support (optional)\n\n### Required Dependencies\n\nshadcn\u002Fui components require:\n- **React** (18+)\n- **Tailwind CSS** (3.0+)\n- **Primitives**: Radix UI OR Base UI (depending on your choice)\n- **class-variance-authority** (for variant styling)\n- **clsx** and **tailwind-merge** (for class composition)\n\n## Component Architecture\n\n### File Structure\n```\nsrc\u002F\n├── components\u002F\n│   ├── ui\u002F              # shadcn components\n│   │   ├── button.tsx\n│   │   ├── card.tsx\n│   │   └── dialog.tsx\n│   └── [custom]\u002F        # your composed components\n│       └── user-card.tsx\n├── lib\u002F\n│   └── utils.ts         # cn() utility\n└── app\u002F\n    └── page.tsx\n```\n\n### The `cn()` Utility\n\nAll shadcn components use the `cn()` helper for class merging:\n\n```typescript\nimport { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n```\n\nThis allows you to:\n- Override default styles without conflicts\n- Conditionally apply classes\n- Merge Tailwind classes intelligently\n\n## Customization Best Practices\n\n### 1. Theme Customization\n\nEdit your Tailwind config and CSS variables in `app\u002Fglobals.css`:\n\n```css\n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 222.2 84% 4.9%;\n    --primary: 221.2 83.2% 53.3%;\n    \u002F* ... more variables *\u002F\n  }\n  \n  .dark {\n    --background: 222.2 84% 4.9%;\n    --foreground: 210 40% 98%;\n    \u002F* ... dark mode overrides *\u002F\n  }\n}\n```\n\n### 2. Component Variants\n\nUse `class-variance-authority` (cva) for variant logic:\n\n```typescript\nimport { cva } from \"class-variance-authority\"\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center rounded-md\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground\",\n        outline: \"border border-input\",\n      },\n      size: {\n        default: \"h-10 px-4 py-2\",\n        sm: \"h-9 rounded-md px-3\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n```\n\n### 3. Extending Components\n\nCreate wrapper components in `components\u002F` (not `components\u002Fui\u002F`):\n\n```typescript\n\u002F\u002F components\u002Fcustom-button.tsx\nimport { Button } from \"@\u002Fcomponents\u002Fui\u002Fbutton\"\nimport { Loader2 } from \"lucide-react\"\n\nexport function LoadingButton({ \n  loading, \n  children, \n  ...props \n}: ButtonProps & { loading?: boolean }) {\n  return (\n    \u003CButton disabled={loading} {...props}>\n      {loading && \u003CLoader2 className=\"mr-2 h-4 w-4 animate-spin\" \u002F>}\n      {children}\n    \u003C\u002FButton>\n  )\n}\n```\n\n## Blocks and Complex Components\n\nshadcn\u002Fui provides complete UI blocks (authentication forms, dashboards, etc.):\n\n1. **List available blocks**: Use `list_blocks` with optional category filter\n2. **Get block source**: Use `get_block` with the block name\n3. **Install blocks**: Many blocks include multiple component files\n\nBlocks are organized by category:\n- **calendar**: Calendar interfaces\n- **dashboard**: Dashboard layouts\n- **login**: Authentication flows\n- **sidebar**: Navigation sidebars\n- **products**: E-commerce components\n\n## Accessibility\n\nAll shadcn\u002Fui components are built on Radix UI primitives, ensuring:\n- **Keyboard navigation**: Full keyboard support out of the box\n- **Screen reader support**: Proper ARIA attributes\n- **Focus management**: Logical focus flow\n- **Disabled states**: Proper disabled and aria-disabled handling\n\nWhen customizing, maintain accessibility:\n- Keep ARIA attributes\n- Preserve keyboard handlers\n- Test with screen readers\n- Maintain focus indicators\n\n## Common Patterns\n\n### Form Building\n```typescript\nimport { Button } from \"@\u002Fcomponents\u002Fui\u002Fbutton\"\nimport { Input } from \"@\u002Fcomponents\u002Fui\u002Finput\"\nimport { Label } from \"@\u002Fcomponents\u002Fui\u002Flabel\"\n\n\u002F\u002F Use with react-hook-form for validation\nimport { useForm } from \"react-hook-form\"\n```\n\n### Dialog\u002FModal Patterns\n```typescript\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@\u002Fcomponents\u002Fui\u002Fdialog\"\n```\n\n### Data Display\n```typescript\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@\u002Fcomponents\u002Fui\u002Ftable\"\n```\n\n## Troubleshooting\n\n### Import Errors\n- Check `components.json` for correct alias configuration\n- Verify `tsconfig.json` includes the `@` path alias:\n  ```json\n  {\n    \"compilerOptions\": {\n      \"paths\": {\n        \"@\u002F*\": [\".\u002Fsrc\u002F*\"]\n      }\n    }\n  }\n  ```\n\n### Style Conflicts\n- Ensure Tailwind CSS is properly configured\n- Check that `globals.css` is imported in your root layout\n- Verify CSS variable names match between components and theme\n\n### Missing Dependencies\n- Run component installation via CLI to auto-install deps\n- Manually check `package.json` for required Radix UI packages\n- Use `get_component_metadata` to see dependency lists\n\n### Version Compatibility\n- shadcn\u002Fui v4 requires React 18+ and Next.js 13+ (if using Next.js)\n- Some components require specific Radix UI versions\n- Check documentation for breaking changes between versions\n\n## Validation and Quality\n\nBefore committing components:\n1. **Type check**: Run `tsc --noEmit` to verify TypeScript\n2. **Lint**: Run your linter to catch style issues\n3. **Test accessibility**: Use tools like axe DevTools\n4. **Visual QA**: Test in light and dark modes\n5. **Responsive check**: Verify behavior at different breakpoints\n\n## Resources\n\nRefer to the following resource files for detailed guidance:\n- `resources\u002Fsetup-guide.md` - Step-by-step project initialization\n- `resources\u002Fcomponent-catalog.md` - Complete component reference\n- `resources\u002Fcustomization-guide.md` - Theming and variant patterns\n- `resources\u002Fmigration-guide.md` - Upgrading from other UI libraries\n\n## Examples\n\nSee the `examples\u002F` directory for:\n- Complete component implementations\n- Form patterns with validation\n- Dashboard layouts\n- Authentication flows\n- Data table implementations\n",{"id":5,"name":5,"tier":47,"author":48,"status":32,"updated":49,"version":50,"description":7,"allowed-tools":6},1,"OmniClaw Core Team",1775088000000,"1.0.0","main","c173cdffe08e788a99b91928a831b476b8434838","ecosystem\u002Fui_components\u002Fshadcn_ui",0,"https:\u002F\u002Fgithub.com\u002FLongLeo287\u002FOmniClaw","https:\u002F\u002Fportfolio-longleo.vercel.app\u002Flabs\u002Fomniclaw.html","https:\u002F\u002Fgithub.com\u002FLongLeo287","https:\u002F\u002Fwww.facebook.com\u002FResourceRookie2023","2026-09-30 00:58:05",{"source":8,"skillName":5,"commands":61,"prompt":71,"zipAvailable":72},[62,65,68],{"tool":63,"command":64},"npx","npx skills add LongLeo287\u002FOmniClaw --skill shadcn-ui",{"tool":66,"command":67},"bunx","bunx skills add LongLeo287\u002FOmniClaw --skill shadcn-ui",{"tool":69,"command":70},"pnpm","pnpm dlx skills add LongLeo287\u002FOmniClaw --skill shadcn-ui","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FLongLeo287\u002FOmniClaw\u002Fblob\u002Fmain\u002Fecosystem\u002Fui_components\u002Fshadcn_ui\u002FSKILL.md",true,[74,80,84,90,94,98,102,107],{"path":75,"resourceType":76,"resourceTypeDesc":77,"sizeBytes":78,"sourceHtmlUrl":79},"_DIR_IDENTITY.md","REFERENCE","参考文档",200,"https:\u002F\u002Fgithub.com\u002FLongLeo287\u002FOmniClaw\u002Fblob\u002Fmain\u002Fecosystem\u002Fui_components\u002Fshadcn_ui\u002F_DIR_IDENTITY.md",{"path":81,"resourceType":76,"resourceTypeDesc":77,"sizeBytes":82,"sourceHtmlUrl":83},"examples\u002F_DIR_IDENTITY.md",205,"https:\u002F\u002Fgithub.com\u002FLongLeo287\u002FOmniClaw\u002Fblob\u002Fmain\u002Fecosystem\u002Fui_components\u002Fshadcn_ui\u002Fexamples\u002F_DIR_IDENTITY.md",{"path":85,"resourceType":86,"resourceTypeDesc":87,"sizeBytes":88,"sourceHtmlUrl":89},"examples\u002Fauth_layout.tsx","OTHER","其他",5770,"https:\u002F\u002Fgithub.com\u002FLongLeo287\u002FOmniClaw\u002Fblob\u002Fmain\u002Fecosystem\u002Fui_components\u002Fshadcn_ui\u002Fexamples\u002Fauth_layout.tsx",{"path":91,"resourceType":86,"resourceTypeDesc":87,"sizeBytes":92,"sourceHtmlUrl":93},"examples\u002Fdata_table.tsx",8903,"https:\u002F\u002Fgithub.com\u002FLongLeo287\u002FOmniClaw\u002Fblob\u002Fmain\u002Fecosystem\u002Fui_components\u002Fshadcn_ui\u002Fexamples\u002Fdata_table.tsx",{"path":95,"resourceType":86,"resourceTypeDesc":87,"sizeBytes":96,"sourceHtmlUrl":97},"examples\u002Fform_pattern.tsx",4954,"https:\u002F\u002Fgithub.com\u002FLongLeo287\u002FOmniClaw\u002Fblob\u002Fmain\u002Fecosystem\u002Fui_components\u002Fshadcn_ui\u002Fexamples\u002Fform_pattern.tsx",{"path":99,"resourceType":76,"resourceTypeDesc":77,"sizeBytes":100,"sourceHtmlUrl":101},"resources\u002F_DIR_IDENTITY.md",321,"https:\u002F\u002Fgithub.com\u002FLongLeo287\u002FOmniClaw\u002Fblob\u002Fmain\u002Fecosystem\u002Fui_components\u002Fshadcn_ui\u002Fresources\u002F_DIR_IDENTITY.md",{"path":103,"resourceType":104,"resourceTypeDesc":105,"sizeBytes":78,"sourceHtmlUrl":106},"scripts\u002F_DIR_IDENTITY.md","SCRIPT","脚本","https:\u002F\u002Fgithub.com\u002FLongLeo287\u002FOmniClaw\u002Fblob\u002Fmain\u002Fecosystem\u002Fui_components\u002Fshadcn_ui\u002Fscripts\u002F_DIR_IDENTITY.md",{"path":108,"resourceType":104,"resourceTypeDesc":105,"sizeBytes":109,"sourceHtmlUrl":110},"scripts\u002Fverify_setup.sh",4409,"https:\u002F\u002Fgithub.com\u002FLongLeo287\u002FOmniClaw\u002Fblob\u002Fmain\u002Fecosystem\u002Fui_components\u002Fshadcn_ui\u002Fscripts\u002Fverify_setup.sh",[112,147,175,191,218,240],{"skillNo":113,"name":114,"nameZh":6,"description":115,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":116,"categories":117,"keywords":130,"publishedAt":42},"01M6JR0KQP4MHT32TN40D9CBFX","UI-UX Pro Max","Advanced UI\u002FUX analysis and generation skills with data-driven patterns. Python scripts (core.py, search.py) for systematic UI pattern extraction, design system generation, and component search from curated data sources.","https:\u002F\u002Fgithub.com\u002FLongLeo287\u002FOmniClaw\u002Fblob\u002Fmain\u002Fecosystem\u002Fui_components\u002Fui_ux_pro_max\u002FSKILL.md",[118,123,126,127],{"categoryNo":119,"categoryName":120,"taxonomyType":121,"taxonomyTypeDesc":122},"01JBSEEDCAT000000000000015","视觉设计","SCENARIO","使用场景",{"categoryNo":124,"categoryName":125,"taxonomyType":121,"taxonomyTypeDesc":122},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":128,"categoryName":129,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000033","数据分析师",[131,25,132,133,134,135,136,41,137,138,36,139,140,32,141,142,143,144,145,146],"ux","ui ux pro max","max","pro","ui ux","design","search","analysis","rd","ui-ux","systematic","scripts","pattern extraction","sources","advanced","data-driven",{"skillNo":148,"name":149,"nameZh":6,"description":150,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":151,"categories":152,"keywords":156,"publishedAt":42},"01M6JR08F51BEN17RHFYX65WVE","zustand_store_ts","Create Zustand stores with TypeScript, subscribeWithSelector middleware, and proper state\u002Faction separation. Use when building React state management, creating global stores, or implementing reactive state patterns with Zustand.","https:\u002F\u002Fgithub.com\u002FLongLeo287\u002FOmniClaw\u002Fblob\u002Fmain\u002Fecosystem\u002Fskills\u002Fzustand_store_ts\u002FSKILL.md",[153],{"categoryNo":154,"categoryName":155,"taxonomyType":121,"taxonomyTypeDesc":122},"01JBSEEDCAT000000000000009","前端开发",[157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172,29,173,174],"zustand store ts","zustand","store","typescript","microsoft","react","create","state management","state","react state management","management","global","use","patterns","separation","middleware","action","implementing",{"skillNo":176,"name":158,"nameZh":6,"description":177,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":178,"categories":179,"keywords":180,"publishedAt":42},"01M6JR00TDMVAFFCZXZ04AN7Q7","Zustand state management guide. Use when working with store code (src\u002Fstore\u002F**), implementing actions, managing state, or creating slices. Triggers on Zustand store development, state management questions, or action implementation.","https:\u002F\u002Fgithub.com\u002FLongLeo287\u002FOmniClaw\u002Fblob\u002Fmain\u002Fecosystem\u002Fskills\u002Fzustand\u002FSKILL.md",[],[158,181,164,182,165,183,184,167,185,169,186,187,188,159,29,189,190,173,174],"development","code","actions","src","guide","implementation","zustand state","triggers","questions","zustand state management",{"skillNo":192,"name":193,"nameZh":6,"description":194,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":195,"categories":196,"keywords":201,"publishedAt":42},"01M6JQZSWV4KWJP112G6XHEP44","youtube_summarizer","Automatically fetch YouTube video transcripts, generate structured summaries, and send full transcripts to messaging platforms. Detects YouTube URLs and provides metadata, key insights, and downloadable transcripts.","https:\u002F\u002Fgithub.com\u002FLongLeo287\u002FOmniClaw\u002Fblob\u002Fmain\u002Fecosystem\u002Fskills\u002Fyoutube_summarizer\u002FSKILL.md",[197,200],{"categoryNo":198,"categoryName":199,"taxonomyType":121,"taxonomyTypeDesc":122},"01JBSEEDCAT000000000000016","图像与多媒体",{"categoryNo":124,"categoryName":125,"taxonomyType":121,"taxonomyTypeDesc":122},[202,203,204,205,206,207,208,209,210,211,212,213,214,215,216,217],"youtube","youtube summarizer","summarizer","generate","metadata","messaging","Video","fetch","telegram","transcription","summarization","structured","full","insights","transcripts","summaries",{"skillNo":219,"name":220,"nameZh":6,"description":221,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":222,"categories":223,"keywords":224,"publishedAt":42},"01M6JQZN3QJB6B77JGKJD62DQT","youtube_clipper","YouTube 视频智能剪辑工具。下载视频和字幕，AI 分析生成精细章节（几分钟级别）， 用户选择片段后自动剪辑、翻译字幕为中英双语、烧录字幕到视频，并生成总结文案。 使用场景：当用户需要剪辑 YouTube 视频、生成短视频片段、制作双语字幕版本时。 关键词：视频剪辑、YouTube、字幕翻译、双语字幕、视频下载、clip video","https:\u002F\u002Fgithub.com\u002FLongLeo287\u002FOmniClaw\u002Fblob\u002Fmain\u002Fecosystem\u002Fskills\u002Fyoutube_clipper\u002FSKILL.md",[],[202,225,226,208,227,228,229,230,231,232,233,234,235,236,237,238,239],"clipper","youtube clipper","Bash","下载","视频","生成","关键词","翻译","read","write","clip","总结","工具","文案","sonnet",{"skillNo":241,"name":242,"nameZh":6,"description":243,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":244,"categories":245,"keywords":250,"publishedAt":42},"01M6JQZGDW5Y1YABVVY8JHXS8S","xvary_stock_research","Thesis-driven equity analysis from public SEC EDGAR and market data; \u002Fanalyze, \u002Fscore, \u002Fcompare workflows with bundled Python tools (Claude Code, Cursor, Codex).","https:\u002F\u002Fgithub.com\u002FLongLeo287\u002FOmniClaw\u002Fblob\u002Fmain\u002Fecosystem\u002Fskills\u002Fxvary_stock_research\u002FSKILL.md",[246,249],{"categoryNo":247,"categoryName":248,"taxonomyType":121,"taxonomyTypeDesc":122},"01JBSEEDCAT000000000000021","资料检索与研究",{"categoryNo":124,"categoryName":125,"taxonomyType":121,"taxonomyTypeDesc":122},[251,252,253,254,255,256,257,182,258,259,138,260,261,262,263,264,265,29,266,267],"research","stock","xvary stock research","xvary","safe","python","workflows","data","Tools","analyze","Market","community","thesis","compare","equity","market data","sec edgar"]