What problem does it solve? Choosing the right visual style, color palette, typography, and UX patterns for a new app or page is time-consuming and inconsistent. This Skill provides a searchable design knowledge base with 67 styles, 161 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types, plus an automated design system generator that produces complete, reasoned recommendations. ## Core Features & Use Cases - Design System Generation: Run a single command with product keywords to get a complete design system covering layout pattern, style, colors, typography, effects, and anti-patterns, with optional persistence to MASTER.md and per-page override files. - Domain-Specific Search: Query dedicated domains (style, color, typography, chart, landing, product, ux, icons, react, web) using a BM25 search engine over curated CSV datasets. - Stack-Specific Guidelines: Retrieve implementation best practices for 17 stacks including React, Next.js, SwiftUI, React Native, Flutter, and JavaFX. - Use Case: When asked to build a fintech dashboard, run the design-system command with "fintech crypto" to receive a full palette, font pairing, layout pattern, and anti-patterns, then persist it so every page follows consistent rules. ## Quick Start Ask the AI to generate a design system for your project, for example: "Generate a design system for a beauty spa booking app called Serenity Spa and persist it for all pages."
