[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6MTCRK8T8J96FSHF0FSGNGR":3,"skill-same:01M6MTCRK8T8J96FSHF0FSGNGR":464},{"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":28,"publishedAt":49,"linkOnly":50,"markdownContent":51,"markdownBody":52,"frontMatter":53,"refName":58,"commitSha":59,"skillDirectory":60,"forksCount":14,"repositoryHtmlUrl":61,"repositoryHomepageUrl":6,"ownerHtmlUrl":62,"ownerBlogUrl":6,"ownerDescription":63,"updatedAt":64,"install":65,"resources":78},"01M6MTCRK8T8J96FSHF0FSGNGR","ckm:ui-styling",null,"Create beautiful, accessible user interfaces with shadcn\u002Fui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.","guozhiwei01\u002FProj-Eye","guozhiwei01","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F146502954?v=4","01M6MS7FRVQTYM2JHCEQM2RW08","Guozhi Wei","01M6MS7FWVYD2XSDBZ83KJZC9T",0,"MIT","https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002FSKILL.md",[18,23],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48],"styling","ckm","ckm:ui styling","ui","ui styling","component","create","design systems","components","Tailwind","design","forms","across","layout","canvas","themes","utility","mode","implementing","css","2026-11-10 10:12:30",false,"---\nname: ckm:ui-styling\ndescription: Create beautiful, accessible user interfaces with shadcn\u002Fui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.\nargument-hint: \"[component or layout]\"\nlicense: MIT\nmetadata:\n  author: claudekit\n  version: \"1.0.0\"\n---\n\n# UI Styling Skill\n\nComprehensive skill for creating beautiful, accessible user interfaces combining shadcn\u002Fui components, Tailwind CSS utility styling, and canvas-based visual design systems.\n\n## Reference\n\n- shadcn\u002Fui: https:\u002F\u002Fui.shadcn.com\u002Fllms.txt\n- Tailwind CSS: https:\u002F\u002Ftailwindcss.com\u002Fdocs\n\n## When to Use This Skill\n\nUse when:\n- Building UI with React-based frameworks (Next.js, Vite, Remix, Astro)\n- Implementing accessible components (dialogs, forms, tables, navigation)\n- Styling with utility-first CSS approach\n- Creating responsive, mobile-first layouts\n- Implementing dark mode and theme customization\n- Building design systems with consistent tokens\n- Generating visual designs, posters, or brand materials\n- Rapid prototyping with immediate visual feedback\n- Adding complex UI patterns (data tables, charts, command palettes)\n\n## Core Stack\n\n### Component Layer: shadcn\u002Fui\n- Pre-built accessible components via Radix UI primitives\n- Copy-paste distribution model (components live in your codebase)\n- TypeScript-first with full type safety\n- Composable primitives for complex UIs\n- CLI-based installation and management\n\n### Styling Layer: Tailwind CSS\n- Utility-first CSS framework\n- Build-time processing with zero runtime overhead\n- Mobile-first responsive design\n- Consistent design tokens (colors, spacing, typography)\n- Automatic dead code elimination\n\n### Visual Design Layer: Canvas\n- Museum-quality visual compositions\n- Philosophy-driven design approach\n- Sophisticated visual communication\n- Minimal text, maximum visual impact\n- Systematic patterns and refined aesthetics\n\n## Quick Start\n\n### Component + Styling Setup\n\n**Install shadcn\u002Fui with Tailwind:**\n```bash\nnpx shadcn@latest init\n```\n\nCLI prompts for framework, TypeScript, paths, and theme preferences. This configures both shadcn\u002Fui and Tailwind CSS.\n\n**Add components:**\n```bash\nnpx shadcn@latest add button card dialog form\n```\n\n**Use components with utility styling:**\n```tsx\nimport { Button } from \"@\u002Fcomponents\u002Fui\u002Fbutton\"\nimport { Card, CardHeader, CardTitle, CardContent } from \"@\u002Fcomponents\u002Fui\u002Fcard\"\n\nexport function Dashboard() {\n  return (\n    \u003Cdiv className=\"container mx-auto p-6 grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      \u003CCard className=\"hover:shadow-lg transition-shadow\">\n        \u003CCardHeader>\n          \u003CCardTitle className=\"text-2xl font-bold\">Analytics\u003C\u002FCardTitle>\n        \u003C\u002FCardHeader>\n        \u003CCardContent className=\"space-y-4\">\n          \u003Cp className=\"text-muted-foreground\">View your metrics\u003C\u002Fp>\n          \u003CButton variant=\"default\" className=\"w-full\">\n            View Details\n          \u003C\u002FButton>\n        \u003C\u002FCardContent>\n      \u003C\u002FCard>\n    \u003C\u002Fdiv>\n  )\n}\n```\n\n### Alternative: Tailwind-Only Setup\n\n**Vite projects:**\n```bash\nnpm install -D tailwindcss @tailwindcss\u002Fvite\n```\n\n```javascript\n\u002F\u002F vite.config.ts\nimport tailwindcss from '@tailwindcss\u002Fvite'\nexport default { plugins: [tailwindcss()] }\n```\n\n```css\n\u002F* src\u002Findex.css *\u002F\n@import \"tailwindcss\";\n```\n\n## Component Library Guide\n\n**Comprehensive component catalog with usage patterns, installation, and composition examples.**\n\nSee: `references\u002Fshadcn-components.md`\n\nCovers:\n- Form & input components (Button, Input, Select, Checkbox, Date Picker, Form validation)\n- Layout & navigation (Card, Tabs, Accordion, Navigation Menu)\n- Overlays & dialogs (Dialog, Drawer, Popover, Toast, Command)\n- Feedback & status (Alert, Progress, Skeleton)\n- Display components (Table, Data Table, Avatar, Badge)\n\n## Theme & Customization\n\n**Theme configuration, CSS variables, dark mode implementation, and component customization.**\n\nSee: `references\u002Fshadcn-theming.md`\n\nCovers:\n- Dark mode setup with next-themes\n- CSS variable system\n- Color customization and palettes\n- Component variant customization\n- Theme toggle implementation\n\n## Accessibility Patterns\n\n**ARIA patterns, keyboard navigation, screen reader support, and accessible component usage.**\n\nSee: `references\u002Fshadcn-accessibility.md`\n\nCovers:\n- Radix UI accessibility features\n- Keyboard navigation patterns\n- Focus management\n- Screen reader announcements\n- Form validation accessibility\n\n## Tailwind Utilities\n\n**Core utility classes for layout, spacing, typography, colors, borders, and shadows.**\n\nSee: `references\u002Ftailwind-utilities.md`\n\nCovers:\n- Layout utilities (Flexbox, Grid, positioning)\n- Spacing system (padding, margin, gap)\n- Typography (font sizes, weights, alignment, line height)\n- Colors and backgrounds\n- Borders and shadows\n- Arbitrary values for custom styling\n\n## Responsive Design\n\n**Mobile-first breakpoints, responsive utilities, and adaptive layouts.**\n\nSee: `references\u002Ftailwind-responsive.md`\n\nCovers:\n- Mobile-first approach\n- Breakpoint system (sm, md, lg, xl, 2xl)\n- Responsive utility patterns\n- Container queries\n- Max-width queries\n- Custom breakpoints\n\n## Tailwind Customization\n\n**Config file structure, custom utilities, plugins, and theme extensions.**\n\nSee: `references\u002Ftailwind-customization.md`\n\nCovers:\n- @theme directive for custom tokens\n- Custom colors and fonts\n- Spacing and breakpoint extensions\n- Custom utility creation\n- Custom variants\n- Layer organization (@layer base, components, utilities)\n- Apply directive for component extraction\n\n## Visual Design System\n\n**Canvas-based design philosophy, visual communication principles, and sophisticated compositions.**\n\nSee: `references\u002Fcanvas-design-system.md`\n\nCovers:\n- Design philosophy approach\n- Visual communication over text\n- Systematic patterns and composition\n- Color, form, and spatial design\n- Minimal text integration\n- Museum-quality execution\n- Multi-page design systems\n\n## Utility Scripts\n\n**Python automation for component installation and configuration generation.**\n\n### shadcn_add.py\nAdd shadcn\u002Fui components with dependency handling:\n```bash\npython scripts\u002Fshadcn_add.py button card dialog\n```\n\n### tailwind_config_gen.py\nGenerate tailwind.config.js with custom theme:\n```bash\npython scripts\u002Ftailwind_config_gen.py --colors brand:blue --fonts display:Inter\n```\n\n## Best Practices\n\n1. **Component Composition**: Build complex UIs from simple, composable primitives\n2. **Utility-First Styling**: Use Tailwind classes directly; extract components only for true repetition\n3. **Mobile-First Responsive**: Start with mobile styles, layer responsive variants\n4. **Accessibility-First**: Leverage Radix UI primitives, add focus states, use semantic HTML\n5. **Design Tokens**: Use consistent spacing scale, color palettes, typography system\n6. **Dark Mode Consistency**: Apply dark variants to all themed elements\n7. **Performance**: Leverage automatic CSS purging, avoid dynamic class names\n8. **TypeScript**: Use full type safety for better DX\n9. **Visual Hierarchy**: Let composition guide attention, use spacing and color intentionally\n10. **Expert Craftsmanship**: Every detail matters - treat UI as a craft\n\n## Reference Navigation\n\n**Component Library**\n- `references\u002Fshadcn-components.md` - Complete component catalog\n- `references\u002Fshadcn-theming.md` - Theming and customization\n- `references\u002Fshadcn-accessibility.md` - Accessibility patterns\n\n**Styling System**\n- `references\u002Ftailwind-utilities.md` - Core utility classes\n- `references\u002Ftailwind-responsive.md` - Responsive design\n- `references\u002Ftailwind-customization.md` - Configuration and extensions\n\n**Visual Design**\n- `references\u002Fcanvas-design-system.md` - Design philosophy and canvas workflows\n\n**Automation**\n- `scripts\u002Fshadcn_add.py` - Component installation\n- `scripts\u002Ftailwind_config_gen.py` - Config generation\n\n## Common Patterns\n\n**Form with validation:**\n```tsx\nimport { useForm } from \"react-hook-form\"\nimport { zodResolver } from \"@hookform\u002Fresolvers\u002Fzod\"\nimport * as z from \"zod\"\nimport { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from \"@\u002Fcomponents\u002Fui\u002Fform\"\nimport { Input } from \"@\u002Fcomponents\u002Fui\u002Finput\"\nimport { Button } from \"@\u002Fcomponents\u002Fui\u002Fbutton\"\n\nconst schema = z.object({\n  email: z.string().email(),\n  password: z.string().min(8)\n})\n\nexport function LoginForm() {\n  const form = useForm({\n    resolver: zodResolver(schema),\n    defaultValues: { email: \"\", password: \"\" }\n  })\n\n  return (\n    \u003CForm {...form}>\n      \u003Cform onSubmit={form.handleSubmit(console.log)} className=\"space-y-6\">\n        \u003CFormField control={form.control} name=\"email\" render={({ field }) => (\n          \u003CFormItem>\n            \u003CFormLabel>Email\u003C\u002FFormLabel>\n            \u003CFormControl>\n              \u003CInput type=\"email\" {...field} \u002F>\n            \u003C\u002FFormControl>\n            \u003CFormMessage \u002F>\n          \u003C\u002FFormItem>\n        )} \u002F>\n        \u003CButton type=\"submit\" className=\"w-full\">Sign In\u003C\u002FButton>\n      \u003C\u002Fform>\n    \u003C\u002FForm>\n  )\n}\n```\n\n**Responsive layout with dark mode:**\n```tsx\n\u003Cdiv className=\"min-h-screen bg-white dark:bg-gray-900\">\n  \u003Cdiv className=\"container mx-auto px-4 py-8\">\n    \u003Cdiv className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\n      \u003CCard className=\"bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700\">\n        \u003CCardContent className=\"p-6\">\n          \u003Ch3 className=\"text-xl font-semibold text-gray-900 dark:text-white\">\n            Content\n          \u003C\u002Fh3>\n        \u003C\u002FCardContent>\n      \u003C\u002FCard>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n```\n\n## Resources\n\n- shadcn\u002Fui Docs: https:\u002F\u002Fui.shadcn.com\n- Tailwind CSS Docs: https:\u002F\u002Ftailwindcss.com\n- Radix UI: https:\u002F\u002Fradix-ui.com\n- Tailwind UI: https:\u002F\u002Ftailwindui.com\n- Headless UI: https:\u002F\u002Fheadlessui.com\n- v0 (AI UI Generator): https:\u002F\u002Fv0.dev\n","# UI Styling Skill\n\nComprehensive skill for creating beautiful, accessible user interfaces combining shadcn\u002Fui components, Tailwind CSS utility styling, and canvas-based visual design systems.\n\n## Reference\n\n- shadcn\u002Fui: https:\u002F\u002Fui.shadcn.com\u002Fllms.txt\n- Tailwind CSS: https:\u002F\u002Ftailwindcss.com\u002Fdocs\n\n## When to Use This Skill\n\nUse when:\n- Building UI with React-based frameworks (Next.js, Vite, Remix, Astro)\n- Implementing accessible components (dialogs, forms, tables, navigation)\n- Styling with utility-first CSS approach\n- Creating responsive, mobile-first layouts\n- Implementing dark mode and theme customization\n- Building design systems with consistent tokens\n- Generating visual designs, posters, or brand materials\n- Rapid prototyping with immediate visual feedback\n- Adding complex UI patterns (data tables, charts, command palettes)\n\n## Core Stack\n\n### Component Layer: shadcn\u002Fui\n- Pre-built accessible components via Radix UI primitives\n- Copy-paste distribution model (components live in your codebase)\n- TypeScript-first with full type safety\n- Composable primitives for complex UIs\n- CLI-based installation and management\n\n### Styling Layer: Tailwind CSS\n- Utility-first CSS framework\n- Build-time processing with zero runtime overhead\n- Mobile-first responsive design\n- Consistent design tokens (colors, spacing, typography)\n- Automatic dead code elimination\n\n### Visual Design Layer: Canvas\n- Museum-quality visual compositions\n- Philosophy-driven design approach\n- Sophisticated visual communication\n- Minimal text, maximum visual impact\n- Systematic patterns and refined aesthetics\n\n## Quick Start\n\n### Component + Styling Setup\n\n**Install shadcn\u002Fui with Tailwind:**\n```bash\nnpx shadcn@latest init\n```\n\nCLI prompts for framework, TypeScript, paths, and theme preferences. This configures both shadcn\u002Fui and Tailwind CSS.\n\n**Add components:**\n```bash\nnpx shadcn@latest add button card dialog form\n```\n\n**Use components with utility styling:**\n```tsx\nimport { Button } from \"@\u002Fcomponents\u002Fui\u002Fbutton\"\nimport { Card, CardHeader, CardTitle, CardContent } from \"@\u002Fcomponents\u002Fui\u002Fcard\"\n\nexport function Dashboard() {\n  return (\n    \u003Cdiv className=\"container mx-auto p-6 grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      \u003CCard className=\"hover:shadow-lg transition-shadow\">\n        \u003CCardHeader>\n          \u003CCardTitle className=\"text-2xl font-bold\">Analytics\u003C\u002FCardTitle>\n        \u003C\u002FCardHeader>\n        \u003CCardContent className=\"space-y-4\">\n          \u003Cp className=\"text-muted-foreground\">View your metrics\u003C\u002Fp>\n          \u003CButton variant=\"default\" className=\"w-full\">\n            View Details\n          \u003C\u002FButton>\n        \u003C\u002FCardContent>\n      \u003C\u002FCard>\n    \u003C\u002Fdiv>\n  )\n}\n```\n\n### Alternative: Tailwind-Only Setup\n\n**Vite projects:**\n```bash\nnpm install -D tailwindcss @tailwindcss\u002Fvite\n```\n\n```javascript\n\u002F\u002F vite.config.ts\nimport tailwindcss from '@tailwindcss\u002Fvite'\nexport default { plugins: [tailwindcss()] }\n```\n\n```css\n\u002F* src\u002Findex.css *\u002F\n@import \"tailwindcss\";\n```\n\n## Component Library Guide\n\n**Comprehensive component catalog with usage patterns, installation, and composition examples.**\n\nSee: `references\u002Fshadcn-components.md`\n\nCovers:\n- Form & input components (Button, Input, Select, Checkbox, Date Picker, Form validation)\n- Layout & navigation (Card, Tabs, Accordion, Navigation Menu)\n- Overlays & dialogs (Dialog, Drawer, Popover, Toast, Command)\n- Feedback & status (Alert, Progress, Skeleton)\n- Display components (Table, Data Table, Avatar, Badge)\n\n## Theme & Customization\n\n**Theme configuration, CSS variables, dark mode implementation, and component customization.**\n\nSee: `references\u002Fshadcn-theming.md`\n\nCovers:\n- Dark mode setup with next-themes\n- CSS variable system\n- Color customization and palettes\n- Component variant customization\n- Theme toggle implementation\n\n## Accessibility Patterns\n\n**ARIA patterns, keyboard navigation, screen reader support, and accessible component usage.**\n\nSee: `references\u002Fshadcn-accessibility.md`\n\nCovers:\n- Radix UI accessibility features\n- Keyboard navigation patterns\n- Focus management\n- Screen reader announcements\n- Form validation accessibility\n\n## Tailwind Utilities\n\n**Core utility classes for layout, spacing, typography, colors, borders, and shadows.**\n\nSee: `references\u002Ftailwind-utilities.md`\n\nCovers:\n- Layout utilities (Flexbox, Grid, positioning)\n- Spacing system (padding, margin, gap)\n- Typography (font sizes, weights, alignment, line height)\n- Colors and backgrounds\n- Borders and shadows\n- Arbitrary values for custom styling\n\n## Responsive Design\n\n**Mobile-first breakpoints, responsive utilities, and adaptive layouts.**\n\nSee: `references\u002Ftailwind-responsive.md`\n\nCovers:\n- Mobile-first approach\n- Breakpoint system (sm, md, lg, xl, 2xl)\n- Responsive utility patterns\n- Container queries\n- Max-width queries\n- Custom breakpoints\n\n## Tailwind Customization\n\n**Config file structure, custom utilities, plugins, and theme extensions.**\n\nSee: `references\u002Ftailwind-customization.md`\n\nCovers:\n- @theme directive for custom tokens\n- Custom colors and fonts\n- Spacing and breakpoint extensions\n- Custom utility creation\n- Custom variants\n- Layer organization (@layer base, components, utilities)\n- Apply directive for component extraction\n\n## Visual Design System\n\n**Canvas-based design philosophy, visual communication principles, and sophisticated compositions.**\n\nSee: `references\u002Fcanvas-design-system.md`\n\nCovers:\n- Design philosophy approach\n- Visual communication over text\n- Systematic patterns and composition\n- Color, form, and spatial design\n- Minimal text integration\n- Museum-quality execution\n- Multi-page design systems\n\n## Utility Scripts\n\n**Python automation for component installation and configuration generation.**\n\n### shadcn_add.py\nAdd shadcn\u002Fui components with dependency handling:\n```bash\npython scripts\u002Fshadcn_add.py button card dialog\n```\n\n### tailwind_config_gen.py\nGenerate tailwind.config.js with custom theme:\n```bash\npython scripts\u002Ftailwind_config_gen.py --colors brand:blue --fonts display:Inter\n```\n\n## Best Practices\n\n1. **Component Composition**: Build complex UIs from simple, composable primitives\n2. **Utility-First Styling**: Use Tailwind classes directly; extract components only for true repetition\n3. **Mobile-First Responsive**: Start with mobile styles, layer responsive variants\n4. **Accessibility-First**: Leverage Radix UI primitives, add focus states, use semantic HTML\n5. **Design Tokens**: Use consistent spacing scale, color palettes, typography system\n6. **Dark Mode Consistency**: Apply dark variants to all themed elements\n7. **Performance**: Leverage automatic CSS purging, avoid dynamic class names\n8. **TypeScript**: Use full type safety for better DX\n9. **Visual Hierarchy**: Let composition guide attention, use spacing and color intentionally\n10. **Expert Craftsmanship**: Every detail matters - treat UI as a craft\n\n## Reference Navigation\n\n**Component Library**\n- `references\u002Fshadcn-components.md` - Complete component catalog\n- `references\u002Fshadcn-theming.md` - Theming and customization\n- `references\u002Fshadcn-accessibility.md` - Accessibility patterns\n\n**Styling System**\n- `references\u002Ftailwind-utilities.md` - Core utility classes\n- `references\u002Ftailwind-responsive.md` - Responsive design\n- `references\u002Ftailwind-customization.md` - Configuration and extensions\n\n**Visual Design**\n- `references\u002Fcanvas-design-system.md` - Design philosophy and canvas workflows\n\n**Automation**\n- `scripts\u002Fshadcn_add.py` - Component installation\n- `scripts\u002Ftailwind_config_gen.py` - Config generation\n\n## Common Patterns\n\n**Form with validation:**\n```tsx\nimport { useForm } from \"react-hook-form\"\nimport { zodResolver } from \"@hookform\u002Fresolvers\u002Fzod\"\nimport * as z from \"zod\"\nimport { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from \"@\u002Fcomponents\u002Fui\u002Fform\"\nimport { Input } from \"@\u002Fcomponents\u002Fui\u002Finput\"\nimport { Button } from \"@\u002Fcomponents\u002Fui\u002Fbutton\"\n\nconst schema = z.object({\n  email: z.string().email(),\n  password: z.string().min(8)\n})\n\nexport function LoginForm() {\n  const form = useForm({\n    resolver: zodResolver(schema),\n    defaultValues: { email: \"\", password: \"\" }\n  })\n\n  return (\n    \u003CForm {...form}>\n      \u003Cform onSubmit={form.handleSubmit(console.log)} className=\"space-y-6\">\n        \u003CFormField control={form.control} name=\"email\" render={({ field }) => (\n          \u003CFormItem>\n            \u003CFormLabel>Email\u003C\u002FFormLabel>\n            \u003CFormControl>\n              \u003CInput type=\"email\" {...field} \u002F>\n            \u003C\u002FFormControl>\n            \u003CFormMessage \u002F>\n          \u003C\u002FFormItem>\n        )} \u002F>\n        \u003CButton type=\"submit\" className=\"w-full\">Sign In\u003C\u002FButton>\n      \u003C\u002Fform>\n    \u003C\u002FForm>\n  )\n}\n```\n\n**Responsive layout with dark mode:**\n```tsx\n\u003Cdiv className=\"min-h-screen bg-white dark:bg-gray-900\">\n  \u003Cdiv className=\"container mx-auto px-4 py-8\">\n    \u003Cdiv className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\n      \u003CCard className=\"bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700\">\n        \u003CCardContent className=\"p-6\">\n          \u003Ch3 className=\"text-xl font-semibold text-gray-900 dark:text-white\">\n            Content\n          \u003C\u002Fh3>\n        \u003C\u002FCardContent>\n      \u003C\u002FCard>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n```\n\n## Resources\n\n- shadcn\u002Fui Docs: https:\u002F\u002Fui.shadcn.com\n- Tailwind CSS Docs: https:\u002F\u002Ftailwindcss.com\n- Radix UI: https:\u002F\u002Fradix-ui.com\n- Tailwind UI: https:\u002F\u002Ftailwindui.com\n- Headless UI: https:\u002F\u002Fheadlessui.com\n- v0 (AI UI Generator): https:\u002F\u002Fv0.dev\n",{"name":5,"license":15,"metadata":54,"description":7,"argument-hint":57},{"author":55,"version":56},"claudekit","1.0.0","[component or layout]","main","260ba36e88ba92e271d49a57a261d2988217a74f",".windsurf\u002Fskills\u002Fckm-ui-styling","https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye","https:\u002F\u002Fgithub.com\u002Fguozhiwei01","I am Guozhi Wei, an undergraduate student, nice to meet you. ","2026-04-30 21:59:20",{"source":8,"skillName":5,"commands":66,"prompt":76,"zipAvailable":77},[67,70,73],{"tool":68,"command":69},"npx","npx skills add guozhiwei01\u002FProj-Eye --skill \"ckm:ui-styling\"",{"tool":71,"command":72},"bunx","bunx skills add guozhiwei01\u002FProj-Eye --skill \"ckm:ui-styling\"",{"tool":74,"command":75},"pnpm","pnpm dlx skills add guozhiwei01\u002FProj-Eye --skill \"ckm:ui-styling\"","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002FSKILL.md",true,[79,85,91,95,99,103,107,111,115,119,123,127,131,135,139,143,147,151,155,159,163,167,171,175,179,183,187,191,195,199,203,207,211,215,218,222,226,230,233,237,241,245,249,253,257,261,265,269,273,277,281,285,289,293,296,300,303,307,311,315,319,323,327,331,335,339,342,346,349,353,357,361,365,369,373,377,381,385,388,392,396,400,406,410,414,418,422,426,430,434,440,444,448,452,456,460],{"path":80,"resourceType":81,"resourceTypeDesc":82,"sizeBytes":83,"sourceHtmlUrl":84},"canvas-fonts\u002FArsenalSC-OFL.txt","REFERENCE","参考文档",4373,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FArsenalSC-OFL.txt",{"path":86,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":89,"sourceHtmlUrl":90},"canvas-fonts\u002FArsenalSC-Regular.ttf","ASSET","资产文件",165848,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FArsenalSC-Regular.ttf",{"path":92,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":93,"sourceHtmlUrl":94},"canvas-fonts\u002FBigShoulders-Bold.ttf",94528,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FBigShoulders-Bold.ttf",{"path":96,"resourceType":81,"resourceTypeDesc":82,"sizeBytes":97,"sourceHtmlUrl":98},"canvas-fonts\u002FBigShoulders-OFL.txt",4397,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FBigShoulders-OFL.txt",{"path":100,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":101,"sourceHtmlUrl":102},"canvas-fonts\u002FBigShoulders-Regular.ttf",94396,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FBigShoulders-Regular.ttf",{"path":104,"resourceType":81,"resourceTypeDesc":82,"sizeBytes":105,"sourceHtmlUrl":106},"canvas-fonts\u002FBoldonse-OFL.txt",4390,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FBoldonse-OFL.txt",{"path":108,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":109,"sourceHtmlUrl":110},"canvas-fonts\u002FBoldonse-Regular.ttf",77168,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FBoldonse-Regular.ttf",{"path":112,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":113,"sourceHtmlUrl":114},"canvas-fonts\u002FBricolageGrotesque-Bold.ttf",90952,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FBricolageGrotesque-Bold.ttf",{"path":116,"resourceType":81,"resourceTypeDesc":82,"sizeBytes":117,"sourceHtmlUrl":118},"canvas-fonts\u002FBricolageGrotesque-OFL.txt",4403,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FBricolageGrotesque-OFL.txt",{"path":120,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":121,"sourceHtmlUrl":122},"canvas-fonts\u002FBricolageGrotesque-Regular.ttf",90920,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FBricolageGrotesque-Regular.ttf",{"path":124,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":125,"sourceHtmlUrl":126},"canvas-fonts\u002FCrimsonPro-Bold.ttf",107352,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FCrimsonPro-Bold.ttf",{"path":128,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":129,"sourceHtmlUrl":130},"canvas-fonts\u002FCrimsonPro-Italic.ttf",108828,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FCrimsonPro-Italic.ttf",{"path":132,"resourceType":81,"resourceTypeDesc":82,"sizeBytes":133,"sourceHtmlUrl":134},"canvas-fonts\u002FCrimsonPro-OFL.txt",4394,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FCrimsonPro-OFL.txt",{"path":136,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":137,"sourceHtmlUrl":138},"canvas-fonts\u002FCrimsonPro-Regular.ttf",106696,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FCrimsonPro-Regular.ttf",{"path":140,"resourceType":81,"resourceTypeDesc":82,"sizeBytes":141,"sourceHtmlUrl":142},"canvas-fonts\u002FDMMono-OFL.txt",4392,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FDMMono-OFL.txt",{"path":144,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":145,"sourceHtmlUrl":146},"canvas-fonts\u002FDMMono-Regular.ttf",48852,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FDMMono-Regular.ttf",{"path":148,"resourceType":81,"resourceTypeDesc":82,"sizeBytes":149,"sourceHtmlUrl":150},"canvas-fonts\u002FEricaOne-OFL.txt",4410,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FEricaOne-OFL.txt",{"path":152,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":153,"sourceHtmlUrl":154},"canvas-fonts\u002FEricaOne-Regular.ttf",24872,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FEricaOne-Regular.ttf",{"path":156,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":157,"sourceHtmlUrl":158},"canvas-fonts\u002FGeistMono-Bold.ttf",78304,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FGeistMono-Bold.ttf",{"path":160,"resourceType":81,"resourceTypeDesc":82,"sizeBytes":161,"sourceHtmlUrl":162},"canvas-fonts\u002FGeistMono-OFL.txt",4388,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FGeistMono-OFL.txt",{"path":164,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":165,"sourceHtmlUrl":166},"canvas-fonts\u002FGeistMono-Regular.ttf",78232,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FGeistMono-Regular.ttf",{"path":168,"resourceType":81,"resourceTypeDesc":82,"sizeBytes":169,"sourceHtmlUrl":170},"canvas-fonts\u002FGloock-OFL.txt",4381,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FGloock-OFL.txt",{"path":172,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":173,"sourceHtmlUrl":174},"canvas-fonts\u002FGloock-Regular.ttf",95156,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FGloock-Regular.ttf",{"path":176,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":177,"sourceHtmlUrl":178},"canvas-fonts\u002FIBMPlexMono-Bold.ttf",136008,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FIBMPlexMono-Bold.ttf",{"path":180,"resourceType":81,"resourceTypeDesc":82,"sizeBytes":181,"sourceHtmlUrl":182},"canvas-fonts\u002FIBMPlexMono-OFL.txt",4363,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FIBMPlexMono-OFL.txt",{"path":184,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":185,"sourceHtmlUrl":186},"canvas-fonts\u002FIBMPlexMono-Regular.ttf",133796,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FIBMPlexMono-Regular.ttf",{"path":188,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":189,"sourceHtmlUrl":190},"canvas-fonts\u002FIBMPlexSerif-Bold.ttf",161000,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FIBMPlexSerif-Bold.ttf",{"path":192,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":193,"sourceHtmlUrl":194},"canvas-fonts\u002FIBMPlexSerif-BoldItalic.ttf",169840,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FIBMPlexSerif-BoldItalic.ttf",{"path":196,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":197,"sourceHtmlUrl":198},"canvas-fonts\u002FIBMPlexSerif-Italic.ttf",170004,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FIBMPlexSerif-Italic.ttf",{"path":200,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":201,"sourceHtmlUrl":202},"canvas-fonts\u002FIBMPlexSerif-Regular.ttf",160380,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FIBMPlexSerif-Regular.ttf",{"path":204,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":205,"sourceHtmlUrl":206},"canvas-fonts\u002FInstrumentSans-Bold.ttf",68084,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FInstrumentSans-Bold.ttf",{"path":208,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":209,"sourceHtmlUrl":210},"canvas-fonts\u002FInstrumentSans-BoldItalic.ttf",70004,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FInstrumentSans-BoldItalic.ttf",{"path":212,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":213,"sourceHtmlUrl":214},"canvas-fonts\u002FInstrumentSans-Italic.ttf",69900,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FInstrumentSans-Italic.ttf",{"path":216,"resourceType":81,"resourceTypeDesc":82,"sizeBytes":117,"sourceHtmlUrl":217},"canvas-fonts\u002FInstrumentSans-OFL.txt","https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FInstrumentSans-OFL.txt",{"path":219,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":220,"sourceHtmlUrl":221},"canvas-fonts\u002FInstrumentSans-Regular.ttf",68028,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FInstrumentSans-Regular.ttf",{"path":223,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":224,"sourceHtmlUrl":225},"canvas-fonts\u002FInstrumentSerif-Italic.ttf",70868,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FInstrumentSerif-Italic.ttf",{"path":227,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":228,"sourceHtmlUrl":229},"canvas-fonts\u002FInstrumentSerif-Regular.ttf",69312,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FInstrumentSerif-Regular.ttf",{"path":231,"resourceType":81,"resourceTypeDesc":82,"sizeBytes":133,"sourceHtmlUrl":232},"canvas-fonts\u002FItaliana-OFL.txt","https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FItaliana-OFL.txt",{"path":234,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":235,"sourceHtmlUrl":236},"canvas-fonts\u002FItaliana-Regular.ttf",27184,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FItaliana-Regular.ttf",{"path":238,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":239,"sourceHtmlUrl":240},"canvas-fonts\u002FJetBrainsMono-Bold.ttf",114828,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FJetBrainsMono-Bold.ttf",{"path":242,"resourceType":81,"resourceTypeDesc":82,"sizeBytes":243,"sourceHtmlUrl":244},"canvas-fonts\u002FJetBrainsMono-OFL.txt",4399,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FJetBrainsMono-OFL.txt",{"path":246,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":247,"sourceHtmlUrl":248},"canvas-fonts\u002FJetBrainsMono-Regular.ttf",114904,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FJetBrainsMono-Regular.ttf",{"path":250,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":251,"sourceHtmlUrl":252},"canvas-fonts\u002FJura-Light.ttf",154308,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FJura-Light.ttf",{"path":254,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":255,"sourceHtmlUrl":256},"canvas-fonts\u002FJura-Medium.ttf",154488,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FJura-Medium.ttf",{"path":258,"resourceType":81,"resourceTypeDesc":82,"sizeBytes":259,"sourceHtmlUrl":260},"canvas-fonts\u002FJura-OFL.txt",4380,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FJura-OFL.txt",{"path":262,"resourceType":81,"resourceTypeDesc":82,"sizeBytes":263,"sourceHtmlUrl":264},"canvas-fonts\u002FLibreBaskerville-OFL.txt",4449,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FLibreBaskerville-OFL.txt",{"path":266,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":267,"sourceHtmlUrl":268},"canvas-fonts\u002FLibreBaskerville-Regular.ttf",147584,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FLibreBaskerville-Regular.ttf",{"path":270,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":271,"sourceHtmlUrl":272},"canvas-fonts\u002FLora-Bold.ttf",133828,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FLora-Bold.ttf",{"path":274,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":275,"sourceHtmlUrl":276},"canvas-fonts\u002FLora-BoldItalic.ttf",140332,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FLora-BoldItalic.ttf",{"path":278,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":279,"sourceHtmlUrl":280},"canvas-fonts\u002FLora-Italic.ttf",139328,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FLora-Italic.ttf",{"path":282,"resourceType":81,"resourceTypeDesc":82,"sizeBytes":283,"sourceHtmlUrl":284},"canvas-fonts\u002FLora-OFL.txt",4423,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FLora-OFL.txt",{"path":286,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":287,"sourceHtmlUrl":288},"canvas-fonts\u002FLora-Regular.ttf",133888,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FLora-Regular.ttf",{"path":290,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":291,"sourceHtmlUrl":292},"canvas-fonts\u002FNationalPark-Bold.ttf",79208,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FNationalPark-Bold.ttf",{"path":294,"resourceType":81,"resourceTypeDesc":82,"sizeBytes":243,"sourceHtmlUrl":295},"canvas-fonts\u002FNationalPark-OFL.txt","https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FNationalPark-OFL.txt",{"path":297,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":298,"sourceHtmlUrl":299},"canvas-fonts\u002FNationalPark-Regular.ttf",76424,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FNationalPark-Regular.ttf",{"path":301,"resourceType":81,"resourceTypeDesc":82,"sizeBytes":181,"sourceHtmlUrl":302},"canvas-fonts\u002FNothingYouCouldDo-OFL.txt","https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FNothingYouCouldDo-OFL.txt",{"path":304,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":305,"sourceHtmlUrl":306},"canvas-fonts\u002FNothingYouCouldDo-Regular.ttf",32020,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FNothingYouCouldDo-Regular.ttf",{"path":308,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":309,"sourceHtmlUrl":310},"canvas-fonts\u002FOutfit-Bold.ttf",55392,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FOutfit-Bold.ttf",{"path":312,"resourceType":81,"resourceTypeDesc":82,"sizeBytes":313,"sourceHtmlUrl":314},"canvas-fonts\u002FOutfit-OFL.txt",4389,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FOutfit-OFL.txt",{"path":316,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":317,"sourceHtmlUrl":318},"canvas-fonts\u002FOutfit-Regular.ttf",54912,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FOutfit-Regular.ttf",{"path":320,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":321,"sourceHtmlUrl":322},"canvas-fonts\u002FPixelifySans-Medium.ttf",51072,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FPixelifySans-Medium.ttf",{"path":324,"resourceType":81,"resourceTypeDesc":82,"sizeBytes":325,"sourceHtmlUrl":326},"canvas-fonts\u002FPixelifySans-OFL.txt",4395,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FPixelifySans-OFL.txt",{"path":328,"resourceType":81,"resourceTypeDesc":82,"sizeBytes":329,"sourceHtmlUrl":330},"canvas-fonts\u002FPoiretOne-OFL.txt",4366,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FPoiretOne-OFL.txt",{"path":332,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":333,"sourceHtmlUrl":334},"canvas-fonts\u002FPoiretOne-Regular.ttf",45244,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FPoiretOne-Regular.ttf",{"path":336,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":337,"sourceHtmlUrl":338},"canvas-fonts\u002FRedHatMono-Bold.ttf",34420,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FRedHatMono-Bold.ttf",{"path":340,"resourceType":81,"resourceTypeDesc":82,"sizeBytes":133,"sourceHtmlUrl":341},"canvas-fonts\u002FRedHatMono-OFL.txt","https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FRedHatMono-OFL.txt",{"path":343,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":344,"sourceHtmlUrl":345},"canvas-fonts\u002FRedHatMono-Regular.ttf",34488,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FRedHatMono-Regular.ttf",{"path":347,"resourceType":81,"resourceTypeDesc":82,"sizeBytes":133,"sourceHtmlUrl":348},"canvas-fonts\u002FSilkscreen-OFL.txt","https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FSilkscreen-OFL.txt",{"path":350,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":351,"sourceHtmlUrl":352},"canvas-fonts\u002FSilkscreen-Regular.ttf",31960,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FSilkscreen-Regular.ttf",{"path":354,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":355,"sourceHtmlUrl":356},"canvas-fonts\u002FSmoochSans-Medium.ttf",59704,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FSmoochSans-Medium.ttf",{"path":358,"resourceType":81,"resourceTypeDesc":82,"sizeBytes":359,"sourceHtmlUrl":360},"canvas-fonts\u002FSmoochSans-OFL.txt",4396,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FSmoochSans-OFL.txt",{"path":362,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":363,"sourceHtmlUrl":364},"canvas-fonts\u002FTektur-Medium.ttf",76248,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FTektur-Medium.ttf",{"path":366,"resourceType":81,"resourceTypeDesc":82,"sizeBytes":367,"sourceHtmlUrl":368},"canvas-fonts\u002FTektur-OFL.txt",4385,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FTektur-OFL.txt",{"path":370,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":371,"sourceHtmlUrl":372},"canvas-fonts\u002FTektur-Regular.ttf",75604,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FTektur-Regular.ttf",{"path":374,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":375,"sourceHtmlUrl":376},"canvas-fonts\u002FWorkSans-Bold.ttf",191304,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FWorkSans-Bold.ttf",{"path":378,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":379,"sourceHtmlUrl":380},"canvas-fonts\u002FWorkSans-BoldItalic.ttf",175772,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FWorkSans-BoldItalic.ttf",{"path":382,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":383,"sourceHtmlUrl":384},"canvas-fonts\u002FWorkSans-Italic.ttf",174280,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FWorkSans-Italic.ttf",{"path":386,"resourceType":81,"resourceTypeDesc":82,"sizeBytes":97,"sourceHtmlUrl":387},"canvas-fonts\u002FWorkSans-OFL.txt","https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FWorkSans-OFL.txt",{"path":389,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":390,"sourceHtmlUrl":391},"canvas-fonts\u002FWorkSans-Regular.ttf",188916,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FWorkSans-Regular.ttf",{"path":393,"resourceType":81,"resourceTypeDesc":82,"sizeBytes":394,"sourceHtmlUrl":395},"canvas-fonts\u002FYoungSerif-OFL.txt",4398,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FYoungSerif-OFL.txt",{"path":397,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":398,"sourceHtmlUrl":399},"canvas-fonts\u002FYoungSerif-Regular.ttf",105136,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fcanvas-fonts\u002FYoungSerif-Regular.ttf",{"path":401,"resourceType":402,"resourceTypeDesc":403,"sizeBytes":404,"sourceHtmlUrl":405},"LICENSE.txt","LICENSE","许可证",11357,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002FLICENSE.txt",{"path":407,"resourceType":81,"resourceTypeDesc":82,"sizeBytes":408,"sourceHtmlUrl":409},"references\u002Fcanvas-design-system.md",7888,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Freferences\u002Fcanvas-design-system.md",{"path":411,"resourceType":81,"resourceTypeDesc":82,"sizeBytes":412,"sourceHtmlUrl":413},"references\u002Fshadcn-accessibility.md",9976,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Freferences\u002Fshadcn-accessibility.md",{"path":415,"resourceType":81,"resourceTypeDesc":82,"sizeBytes":416,"sourceHtmlUrl":417},"references\u002Fshadcn-components.md",11155,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Freferences\u002Fshadcn-components.md",{"path":419,"resourceType":81,"resourceTypeDesc":82,"sizeBytes":420,"sourceHtmlUrl":421},"references\u002Fshadcn-theming.md",8672,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Freferences\u002Fshadcn-theming.md",{"path":423,"resourceType":81,"resourceTypeDesc":82,"sizeBytes":424,"sourceHtmlUrl":425},"references\u002Ftailwind-customization.md",10171,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Freferences\u002Ftailwind-customization.md",{"path":427,"resourceType":81,"resourceTypeDesc":82,"sizeBytes":428,"sourceHtmlUrl":429},"references\u002Ftailwind-responsive.md",8270,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Freferences\u002Ftailwind-responsive.md",{"path":431,"resourceType":81,"resourceTypeDesc":82,"sizeBytes":432,"sourceHtmlUrl":433},"references\u002Ftailwind-utilities.md",9980,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Freferences\u002Ftailwind-utilities.md",{"path":435,"resourceType":436,"resourceTypeDesc":437,"sizeBytes":438,"sourceHtmlUrl":439},"scripts\u002Frequirements.txt","SCRIPT","脚本",444,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fscripts\u002Frequirements.txt",{"path":441,"resourceType":436,"resourceTypeDesc":437,"sizeBytes":442,"sourceHtmlUrl":443},"scripts\u002Fshadcn_add.py",7991,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fscripts\u002Fshadcn_add.py",{"path":445,"resourceType":436,"resourceTypeDesc":437,"sizeBytes":446,"sourceHtmlUrl":447},"scripts\u002Ftailwind_config_gen.py",13625,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fscripts\u002Ftailwind_config_gen.py",{"path":449,"resourceType":436,"resourceTypeDesc":437,"sizeBytes":450,"sourceHtmlUrl":451},"scripts\u002Ftests\u002Fcoverage-ui.json",35121,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fscripts\u002Ftests\u002Fcoverage-ui.json",{"path":453,"resourceType":436,"resourceTypeDesc":437,"sizeBytes":454,"sourceHtmlUrl":455},"scripts\u002Ftests\u002Frequirements.txt",52,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fscripts\u002Ftests\u002Frequirements.txt",{"path":457,"resourceType":436,"resourceTypeDesc":437,"sizeBytes":458,"sourceHtmlUrl":459},"scripts\u002Ftests\u002Ftest_shadcn_add.py",9920,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fscripts\u002Ftests\u002Ftest_shadcn_add.py",{"path":461,"resourceType":436,"resourceTypeDesc":437,"sizeBytes":462,"sourceHtmlUrl":463},"scripts\u002Ftests\u002Ftest_tailwind_config_gen.py",12158,"https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002F.windsurf\u002Fskills\u002Fckm-ui-styling\u002Fscripts\u002Ftests\u002Ftest_tailwind_config_gen.py",[465,491,515,536,554,561],{"skillNo":466,"name":467,"nameZh":6,"description":468,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":469,"categories":470,"keywords":474,"publishedAt":49},"01M6MTP1AFT8208EQ75Z0BPTKG","vercel-react-view-transitions","Guide for implementing smooth, native-feeling animations using React's View Transition API (`\u003CViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter\u002Fexit of components, animate list reorder, implement directional (forward\u002Fback) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view transitions, `startViewTransition`, `ViewTransition`, transition types, or asks about animating between UI states in React without third-party animation libraries.","https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002Fskills\u002Fvercel-react-view-transitions\u002FSKILL.md",[471],{"categoryNo":472,"categoryName":473,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发",[475,476,477,478,479,480,48,37,481,35,482,483,484,485,486,487,488,489,47,490],"react","view","vercel","vercel react view transitions","react view transitions","transitions","libraries","api","Animation","back","route","shared","element","types","states","transition",{"skillNo":492,"name":493,"nameZh":6,"description":494,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":495,"categories":496,"keywords":498,"publishedAt":49},"01M6MTNVC2DS85K7KHAGJK7X1D","vercel-react-native-skills","React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.","https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002Fskills\u002Fvercel-react-native-skills\u002FSKILL.md",[497],{"categoryNo":472,"categoryName":473,"taxonomyType":21,"taxonomyTypeDesc":22},[475,499,500,477,501,502,503,37,504,505,506,507,508,509,510,511,512,513,47,514],"vercel react native skills","react native","react native skills","native","performance","tasks","best practices","use","modules","mobile","platform","triggers","apps","react native components","with","for",{"skillNo":516,"name":517,"nameZh":6,"description":518,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":519,"categories":520,"keywords":522,"publishedAt":49},"01M6MTNKBT63PJ8HMG12YFF9QA","vercel-react-best-practices","React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React\u002FNext.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.","https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002Fskills\u002Fvercel-react-best-practices\u002FSKILL.md",[521],{"categoryNo":472,"categoryName":473,"taxonomyType":21,"taxonomyTypeDesc":22},[475,523,505,524,477,525,503,37,526,527,504,528,529,530,531,532,533,534,510,535],"vercel react best practices","react best practices","writing","react components","guidelines","code","Optimization","data","refactoring","patterns","next","pages","data fetching",{"skillNo":537,"name":538,"nameZh":6,"description":539,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":540,"categories":541,"keywords":543,"publishedAt":49},"01M6MTNF8H8QEGAV8YPQY40ZP5","vercel-composition-patterns","React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.","https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002Fskills\u002Fvercel-composition-patterns\u002FSKILL.md",[542],{"categoryNo":472,"categoryName":473,"taxonomyType":21,"taxonomyTypeDesc":22},[544,545,477,532,546,37,475,547,504,481,548,482,549,506,550,510,551,552,513,553],"Composition","vercel composition patterns","composition patterns","architecture","component architecture","react composition","reusable","react 19","render","react composition patterns",{"skillNo":555,"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":556,"categories":557,"keywords":560,"publishedAt":49},"01M6MTJPBZ496Z9P9Y8GSRPQBG","https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002Fskills\u002Fckm-ui-styling\u002FSKILL.md",[558,559],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},[33,32,29,31,30,39,48,43,37,34,35,36,38,40,41,42,44,45,46,47],{"skillNo":562,"name":563,"nameZh":6,"description":564,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":565,"categories":566,"keywords":575,"publishedAt":49},"01M6MTJBHN6ZMCDARB56824GE0","ckm:design","Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social\u002Fads\u002Fweb\u002Fprint), icon design (15 styles, SVG, Gemini 3.1 Pro), social photos (HTML→screenshot, multi-platform). Actions: design logo, create CIP, generate mockups, build slides, design banner, generate icon, create social photos, social media images, brand identity, design system. Platforms: Facebook, Twitter, LinkedIn, YouTube, Instagram, Pinterest, TikTok, Threads, Google Ads.","https:\u002F\u002Fgithub.com\u002Fguozhiwei01\u002FProj-Eye\u002Fblob\u002Fmain\u002Fskills\u002Fckm-design\u002FSKILL.md",[567,570,571,574],{"categoryNo":568,"categoryName":569,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000003","演示文稿",{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":572,"categoryName":573,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},[39,563,30,576,33,577,35,578,579,580,581,582,583,584,585,586,587,588,589,590],"google","presentations","generate","screenshot","actions","Media","logo","ads","images","youtube","tiktok","social","chart","threads","icon design"]