design-system

Design System

---

Mode Detection

Parse $ARGUMENTS:

• If first token is new → Scaffold Mode (remaining tokens = system name)
• Otherwise → Load Mode (first token = system name or query)

---

Load Mode (default)

1. Discover systems: Glob("skills/design-system/systems/*/spec.md") from the repo root
2. Select system:
   • If $ARGUMENTS first token matches a discovered system name → use it; remaining tokens are the query
   • If no token match and exactly one system exists → default to it silently
   • If no token match and multiple systems exist → list available systems via AskUserQuestion
3. Load: Read systems/<selected>/spec.md
4. Present: Output the spec content. If a query was provided, highlight the relevant section.

---

Scaffold Mode (new <name>)

1. Parse system name from $ARGUMENTS (e.g., new acme-brand → name is acme-brand)
2. Validate name is lowercase kebab-case; reject otherwise
3. Create directory: mkdir -p systems/<name>/
4. Copy template: Read templates/spec.md, write to systems/<name>/spec.md
5. Replace placeholder: Update [System Name] and [system name] in the copied file with the actual name
6. Ask user:

   AskUserQuestion: "I've scaffolded `systems/<name>/spec.md` with blank sections.
   Would you like to fill it in interactively now, or edit the file yourself later?"
   

   • Interactive → Walk through each section (Color Palette, Typography, Borders, Layout, Cards, Components, CSS, Shadows, Breakpoints, Scrollbar, Constraints), asking the user for their values
   • Later → Report the file path and stop
7. Report: "Design system <name> created. Use /orc:vibe-code <name> [component] to design with it."

---

Examples

Load a system

/orc:design-system orc-brand

Loads systems/orc-brand/spec.md into context — full color palette, typography, layout, component patterns.