{"id":"e9804c52-cd6a-492b-9660-465a1d6d36e1","shortId":"bz7DkM","kind":"skill","title":"design-system-starter","tagline":"Create and evolve design systems with design tokens, component architecture, accessibility guidelines, and documentation templates. Ensures consistent, scalable, and accessible UI across products.","description":"# 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/component-examples.md` - Complete component implementations\n- `templates/design-tokens-template.json` - W3C design token format\n- `templates/component-template.tsx` - React component template\n- `checklists/design-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\",     // 12px\n      \"sm\": \"0.875rem\",    // 14px\n      \"base\": \"1rem\",      // 16px\n      \"lg\": \"1.125rem\",    // 18px\n      \"xl\": \"1.25rem\",     // 20px\n      \"2xl\": \"1.5rem\",     // 24px\n      \"3xl\": \"1.875rem\",   // 30px\n      \"4xl\": \"2.25rem\",    // 36px\n      \"5xl\": \"3rem\"        // 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\",   // 4px\n    \"2\": \"0.5rem\",    // 8px\n    \"3\": \"0.75rem\",   // 12px\n    \"4\": \"1rem\",      // 16px\n    \"5\": \"1.25rem\",   // 20px\n    \"6\": \"1.5rem\",    // 24px\n    \"8\": \"2rem\",      // 32px\n    \"10\": \"2.5rem\",   // 40px\n    \"12\": \"3rem\",     // 48px\n    \"16\": \"4rem\",     // 64px\n    \"20\": \"5rem\",     // 80px\n    \"24\": \"6rem\"      // 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\",   // 2px\n    \"base\": \"0.25rem\",  // 4px\n    \"md\": \"0.375rem\",   // 6px\n    \"lg\": \"0.5rem\",     // 8px\n    \"xl\": \"0.75rem\",    // 12px\n    \"2xl\": \"1rem\",      // 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/component-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/component-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// ✅ Good: Consistent naming\n<Button variant=\"primary\" size=\"md\" />\n<Input variant=\"outlined\" size=\"md\" />\n\n// ❌ Bad: Inconsistent\n<Button type=\"primary\" sizeMode=\"md\" />\n<Input style=\"outlined\" inputSize=\"md\" />\n```\n\n**2. Sensible Defaults**\n```typescript\n// ✅ Good: Provides defaults\ninterface ButtonProps {\n  variant?: 'primary' | 'secondary';  // Default: primary\n  size?: 'sm' | 'md' | 'lg';          // Default: md\n}\n\n// ❌ 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// ✅ Good: Composable\n<Card>\n  <Card.Header>\n    <Card.Title>Title</Card.Title>\n  </Card.Header>\n  <Card.Body>Content</Card.Body>\n  <Card.Footer>Actions</Card.Footer>\n</Card>\n\n// ❌ Bad: Too many props\n<Card\n  title=\"Title\"\n  content=\"Content\"\n  footerContent=\"Actions\"\n  hasHeader={true}\n  hasFooter={true}\n/>\n```\n\n**4. Polymorphic Components**\nAllow components to render as different HTML elements:\n```typescript\n<Button as=\"a\" href=\"/login\">Login</Button>\n<Button as=\"button\" onClick={handleClick}>Click Me</Button>\n```\n\nSee `references/component-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<string, string>;\n  };\n  spacing: Record<string, string>;\n  borderRadius: Record<string, string>;\n  shadow: Record<string, 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<div className=\"bg-white dark:bg-gray-900 text-gray-900 dark:text-white\">\n  Content\n</div>\n```\n\n**Approach 3: Styled Components ThemeProvider**\n```typescript\nconst lightTheme = { background: '#fff', text: '#000' };\nconst darkTheme = { background: '#000', text: '#fff' };\n\n<ThemeProvider theme={isDark ? darkTheme : lightTheme}>\n  <App />\n</ThemeProvider>\n```\n\n---\n\n## Accessibility Guidelines\n\n### WCAG 2.1 Level AA Compliance\n\n#### Color Contrast\n- **Normal text** (< 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://webaim.org/resources/contrastchecker/)\n\n#### Keyboard Navigation\n```typescript\n// ✅ All interactive elements must be keyboard accessible\n<button\n  onClick={handleClick}\n  onKeyDown={(e) => e.key === 'Enter' && handleClick()}\n>\n  Click me\n</button>\n\n// ✅ Focus management\n<Modal>\n  <FocusTrap>\n    {/* Modal content */}\n  </FocusTrap>\n</Modal>\n```\n\n#### ARIA Attributes\nEssential ARIA patterns:\n- `aria-label`: Provide accessible names\n- `aria-expanded`: Communicate expanded/collapsed 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 (`<button>`, `<nav>`, `<main>`)\n- Avoid div/span soup for interactive elements\n- Provide meaningful labels for all controls\n\nSee `references/component-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/component-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/minor/patch 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/dark 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","tags":["design","system","starter","agent","toolkit","softaworks","agent-skills","automation","claude","claude-code","coding-agent","development"],"capabilities":["skill","source-softaworks","skill-design-system-starter","topic-agent-skills","topic-automation","topic-claude","topic-claude-code","topic-coding-agent","topic-development"],"categories":["agent-toolkit"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/softaworks/agent-toolkit/design-system-starter","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add softaworks/agent-toolkit","source_repo":"https://github.com/softaworks/agent-toolkit","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 1689 github stars · SKILL.md body (14,520 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-03T00:52:48.946Z","embedding":null,"createdAt":"2026-04-18T21:54:27.702Z","updatedAt":"2026-05-03T00:52:48.946Z","lastSeenAt":"2026-05-03T00:52:48.946Z","tsv":"'-0.025':539 '-1':689,700 '-12':763 '-2':710 '-3':721 '-4':731 '-5':742 '-6':752 '-950':1507 '/resources/contrastchecker/)':1213 '0':542,562,563,635,667,670,672,673,674,677,680,682,683,684,686,692,693,694,697,703,704,705,707,713,714,715,718,724,725,726,728,734,735,736,739,745,746,747,749,755,756,757,760,766,767,768 '0.025':544 '0.05':675 '0.1':685,695,706,716,727,737,748,758 '0.125':637 '0.25':565,641,769 '0.375':645 '0.5':569,649 '0.75':486,573,653 '0.875':490 '000':1162,1166 '000000':1128 '1':202,240,331,437,446,453,564,955,1114,1187,1196,1201,1367 '1.125':497 '1.25':501,530,580 '1.5':505,532,584 '1.75':534 '1.875':509 '10':590 '100':344,410 '10px':719,751 '12':594 '12px':488,575,655 '14pt':443,1193 '14px':492 '15px':720 '16':597 '16px':495,578,658 '172554':365 '18pt':441,1185,1191 '18px':499 '1a1a1a':1137 '1d4ed8':357 '1e3':362 '1e40':359 '1px':668,678,687 '1rem':494,577,657 '2':211,261,455,536,568,965,1144,1394 '2.1':108,148,266,431,1177,1544 '2.25':513 '2.5':591 '20':600 '200':346 '20px':503,582,740 '24':603 '24px':507,586 '2563eb':355 '25px':741,761 '2px':639,669,688,708 '2rem':588 '2xl':504,656 '3':217,282,445,452,546,572,1001,1152,1195,1200,1429 '300':348 '30px':511 '32px':589 '36px':515 '3b82f6':353 '3px':679 '3rem':517,595 '3xl':508 '4':224,299,576,628,1026,1457 '4.5':436,1186 '400':350,399,521 '40px':593 '48px':518,596 '4px':556,567,643,698,709,729,1526 '4rem':598 '4xl':512 '5':231,579,661 '50':342,407,1506 '500':352,396,523 '50px':762 '5rem':601 '5xl':516 '6':583 '600':354,376,393,414,417,420,423,525 '60a5fa':351 '64px':599 '6px':647,699,730 '6rem':604 '700':356,381,527 '8':587 '800':358,386 '80px':602 '8px':558,571,651,750,1528 '900':361,390 '93c5fd':349 '950':364 '96px':605 '9999px':660 'a11y':158 'a8a':363 'aa':149,268,433,1179,1546 'access':15,24,72,105,146,262,424,1174,1223,1247,1292,1334 'across':26,1479 'action':855,1010,1021 'activ':384 'actual':944 'adopt':1430,1437,1476,1569 'af':360 'allow':1029 'alongsid':1427 'announc':1265 'api':304,950 'app':58,86 'appl':464 'apple-system':463 'appli':252 'approach':1113,1143,1151 'architectur':14,98,771 'aria':1238,1241,1244,1250,1256,1263,1300,1337 'aria-control':1255 'aria-expand':1249 'aria-l':1262 'aria-label':1243 'associ':1258 'atom':103,134,137,319,772,775,780,839,899,1411,1531 'attribut':1239,1338 'audit':178,1370 'autom':1440 'avail':1323 'avatar':799 'avoid':1276 'background':402,1074,1159,1165,1515 'bad':963,985,1011 'badg':798 'bar':902 'base':493,559,640,696,1453,1529 'basic':783,1320 'behavior':1341 'best':229,953 'bfdbfe':347 'bg':1121,1135 'blinkmacsystemfont':466 'block':216,785 'blue':341 'bold':444,526,1194 'boolean':815,817,870 'border':629 'borderradius':633,1102 'brand':373,1064,1513 'broken':790 'build':31,215,784,1410,1418 'built':274 'built-in':273 'bundl':160 'button':612,794,800,826,846,1039,1041,1224,1533 'buttonprop':804,973,989 'card':623,851,877,904,1015 'case':1345 'categori':330 'chang':290,1268,1474 'changelog':1471 'checker':1206,1210 'checklist':179,1483 'checklists/design-system-checklist.md':175 'children':820,871 'clear':303 'click':1044,1232 'code':480,1347,1428 'codemod':1439 'cognit':247 'collect':200 'color':94,127,208,332,335,339,367,371,426,997,1063,1120,1125,1134,1139,1181,1378,1499,1504,1511 'color-bg-primari':1119,1133 'color-text-primari':1124,1138 'color.primitive.blue':375,380,385,422 'color.primitive.gray':389,392,395,398,406,409 'color.primitive.green':413 'color.primitive.red':419 'color.primitive.white':401,404 'color.primitive.yellow':416 'common':219,555,1343 'communic':1252 'complet':163,825,1049,1291,1327 'complex':890,892 'complianc':109,269,1180,1547 'compliant':150 'compon':13,70,97,100,112,132,153,164,173,195,212,291,449,607,611,770,782,801,879,894,949,1028,1030,1051,1154,1199,1304,1308,1314,1362,1382,1387,1392,1469,1532,1559 'component-specif':606 'compos':1007,1416 'composit':223,292,836,887,891,1002 'compound':878 'comprehens':306 'config':1409 'configur':1004 'consist':21,39,241,552,961 'const':1157,1163 'contain':852 'content':854,920,928,939,948,1009,1018,1019,1150,1237,1261,1267 'contextu':368 'contract':305 'contrast':427,1182,1205,1209 'control':1257,1259,1287 'core':238 'courier':481 'creat':5,51,77,80,1381,1391,1432,1485,1502,1554,1565 'creativ':243 'css':141,1115,1117,1146,1405 'custom':312 'dark':60,113,118,1056,1110,1132,1147 'darkthem':1164,1172 'dashboard':923 'data':1130 'data-them':1129 'dbeaf':345 'decis':207,321 'default':264,967,971,977,983,1332 'defin':323,919,1375,1490,1509 'deprec':297,1464 'describ':47 'descript':1333 'design':2,8,11,28,34,53,78,82,87,91,99,104,125,135,168,176,180,186,189,203,206,254,286,313,315,320,773,951,1364,1368,1376,1388,1488,1491,1496,1530 'design-system-start':1 'develop':256,301,1395 'developer-friend':300 'dialog':910 'differ':1034 'disabl':397,814 'div/span':1277 'doc':154,1426 'document':18,152,232,307,1302,1305,1310,1356,1421,1472,1550 'docusaurus':1350 'duplic':294 'dynam':1266 'e':1228 'e.key':1229 'easi':308 'eff6ff':343 'effect':237 'element':1036,1219,1275,1281 'em':540,545 'enabl':288 'ensur':20,37,106,425,1542 'enter':1230 'error':418,865,1084 'errormessag':850 'essenti':1240 'establish':1495,1523,1560 'etc':1536 'everyth':236,986 'everywher':253 'evolv':7 'exampl':76,157,793,843,888,900,922,1293,1321,1342,1556 'except':41 'exist':1371 'expand':1251 'expanded/collapsed':1253 'experi':43 'famili':1522 'featur':933 'feedback':411,1079,1451,1516 'fff':1160,1168 'ffffff':1123,1142 'figma':1390 'fira':479 'first':1412 'focus':1234,1297 'font':1521 'fontfamili':460,1089 'fontsiz':484,1094 'fontweight':519 'footer':934 'footercont':1020 'format':170 'formfield':847,856,876 'formfieldprop':860 'foundat':205 'friend':302 'full':659 'function':841 'gap':621,626 'gather':1450 'georgia':473 'ghost':809 'global':289 'go':1424 'good':960,969,1006 'grace':1470 'graphic':451 'grid':905 'group':837 'guid':1434,1567 'guidelin':16,73,225,1175 'handleclick':1043,1226,1231 'hasfoot':1024 'hashead':1022 'header':926 'help':1435 'hero':932 'hierarchi':136 'hint':867 'hover':379 'html':1035,1274 'icon':797,818 'identifi':1373 'implement':115,165,827,1112,1403,1537 'import':1317 'includ':1294 'inconsist':964,1374 'info':421,1086 'input':795,845,849,881,1534 'instanc':943 'integr':310 'inter':462 'interact':1218,1280,1355 'interfac':803,859,972,988,1061 'inventori':1383 'invers':400 'isdark':1171 'iter':1452 'json':131,338,370,458,560,610,632,664 'keyboard':271,1214,1222,1335 'label':796,848,861,1245,1284,1535 'languag':260,328 'larg':439,1189 'layout':913,924,931,937 'learn':250 'letterspac':537 'level':267,432,916,1178,1545 'lg':496,648,738,813,982,996 'librari':196,1393 'light/dark':1540 'lightthem':1158,1173 'like':1207 'lineheight':528 'link':1296 'list':1384 'live':1264 'load':248,816 'login':1038 'loos':535 'made':895 'main':927 'maintain':285 'mainten':1458 'major/minor/patch':1462 'manag':1235 'mani':1013 'market':929 'md':644,717,812,981,984,995 'mean':369 'meaning':1283 'medium':522 'meet':429 'methodolog':774 'migrat':1433,1441,1566 'minimum':270,438,447,454,1188,1197,1202 'modal':884,909,1236 'mode':61,114,119,1057,1111,1148,1541 'molecul':138,776,834,857,897,1419 'monitor':1475 'mono':478,1092 'monospac':483 'must':1220 'name':863,958,962,1248 'navig':272,901,1215 'need':50,1386 'new':475,482,1487 'none':634 'normal':434,520,531,541,1183 'note':159 'old':1468 'onclick':1042,1225 'onkeydown':1227 'organ':139,777,889,1420 'outlin':808 'output':124 'pad':614,618,624,999 'padding-i':617 'padding-x':613 'page':779,912,915,930,936,941,945 'page-level':914 'palett':1505 'panel':940 'pattern':151,218,245,833,880,1053,1242,1301,1372 'phase':1369,1396,1431,1459,1466 'philosophi':182 'placement':921 'polymorph':1027,1050 'possibl':1443 'practic':230,954 'predict':244,956 'primari':374,378,383,388,403,806,975,978,991,1065,1070,1075,1122,1127,1136,1141 'primary-act':382 'primary-hov':377 'primit':334,340,781,1415,1503 'principl':227,239,1492 'product':27,903,1480 'profil':907 'prop':156,952,957,1014,1326,1328 'provid':68,970,1246,1282,1438 'purpos':1311 'px':690,701,711,722,732,743,753,764 'quick':44,121,1481 'radius':630 'ratio':428 'raw':336 'react':57,172 'react.reactnode':819,821,872 'reader':277,1270,1340 'real':947,1455 'record':1095,1099,1103,1107 'reduc':246,293 'refer':122 'references/component-examples.md':162,823,874,1047,1289 'relax':533 'releas':1463,1563 'rem':487,491,498,502,506,510,514,566,570,574,581,585,592,638,642,646,650,654 'render':1032 'requir':869,987 'resourc':161 'reusabl':213 'rgba':671,681,691,702,712,723,733,744,754,765 'robust':32 'roman':476 'root':1118 'rule':226 'run':1444 'san':461,470,1090 'sans-serif':469 'scalabl':22,33,283 'scale':549,554,1508,1519,1525 'screen':276,1269,1339 'searchbar':844 'secondari':391,405,807,976,992,1067,1072,1077 'section':908 'see':822,873,1046,1288,1357 'sego':467 'semant':366,372,1273,1461,1510 'semibold':524 'sensibl':966 'serif':471,472,477 'set':89,935,1397,1517,1548 'setup':145 'shadow':130,662,665,1106 'sidebar':925 'similar':1352,1553 'simpl':835 'size':810,830,979,993 'skill':67 'skill-design-system-starter' 'skip':1295 'sm':489,636,676,811,980,994 'solut':221 'soup':1278 'source-softaworks' 'space':96,129,209,547,553,561,609,1098,1380,1501,1524 'spacing.2':620,622 'spacing.4':616,627 'spacing.6':625 'speak':257 'specif':608,942 'standard':1303,1361 'start':45,281,1413,1482 'starter':4,30 'state':1254 'statement':1318 'storybook':1349,1400,1551 'strategi':298,1465,1564 'string':862,864,866,868,998,1000,1066,1068,1071,1073,1076,1078,1081,1083,1085,1087,1091,1093,1096,1097,1100,1101,1104,1105,1108,1109 'structur':101,133,917,1059,1363,1498 'style':832,1153,1325 'success':412,1080 'support':62,120,278,1271,1336 'system':3,9,29,35,54,79,83,177,181,187,190,325,465,1365,1489,1539 'tab':938 'tabl':1329 'tailwind':1145 'task':123 'team':1436,1447,1570 'templat':19,174,778,911,1306 'templates/component-template.tsx':171,1358 'templates/design-tokens-template.json':166 'tertiari':394,408 'test':1402 'text':387,435,440,1069,1126,1140,1161,1167,1184,1190,1514 'theme':116,140,1054,1058,1062,1131,1170,1408,1538 'themeprovid':144,1155,1169 'tight':529,538 'time':474 'titl':853,1008,1016,1017 'togeth':842 'token':12,69,88,92,126,169,204,287,314,316,329,333,457,548,631,663,1377,1404,1497,1512 'tool':1203,1353,1399 'topic-agent-skills' 'topic-automation' 'topic-claude' 'topic-claude-code' 'topic-coding-agent' 'topic-development' 'track':1477 'train':1446 'trap':1298 'trigger':74,75 'true':1023,1025 'tsx':1149 'type':1331 'typescript':802,858,959,968,1005,1037,1052,1060,1156,1216,1401 'typographi':128,210,456,459,1088,1379,1500,1518 'ui':25,214,448,468,893,1198 'upward':1417 'usag':1316,1449,1456,1478,1555 'use':102,235,550,1204,1272,1344,1348 'user':42,249,906 'ux':220 'valu':337,1494 'variabl':142,1116,1406 'variant':805,829,883,974,990,1322 'version':295,1460,1561 'visual':38,327,1324 'w3c':167 'warn':415,1082 'wcag':107,147,265,430,1176,1543 'webaim':1208 'webaim.org':1212 'webaim.org/resources/contrastchecker/)':1211 'wide':543 'workflow':1366 'workshop':1445 'write':1425 'x':615 'xl':500,652,759 'xs':485,666 'y':619","prices":[{"id":"5d1b7be2-ad96-4828-b936-b80a0da5ff7b","listingId":"e9804c52-cd6a-492b-9660-465a1d6d36e1","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"softaworks","category":"agent-toolkit","install_from":"skills.sh"},"createdAt":"2026-04-18T21:54:27.702Z"}],"sources":[{"listingId":"e9804c52-cd6a-492b-9660-465a1d6d36e1","source":"github","sourceId":"softaworks/agent-toolkit/design-system-starter","sourceUrl":"https://github.com/softaworks/agent-toolkit/tree/main/skills/design-system-starter","isPrimary":false,"firstSeenAt":"2026-04-18T21:54:27.702Z","lastSeenAt":"2026-05-03T00:52:48.946Z"}],"details":{"listingId":"e9804c52-cd6a-492b-9660-465a1d6d36e1","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"softaworks","slug":"design-system-starter","github":{"repo":"softaworks/agent-toolkit","stars":1689,"topics":["agent-skills","ai","automation","claude","claude-code","coding-agent","development"],"license":"mit","html_url":"https://github.com/softaworks/agent-toolkit","pushed_at":"2026-03-05T16:46:24Z","description":"A curated collection of skills for AI coding agents. Skills are packaged instructions and scripts that extend agent capabilities across development, documentation, planning, and professional workflows.","skill_md_sha":"4d37e9b7b0c0cc42307c68391b7a267ae9acefa4","skill_md_path":"skills/design-system-starter/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/softaworks/agent-toolkit/tree/main/skills/design-system-starter"},"layout":"multi","source":"github","category":"agent-toolkit","frontmatter":{"name":"design-system-starter","license":"MIT","description":"Create and evolve design systems with design tokens, component architecture, accessibility guidelines, and documentation templates. Ensures consistent, scalable, and accessible UI across products."},"skills_sh_url":"https://skills.sh/softaworks/agent-toolkit/design-system-starter"},"updatedAt":"2026-05-03T00:52:48.946Z"}}