Use when choosing color palettes, typography, or UI styles for a new project, designing landing pages or dashboards, or implementing accessibility requirements. Generates full design systems with searchable styles, font pairings, and stack-specific guidelines. For implementation code patterns, see frontend-design.
Comprehensive design guide for web and mobile applications. Contains 50+ styles, 97 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 9 technology stacks.
Generate a full design system (REQUIRED first step):
python3 skills/design-system/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]
Example:
python3 skills/design-system/scripts/search.py "beauty spa wellness" --design-system -p "Serenity Spa"
| Priority | Category | Impact |
|---|---|---|
| 1 | Accessibility | CRITICAL |
| 2 | Touch & Interaction | CRITICAL |
| 3 | Performance | HIGH |
| 4 | Layout & Responsive | HIGH |
| 5 | Typography & Color | MEDIUM |
| 6 | Animation | MEDIUM |
cursor-pointer to clickable elementsprefers-reduced-motion| Domain | Use For |
|---|---|
product | Product type recommendations |
style | UI styles, colors, effects |
typography | Font pairings, Google Fonts |
color | Color palettes by product |
landing | Page structure, CTA |
chart | Chart types, libraries |
ux | Best practices |
Domain search:
python3 skills/design-system/scripts/search.py "<keyword>" --domain <domain>
html-tailwind (default), react, nextjs, vue, svelte, swiftui, react-native, flutter, shadcn, jetpack-compose
Stack guidelines:
python3 skills/design-system/scripts/search.py "<keyword>" --stack html-tailwind
Save for hierarchical retrieval across sessions:
python3 skills/design-system/scripts/search.py "<query>" --design-system --persist -p "Project Name"
Creates design-system/MASTER.md as global source of truth.
For detailed documentation, see: