design-system-reference

# Design Implementation Guide ## Overview This skill provides **style guides and implementation rules** for frontend design. **For design discovery and style selection**, use the `design-discovery` agent which: - Gathers context through step-by-step questions - Uses VS (Verbalized Sampling) technique to recommend styles with suitability percentages - Applies AIDA methodology for landing pages This skill is automatically loaded after the agent completes discovery. --- ## How to Use ### With Discovery Agent (Recommended) 1. User requests frontend design 2. `design-discovery` agent conducts context gathering 3. Agent presents VS-based style recommendations 4. After style selection, agent loads this skill for implementation ### Direct Usage (Quick Mode) If user already knows their style, skip discovery: ``` "Build me a landing page with Bento Grid style, dark theme, minimal animations" ``` In this case, directly read the relevant style guide and implement. --- ## Style Selection & Guidelines Based on user responses, select the appropriate style and read the corresponding guide. **⚠️ IMPORTANT: You MUST read both the style guide AND relevant common modules before implementing.** ### Available Style Guides Use the `Read` tool to read the corresponding style file: - Editorial → `styles/editorial.md` - Brutalist → `styles/brutalist.md` - Neobrutalism → `styles/neobrutalism.md` - Glassmorphism → `styles/glassmorphism.md` - Liquid Glass → `styles/liquid-glass.md` - Swiss ...