feat(composer): discovery-phase plugin from "I want an app that..." to tracker-loaded stories

Plugin pairs with Symphony — Composer's output (issues in the project's
tracker) is Symphony's input. State-aware /composer command walks the
user through 11 phases: concept, users (with workflow probing for hidden
actors), requirements/NFR/IA, design system, interaction design, flows,
mocks, architecture, stories, roadmap, load. Each phase produces a
reviewable artifact in docs/planning/ (or, for design and interaction,
a project-local skill — see below).

Architecture is intentionally LAST, after the spec is complete. Mocks
are JSX/TSX regardless of final stack and pass a "text feasibility"
audit — every visible string is categorized (static/computed/authored),
computed strings are traced to source data, and any string implying an
unspecified feature halts the commit.

Design system and interaction design are produced as PROJECT-LOCAL
SKILLS in .claude/skills/<slug>-design-system/ and
.claude/skills/<slug>-interaction-design/, not as docs in
docs/planning/. Skills auto-load via description matching whenever UI
work happens; a reference doc gets read once and drifts out of context.
The mocks skill imports tokens directly from the design-system skill
for a single source of truth across mocks and (eventually) real code.

ui-system is currently a PLACEHOLDER — captures the minimum needed for
mocks to proceed with <TBD: ...> markers as a return-pass worklist.
Full interview specification is the next pass.

Council touchpoints baked in: PM/skeptic/end-user after requirements,
end-user/a11y after mocks, full architecture council after architecture,
plus auto-additions (legal-triage on regulated data, privacy-advocate
on PII, finance-controller on money flows).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

composer/templates/design-system/SKILL.md

@@ -0,0 +1,94 @@
+---
+name: <SLUG>-design-system
+description: Design system for the <PROJECT NAME> project. Color tokens, typography, spacing, radii, shadows, motion durations, and component vocabulary. Load and apply whenever building UI for this project — generating mocks, writing components, picking colors, configuring Tailwind, styling native screens, building themes, designing CSS, or making any visual decision. The canonical visual reference for this project; if anything visible is being touched, this skill should be in context. Pairs with <SLUG>-interaction-design.
+---
+
+# <PROJECT NAME> design system
+
+> **Status: <draft | reviewed | locked>**
+> Generated by Composer's `ui-system` phase. Re-running that phase
+> updates this skill (with confirmation).
+
+## How to use this skill
+
+Whenever you generate or edit UI for this project — a mock, a real
+component, a theme, a CSS file — read this SKILL.md and the sidecar
+files first, then use the tokens. Do not hardcode values. Do not
+introduce new components without proposing them here first.
+
+Sidecar files in this skill directory:
+- `tokens.ts` — machine-readable token export. Import in mocks/code.
+- `components.md` — component vocabulary with anatomy.
+
+## Visual posture
+
+<!-- One or two sentences describing the feel. "Quiet, dense, monochromatic with a single brand accent." Or "Playful, generous spacing, expressive type." -->
+
+<TBD: visual posture>
+
+## Color
+
+### Brand
+- Primary: `<#hex>` — <name>
+- (Secondary, if any): `<#hex>` — <name>
+
+### Neutrals
+- Tone: <warm | cool | true>
+- Scale: 50 / 100 / 200 / 300 / 400 / 500 / 600 / 700 / 800 / 900 / 950
+
+### Semantic
+| Role | Value |
+|---|---|
+| Success | `<#hex>` |
+| Warning | `<#hex>` |
+| Error   | `<#hex>` |
+| Info    | `<#hex>` |
+
+### Dark mode
+<TBD: yes / no / system-following + token mapping>
+
+## Typography
+
+- **Display family**: <name>, weights <list>
+- **Body family**: <name>, weights <list>
+- **Scale base**: <px>, ratio <1.125 | 1.2 | 1.25 | 1.333>
+- **Sizes**: xs / sm / base / lg / xl / 2xl / 3xl / 4xl
+- **Line-height**: tight for display, normal for body, relaxed for long-form prose
+
+See `tokens.ts` for exact px values.
+
+## Spacing
+
+- **Base unit**: <4px | 8px>
+- **Scale (in base units)**: 0, 0.5, 1, 1.5, 2, 3, 4, 6, 8, 12, 16, 24
+
+## Radii
+
+- `sm`, `md`, `lg`, `pill`, `full` — values in `tokens.ts`.
+
+## Shadows
+
+- `xs / sm / md / lg / xl` — values in `tokens.ts`.
+- (Or: "flat — no shadows" if the posture is flat.)
+
+## Visual motion
+
+- **Default duration**: <ms>
+- **Default easing**: <named curve or cubic-bezier>
+
+Behavioral motion (when things animate, what does and doesn't) lives
+in the interaction-design skill.
+
+## Components
+
+See `components.md` in this directory for the full vocabulary and
+anatomy. The TL;DR list:
+
+- Button (primary / secondary / ghost / destructive / link)
+- Input (text / textarea / select / checkbox / radio / toggle)
+- Card / Surface
+- (project-specific components from `ia.md`)
+
+## TBD on return
+
+- <TBD: anything the placeholder pass couldn't answer>