design-systemlisted

# Design System Skill v3.0 Manage DESIGN.md files that frontend agents read to generate consistent UI. ## Actions ### `/design-system init` Create a new DESIGN.md from the template: 1. Copy `docs/templates/DESIGN.md.template` to project root as `DESIGN.md` 2. Ask user for: project name, visual theme, primary color 3. Fill in template variables 4. Output: `DESIGN.md` ready for customization ```bash /design-system init # Creates DESIGN.md with 9 sections from template ``` ### `/design-system load` Load DESIGN.md into current context for frontend work: 1. Read `DESIGN.md` from project root (or specified path) 2. Extract design tokens as structured data 3. Inject into agent context as reference 4. Used automatically by orchestrator Step 3 (PLAN) for frontend tasks ```bash /design-system load # Loads DESIGN.md tokens into context ``` ### `/design-system validate` Check generated components against DESIGN.md: 1. Read DESIGN.md 2. Scan specified files for design token usage 3. Report violations: hardcoded colors, wrong spacing, missing states 4. Output: compliance report with fix suggestions ```bash /design-system validate src/components/ # Checks all components against design system ``` ## Integration Points | Skill/Agent | How It Uses DESIGN.md | |---|---| | Orchestrator Step 3 | If task is frontend and DESIGN.md exists, include as context | | ralph-frontend | Loads DESIGN.md before generating any component | | /create-task-batch | Phase 1 asks about design system