[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6FCYF7AXKSNDM4W4455B5WR":3,"skill-same:01M6FCYF7AXKSNDM4W4455B5WR":108},{"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":31,"publishedAt":52,"linkOnly":53,"markdownContent":54,"markdownBody":55,"frontMatter":56,"refName":61,"commitSha":62,"skillDirectory":63,"forksCount":64,"repositoryHtmlUrl":65,"repositoryHomepageUrl":6,"ownerHtmlUrl":66,"ownerBlogUrl":67,"ownerDescription":68,"updatedAt":69,"install":70,"resources":83},"01M6FCYF7AXKSNDM4W4455B5WR","design-system-starter",null,"Create and evolve design systems with design tokens, component architecture, accessibility guidelines, and documentation templates. Ensures consistent, scalable, and accessible UI across products.","Dicklesworthstone\u002Fpi_agent_rust","Dicklesworthstone","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F35050222?v=4","01M6CG26AR942CSVMN1M5E3DSE","Jeff Emanuel","01M6CG26EPP71PSHW1VDS71121",1992,"MIT","https:\u002F\u002Fgithub.com\u002FDicklesworthstone\u002Fpi_agent_rust\u002Fblob\u002Fmain\u002Ftests\u002Fext_conformance\u002Fartifacts\u002Ftemplates-davila7\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fdevelopment\u002Fdesign-system-starter\u002FSKILL.md",[18,23,26],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":27,"categoryName":28,"taxonomyType":29,"taxonomyTypeDesc":30},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51],"design","starter","design system","system","design system starter","design-tokens","frontend","Scalable","across","design-system","evolve","documentation templates","ui","design systems","component architecture","create","documentation","architecture","component","components","2026-11-10 10:12:30",false,"---\nname: design-system-starter\ndescription: Create and evolve design systems with design tokens, component architecture, accessibility guidelines, and documentation templates. Ensures consistent, scalable, and accessible UI across products.\nlicense: MIT\nmetadata:\n  version: 1.0.0\n  tags: [design-system, ui, components, design-tokens, accessibility, frontend]\n---\n\n# Design System Starter\n\nBuild robust, scalable design systems that ensure visual consistency and exceptional user experiences.\n\n---\n\n## Quick Start\n\nJust describe what you need:\n\n```\nCreate a design system for my React app with dark mode support\n```\n\nThat's it. The skill provides tokens, components, and accessibility guidelines.\n\n---\n\n## Triggers\n\n| Trigger | Example |\n|---------|---------|\n| Create design system | \"Create a design system for my app\" |\n| Design tokens | \"Set up design tokens for colors and spacing\" |\n| Component architecture | \"Design component structure using atomic design\" |\n| Accessibility | \"Ensure WCAG 2.1 compliance for my components\" |\n| Dark mode | \"Implement theming with dark mode support\" |\n\n---\n\n## Quick Reference\n\n| Task | Output |\n|------|--------|\n| Design tokens | Color, typography, spacing, shadows JSON |\n| Component structure | Atomic design hierarchy (atoms, molecules, organisms) |\n| Theming | CSS variables or ThemeProvider setup |\n| Accessibility | WCAG 2.1 AA compliant patterns |\n| Documentation | Component docs with props, examples, a11y notes |\n\n---\n\n## Bundled Resources\n\n- `references\u002Fcomponent-examples.md` - Complete component implementations\n- `templates\u002Fdesign-tokens-template.json` - W3C design token format\n- `templates\u002Fcomponent-template.tsx` - React component template\n- `checklists\u002Fdesign-system-checklist.md` - Design system audit checklist\n\n---\n\n## Design System Philosophy\n\n### What is a Design System?\n\nA design system is more than a component library—it's a collection of:\n\n1. **Design Tokens**: Foundational design decisions (colors, spacing, typography)\n2. **Components**: Reusable UI building blocks\n3. **Patterns**: Common UX solutions and compositions\n4. **Guidelines**: Rules, principles, and best practices\n5. **Documentation**: How to use everything effectively\n\n### Core Principles\n\n**1. Consistency Over Creativity**\n- Predictable patterns reduce cognitive load\n- Users learn once, apply everywhere\n- Designers and developers speak the same language\n\n**2. Accessible by Default**\n- WCAG 2.1 Level AA compliance minimum\n- Keyboard navigation built-in\n- Screen reader support from the start\n\n**3. Scalable and Maintainable**\n- Design tokens enable global changes\n- Component composition reduces duplication\n- Versioning and deprecation strategies\n\n**4. Developer-Friendly**\n- Clear API contracts\n- Comprehensive documentation\n- Easy to integrate and customize\n\n---\n\n## Design Tokens\n\nDesign tokens are the atomic design decisions that define your system's visual language.\n\n### Token Categories\n\n#### 1. Color Tokens\n\n**Primitive Colors** (Raw values):\n```json\n{\n  \"color\": {\n    \"primitive\": {\n      \"blue\": {\n        \"50\": \"#eff6ff\",\n        \"100\": \"#dbeafe\",\n        \"200\": \"#bfdbfe\",\n        \"300\": \"#93c5fd\",\n        \"400\": \"#60a5fa\",\n        \"500\": \"#3b82f6\",\n        \"600\": \"#2563eb\",\n        \"700\": \"#1d4ed8\",\n        \"800\": \"#1e40af\",\n        \"900\": \"#1e3a8a\",\n        \"950\": \"#172554\"\n      }\n    }\n  }\n}\n```\n\n**Semantic Colors** (Contextual meaning):\n```json\n{\n  \"color\": {\n    \"semantic\": {\n      \"brand\": {\n        \"primary\": \"{color.primitive.blue.600}\",\n        \"primary-hover\": \"{color.primitive.blue.700}\",\n        \"primary-active\": \"{color.primitive.blue.800}\"\n      },\n      \"text\": {\n        \"primary\": \"{color.primitive.gray.900}\",\n        \"secondary\": \"{color.primitive.gray.600}\",\n        \"tertiary\": \"{color.primitive.gray.500}\",\n        \"disabled\": \"{color.primitive.gray.400}\",\n        \"inverse\": \"{color.primitive.white}\"\n      },\n      \"background\": {\n        \"primary\": \"{color.primitive.white}\",\n        \"secondary\": \"{color.primitive.gray.50}\",\n        \"tertiary\": \"{color.primitive.gray.100}\"\n      },\n      \"feedback\": {\n        \"success\": \"{color.primitive.green.600}\",\n        \"warning\": \"{color.primitive.yellow.600}\",\n        \"error\": \"{color.primitive.red.600}\",\n        \"info\": \"{color.primitive.blue.600}\"\n      }\n    }\n  }\n}\n```\n\n**Accessibility**: Ensure color contrast ratios meet WCAG 2.1 Level AA:\n- Normal text: 4.5:1 minimum\n- Large text (18pt+ or 14pt+ bold): 3:1 minimum\n- UI components and graphics: 3:1 minimum\n\n#### 2. Typography Tokens\n\n```json\n{\n  \"typography\": {\n    \"fontFamily\": {\n      \"sans\": \"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif\",\n      \"serif\": \"'Georgia', 'Times New Roman', serif\",\n      \"mono\": \"'Fira Code', 'Courier New', monospace\"\n    },\n    \"fontSize\": {\n      \"xs\": \"0.75rem\",     \u002F\u002F 12px\n      \"sm\": \"0.875rem\",    \u002F\u002F 14px\n      \"base\": \"1rem\",      \u002F\u002F 16px\n      \"lg\": \"1.125rem\",    \u002F\u002F 18px\n      \"xl\": \"1.25rem\",     \u002F\u002F 20px\n      \"2xl\": \"1.5rem\",     \u002F\u002F 24px\n      \"3xl\": \"1.875rem\",   \u002F\u002F 30px\n      \"4xl\": \"2.25rem\",    \u002F\u002F 36px\n      \"5xl\": \"3rem\"        \u002F\u002F 48px\n    },\n    \"fontWeight\": {\n      \"normal\": 400,\n      \"medium\": 500,\n      \"semibold\": 600,\n      \"bold\": 700\n    },\n    \"lineHeight\": {\n      \"tight\": 1.25,\n      \"normal\": 1.5,\n      \"relaxed\": 1.75,\n      \"loose\": 2\n    },\n    \"letterSpacing\": {\n      \"tight\": \"-0.025em\",\n      \"normal\": \"0\",\n      \"wide\": \"0.025em\"\n    }\n  }\n}\n```\n\n#### 3. Spacing Tokens\n\n**Scale**: Use a consistent spacing scale (commonly 4px or 8px base)\n\n```json\n{\n  \"spacing\": {\n    \"0\": \"0\",\n    \"1\": \"0.25rem\",   \u002F\u002F 4px\n    \"2\": \"0.5rem\",    \u002F\u002F 8px\n    \"3\": \"0.75rem\",   \u002F\u002F 12px\n    \"4\": \"1rem\",      \u002F\u002F 16px\n    \"5\": \"1.25rem\",   \u002F\u002F 20px\n    \"6\": \"1.5rem\",    \u002F\u002F 24px\n    \"8\": \"2rem\",      \u002F\u002F 32px\n    \"10\": \"2.5rem\",   \u002F\u002F 40px\n    \"12\": \"3rem\",     \u002F\u002F 48px\n    \"16\": \"4rem\",     \u002F\u002F 64px\n    \"20\": \"5rem\",     \u002F\u002F 80px\n    \"24\": \"6rem\"      \u002F\u002F 96px\n  }\n}\n```\n\n**Component-Specific Spacing**:\n```json\n{\n  \"component\": {\n    \"button\": {\n      \"padding-x\": \"{spacing.4}\",\n      \"padding-y\": \"{spacing.2}\",\n      \"gap\": \"{spacing.2}\"\n    },\n    \"card\": {\n      \"padding\": \"{spacing.6}\",\n      \"gap\": \"{spacing.4}\"\n    }\n  }\n}\n```\n\n#### 4. Border Radius Tokens\n\n```json\n{\n  \"borderRadius\": {\n    \"none\": \"0\",\n    \"sm\": \"0.125rem\",   \u002F\u002F 2px\n    \"base\": \"0.25rem\",  \u002F\u002F 4px\n    \"md\": \"0.375rem\",   \u002F\u002F 6px\n    \"lg\": \"0.5rem\",     \u002F\u002F 8px\n    \"xl\": \"0.75rem\",    \u002F\u002F 12px\n    \"2xl\": \"1rem\",      \u002F\u002F 16px\n    \"full\": \"9999px\"\n  }\n}\n```\n\n#### 5. Shadow Tokens\n\n```json\n{\n  \"shadow\": {\n    \"xs\": \"0 1px 2px 0 rgba(0, 0, 0, 0.05)\",\n    \"sm\": \"0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)\",\n    \"base\": \"0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)\",\n    \"md\": \"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)\",\n    \"lg\": \"0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)\",\n    \"xl\": \"0 25px 50px -12px rgba(0, 0, 0, 0.25)\"\n  }\n}\n```\n\n---\n\n## Component Architecture\n\n### Atomic Design Methodology\n\n**Atoms** → **Molecules** → **Organisms** → **Templates** → **Pages**\n\n#### Atoms (Primitive Components)\nBasic building blocks that can't be broken down further.\n\n**Examples:**\n- Button\n- Input\n- Label\n- Icon\n- Badge\n- Avatar\n\n**Button Component:**\n```typescript\ninterface ButtonProps {\n  variant?: 'primary' | 'secondary' | 'outline' | 'ghost';\n  size?: 'sm' | 'md' | 'lg';\n  disabled?: boolean;\n  loading?: boolean;\n  icon?: React.ReactNode;\n  children: React.ReactNode;\n}\n```\n\nSee `references\u002Fcomponent-examples.md` for complete Button implementation with variants, sizes, and styling patterns.\n\n#### Molecules (Simple Compositions)\nGroups of atoms that function together.\n\n**Examples:**\n- SearchBar (Input + Button)\n- FormField (Label + Input + ErrorMessage)\n- Card (Container + Title + Content + Actions)\n\n**FormField Molecule:**\n```typescript\ninterface FormFieldProps {\n  label: string;\n  name: string;\n  error?: string;\n  hint?: string;\n  required?: boolean;\n  children: React.ReactNode;\n}\n```\n\nSee `references\u002Fcomponent-examples.md` for FormField, Card (compound component pattern), Input with variants, Modal, and more composition examples.\n\n#### Organisms (Complex Compositions)\nComplex UI components made of molecules and atoms.\n\n**Examples:**\n- Navigation Bar\n- Product Card Grid\n- User Profile Section\n- Modal Dialog\n\n#### Templates (Page Layouts)\nPage-level structures that define content placement.\n\n**Examples:**\n- Dashboard Layout (Sidebar + Header + Main Content)\n- Marketing Page Layout (Hero + Features + Footer)\n- Settings Page Layout (Tabs + Content Panels)\n\n#### Pages (Specific Instances)\nActual pages with real content.\n\n---\n\n## Component API Design\n\n### Props Best Practices\n\n**1. Predictable Prop Names**\n```typescript\n\u002F\u002F ✅ Good: Consistent naming\n\u003CButton variant=\"primary\" size=\"md\" \u002F>\n\u003CInput variant=\"outlined\" size=\"md\" \u002F>\n\n\u002F\u002F ❌ Bad: Inconsistent\n\u003CButton type=\"primary\" sizeMode=\"md\" \u002F>\n\u003CInput style=\"outlined\" inputSize=\"md\" \u002F>\n```\n\n**2. Sensible Defaults**\n```typescript\n\u002F\u002F ✅ Good: Provides defaults\ninterface ButtonProps {\n  variant?: 'primary' | 'secondary';  \u002F\u002F Default: primary\n  size?: 'sm' | 'md' | 'lg';          \u002F\u002F Default: md\n}\n\n\u002F\u002F ❌ Bad: Everything required\ninterface ButtonProps {\n  variant: 'primary' | 'secondary';\n  size: 'sm' | 'md' | 'lg';\n  color: string;\n  padding: string;\n}\n```\n\n**3. Composition Over Configuration**\n```typescript\n\u002F\u002F ✅ Good: Composable\n\u003CCard>\n  \u003CCard.Header>\n    \u003CCard.Title>Title\u003C\u002FCard.Title>\n  \u003C\u002FCard.Header>\n  \u003CCard.Body>Content\u003C\u002FCard.Body>\n  \u003CCard.Footer>Actions\u003C\u002FCard.Footer>\n\u003C\u002FCard>\n\n\u002F\u002F ❌ Bad: Too many props\n\u003CCard\n  title=\"Title\"\n  content=\"Content\"\n  footerContent=\"Actions\"\n  hasHeader={true}\n  hasFooter={true}\n\u002F>\n```\n\n**4. Polymorphic Components**\nAllow components to render as different HTML elements:\n```typescript\n\u003CButton as=\"a\" href=\"\u002Flogin\">Login\u003C\u002FButton>\n\u003CButton as=\"button\" onClick={handleClick}>Click Me\u003C\u002FButton>\n```\n\nSee `references\u002Fcomponent-examples.md` for complete polymorphic component TypeScript patterns.\n\n---\n\n## Theming and Dark Mode\n\n### Theme Structure\n\n```typescript\ninterface Theme {\n  colors: {\n    brand: {\n      primary: string;\n      secondary: string;\n    };\n    text: {\n      primary: string;\n      secondary: string;\n    };\n    background: {\n      primary: string;\n      secondary: string;\n    };\n    feedback: {\n      success: string;\n      warning: string;\n      error: string;\n      info: string;\n    };\n  };\n  typography: {\n    fontFamily: {\n      sans: string;\n      mono: string;\n    };\n    fontSize: Record\u003Cstring, string>;\n  };\n  spacing: Record\u003Cstring, string>;\n  borderRadius: Record\u003Cstring, string>;\n  shadow: Record\u003Cstring, string>;\n}\n```\n\n### Dark Mode Implementation\n\n**Approach 1: CSS Variables**\n```css\n:root {\n  --color-bg-primary: #ffffff;\n  --color-text-primary: #000000;\n}\n\n[data-theme=\"dark\"] {\n  --color-bg-primary: #1a1a1a;\n  --color-text-primary: #ffffff;\n}\n```\n\n**Approach 2: Tailwind CSS Dark Mode**\n```tsx\n\u003Cdiv className=\"bg-white dark:bg-gray-900 text-gray-900 dark:text-white\">\n  Content\n\u003C\u002Fdiv>\n```\n\n**Approach 3: Styled Components ThemeProvider**\n```typescript\nconst lightTheme = { background: '#fff', text: '#000' };\nconst darkTheme = { background: '#000', text: '#fff' };\n\n\u003CThemeProvider theme={isDark ? darkTheme : lightTheme}>\n  \u003CApp \u002F>\n\u003C\u002FThemeProvider>\n```\n\n---\n\n## Accessibility Guidelines\n\n### WCAG 2.1 Level AA Compliance\n\n#### Color Contrast\n- **Normal text** (\u003C 18pt): 4.5:1 minimum\n- **Large text** (≥ 18pt or ≥ 14pt bold): 3:1 minimum\n- **UI components**: 3:1 minimum\n\n**Tools**: Use contrast checkers like [WebAIM Contrast Checker](https:\u002F\u002Fwebaim.org\u002Fresources\u002Fcontrastchecker\u002F)\n\n#### Keyboard Navigation\n```typescript\n\u002F\u002F ✅ All interactive elements must be keyboard accessible\n\u003Cbutton\n  onClick={handleClick}\n  onKeyDown={(e) => e.key === 'Enter' && handleClick()}\n>\n  Click me\n\u003C\u002Fbutton>\n\n\u002F\u002F ✅ Focus management\n\u003CModal>\n  \u003CFocusTrap>\n    {\u002F* Modal content *\u002F}\n  \u003C\u002FFocusTrap>\n\u003C\u002FModal>\n```\n\n#### ARIA Attributes\nEssential ARIA patterns:\n- `aria-label`: Provide accessible names\n- `aria-expanded`: Communicate expanded\u002Fcollapsed state\n- `aria-controls`: Associate controls with content\n- `aria-live`: Announce dynamic content changes\n\n#### Screen Reader Support\n- Use semantic HTML elements (`\u003Cbutton>`, `\u003Cnav>`, `\u003Cmain>`)\n- Avoid div\u002Fspan soup for interactive elements\n- Provide meaningful labels for all controls\n\nSee `references\u002Fcomponent-examples.md` for complete accessibility examples including Skip Links, focus traps, and ARIA patterns.\n\n---\n\n## Documentation Standards\n\n### Component Documentation Template\n\nEach component should document:\n- **Purpose**: What the component does\n- **Usage**: Import statement and basic example\n- **Variants**: Available visual styles\n- **Props**: Complete prop table with types, defaults, descriptions\n- **Accessibility**: Keyboard support, ARIA attributes, screen reader behavior\n- **Examples**: Common use cases with code\n\nUse Storybook, Docusaurus, or similar tools for interactive documentation.\n\nSee `templates\u002Fcomponent-template.tsx` for the standard component structure.\n\n---\n\n## Design System Workflow\n\n### 1. Design Phase\n- **Audit existing patterns**: Identify inconsistencies\n- **Define design tokens**: Colors, typography, spacing\n- **Create component inventory**: List all needed components\n- **Design in Figma**: Create component library\n\n### 2. Development Phase\n- **Set up tooling**: Storybook, TypeScript, testing\n- **Implement tokens**: CSS variables or theme config\n- **Build atoms first**: Start with primitives\n- **Compose upward**: Build molecules, organisms\n- **Document as you go**: Write docs alongside code\n\n### 3. Adoption Phase\n- **Create migration guide**: Help teams adopt\n- **Provide codemods**: Automate migrations when possible\n- **Run workshops**: Train teams on usage\n- **Gather feedback**: Iterate based on real usage\n\n### 4. Maintenance Phase\n- **Version semantically**: Major\u002Fminor\u002Fpatch releases\n- **Deprecation strategy**: Phase out old components gracefully\n- **Changelog**: Document all changes\n- **Monitor adoption**: Track usage across products\n\n---\n\n## Quick Start Checklist\n\nWhen creating a new design system:\n\n- [ ] Define design principles and values\n- [ ] Establish design token structure (colors, typography, spacing)\n- [ ] Create primitive color palette (50-950 scale)\n- [ ] Define semantic color tokens (brand, text, background, feedback)\n- [ ] Set typography scale and font families\n- [ ] Establish spacing scale (4px or 8px base)\n- [ ] Design atomic components (Button, Input, Label, etc.)\n- [ ] Implement theming system (light\u002Fdark mode)\n- [ ] Ensure WCAG 2.1 Level AA compliance\n- [ ] Set up documentation (Storybook or similar)\n- [ ] Create usage examples for each component\n- [ ] Establish versioning and release strategy\n- [ ] Create migration guides for adopting teams\n","# Design System Starter\n\nBuild robust, scalable design systems that ensure visual consistency and exceptional user experiences.\n\n---\n\n## Quick Start\n\nJust describe what you need:\n\n```\nCreate a design system for my React app with dark mode support\n```\n\nThat's it. The skill provides tokens, components, and accessibility guidelines.\n\n---\n\n## Triggers\n\n| Trigger | Example |\n|---------|---------|\n| Create design system | \"Create a design system for my app\" |\n| Design tokens | \"Set up design tokens for colors and spacing\" |\n| Component architecture | \"Design component structure using atomic design\" |\n| Accessibility | \"Ensure WCAG 2.1 compliance for my components\" |\n| Dark mode | \"Implement theming with dark mode support\" |\n\n---\n\n## Quick Reference\n\n| Task | Output |\n|------|--------|\n| Design tokens | Color, typography, spacing, shadows JSON |\n| Component structure | Atomic design hierarchy (atoms, molecules, organisms) |\n| Theming | CSS variables or ThemeProvider setup |\n| Accessibility | WCAG 2.1 AA compliant patterns |\n| Documentation | Component docs with props, examples, a11y notes |\n\n---\n\n## Bundled Resources\n\n- `references\u002Fcomponent-examples.md` - Complete component implementations\n- `templates\u002Fdesign-tokens-template.json` - W3C design token format\n- `templates\u002Fcomponent-template.tsx` - React component template\n- `checklists\u002Fdesign-system-checklist.md` - Design system audit checklist\n\n---\n\n## Design System Philosophy\n\n### What is a Design System?\n\nA design system is more than a component library—it's a collection of:\n\n1. **Design Tokens**: Foundational design decisions (colors, spacing, typography)\n2. **Components**: Reusable UI building blocks\n3. **Patterns**: Common UX solutions and compositions\n4. **Guidelines**: Rules, principles, and best practices\n5. **Documentation**: How to use everything effectively\n\n### Core Principles\n\n**1. Consistency Over Creativity**\n- Predictable patterns reduce cognitive load\n- Users learn once, apply everywhere\n- Designers and developers speak the same language\n\n**2. Accessible by Default**\n- WCAG 2.1 Level AA compliance minimum\n- Keyboard navigation built-in\n- Screen reader support from the start\n\n**3. Scalable and Maintainable**\n- Design tokens enable global changes\n- Component composition reduces duplication\n- Versioning and deprecation strategies\n\n**4. Developer-Friendly**\n- Clear API contracts\n- Comprehensive documentation\n- Easy to integrate and customize\n\n---\n\n## Design Tokens\n\nDesign tokens are the atomic design decisions that define your system's visual language.\n\n### Token Categories\n\n#### 1. Color Tokens\n\n**Primitive Colors** (Raw values):\n```json\n{\n  \"color\": {\n    \"primitive\": {\n      \"blue\": {\n        \"50\": \"#eff6ff\",\n        \"100\": \"#dbeafe\",\n        \"200\": \"#bfdbfe\",\n        \"300\": \"#93c5fd\",\n        \"400\": \"#60a5fa\",\n        \"500\": \"#3b82f6\",\n        \"600\": \"#2563eb\",\n        \"700\": \"#1d4ed8\",\n        \"800\": \"#1e40af\",\n        \"900\": \"#1e3a8a\",\n        \"950\": \"#172554\"\n      }\n    }\n  }\n}\n```\n\n**Semantic Colors** (Contextual meaning):\n```json\n{\n  \"color\": {\n    \"semantic\": {\n      \"brand\": {\n        \"primary\": \"{color.primitive.blue.600}\",\n        \"primary-hover\": \"{color.primitive.blue.700}\",\n        \"primary-active\": \"{color.primitive.blue.800}\"\n      },\n      \"text\": {\n        \"primary\": \"{color.primitive.gray.900}\",\n        \"secondary\": \"{color.primitive.gray.600}\",\n        \"tertiary\": \"{color.primitive.gray.500}\",\n        \"disabled\": \"{color.primitive.gray.400}\",\n        \"inverse\": \"{color.primitive.white}\"\n      },\n      \"background\": {\n        \"primary\": \"{color.primitive.white}\",\n        \"secondary\": \"{color.primitive.gray.50}\",\n        \"tertiary\": \"{color.primitive.gray.100}\"\n      },\n      \"feedback\": {\n        \"success\": \"{color.primitive.green.600}\",\n        \"warning\": \"{color.primitive.yellow.600}\",\n        \"error\": \"{color.primitive.red.600}\",\n        \"info\": \"{color.primitive.blue.600}\"\n      }\n    }\n  }\n}\n```\n\n**Accessibility**: Ensure color contrast ratios meet WCAG 2.1 Level AA:\n- Normal text: 4.5:1 minimum\n- Large text (18pt+ or 14pt+ bold): 3:1 minimum\n- UI components and graphics: 3:1 minimum\n\n#### 2. Typography Tokens\n\n```json\n{\n  \"typography\": {\n    \"fontFamily\": {\n      \"sans\": \"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif\",\n      \"serif\": \"'Georgia', 'Times New Roman', serif\",\n      \"mono\": \"'Fira Code', 'Courier New', monospace\"\n    },\n    \"fontSize\": {\n      \"xs\": \"0.75rem\",     \u002F\u002F 12px\n      \"sm\": \"0.875rem\",    \u002F\u002F 14px\n      \"base\": \"1rem\",      \u002F\u002F 16px\n      \"lg\": \"1.125rem\",    \u002F\u002F 18px\n      \"xl\": \"1.25rem\",     \u002F\u002F 20px\n      \"2xl\": \"1.5rem\",     \u002F\u002F 24px\n      \"3xl\": \"1.875rem\",   \u002F\u002F 30px\n      \"4xl\": \"2.25rem\",    \u002F\u002F 36px\n      \"5xl\": \"3rem\"        \u002F\u002F 48px\n    },\n    \"fontWeight\": {\n      \"normal\": 400,\n      \"medium\": 500,\n      \"semibold\": 600,\n      \"bold\": 700\n    },\n    \"lineHeight\": {\n      \"tight\": 1.25,\n      \"normal\": 1.5,\n      \"relaxed\": 1.75,\n      \"loose\": 2\n    },\n    \"letterSpacing\": {\n      \"tight\": \"-0.025em\",\n      \"normal\": \"0\",\n      \"wide\": \"0.025em\"\n    }\n  }\n}\n```\n\n#### 3. Spacing Tokens\n\n**Scale**: Use a consistent spacing scale (commonly 4px or 8px base)\n\n```json\n{\n  \"spacing\": {\n    \"0\": \"0\",\n    \"1\": \"0.25rem\",   \u002F\u002F 4px\n    \"2\": \"0.5rem\",    \u002F\u002F 8px\n    \"3\": \"0.75rem\",   \u002F\u002F 12px\n    \"4\": \"1rem\",      \u002F\u002F 16px\n    \"5\": \"1.25rem\",   \u002F\u002F 20px\n    \"6\": \"1.5rem\",    \u002F\u002F 24px\n    \"8\": \"2rem\",      \u002F\u002F 32px\n    \"10\": \"2.5rem\",   \u002F\u002F 40px\n    \"12\": \"3rem\",     \u002F\u002F 48px\n    \"16\": \"4rem\",     \u002F\u002F 64px\n    \"20\": \"5rem\",     \u002F\u002F 80px\n    \"24\": \"6rem\"      \u002F\u002F 96px\n  }\n}\n```\n\n**Component-Specific Spacing**:\n```json\n{\n  \"component\": {\n    \"button\": {\n      \"padding-x\": \"{spacing.4}\",\n      \"padding-y\": \"{spacing.2}\",\n      \"gap\": \"{spacing.2}\"\n    },\n    \"card\": {\n      \"padding\": \"{spacing.6}\",\n      \"gap\": \"{spacing.4}\"\n    }\n  }\n}\n```\n\n#### 4. Border Radius Tokens\n\n```json\n{\n  \"borderRadius\": {\n    \"none\": \"0\",\n    \"sm\": \"0.125rem\",   \u002F\u002F 2px\n    \"base\": \"0.25rem\",  \u002F\u002F 4px\n    \"md\": \"0.375rem\",   \u002F\u002F 6px\n    \"lg\": \"0.5rem\",     \u002F\u002F 8px\n    \"xl\": \"0.75rem\",    \u002F\u002F 12px\n    \"2xl\": \"1rem\",      \u002F\u002F 16px\n    \"full\": \"9999px\"\n  }\n}\n```\n\n#### 5. Shadow Tokens\n\n```json\n{\n  \"shadow\": {\n    \"xs\": \"0 1px 2px 0 rgba(0, 0, 0, 0.05)\",\n    \"sm\": \"0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)\",\n    \"base\": \"0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)\",\n    \"md\": \"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)\",\n    \"lg\": \"0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)\",\n    \"xl\": \"0 25px 50px -12px rgba(0, 0, 0, 0.25)\"\n  }\n}\n```\n\n---\n\n## Component Architecture\n\n### Atomic Design Methodology\n\n**Atoms** → **Molecules** → **Organisms** → **Templates** → **Pages**\n\n#### Atoms (Primitive Components)\nBasic building blocks that can't be broken down further.\n\n**Examples:**\n- Button\n- Input\n- Label\n- Icon\n- Badge\n- Avatar\n\n**Button Component:**\n```typescript\ninterface ButtonProps {\n  variant?: 'primary' | 'secondary' | 'outline' | 'ghost';\n  size?: 'sm' | 'md' | 'lg';\n  disabled?: boolean;\n  loading?: boolean;\n  icon?: React.ReactNode;\n  children: React.ReactNode;\n}\n```\n\nSee `references\u002Fcomponent-examples.md` for complete Button implementation with variants, sizes, and styling patterns.\n\n#### Molecules (Simple Compositions)\nGroups of atoms that function together.\n\n**Examples:**\n- SearchBar (Input + Button)\n- FormField (Label + Input + ErrorMessage)\n- Card (Container + Title + Content + Actions)\n\n**FormField Molecule:**\n```typescript\ninterface FormFieldProps {\n  label: string;\n  name: string;\n  error?: string;\n  hint?: string;\n  required?: boolean;\n  children: React.ReactNode;\n}\n```\n\nSee `references\u002Fcomponent-examples.md` for FormField, Card (compound component pattern), Input with variants, Modal, and more composition examples.\n\n#### Organisms (Complex Compositions)\nComplex UI components made of molecules and atoms.\n\n**Examples:**\n- Navigation Bar\n- Product Card Grid\n- User Profile Section\n- Modal Dialog\n\n#### Templates (Page Layouts)\nPage-level structures that define content placement.\n\n**Examples:**\n- Dashboard Layout (Sidebar + Header + Main Content)\n- Marketing Page Layout (Hero + Features + Footer)\n- Settings Page Layout (Tabs + Content Panels)\n\n#### Pages (Specific Instances)\nActual pages with real content.\n\n---\n\n## Component API Design\n\n### Props Best Practices\n\n**1. Predictable Prop Names**\n```typescript\n\u002F\u002F ✅ Good: Consistent naming\n\u003CButton variant=\"primary\" size=\"md\" \u002F>\n\u003CInput variant=\"outlined\" size=\"md\" \u002F>\n\n\u002F\u002F ❌ Bad: Inconsistent\n\u003CButton type=\"primary\" sizeMode=\"md\" \u002F>\n\u003CInput style=\"outlined\" inputSize=\"md\" \u002F>\n```\n\n**2. Sensible Defaults**\n```typescript\n\u002F\u002F ✅ Good: Provides defaults\ninterface ButtonProps {\n  variant?: 'primary' | 'secondary';  \u002F\u002F Default: primary\n  size?: 'sm' | 'md' | 'lg';          \u002F\u002F Default: md\n}\n\n\u002F\u002F ❌ Bad: Everything required\ninterface ButtonProps {\n  variant: 'primary' | 'secondary';\n  size: 'sm' | 'md' | 'lg';\n  color: string;\n  padding: string;\n}\n```\n\n**3. Composition Over Configuration**\n```typescript\n\u002F\u002F ✅ Good: Composable\n\u003CCard>\n  \u003CCard.Header>\n    \u003CCard.Title>Title\u003C\u002FCard.Title>\n  \u003C\u002FCard.Header>\n  \u003CCard.Body>Content\u003C\u002FCard.Body>\n  \u003CCard.Footer>Actions\u003C\u002FCard.Footer>\n\u003C\u002FCard>\n\n\u002F\u002F ❌ Bad: Too many props\n\u003CCard\n  title=\"Title\"\n  content=\"Content\"\n  footerContent=\"Actions\"\n  hasHeader={true}\n  hasFooter={true}\n\u002F>\n```\n\n**4. Polymorphic Components**\nAllow components to render as different HTML elements:\n```typescript\n\u003CButton as=\"a\" href=\"\u002Flogin\">Login\u003C\u002FButton>\n\u003CButton as=\"button\" onClick={handleClick}>Click Me\u003C\u002FButton>\n```\n\nSee `references\u002Fcomponent-examples.md` for complete polymorphic component TypeScript patterns.\n\n---\n\n## Theming and Dark Mode\n\n### Theme Structure\n\n```typescript\ninterface Theme {\n  colors: {\n    brand: {\n      primary: string;\n      secondary: string;\n    };\n    text: {\n      primary: string;\n      secondary: string;\n    };\n    background: {\n      primary: string;\n      secondary: string;\n    };\n    feedback: {\n      success: string;\n      warning: string;\n      error: string;\n      info: string;\n    };\n  };\n  typography: {\n    fontFamily: {\n      sans: string;\n      mono: string;\n    };\n    fontSize: Record\u003Cstring, string>;\n  };\n  spacing: Record\u003Cstring, string>;\n  borderRadius: Record\u003Cstring, string>;\n  shadow: Record\u003Cstring, string>;\n}\n```\n\n### Dark Mode Implementation\n\n**Approach 1: CSS Variables**\n```css\n:root {\n  --color-bg-primary: #ffffff;\n  --color-text-primary: #000000;\n}\n\n[data-theme=\"dark\"] {\n  --color-bg-primary: #1a1a1a;\n  --color-text-primary: #ffffff;\n}\n```\n\n**Approach 2: Tailwind CSS Dark Mode**\n```tsx\n\u003Cdiv className=\"bg-white dark:bg-gray-900 text-gray-900 dark:text-white\">\n  Content\n\u003C\u002Fdiv>\n```\n\n**Approach 3: Styled Components ThemeProvider**\n```typescript\nconst lightTheme = { background: '#fff', text: '#000' };\nconst darkTheme = { background: '#000', text: '#fff' };\n\n\u003CThemeProvider theme={isDark ? darkTheme : lightTheme}>\n  \u003CApp \u002F>\n\u003C\u002FThemeProvider>\n```\n\n---\n\n## Accessibility Guidelines\n\n### WCAG 2.1 Level AA Compliance\n\n#### Color Contrast\n- **Normal text** (\u003C 18pt): 4.5:1 minimum\n- **Large text** (≥ 18pt or ≥ 14pt bold): 3:1 minimum\n- **UI components**: 3:1 minimum\n\n**Tools**: Use contrast checkers like [WebAIM Contrast Checker](https:\u002F\u002Fwebaim.org\u002Fresources\u002Fcontrastchecker\u002F)\n\n#### Keyboard Navigation\n```typescript\n\u002F\u002F ✅ All interactive elements must be keyboard accessible\n\u003Cbutton\n  onClick={handleClick}\n  onKeyDown={(e) => e.key === 'Enter' && handleClick()}\n>\n  Click me\n\u003C\u002Fbutton>\n\n\u002F\u002F ✅ Focus management\n\u003CModal>\n  \u003CFocusTrap>\n    {\u002F* Modal content *\u002F}\n  \u003C\u002FFocusTrap>\n\u003C\u002FModal>\n```\n\n#### ARIA Attributes\nEssential ARIA patterns:\n- `aria-label`: Provide accessible names\n- `aria-expanded`: Communicate expanded\u002Fcollapsed state\n- `aria-controls`: Associate controls with content\n- `aria-live`: Announce dynamic content changes\n\n#### Screen Reader Support\n- Use semantic HTML elements (`\u003Cbutton>`, `\u003Cnav>`, `\u003Cmain>`)\n- Avoid div\u002Fspan soup for interactive elements\n- Provide meaningful labels for all controls\n\nSee `references\u002Fcomponent-examples.md` for complete accessibility examples including Skip Links, focus traps, and ARIA patterns.\n\n---\n\n## Documentation Standards\n\n### Component Documentation Template\n\nEach component should document:\n- **Purpose**: What the component does\n- **Usage**: Import statement and basic example\n- **Variants**: Available visual styles\n- **Props**: Complete prop table with types, defaults, descriptions\n- **Accessibility**: Keyboard support, ARIA attributes, screen reader behavior\n- **Examples**: Common use cases with code\n\nUse Storybook, Docusaurus, or similar tools for interactive documentation.\n\nSee `templates\u002Fcomponent-template.tsx` for the standard component structure.\n\n---\n\n## Design System Workflow\n\n### 1. Design Phase\n- **Audit existing patterns**: Identify inconsistencies\n- **Define design tokens**: Colors, typography, spacing\n- **Create component inventory**: List all needed components\n- **Design in Figma**: Create component library\n\n### 2. Development Phase\n- **Set up tooling**: Storybook, TypeScript, testing\n- **Implement tokens**: CSS variables or theme config\n- **Build atoms first**: Start with primitives\n- **Compose upward**: Build molecules, organisms\n- **Document as you go**: Write docs alongside code\n\n### 3. Adoption Phase\n- **Create migration guide**: Help teams adopt\n- **Provide codemods**: Automate migrations when possible\n- **Run workshops**: Train teams on usage\n- **Gather feedback**: Iterate based on real usage\n\n### 4. Maintenance Phase\n- **Version semantically**: Major\u002Fminor\u002Fpatch releases\n- **Deprecation strategy**: Phase out old components gracefully\n- **Changelog**: Document all changes\n- **Monitor adoption**: Track usage across products\n\n---\n\n## Quick Start Checklist\n\nWhen creating a new design system:\n\n- [ ] Define design principles and values\n- [ ] Establish design token structure (colors, typography, spacing)\n- [ ] Create primitive color palette (50-950 scale)\n- [ ] Define semantic color tokens (brand, text, background, feedback)\n- [ ] Set typography scale and font families\n- [ ] Establish spacing scale (4px or 8px base)\n- [ ] Design atomic components (Button, Input, Label, etc.)\n- [ ] Implement theming system (light\u002Fdark mode)\n- [ ] Ensure WCAG 2.1 Level AA compliance\n- [ ] Set up documentation (Storybook or similar)\n- [ ] Create usage examples for each component\n- [ ] Establish versioning and release strategy\n- [ ] Create migration guides for adopting teams\n",{"name":5,"license":15,"metadata":57,"description":7},{"tags":58,"version":60},[41,44,51,37,59,38],"accessibility","1.0.0","main","90b50ed0778745a80fd5bfb13b1843d45b9e82f7","tests\u002Fext_conformance\u002Fartifacts\u002Ftemplates-davila7\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fdevelopment\u002Fdesign-system-starter",233,"https:\u002F\u002Fgithub.com\u002FDicklesworthstone\u002Fpi_agent_rust","https:\u002F\u002Fgithub.com\u002FDicklesworthstone","https:\u002F\u002Fwww.jeffreyemanuel.com\u002F","Building in NY","2026-11-15 01:54:15",{"source":8,"skillName":5,"commands":71,"prompt":81,"zipAvailable":82},[72,75,78],{"tool":73,"command":74},"npx","npx skills add Dicklesworthstone\u002Fpi_agent_rust --skill design-system-starter",{"tool":76,"command":77},"bunx","bunx skills add Dicklesworthstone\u002Fpi_agent_rust --skill design-system-starter",{"tool":79,"command":80},"pnpm","pnpm dlx skills add Dicklesworthstone\u002Fpi_agent_rust --skill design-system-starter","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FDicklesworthstone\u002Fpi_agent_rust\u002Fblob\u002Fmain\u002Ftests\u002Fext_conformance\u002Fartifacts\u002Ftemplates-davila7\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fdevelopment\u002Fdesign-system-starter\u002FSKILL.md",true,[84,90,94,98,104],{"path":85,"resourceType":86,"resourceTypeDesc":87,"sizeBytes":88,"sourceHtmlUrl":89},"checklists\u002Fdesign-system-checklist.md","REFERENCE","参考文档",12943,"https:\u002F\u002Fgithub.com\u002FDicklesworthstone\u002Fpi_agent_rust\u002Fblob\u002Fmain\u002Ftests\u002Fext_conformance\u002Fartifacts\u002Ftemplates-davila7\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fdevelopment\u002Fdesign-system-starter\u002Fchecklists\u002Fdesign-system-checklist.md",{"path":91,"resourceType":86,"resourceTypeDesc":87,"sizeBytes":92,"sourceHtmlUrl":93},"README.md",7652,"https:\u002F\u002Fgithub.com\u002FDicklesworthstone\u002Fpi_agent_rust\u002Fblob\u002Fmain\u002Ftests\u002Fext_conformance\u002Fartifacts\u002Ftemplates-davila7\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fdevelopment\u002Fdesign-system-starter\u002FREADME.md",{"path":95,"resourceType":86,"resourceTypeDesc":87,"sizeBytes":96,"sourceHtmlUrl":97},"references\u002Fcomponent-examples.md",13552,"https:\u002F\u002Fgithub.com\u002FDicklesworthstone\u002Fpi_agent_rust\u002Fblob\u002Fmain\u002Ftests\u002Fext_conformance\u002Fartifacts\u002Ftemplates-davila7\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fdevelopment\u002Fdesign-system-starter\u002Freferences\u002Fcomponent-examples.md",{"path":99,"resourceType":100,"resourceTypeDesc":101,"sizeBytes":102,"sourceHtmlUrl":103},"templates\u002Fcomponent-template.tsx","OTHER","其他",6722,"https:\u002F\u002Fgithub.com\u002FDicklesworthstone\u002Fpi_agent_rust\u002Fblob\u002Fmain\u002Ftests\u002Fext_conformance\u002Fartifacts\u002Ftemplates-davila7\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fdevelopment\u002Fdesign-system-starter\u002Ftemplates\u002Fcomponent-template.tsx",{"path":105,"resourceType":86,"resourceTypeDesc":87,"sizeBytes":106,"sourceHtmlUrl":107},"templates\u002Fdesign-tokens-template.json",17128,"https:\u002F\u002Fgithub.com\u002FDicklesworthstone\u002Fpi_agent_rust\u002Fblob\u002Fmain\u002Ftests\u002Fext_conformance\u002Fartifacts\u002Ftemplates-davila7\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fdevelopment\u002Fdesign-system-starter\u002Ftemplates\u002Fdesign-tokens-template.json",[109,142,167,194,220,242],{"skillNo":110,"name":111,"nameZh":6,"description":112,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":113,"licenseFileUrl":114,"sourceHtmlUrl":115,"categories":116,"keywords":118,"publishedAt":52},"01M6FEGPPK0ZTKCCM0R3E3KS33","web-artifacts-builder","Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn\u002Fui). Use for complex artifacts requiring state management, routing, or shadcn\u002Fui components - not for simple single-file HTML\u002FJSX artifacts.","Apache-2.0","https:\u002F\u002Fgithub.com\u002FDicklesworthstone\u002Fpi_agent_rust\u002Fblob\u002Fmain\u002Ftests\u002Fext_conformance\u002Fartifacts\u002Ftemplates-davila7\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Futilities\u002Fweb-artifacts-builder\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FDicklesworthstone\u002Fpi_agent_rust\u002Fblob\u002Fmain\u002Ftests\u002Fext_conformance\u002Fartifacts\u002Ftemplates-davila7\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Futilities\u002Fweb-artifacts-builder\u002FSKILL.md",[117],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[119,120,121,122,123,38,124,51,125,50,126,127,128,129,130,44,131,132,133,134,135,136,137,138,139,140,141],"web artifacts builder","web","artifacts","artifacts builder","builder","css","react","routing","state management","state","shadcn","file","Tools","Tailwind","use","html","single-file","simple","ui components","multi","for","jsx","suite",{"skillNo":143,"name":144,"nameZh":6,"description":145,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":113,"licenseFileUrl":146,"sourceHtmlUrl":147,"categories":148,"keywords":153,"publishedAt":52},"01M6FEE9VTK1W4GY21AKREJXRG","webapp-testing","Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.","https:\u002F\u002Fgithub.com\u002FDicklesworthstone\u002Fpi_agent_rust\u002Fblob\u002Fmain\u002Ftests\u002Fext_conformance\u002Fartifacts\u002Ftemplates-davila7\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fsecurity\u002Fwebapp-testing\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FDicklesworthstone\u002Fpi_agent_rust\u002Fblob\u002Fmain\u002Ftests\u002Fext_conformance\u002Fartifacts\u002Ftemplates-davila7\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fsecurity\u002Fwebapp-testing\u002FSKILL.md",[149,152],{"categoryNo":150,"categoryName":151,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[154,155,156,38,157,158,120,159,160,161,44,162,163,164,165,166,139],"testing","webapp testing","webapp","screenshots","playwright","debugging","toolkit","browser","logs","applications","behavior","local","with",{"skillNo":168,"name":169,"nameZh":6,"description":170,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":171,"sourceHtmlUrl":172,"categories":173,"keywords":174,"publishedAt":52},"01M6FE20F7ZTQBFWKF4MPJ2SBX","neuropixels-analysis","Neuropixels neural recording analysis. Load SpikeGLX\u002FOpenEphys data, preprocess, motion correction, Kilosort4 spike sorting, quality metrics, Allen\u002FIBL curation, AI-assisted visual analysis, for Neuropixels 1.0\u002F2.0 extracellular electrophysiology. Use when working with neural recordings, spike sorting, extracellular electrophysiology, or when the user mentions Neuropixels, SpikeGLX, Open Ephys, Kilosort, quality metrics, or unit curation.","https:\u002F\u002Fgithub.com\u002FDicklesworthstone\u002Fpi_agent_rust\u002Fblob\u002Fmain\u002Ftests\u002Fext_conformance\u002Fartifacts\u002Ftemplates-davila7\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fscientific\u002Fneuropixels-analysis\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FDicklesworthstone\u002Fpi_agent_rust\u002Fblob\u002Fmain\u002Ftests\u002Fext_conformance\u002Fartifacts\u002Ftemplates-davila7\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fscientific\u002Fneuropixels-analysis\u002FSKILL.md",[],[175,176,177,178,179,180,181,182,133,183,184,185,186,187,188,189,166,190,191,192,139,193],"analysis","neuropixels analysis","spike","metrics","data","open","quality","user","recordings","Neural","motion","visual","quality metrics","unit","sorting","curation","recording","load","when",{"skillNo":195,"name":196,"nameZh":6,"description":197,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":113,"licenseFileUrl":198,"sourceHtmlUrl":199,"categories":200,"keywords":204,"publishedAt":52},"01M6FDP0PDK6F1GGX395C7625Z","skill-creator","Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations.","https:\u002F\u002Fgithub.com\u002FDicklesworthstone\u002Fpi_agent_rust\u002Fblob\u002Fmain\u002Ftests\u002Fext_conformance\u002Fartifacts\u002Ftemplates-davila7\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fproductivity\u002Fskill-creator\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FDicklesworthstone\u002Fpi_agent_rust\u002Fblob\u002Fmain\u002Ftests\u002Fext_conformance\u002Fartifacts\u002Ftemplates-davila7\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fproductivity\u002Fskill-creator\u002FSKILL.md",[201],{"categoryNo":202,"categoryName":203,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[205,206,207,47,208,209,210,211,212,213,214,215,216,217,166,139,218,193,219],"skill creator","creator","workflows","update","capabilities","knowledge","tool","integrations","specialized","guide","new skill","existing skill","users","Existing","new",{"skillNo":221,"name":222,"nameZh":6,"description":223,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":224,"sourceHtmlUrl":225,"categories":226,"keywords":228,"publishedAt":52},"01M6FDM8Y7VK7NYG9SM7QPA3PW","notebooklm","Use this skill to query your Google NotebookLM notebooks directly from Claude Code for source-grounded, citation-backed answers from Gemini. Browser automation, library management, persistent auth. Drastically reduced hallucinations through document-only responses.","https:\u002F\u002Fgithub.com\u002FDicklesworthstone\u002Fpi_agent_rust\u002Fblob\u002Fmain\u002Ftests\u002Fext_conformance\u002Fartifacts\u002Ftemplates-davila7\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fproductivity\u002Fnotebooklm\u002FLICENSE","https:\u002F\u002Fgithub.com\u002FDicklesworthstone\u002Fpi_agent_rust\u002Fblob\u002Fmain\u002Ftests\u002Fext_conformance\u002Fartifacts\u002Ftemplates-davila7\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fproductivity\u002Fnotebooklm\u002FSKILL.md",[227],{"categoryNo":202,"categoryName":203,"taxonomyType":21,"taxonomyTypeDesc":22},[222,229,230,231,232,233,234,161,235,236,133,237,238,239,240,139,241],"google","browser automation","gemini","automation","auth","code","library","management","only","document","query","Citation","source",{"skillNo":243,"name":244,"nameZh":6,"description":245,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":113,"licenseFileUrl":246,"sourceHtmlUrl":247,"categories":248,"keywords":255,"publishedAt":52},"01M6FDHPXE10J3XGTCH5HBHS1M","slack-gif-creator","Knowledge and utilities for creating animated GIFs optimized for Slack. Provides constraints, validation tools, and animation concepts. Use when users request animated GIFs for Slack like \"make me a GIF of X doing Y for Slack.\"","https:\u002F\u002Fgithub.com\u002FDicklesworthstone\u002Fpi_agent_rust\u002Fblob\u002Fmain\u002Ftests\u002Fext_conformance\u002Fartifacts\u002Ftemplates-davila7\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fenterprise-communication\u002Fslack-gif-creator\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FDicklesworthstone\u002Fpi_agent_rust\u002Fblob\u002Fmain\u002Ftests\u002Fext_conformance\u002Fartifacts\u002Ftemplates-davila7\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fenterprise-communication\u002Fslack-gif-creator\u002FSKILL.md",[249,252],{"categoryNo":250,"categoryName":251,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000005","邮件与沟通",{"categoryNo":253,"categoryName":254,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000016","图像与多媒体",[256,257,258,206,259,131,260,261,210,133,262,217,263,264,265,139,266,193],"slack gif creator","slack","gif","validation","constraints","Animation","me","make","Utilities","concepts","request"]