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>

composer/templates/design-system/components.md

@@ -0,0 +1,52 @@
+# Component vocabulary
+
+The named components for <PROJECT NAME>. Match names from `ia.md`
+where applicable. Do not introduce new components without proposing
+them here first.
+
+This file is loaded automatically by the design-system skill — agents
+generating UI should be aware of every component in this list and
+prefer them to ad-hoc one-offs.
+
+## Primitives
+
+### Button
+- **Variants**: primary | secondary | ghost | destructive | link
+- **Sizes**: sm | md | lg
+- **States**: default | hover | active | focus | disabled | loading
+- **Anatomy**: optional leading icon · label · optional trailing icon
+- **Motion**: <TBD>
+
+### Input
+- **Variants**: text | textarea | select | checkbox | radio | toggle
+- **Sizes**: sm | md | lg
+- **States**: default | focus | error | disabled | readonly
+- **Anatomy**: label · field · helper text · error message
+- **Validation pattern**: <TBD — see interaction-design skill>
+
+### Card / Surface
+- **Variants**: <flat | bordered | elevated — pick or list>
+- **Anatomy**: <header? · body · footer?>
+
+## Project-specific components
+
+<!--
+Pulled from ia.md. One block each, with anatomy and any state-specific
+notes that should always apply when this component is rendered.
+-->
+
+### <Component name>
+
+- **Purpose**: <one line>
+- **Anatomy**: <slots / regions>
+- **States**: <list>
+- **Notes**: <anything load-bearing>
+
+## Patterns to avoid
+
+<!--
+Things that come up often and should be vetoed. Saves the agent from
+re-inventing them.
+-->
+
+- <TBD: e.g., "no nested cards", "no inline icons in body text", etc.>

composer/templates/design-system/tokens.ts

@@ -0,0 +1,101 @@
+// Design tokens for <PROJECT NAME>.
+// Generated by Composer's ui-system phase.
+// Single source of truth for colors, type, spacing, radii, shadows, motion.
+// Import this in mocks and (eventually) in real UI code; do not hardcode.
+
+export const color = {
+  brand: {
+    primary: "<TBD: #hex>",
+    // secondary: "<TBD>",
+  },
+  neutral: {
+    50:  "<TBD>",
+    100: "<TBD>",
+    200: "<TBD>",
+    300: "<TBD>",
+    400: "<TBD>",
+    500: "<TBD>",
+    600: "<TBD>",
+    700: "<TBD>",
+    800: "<TBD>",
+    900: "<TBD>",
+    950: "<TBD>",
+  },
+  semantic: {
+    success: "<TBD>",
+    warning: "<TBD>",
+    error:   "<TBD>",
+    info:    "<TBD>",
+  },
+  // dark mode tokens (if applicable):
+  // dark: { ... }
+} as const;
+
+export const fontFamily = {
+  display: "<TBD: name>, system-ui, sans-serif",
+  body:    "<TBD: name>, system-ui, sans-serif",
+  mono:    "ui-monospace, SFMono-Regular, monospace",
+} as const;
+
+export const fontSize = {
+  xs:  "12px",
+  sm:  "14px",
+  base:"16px",
+  lg:  "18px",
+  xl:  "20px",
+  "2xl":"24px",
+  "3xl":"30px",
+  "4xl":"36px",
+} as const;
+
+export const lineHeight = {
+  tight:   1.2,
+  normal:  1.5,
+  relaxed: 1.7,
+} as const;
+
+// Spacing scale in base units. Multiply by base (4 or 8) for px.
+export const spacingBase = 4; // <TBD: 4 or 8>
+export const spacing = {
+  0:   0,
+  0.5: 0.5 * spacingBase,
+  1:   1   * spacingBase,
+  1.5: 1.5 * spacingBase,
+  2:   2   * spacingBase,
+  3:   3   * spacingBase,
+  4:   4   * spacingBase,
+  6:   6   * spacingBase,
+  8:   8   * spacingBase,
+  12:  12  * spacingBase,
+  16:  16  * spacingBase,
+  24:  24  * spacingBase,
+} as const;
+
+export const radius = {
+  sm:   "<TBD: px>",
+  md:   "<TBD: px>",
+  lg:   "<TBD: px>",
+  pill: "9999px",
+  full: "9999px",
+} as const;
+
+export const shadow = {
+  xs: "<TBD>",
+  sm: "<TBD>",
+  md: "<TBD>",
+  lg: "<TBD>",
+  xl: "<TBD>",
+} as const;
+
+export const motion = {
+  duration: {
+    fast:    150,
+    default: 250,
+    slow:    400,
+  },
+  easing: {
+    standard: "cubic-bezier(0.2, 0, 0, 1)",
+    accel:    "cubic-bezier(0.4, 0, 1, 1)",
+    decel:    "cubic-bezier(0, 0, 0.2, 1)",
+  },
+} as const;