20acf3ae9b
Validated against the plugin-dev:skill-development checklist and applied conformance fixes: Description style — all five skill descriptions now use the canonical "This skill should be used when..." third-person form, with expanded trigger-phrase coverage. Previously used imperative "Use when..." which the spec calls out as wrong. Writing voice — body prose changed from "You are the dispatcher / You walk a user through..." to imperative "Act as the dispatcher / Walk the user through...". Remaining "you" usage is confined to quoted output text the agent prints to the user, which is correct usage. Progressive disclosure — composer/skills/ui-system/SKILL.md was 2513 words (over the 2000-word ideal). Refactored to 1063 words by moving detailed phase content into: - references/design-interview.md (D1–D11 phase specifications) - references/interaction-interview.md (I1–I11 phase specifications) - references/inspiration-presets.md (Linear/Notion/Stripe/etc. table) The SKILL.md now points at each reference as needed; agents load only what's relevant for the current phase. Other four skills already within the 1000–2000 word range, no refactor needed. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
4.5 KiB
Design system interview — full phase reference
Detailed phases for Part 1 of the ui-system interview. Read this when running the design-system interview; it expands the phase summaries in SKILL.md.
Each phase: state what's being decided, show the default if there is one, ask
the question(s), confirm the answer back, move on. The user can reply
default (accept) or skip (mark <TBD: ...>) at any phase.
D1 — Visual posture (one paragraph)
The north star sentence for visual decisions. Don't ask for paragraphs; ask for adjectives and assemble.
Three or four words that describe how this should feel.
Examples: "quiet, dense, monochrome, one accent" / "playful,
generous, expressive type" / "clinical, neutral, accessibility-forward".
Compose into a single sentence; show; accept.
D2 — Color
Batch as a single phase with sub-questions; tight loop.
D2.1 Brand primary. If material gave a color, propose it. Else:
Pick a brand primary. Either name a hex, name a color
("warm orange", "deep teal"), or name a reference ("Linear's purple",
"Stripe's indigo"). I'll generate the variants from there.
D2.2 Brand secondary. Optional. default = none.
D2.3 Neutral tone. Warm / cool / true. One question.
For grays, do they feel slightly tan (warm), slightly blue (cool),
or truly neutral (true)? Default: cool.
D2.4 Generate the neutral scale. Compute 50–950 from the chosen tone
and brand contrast targets. Show the user; offer default or "redo with
warmer/cooler/more contrast".
D2.5 Semantic colors. Success / warning / error / info. Show defaults that contrast against both light and dark backgrounds; user accepts or overrides one at a time.
D2.6 Dark mode. yes / no / system-following. Default: system. If yes, generate the dark token mapping (invert + adjust saturation per token class) and show.
D2.7 Accessibility check. Compute contrast ratios between primary + neutral pairs. Flag anything below 4.5:1 for body text or 3:1 for UI. Don't silently accept failures — surface and confirm or adjust.
D3 — Typography
D3.1 One family or two? Default: one.
D3.2 Family choice. If user has no preference, offer presets:
- Modern sans: Inter (free, broad weights)
- Humanist: Source Sans 3 / IBM Plex Sans
- System stack: native to OS (free, no load)
- Editorial: Inter + Fraunces (display)
- Technical: IBM Plex Sans + IBM Plex Mono
D3.3 Scale base. 14, 15, 16. Default: 16 (web), 17 (iOS native), 14 (compact dashboards).
D3.4 Scale ratio. 1.125 (subtle), 1.2, 1.25 (default), 1.333 (dramatic), 1.5 (display-heavy).
D3.5 Line-height policy.
- Display: 1.1–1.2 (tight)
- Body: 1.5 (normal)
- Long-form prose: 1.7 (relaxed)
Defaults usually fine; user can override one of three.
D4 — Spacing
D4.1 Base unit. 4 (default — finer control) or 8 (rougher cadence; iOS native often).
D4.2 Scale. Use the standard 12-step (0, 0.5, 1, 1.5, 2, 3, 4, 6, 8, 12, 16, 24) — almost always accepted as default.
D5 — Radii
D5.1 Posture. sharp (0–4) / tight (4–8) / medium (8–16) / pillowy (16+) / mixed.
D5.2 Generate sm/md/lg/pill/full. Show; accept or tweak one.
D6 — Shadows & elevation
D6.1 Posture. flat (none) / subtle / generous.
D6.2 Scale. xs/sm/md/lg/xl. Generated from posture; show; accept.
D7 — Density
D7.1 Default density. comfortable (default; web app) / cozy / compact (data-heavy dashboard).
This drives component padding tokens — important enough to ask, easy to forget otherwise.
D8 — Visual motion
D8.1 Default duration. fast (150ms), default (250ms), slow (400ms). Default: default.
D8.2 Default easing. standard / accel / decel / custom. Default: standard.
Behavioral motion (when things animate) lives in the interaction interview, not here.
D9 — Components
Read the entity vocabulary from ia.md. Confirm the standard set
(Button, Input, Card, Surface) and ask for project-specific additions found in IA.
For each project-specific component, ask: variants? states? anatomy? Default to "standard variants only" if user is unsure — better to add later than over-spec now.
D10 — Theme variants (skip by default)
Multi-brand / tenant theming usually no for v1. Default: skip.
D11 — Accessibility tokens
D11.1 Focus ring. Style (solid / double / inner-outer) and color (brand / accent / outline-default). Default: solid 2px brand at 60% opacity.
D11.2 Contrast targets. Confirm WCAG AA (4.5:1 text, 3:1 UI). AAA optional. Default: AA.