Design System Skill

This skill produces principled, production-ready design decisions grounded in three reference volumes. It operates in two modes. Detect the correct mode from context — don't ask unless genuinely ambiguous.

Modes

Mode 1: /ui-spec — UI Specification

Trigger: User describes a screen, feature, or component they need to build and wants a design spec before coding.

What it does: Outputs a structured spec covering layout decisions, component choices, spacing values, interaction states, dark/light variants, accessibility requirements, and implementation notes.

Read before running: references/vol3-saas-patterns.md (relevant component sections) + references/vol2-visual-interaction.md (layout patterns section)

Mode 2: /ui-audit — Design Audit

Trigger: User shares existing UI (component code, screenshot description, Figma spec, or live URL) and wants a review.