@hegemonart/get-design-done 1.16.0 → 1.19.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (58) hide show
  1. package/.claude-plugin/marketplace.json +12 -4
  2. package/.claude-plugin/plugin.json +22 -4
  3. package/CHANGELOG.md +111 -0
  4. package/README.md +27 -2
  5. package/agents/design-auditor.md +65 -1
  6. package/agents/design-context-builder.md +6 -1
  7. package/agents/design-doc-writer.md +21 -0
  8. package/agents/design-executor.md +22 -4
  9. package/agents/design-pattern-mapper.md +62 -0
  10. package/agents/design-phase-researcher.md +1 -1
  11. package/agents/motion-mapper.md +74 -9
  12. package/agents/token-mapper.md +8 -0
  13. package/package.json +16 -2
  14. package/reference/components/README.md +27 -23
  15. package/reference/components/alert.md +198 -0
  16. package/reference/components/badge.md +202 -0
  17. package/reference/components/breadcrumbs.md +198 -0
  18. package/reference/components/chip.md +209 -0
  19. package/reference/components/command-palette.md +228 -0
  20. package/reference/components/date-picker.md +227 -0
  21. package/reference/components/file-upload.md +219 -0
  22. package/reference/components/list.md +217 -0
  23. package/reference/components/menu.md +212 -0
  24. package/reference/components/navbar.md +211 -0
  25. package/reference/components/pagination.md +205 -0
  26. package/reference/components/progress.md +210 -0
  27. package/reference/components/rich-text-editor.md +226 -0
  28. package/reference/components/sidebar.md +211 -0
  29. package/reference/components/skeleton.md +197 -0
  30. package/reference/components/slider.md +208 -0
  31. package/reference/components/stepper.md +220 -0
  32. package/reference/components/table.md +229 -0
  33. package/reference/components/toast.md +200 -0
  34. package/reference/components/tree.md +225 -0
  35. package/reference/css-grid-layout.md +835 -0
  36. package/reference/data-visualization.md +333 -0
  37. package/reference/external/NOTICE.hyperframes +28 -0
  38. package/reference/form-patterns.md +245 -0
  39. package/reference/image-optimization.md +582 -0
  40. package/reference/information-architecture.md +255 -0
  41. package/reference/motion-advanced.md +754 -0
  42. package/reference/motion-easings.md +381 -0
  43. package/reference/motion-interpolate.md +282 -0
  44. package/reference/motion-spring.md +234 -0
  45. package/reference/motion-transition-taxonomy.md +155 -0
  46. package/reference/motion.md +20 -0
  47. package/reference/onboarding-progressive-disclosure.md +250 -0
  48. package/reference/output-contracts/motion-map.schema.json +135 -0
  49. package/reference/platforms.md +346 -0
  50. package/reference/registry.json +445 -220
  51. package/reference/registry.schema.json +4 -0
  52. package/reference/rtl-cjk-cultural.md +353 -0
  53. package/reference/user-research.md +360 -0
  54. package/reference/variable-fonts-loading.md +532 -0
  55. package/scripts/lib/easings.cjs +280 -0
  56. package/scripts/lib/parse-contract.cjs +220 -0
  57. package/scripts/lib/spring.cjs +160 -0
  58. package/scripts/tests/test-motion-provenance.sh +64 -0
@@ -5,14 +5,14 @@
5
5
  },
6
6
  "metadata": {
7
7
  "description": "Get Design Done — 5-stage agent-orchestrated design pipeline with 9 connections, handoff-first workflow, bidirectional Figma write-back, 22+ specialized agents, queryable knowledge layer (intel store, dependency analysis, learnings extraction), and a self-improvement loop (reflector, frontmatter + budget feedback, global-skills layer). Ships with a full CI/CD pipeline (Node 22/24 × Linux/macOS/Windows) and release automation (auto-tag + GitHub Release + release-time smoke test).",
8
- "version": "1.16.0"
8
+ "version": "1.19.0"
9
9
  },
10
10
  "plugins": [
11
11
  {
12
12
  "name": "get-design-done",
13
13
  "source": "./",
14
- "description": "Agent-orchestrated 5-stage design pipeline: Brief → Explore → Plan → Design → Verify. 22+ specialized agents, 9 connections (Figma, Refero, Preview, Storybook, Chromatic, Figma Writer, Graphify, Pinterest, Claude Design), Claude Design handoff, bidirectional Figma write-back, and a queryable intel store (.design/intel/) for dependency and learnings queries. Standalone commands: style, darkmode, compare, figma-write, graphify, handoff, analyze-dependencies, skill-manifest, extract-learnings. Embeds NNG heuristics, WCAG thresholds, typographic systems, motion framework, and anti-pattern catalog. Ships with a full CI/CD pipeline (Node 22/24 × Linux/macOS/Windows) and release automation. Optimization layer (v1.0.4.1, retroactive): gdd-router + gdd-cache-manager skills, PreToolUse budget-enforcer hook, tier-aware agent frontmatter, lazy checker gates, streaming synthesizer, /gdd:warm-cache + /gdd:optimize commands, and cost telemetry at .design/telemetry/costs.jsonl — targeting 50-70% per-task token-cost reduction with no quality-floor regression.",
15
- "version": "1.16.0",
14
+ "description": "Agent-orchestrated 5-stage design pipeline: Brief → Explore → Plan → Design → Verify. 22+ specialized agents, 9 connections (Figma, Refero, Preview, Storybook, Chromatic, Figma Writer, Graphify, Pinterest, Claude Design), Claude Design handoff, bidirectional Figma write-back, and a queryable intel store (.design/intel/) for dependency and learnings queries. Standalone commands: style, darkmode, compare, figma-write, graphify, handoff, analyze-dependencies, skill-manifest, extract-learnings. Ships 35-component benchmark corpus with pipeline integration (auditor conformance, executor pre-flight, doc-writer scaffold, pattern-mapper convergence). Embeds NNG heuristics, WCAG thresholds, typographic systems, motion framework, variable-font loading, image optimization, CSS Grid + container queries, advanced motion vocabulary, platform design patterns (iOS/Android/web/visionOS), RTL/CJK/cultural adaptations, IA catalog, form UX patterns, data-visualization matrix, and user-research methodology, and anti-pattern catalog. Ships with a full CI/CD pipeline (Node 22/24 × Linux/macOS/Windows) and release automation. Optimization layer (v1.0.4.1, retroactive): gdd-router + gdd-cache-manager skills, PreToolUse budget-enforcer hook, tier-aware agent frontmatter, lazy checker gates, streaming synthesizer, /gdd:warm-cache + /gdd:optimize commands, and cost telemetry at .design/telemetry/costs.jsonl — targeting 50-70% per-task token-cost reduction with no quality-floor regression.",
15
+ "version": "1.19.0",
16
16
  "author": {
17
17
  "name": "hegemonart"
18
18
  },
@@ -63,7 +63,15 @@
63
63
  "cache-aware",
64
64
  "budget",
65
65
  "component-specs",
66
- "design-system-benchmarks"
66
+ "design-system-benchmarks",
67
+ "component-conformance",
68
+ "convergence-detector",
69
+ "i18n",
70
+ "user-research",
71
+ "information-architecture",
72
+ "form-patterns",
73
+ "data-viz",
74
+ "platforms"
67
75
  ]
68
76
  }
69
77
  ]
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "name": "get-design-done",
3
3
  "short_name": "gdd",
4
- "version": "1.16.0",
5
- "description": "Agent-orchestrated 5-stage design pipeline: Brief → Explore → Plan → Design → Verify. 22+ specialized agents, 9 connections (Figma, Refero, Preview, Storybook, Chromatic, Figma Writer, Graphify, Pinterest, Claude Design), handoff-first workflow via Claude Design bundles, bidirectional Figma write-back (annotations, Code Connect), queryable intel store (`.design/intel/`) for O(1) design surface lookups, and self-improvement loop (reflector agent, frontmatter + budget feedback, global-skills layer at `~/.claude/gdd/global-skills/`). Standalone commands: style, darkmode, compare, figma-write, graphify, handoff, analyze-dependencies, skill-manifest, extract-learnings, reflect, apply-reflections. Embeds NNG heuristics, WCAG thresholds, typographic systems, motion framework, and anti-pattern catalog. Ships with a full CI/CD pipeline (Node 22/24 × Linux/macOS/Windows, lint + schema + frontmatter + stale-ref + shellcheck + gitleaks + injection-scan + blocking size-budget) and release automation (auto-tag + GitHub Release + release-time smoke test). Optimization layer (v1.0.4.1, retroactive): gdd-router + gdd-cache-manager skills, PreToolUse budget-enforcer hook, tier-aware agent frontmatter, lazy checker gates, streaming synthesizer, /gdd:warm-cache + /gdd:optimize commands, and cost telemetry at .design/telemetry/costs.jsonl — targeting 50-70% per-task token-cost reduction with no quality-floor regression.",
4
+ "version": "1.19.0",
5
+ "description": "Agent-orchestrated 5-stage design pipeline: Brief → Explore → Plan → Design → Verify. 22+ specialized agents, 9 connections (Figma, Refero, Preview, Storybook, Chromatic, Figma Writer, Graphify, Pinterest, Claude Design), handoff-first workflow via Claude Design bundles, bidirectional Figma write-back (annotations, Code Connect), queryable intel store (`.design/intel/`) for O(1) design surface lookups, and self-improvement loop (reflector agent, frontmatter + budget feedback, global-skills layer at `~/.claude/gdd/global-skills/`). Standalone commands: style, darkmode, compare, figma-write, graphify, handoff, analyze-dependencies, skill-manifest, extract-learnings, reflect, apply-reflections. Ships 35-component benchmark corpus (Waves 1–5) with pipeline integration: auditor conformance scoring, executor spec pre-flight, doc-writer scaffold, pattern-mapper convergence detector. Embeds NNG heuristics, WCAG thresholds, typographic systems, motion framework, variable-font loading, image optimization, CSS Grid + container queries, advanced motion vocabulary (RN MIT easings/spring/interpolate + hyperframes transition taxonomy), platform design patterns (iOS/Android/web/visionOS), RTL/CJK/cultural adaptations, information architecture catalog, form UX patterns (Wroblewski label research), data-visualization matrix (25 chart types, Okabe-Ito palette), and user-research methodology, and anti-pattern catalog. Ships with a full CI/CD pipeline (Node 22/24 × Linux/macOS/Windows, lint + schema + frontmatter + stale-ref + shellcheck + gitleaks + injection-scan + blocking size-budget) and release automation (auto-tag + GitHub Release + release-time smoke test). Optimization layer (v1.0.4.1, retroactive): gdd-router + gdd-cache-manager skills, PreToolUse budget-enforcer hook, tier-aware agent frontmatter, lazy checker gates, streaming synthesizer, /gdd:warm-cache + /gdd:optimize commands, and cost telemetry at .design/telemetry/costs.jsonl — targeting 50-70% per-task token-cost reduction with no quality-floor regression.",
6
6
  "author": {
7
7
  "name": "hegemonart",
8
8
  "url": "https://github.com/hegemonart"
@@ -65,8 +65,26 @@
65
65
  "style-vocabulary",
66
66
  "industry-palettes",
67
67
  "ui-style-vocabulary",
68
+ "variable-fonts",
69
+ "container-queries",
70
+ "view-transitions",
71
+ "motion-vocabulary",
72
+ "motion-easings",
73
+ "transition-taxonomy",
74
+ "gesture-mechanics",
75
+ "clip-path-animation",
68
76
  "component-specs",
69
- "design-system-benchmarks"
77
+ "design-system-benchmarks",
78
+ "component-conformance",
79
+ "convergence-detector",
80
+ "i18n",
81
+ "user-research",
82
+ "information-architecture",
83
+ "form-patterns",
84
+ "data-viz",
85
+ "platforms"
70
86
  ],
71
- "skills": ["./skills/"]
87
+ "skills": [
88
+ "./skills/"
89
+ ]
72
90
  }
package/CHANGELOG.md CHANGED
@@ -4,6 +4,117 @@ All notable changes to get-design-done are documented here. Versions follow [sem
4
4
 
5
5
  ---
6
6
 
7
+ ## [1.19.0] — 2026-04-24
8
+
9
+ ### Added — Platform, Inclusive Design & UX Research References (knowledge-layer complete)
10
+
11
+ This release closes the final reference gaps identified in the 2026-04-18 knowledge audit. The plugin now ships 18 reference files covering every major design-knowledge domain.
12
+
13
+ #### 7 new reference files
14
+
15
+ - **`reference/platforms.md`** — iOS/Android/web/visionOS/watchOS conventions: nav patterns, safe areas, gesture vocabularies, native typography, haptic feedback. Wired into `design-context-builder` + `design-phase-researcher`.
16
+ - **`reference/rtl-cjk-cultural.md`** — RTL logical CSS properties, CJK typography (line-height 1.5–1.8, font-fallback stacks), Arabic/Hebrew, Devanagari/Tamil/Thai, cultural color meanings table, `Intl.*` formatting. Wired into `design-context-builder` + `design-auditor`.
17
+ - **`reference/onboarding-progressive-disclosure.md`** — First-run pattern matrix, feature discovery, Aha-moment mapping, activation vs. habituation metrics, anti-patterns. Wired into `design-executor` + `design-auditor`.
18
+ - **`reference/user-research.md`** — Research method matrix, card sort/tree test/A/B benchmarks, synthesis techniques, research ethics. Wired into `design-phase-researcher`.
19
+ - **`reference/information-architecture.md`** — Nav pattern catalog (hub-and-spoke/nested/faceted/flat/mega-menu), tree-test benchmarks, wayfinding ARIA conventions. Wired into `design-context-builder` + `design-pattern-mapper`.
20
+ - **`reference/form-patterns.md`** — Label position (Wroblewski research), on-blur validation default, full `autocomplete` taxonomy, `inputmode`/`enterkeyhint`, password UX (paste-allowed), CAPTCHA ethics. Wired into `design-auditor` (forms pillar) + `design-executor` (new `type:forms`).
21
+ - **`reference/data-visualization.md`** — Chart-choice matrix, 25 chart types (decision-tree prose, UUPM `charts.csv` MIT), Okabe-Ito/viridis/cividis palettes, axis conventions, dashboard patterns. Wired into `design-auditor` + `design-executor`.
22
+
23
+ #### Agent wiring
24
+ - `design-context-builder` — Area 2 locale detection; Area 6 platform note; `canonical_refs` extended with 3 conditional references.
25
+ - `design-auditor` — Required reading extended: form-patterns, onboarding, data-visualization, rtl-cjk-cultural, information-architecture.
26
+ - `design-executor` — New `type:forms` task type (7-step checklist); `type:layout` reads data-viz for dashboards; `type:copy` reads onboarding for first-run flows.
27
+ - `design-phase-researcher` — reads user-research.md + platforms.md.
28
+ - `design-pattern-mapper` — reads information-architecture.md for nav classification.
29
+
30
+ All 7 files registered in `reference/registry.json`. Regression baseline at `test-fixture/baselines/phase-19/`.
31
+
32
+ ---
33
+
34
+ ## [1.18.0] — 2026-04-24
35
+
36
+ ### Added — Advanced Craft References + Motion Vocabulary
37
+
38
+ **Wave A — Craft references (4 new files):**
39
+
40
+ - `reference/variable-fonts-loading.md` — Variable font axes (wght/ital/opsz/slnt/GRAD/custom), `@font-face` range declarations, `font-display` trade-offs (swap/fallback/optional), WOFF2 subsetting with `unicode-range`, FOIT vs FOUT, fallback metric overrides (`size-adjust`, `ascent-override`, `descent-override`, `line-gap-override`), GRAD axis for dark-mode weight compensation without layout reflow, system font stacks per platform (REF-14)
41
+ - `reference/image-optimization.md` — WebP/AVIF/JPEG XL choice matrix, `srcset`+`sizes` math by breakpoint, responsive art direction with `<picture>`, LQIP/BlurHash/ThumbHash placeholder strategies, lazy-loading + `decoding="async"` + `fetchpriority="high"`, CDN transform patterns (Cloudinary/imgix/Vercel Image), image budget enforcement (REF-15)
42
+ - `reference/css-grid-layout.md` — CSS Grid template patterns (holy grail, bento, masonry), `subgrid`, container queries (`@container` + `container-type`), fluid typography with `clamp()` (utopia.fyi math), intrinsic sizing, logical properties, safe-area insets, `aspect-ratio`/`object-fit`, anchor positioning progressive enhancement (REF-16)
43
+ - `reference/motion-advanced.md` — Spring physics, stagger patterns, scroll-driven animation (`animation-timeline`), FLIP, View Transitions API, route orchestration, gesture/drag mechanics (velocity threshold ≈0.11, boundary damping, pointer capture, multi-touch protection), clip-path animation patterns (hold-to-delete, scroll reveals, tab masks, comparison sliders), blur-to-mask crossfades (<20px Safari cap), CSS transitions vs keyframes for interruptible UI, WAAPI, Framer Motion hardware-accel gotcha (`x`/`y` shorthand vs GPU `transform` string), motion cohesion & personality, next-day slow-motion review process; Disney's 12 Principles UX mapping stub (fills at Phase 19.6 closeout) (REF-17)
44
+
45
+ **Wave B — Motion vocabulary (RN MIT + hyperframes Apache-2.0):**
46
+
47
+ - `reference/motion-easings.md` — 12 canonical curve presets (linear/quad/cubic/poly/sin/circle/exp/elastic/back/bounce/bezier + in/out/inOut wrappers) from React Native MIT upstream; `--ease-*` CSS custom property token catalog; 60fps settle-times for spring/bounce/elastic variants (MOT-01)
48
+ - `reference/motion-interpolate.md` — Input→output range model + 4 extrapolation modes (extend/identity/clamp/wrap) from RN MIT; taxonomy of progress-linked/scroll-linked/gesture-linked/time-linked animations (MOT-02)
49
+ - `reference/motion-spring.md` — Stiffness/damping/mass triad + 4 canonical presets (gentle/wobbly/stiff/slow) with 60fps settle-times; Framer Motion + React Spring syntax; CSS `linear()` approximation pattern (MOT-05)
50
+ - `reference/motion-transition-taxonomy.md` — 8 controlled transition families from hyperframes Apache-2.0: 3d, blur, cover, destruction, dissolve, distortion, grid, light — each with definition, canonical examples, when-to-use heuristics (MOT-03)
51
+ - `reference/external/NOTICE.hyperframes` — Apache-2.0 attribution for hyperframes transition taxonomy
52
+
53
+ **Wave B — Output contract + tooling:**
54
+
55
+ - `reference/output-contracts/motion-map.schema.json` — JSON schema requiring each animation binding to declare easing (canonical or custom+justification), transition family (optional), duration class (instant/quick/standard/slow/narrative), and trigger type (user-gesture/state-change/scroll-progress/time/loop) (MOT-04)
56
+ - `scripts/lib/parse-contract.cjs` — Shared validation helper: extracts JSON block from agent markdown output, validates against motion-map contract, returns structured data or actionable error
57
+ - `scripts/lib/easings.cjs` — Closed-form easing math helper (RN MIT): all 12 presets + in/out/inOut HOFs, cubic-bezier Newton-Raphson solver
58
+ - `scripts/lib/spring.cjs` — Spring simulation helper (RN MIT): PRESETS, criticalDamping(), settleTime(), step()
59
+ - `scripts/tests/test-motion-provenance.sh` — Provenance test: asserts RN-MIT attribution in all motion-vocabulary files; asserts no Remotion/ path citations
60
+
61
+ **Agent integrations:**
62
+
63
+ - `agents/motion-mapper.md` — Reads motion-advanced + easings + interpolate + transition-taxonomy + spring; emits structured JSON block (conforming to motion-map schema) before prose; advanced scan patterns for gesture/drag, clip-path, FLIP, View Transitions, scroll-driven, WAAPI
64
+ - `agents/design-executor.md` — type:typography reads `variable-fonts-loading.md`; type:layout reads `css-grid-layout.md` + `image-optimization.md`; type:motion reads `motion-advanced.md` + `motion-easings.md` + `motion-spring.md`
65
+ - `agents/design-auditor.md` — Required Reading extended with 4 Phase 18 references; gesture/clip-path/blur-crossfade patterns scored as "advanced craft" signal (positive) in Pillar 7
66
+ - `agents/token-mapper.md` — Micro-polish finding #5: easing token consolidation (raw `cubic-bezier()` → `--ease-*` canonical tokens)
67
+ - `reference/motion.md` — Cross-links added pointing to all 4 Phase 18 motion references
68
+ - `reference/registry.json` — 9 new entries: REF-14 through REF-17 + MOT-01 through MOT-05
69
+
70
+ **Phase 18 keywords added to package.json:** `variable-fonts`, `container-queries`, `view-transitions`, `motion-vocabulary`, `motion-easings`, `transition-taxonomy`, `gesture-mechanics`, `clip-path-animation`
71
+
72
+ ---
73
+
74
+ ## [1.17.0] — 2026-04-24
75
+
76
+ ### Added — Component Benchmark Corpus: Waves 3–5 (20 specs) + Pipeline Integration
77
+
78
+ Completes the 35-spec component benchmark corpus and wires it into the design pipeline so agents actively consume per-component benchmarks during audit, execution, documentation, and pattern analysis.
79
+
80
+ #### Wave 3 — Feedback (6 specs)
81
+
82
+ - **`reference/components/toast.md`** — transient notification (4–8s auto-dismiss, configurable); `role="status"` (info/success) vs `role="alert"` (warning/error); entry/exit slide+fade animation; optional action; stacking with 8px gap (max 3 visible); UUPM app-interface dashboard/settings-save context (MIT attribution).
83
+ - **`reference/components/alert.md`** — inline persistent message; info/success/warning/error variants; `role="alert"` (assertive) vs `role="status"` (polite); icon reinforces variant — never color as sole differentiator (WCAG 1.4.1).
84
+ - **`reference/components/progress.md`** — linear + circular variants; determinate (`aria-valuenow`) vs indeterminate (`aria-valuetext`); `role="progressbar"`; `aria-label` required; 4px minimum track height.
85
+ - **`reference/components/skeleton.md`** — content-layout mirror; shimmer (left-to-right gradient, 1.5s loop); `aria-hidden="true"` on skeleton elements; `aria-busy="true"` + `aria-label` on container; 60–90% width variation.
86
+ - **`reference/components/badge.md`** — count/dot/icon variants; `99+` overflow pattern; decorative (no keyboard interaction); count surfaced via `aria-label` on parent element.
87
+ - **`reference/components/chip.md`** — filter/input/suggestion/display variants; independent `aria-label` on remove button; `aria-pressed` on toggle; `role="option"` in listbox context; UUPM app-interface filter/tag-input context (MIT attribution).
88
+
89
+ #### Wave 4 — Navigation & Data (9 specs)
90
+
91
+ - **`reference/components/menu.md`** — `role="menu"` + `role="menuitem"`; arrow-key navigation; click-only open (no hover trigger); sub-menus on ArrowRight; focus returns to trigger on close.
92
+ - **`reference/components/navbar.md`** — `role="banner"` + `role="navigation"` + `aria-label="Primary"`; skip-to-main link; `aria-current="page"`; hamburger `aria-expanded`; UUPM dashboard/settings/profile context (MIT attribution).
93
+ - **`reference/components/sidebar.md`** — `aria-label="Secondary"`; icon+label vs icon-only collapsed; `aria-expanded` on collapsible sections; UUPM settings-nav + dashboard-nav variants (MIT attribution).
94
+ - **`reference/components/breadcrumbs.md`** — `role="navigation"` + `aria-label="Breadcrumb"`; `aria-current="page"` on last item; `aria-hidden` on separators; truncate middle not ends.
95
+ - **`reference/components/pagination.md`** — `aria-label="Pagination"`; `aria-current="page"` on active page; per-page `<select>` with visible label; UUPM list-view context (MIT attribution).
96
+ - **`reference/components/table.md`** — `scope="col"` on all `<th>`; `aria-sort` on sortable headers; `aria-selected` on rows; `role="grid"` vs `role="table"`; virtualise >200 rows; UUPM list/detail + master-detail + dashboard context (MIT attribution).
97
+ - **`reference/components/list.md`** — display (`<ul>/<li>`) vs interactive (`role="listbox"` + `role="option"`); `aria-multiselectable`; virtualise >100 items; UUPM list/detail left-panel context (MIT attribution).
98
+ - **`reference/components/tree.md`** — `role="tree"` + `role="treeitem"` + `role="group"`; `aria-expanded`; `aria-level`; `aria-busy` on lazy-load nodes; full WAI-ARIA APG keyboard contract.
99
+ - **`reference/components/command-palette.md`** — `role="dialog"` + `aria-modal`; focus trap; `role="combobox"` + `aria-controls` → `role="listbox"`; Cmd/Ctrl+K trigger; UUPM global-search context (MIT attribution).
100
+
101
+ #### Wave 5 — Advanced (5 specs)
102
+
103
+ - **`reference/components/date-picker.md`** — input + range variants; calendar `role="dialog"`; day cells `role="gridcell"` + `role="button"`; full arrow-key navigation; native `<input type="date">` mobile fallback.
104
+ - **`reference/components/slider.md`** — single + range; `role="slider"` + `aria-valuenow/min/max/valuetext`; 44px thumb touch target via `::before` trick; Page Up/Down ±10%.
105
+ - **`reference/components/file-upload.md`** — drop-zone + picker; `<input type="file">` never `display:none` (keyboard/AT fallback); `aria-label="Remove [filename]"` on remove buttons; upload errors via `aria-live="assertive"`.
106
+ - **`reference/components/rich-text-editor.md`** — `contenteditable` + `role="textbox"` + `aria-multiline="true"`; toolbar `role="toolbar"`; toggle buttons `aria-pressed`; placeholder via CSS `::before`; mention trigger pattern.
107
+ - **`reference/components/stepper.md`** — `role="list"` (not `role="tablist"`); `aria-current="step"` on active step; UUPM wizard/onboarding/checkout flow context (MIT attribution).
108
+
109
+ #### Pipeline Integration
110
+
111
+ - **`agents/design-auditor.md`** — new **Component Conformance** addendum: discovers specs, runs grep signatures against codebase, scores state/variant/a11y coverage per component, emits conformance table as informational addendum (does not change /28 pillar score).
112
+ - **`agents/design-executor.md`** — **Benchmark Spec Pre-Flight** for `type:components` tasks: reads matching `reference/components/<name>.md`, applies anatomy/states/a11y contract before building — no re-discovering ARIA roles or keyboard patterns already benchmarked.
113
+ - **`agents/design-doc-writer.md`** — **Component Spec Scaffold**: pre-fills DESIGN-STYLE doc structure from benchmark spec's Purpose/Anatomy/Variants/States when a spec exists; includes "Benchmarked against" citation; falls back to from-scratch generation gracefully.
114
+ - **`agents/design-pattern-mapper.md`** — **Component Convergence Detector**: writes `.design/map/component-convergence.md` with matched/absent component table and per-component convergence %; runs after pattern extraction.
115
+
116
+ ---
117
+
7
118
  ## [1.16.0] — 2026-04-24
8
119
 
9
120
  ### Added — Component Benchmark Corpus: Tooling + Waves 1–2 (15 specs)
package/README.md CHANGED
@@ -76,6 +76,21 @@ You don't need to be a designer. The pipeline carries the design expertise so yo
76
76
 
77
77
  Built-in quality gates catch real problems: Handoff Faithfulness scoring on Claude Design bundles, contrast audits across the full palette × surface matrix, anti-pattern detection from the NNG catalog, dark-mode architecture verification, and motion-system consistency checks.
78
78
 
79
+ ### v1.19.0 Highlights — Full Knowledge Coverage (18 reference files)
80
+
81
+ - **Knowledge-layer complete** — The plugin now ships **18 reference files** covering every major design-knowledge domain identified in the 2026-04-18 coverage audit. Agents have authoritative answers on platform conventions, internationalization, research methodology, information architecture, form design, and data visualization — in addition to the foundational knowledge from v1.15.0.
82
+ - **7 new Phase 19 references** — `platforms.md` (iOS/Android/web/visionOS/watchOS), `rtl-cjk-cultural.md` (RTL + CJK + cultural color), `onboarding-progressive-disclosure.md`, `user-research.md` (method matrix, A/B, ethics), `information-architecture.md` (nav patterns, tree-test benchmarks), `form-patterns.md` (Wroblewski label research, autocomplete taxonomy, CAPTCHA ethics), `data-visualization.md` (25 chart types, Okabe-Ito palette, dashboard patterns — UUPM MIT).
83
+ - **New `type:forms` executor task type** — `design-executor` now has a dedicated 7-step checklist for form audits: label position, validation timing, autocomplete tokens, inputmode hints, password UX, multi-step state, and CAPTCHA compliance.
84
+ - **Platform + locale detection in context-builder** — `design-context-builder` now explicitly prompts for locale/RTL/CJK requirements (Area 2) and device targets with platform references (Area 6), ensuring downstream agents receive the full platform context.
85
+
86
+ ### v1.18.0 Highlights — Advanced Craft References + Motion Vocabulary
87
+
88
+ - **4 advanced craft references** — `variable-fonts-loading.md` (variable axes, font-display trade-offs, WOFF2 subsetting, fallback metric overrides, GRAD axis for dark mode), `image-optimization.md` (WebP/AVIF/JPEG XL matrix, srcset math, LQIP/BlurHash, CDN transforms, image budgets), `css-grid-layout.md` (subgrid, container queries, fluid `clamp()` typography, logical properties, safe areas, anchor positioning), `motion-advanced.md` (spring physics, FLIP, View Transitions API, gesture/drag mechanics, clip-path animations, blur crossfades, Framer Motion hardware-accel gotcha, motion cohesion, next-day review).
89
+ - **Motion vocabulary (RN MIT upstream)** — `motion-easings.md` (12 canonical curve presets, `--ease-*` token catalog), `motion-interpolate.md` (input→output range + 4 extrapolation modes: extend/identity/clamp/wrap), `motion-spring.md` (gentle/wobbly/stiff/slow presets with 60fps settle-times). Optional math helpers at `scripts/lib/easings.cjs` and `scripts/lib/spring.cjs`.
90
+ - **Transition taxonomy (hyperframes Apache-2.0)** — `motion-transition-taxonomy.md` names 8 controlled families (3d, blur, cover, destruction, dissolve, distortion, grid, light) so motion-mapper output diffs cleanly cycle-over-cycle.
91
+ - **Structured motion-map output** — `motion-mapper` now emits a JSON block at the top of `.design/map/motion.md` conforming to `reference/output-contracts/motion-map.schema.json`. Every animation binding declares easing (canonical or custom+justification), transition family, duration class, and trigger type. `scripts/lib/parse-contract.cjs` validates and returns structured data or actionable error.
92
+ - **Agent wiring** — `token-mapper` gains easing consolidation (raw `cubic-bezier()` → `--ease-*` token recommendations); `design-executor` reads craft references per task type; `design-auditor` scores gesture patterns and clip-path animations as advanced-craft signal (positive, not a penalty).
93
+
79
94
  ### v1.15.0 Highlights — Design Knowledge Expansion
80
95
 
81
96
  - **10 new foundational references** — `iconography.md`, `performance.md`, `brand-voice.md`, `visual-hierarchy-layout.md`, `gestalt.md`, `design-system-guidance.md`, `design-systems-catalog.md`, `framer-motion-patterns.md`, `palette-catalog.md`, `style-vocabulary.md`. Agents now have authoritative answers on icon sizing, Web Vitals budgets, brand voice axes, Gestalt principles, DS governance, and 40+ industry-vertical color palettes.
@@ -397,9 +412,19 @@ Per-component design specifications harvested from 18 major design systems and s
397
412
 
398
413
  **Wave 2 — Containers (v1.16.0)**: Card · Modal/Dialog · Drawer/Sheet · Popover · Tooltip · Accordion · Tabs
399
414
 
400
- **Wave 3–5 — Feedback, Navigation, Data** (Phase 17): Toast · Alert · Progress · Skeleton · Badge · Chip · Breadcrumb · Pagination · Stepper · Table/Grid · Date Picker · File Upload · Rich Text · Virtualized List
415
+ **Wave 3 — Feedback (v1.17.0)**: Toast · Alert · Progress · Skeleton · Badge · Chip
416
+
417
+ **Wave 4 — Navigation & Data (v1.17.0)**: Menu · Navbar · Sidebar · Breadcrumbs · Pagination · Table · List · Tree · Command-palette
418
+
419
+ **Wave 5 — Advanced (v1.17.0)**: Date-picker · Slider · File-upload · Rich-text editor · Stepper
420
+
421
+ **Total: 35 specs** across 5 waves. Each spec: WAI-ARIA keyboard contracts (verbatim), NORM/DIVERGE convergence analysis, grep signatures for `design-auditor` conformance scoring, and a failing-example block.
401
422
 
402
- Each spec includes: WAI-ARIA keyboard contracts (verbatim), convergence analysis (NORM = ≥4 systems agree · DIVERGE = systems differ), grep signatures for CI detection, and a failing-example block.
423
+ **Pipeline integration (v1.17.0):**
424
+ - `design-auditor` — detects component implementations via grep signatures, scores conformance against specs, emits Component Conformance addendum
425
+ - `design-executor` — reads matching spec as pre-flight contract for `type:components` tasks
426
+ - `design-doc-writer` — scaffolds handoff docs from spec anatomy/variants when a benchmark spec exists
427
+ - `design-pattern-mapper` — writes `.design/map/component-convergence.md` (matched/absent components + convergence %)
403
428
 
404
429
  ```bash
405
430
  /gdd:benchmark button # harvest + synthesize a single spec
@@ -6,7 +6,8 @@ color: green
6
6
  model: inherit
7
7
  default-tier: sonnet
8
8
  tier-rationale: "Emits structured findings from code inspection; Sonnet balances depth with cost"
9
- size_budget: XL
9
+ size_budget: XXL
10
+ size_budget_rationale: "Phase 17 added Component Conformance addendum (+54 lines for spec-grep detection + conformance scoring algorithm)"
10
11
  parallel-safe: always
11
12
  typical-duration-seconds: 45
12
13
  reads-only: false
@@ -52,6 +53,15 @@ Minimum expected files:
52
53
  - `reference/performance.md` — Core Web Vitals budgets, JS/font/image budgets, React runtime performance
53
54
  - `reference/style-vocabulary.md` — UI aesthetic catalog; use when scoring Pillar 3 (Color) style-coherence sub-check and Pillar 2 (Visual Hierarchy) signature-effects verification
54
55
  - `reference/design-systems-catalog.md` — 18-system index for identifying pattern precedents and system alignment
56
+ - `reference/variable-fonts-loading.md` (if present) — variable font axes, font-display trade-offs, fallback metric overrides; use when auditing Pillar 4 (Typography)
57
+ - `reference/image-optimization.md` (if present) — format matrix, srcset/sizes, LQIP/BlurHash, CDN transforms, image budgets; use when auditing Pillar 5 (Layout & Spacing) for image-heavy UIs
58
+ - `reference/css-grid-layout.md` (if present) — subgrid, container queries, fluid clamp() typography, logical properties; use when auditing Pillar 5 (Layout & Spacing)
59
+ - `reference/motion-advanced.md` (if present) — advanced motion patterns; score gesture/drag mechanics, clip-path animations, blur crossfades as "advanced craft" signal (positive, not a penalty) in Pillar 7 (Micro-Polish)
60
+ - `reference/form-patterns.md` — label position, validation timing, autofill tokens, password UX (use for forms-pillar checks)
61
+ - `reference/onboarding-progressive-disclosure.md` — first-run patterns, feature discovery, anti-patterns (use when onboarding flows are in scope)
62
+ - `reference/data-visualization.md` — chart-choice matrix, color-blind palettes, axis conventions (use for chart-heavy projects)
63
+ - `reference/rtl-cjk-cultural.md` — RTL mirroring, CJK typography, cultural color meanings (use when i18n or multi-locale is in scope)
64
+ - `reference/information-architecture.md` — nav pattern catalog, menu-depth rules, wayfinding (use when nav structure is in scope)
55
65
 
56
66
  ---
57
67
 
@@ -447,6 +457,60 @@ If framer-motion is in use and neither `reducedMotion="user"` in `MotionConfig`
447
457
 
448
458
  ---
449
459
 
460
+ ## Component Conformance Addendum
461
+
462
+ After the 7-pillar scoring is complete, run this addendum to detect component implementations and score their conformance against `reference/components/` benchmark specs. Findings appear in `.design/DESIGN-AUDIT.md` as an informational section after the pillar scores — they do not affect the /28 total.
463
+
464
+ ### Step 1: Discover available specs
465
+
466
+ ```bash
467
+ ls reference/components/*.md | grep -v TEMPLATE | grep -v README
468
+ ```
469
+
470
+ ### Step 2: Detect implementations in codebase
471
+
472
+ For each spec, run its **Grep Signatures** against the source root (from `STATE.md source_roots`, default `src/`). A component is "detected" if ≥1 grep signature pattern matches. Examples:
473
+
474
+ ```bash
475
+ # Check for Button implementation
476
+ grep -rn "role=\"button\"\|<button\b\|Button\b" src/ --include="*.tsx" --include="*.jsx" | head -5
477
+
478
+ # Check for Toast implementation
479
+ grep -rn "role=\"status\"\|role=\"alert\"\|toast\|Toast\b" src/ --include="*.tsx" --include="*.jsx" | head -5
480
+ ```
481
+
482
+ ### Step 3: Score conformance per detected component
483
+
484
+ For each detected component, check:
485
+ - **States covered**: count how many States from the spec are implemented (look for aria states, visual states)
486
+ - **Variants covered**: count how many spec Variants exist in the codebase
487
+ - **A11y contract**: spot-check 2–3 WAI-ARIA items from the Keyboard & Accessibility section
488
+
489
+ Score = (implemented items) / (total spec items checked) × 100. Round to nearest 10%.
490
+
491
+ ### Step 4: Emit in DESIGN-AUDIT.md
492
+
493
+ Add after the Priority Fix List:
494
+
495
+ ```markdown
496
+ ## Component Conformance
497
+
498
+ > Informational addendum — does not affect /28 pillar score.
499
+ > Specs from `reference/components/` benchmarked against codebase.
500
+
501
+ | Component | Detected | Conformance | Key Gaps |
502
+ |-----------|----------|-------------|----------|
503
+ | Button | ✓ | 80% | Missing `aria-busy` on loading state |
504
+ | Toast | ✓ | 60% | Missing `role="alert"` on error variant |
505
+ | Table | ✗ | — | No implementation found |
506
+
507
+ **Summary**: N/M specs detected in codebase; average conformance X%.
508
+ ```
509
+
510
+ If `reference/components/` does not exist or contains no specs, skip this section entirely (graceful degradation).
511
+
512
+ ---
513
+
450
514
  ## Constraints
451
515
 
452
516
  **MUST NOT:**
@@ -317,6 +317,8 @@ Examples:
317
317
 
318
318
  If inferred from README, state the inference and ask for correction.
319
319
 
320
+ Also capture: locale/language targets. If the product serves RTL locales (Arabic, Hebrew) or CJK audiences (Chinese, Japanese, Korean), note this in the context file and read `reference/rtl-cjk-cultural.md` before writing layout and typography decisions.
321
+
320
322
  ### Area 3 — Goals (Observable Outcomes)
321
323
 
322
324
  > What does success look like? Name 1–3 observable, measurable outcomes.
@@ -398,7 +400,7 @@ Note: Refero tool name may differ — always verify via ToolSearch. Two or more
398
400
  - Framework / CSS approach (already inferred — confirm)
399
401
  - Existing design tokens that cannot change
400
402
  - Accessibility level (WCAG AA minimum by default — AAA if specified)
401
- - Device targets (desktop-primary, mobile-first, or responsive equal priority)
403
+ - Device targets (desktop-primary, mobile-first, or responsive equal priority) — if mobile or native-app target, read `reference/platforms.md` for safe-area, gesture, and nav-pattern constraints
402
404
  - Browser support requirements
403
405
  - Performance constraints (animation budget, bundle size)
404
406
  - Deadline
@@ -578,6 +580,9 @@ C-04: [other constraints]
578
580
  - ${CLAUDE_PLUGIN_ROOT}/reference/heuristics.md
579
581
  - ${CLAUDE_PLUGIN_ROOT}/reference/iconography.md
580
582
  - ${CLAUDE_PLUGIN_ROOT}/reference/performance.md
583
+ - ${CLAUDE_PLUGIN_ROOT}/reference/platforms.md (read when project targets mobile or cross-platform — iOS, Android, visionOS, watchOS)
584
+ - ${CLAUDE_PLUGIN_ROOT}/reference/rtl-cjk-cultural.md (read when project serves non-Latin locales or has explicit i18n requirement)
585
+ - ${CLAUDE_PLUGIN_ROOT}/reference/information-architecture.md (read when nav complexity or IA decisions are in scope)
581
586
  </canonical_refs>
582
587
 
583
588
  <baseline_audit>
@@ -61,6 +61,27 @@ The orchestrating stage (style command) supplies a `<required_reading>` block in
61
61
 
62
62
  ---
63
63
 
64
+ ## Component Spec Scaffold
65
+
66
+ Before Step 1, check whether a benchmark spec exists for this component:
67
+
68
+ ```bash
69
+ # component_name is title-cased (e.g., "Button") → convert to kebab-case for file lookup
70
+ # e.g., "CommandPalette" → "command-palette", "RichTextEditor" → "rich-text-editor"
71
+ ls reference/components/<kebab-name>.md 2>/dev/null
72
+ ```
73
+
74
+ **If the spec exists**, read its **Purpose**, **Anatomy**, **Variants**, and **States** sections. Use them to:
75
+ 1. Pre-fill the DESIGN-STYLE doc's structure with the benchmark section headers and variant table
76
+ 2. Pull the "Benchmark Citations" entry from the spec and include: `> Benchmarked against: [systems list]`
77
+ 3. Fill in project-specific values from DESIGN-CONTEXT.md on top of the scaffold (brand tokens, chosen variants, etc.)
78
+
79
+ **If no spec exists**, generate the DESIGN-STYLE doc from scratch as before — no change to existing behaviour.
80
+
81
+ This step runs for both `pipeline_complete: true` and `pipeline_complete: false` modes.
82
+
83
+ ---
84
+
64
85
  ## Work
65
86
 
66
87
  ### Common Step 1 — Extract Design Tokens from Source File
@@ -5,7 +5,8 @@ tools: Read, Write, Edit, Bash, Grep, Glob
5
5
  color: yellow
6
6
  default-tier: sonnet
7
7
  tier-rationale: "Follows an Opus-authored plan; executes rather than plans"
8
- size_budget: XL
8
+ size_budget: XXL
9
+ size_budget_rationale: "Phase 17 added Benchmark Spec Pre-Flight section for type:components (+17 lines)"
9
10
  parallel-safe: conditional-on-touches
10
11
  typical-duration-seconds: 60
11
12
  reads-only: false
@@ -128,7 +129,7 @@ For `audit` tasks: grep the codebase using patterns from `reference/anti-pattern
128
129
 
129
130
  ### Type: typography
130
131
 
131
- Read `reference/typography.md` before starting.
132
+ Read `reference/typography.md` before starting. If `reference/variable-fonts-loading.md` is present, also read it — apply variable font axis guidance, font-display trade-offs, fallback metric overrides (size-adjust, ascent-override), and FOIT/FOUT rules to any web font or @font-face decisions in this task.
132
133
 
133
134
  1. **Identify current state**: grep all font-size values in the codebase. List every unique value.
134
135
  2. **Design the target scale**: from the `<decisions>` in DESIGN-CONTEXT.md, pick the modular ratio (default: 1.25, base 16px). Compute: 12/14/16/20/24/30/36/48px (or `text-xs` through `text-5xl` in Tailwind).
@@ -177,7 +178,7 @@ before committing final values.
177
178
 
178
179
  ### Type: layout
179
180
 
180
- Read `reference/layout.md` (if present) and relevant DESIGN-CONTEXT.md decisions before starting.
181
+ Read `reference/layout.md` (if present) and relevant DESIGN-CONTEXT.md decisions before starting. If `reference/css-grid-layout.md` is present, also read it — apply modern Grid patterns (subgrid, container queries with `@container`, fluid `clamp()` typography, logical properties, safe-area insets, anchor positioning). If `reference/image-optimization.md` is present, apply it to any image-related layout decisions (format choice, srcset/sizes, lazy-loading, CDN transforms, image budget enforcement). If the layout task involves charts, dashboards, or data display, also read `reference/data-visualization.md` for chart-choice and dashboard-pattern guidance.
181
182
 
182
183
  1. **Inventory layout structure**: identify all grid, flex, and positioning patterns in scope files.
183
184
  2. **Check spacing consistency**: grep for magic spacing values (px or rem) not from a spacing scale. Map to nearest scale step.
@@ -220,7 +221,7 @@ Work through the accessibility checklist:
220
221
 
221
222
  ### Type: motion
222
223
 
223
- Read `reference/motion.md` and `reference/framer-motion-patterns.md` before starting.
224
+ Read `reference/motion.md` and `reference/framer-motion-patterns.md` before starting. If `reference/motion-advanced.md` is present, also read it — apply advanced patterns (gesture/drag mechanics, clip-path animations, blur-to-mask crossfades, CSS transitions vs keyframes for interruptible UI, WAAPI, Framer Motion hardware-accel gotcha, motion cohesion rules, next-day review process). If `reference/motion-easings.md` is present, use canonical `--ease-*` tokens rather than raw cubic-bezier strings. If `reference/motion-spring.md` is present, use named presets (gentle/wobbly/stiff/slow) for spring configurations.
224
225
 
225
226
  `reference/framer-motion-patterns.md` contains Framer Motion-specific implementation patterns that complement the framework-agnostic rules in `reference/motion.md`. When the codebase uses Framer Motion (detectable by `framer-motion` imports), apply the patterns from that file: spring/tween configuration, `AnimatePresence` with `initial={false}`, layout animations, variants with `staggerChildren`, gesture props (`whileHover`, `whileTap` at scale 0.96), `useReducedMotion` or `MotionConfig reducedMotion="user"` for a11y, and the hard constraint that `bounce: 0` for all micro-interactions.
226
227
 
@@ -288,6 +289,23 @@ Read `reference/anti-patterns.md`, `reference/design-system-guidance.md`, and DE
288
289
 
289
290
  Read all relevant reference files for this component's concerns (typography, color, accessibility, motion) before starting.
290
291
 
292
+ #### Benchmark Spec Pre-Flight
293
+
294
+ Before executing the task, check for a benchmark spec:
295
+
296
+ ```bash
297
+ # Extract component name from task description (PascalCase → kebab-case)
298
+ ls reference/components/<name>.md 2>/dev/null
299
+ ```
300
+
301
+ If `reference/components/<name>.md` exists:
302
+ 1. Read the spec's **Anatomy**, **States**, **Variants**, and **Keyboard & Accessibility** sections
303
+ 2. Use these as the authoritative contract for the implementation — do not re-discover naming conventions, ARIA roles, or keyboard patterns that the spec already defines
304
+ 3. In the task output file (`task-NN.md`), add a line: `Spec pre-flight: reference/components/<name>.md — [N] states, [M] variants, WAI-ARIA contract applied`
305
+ 4. Flag any deviation between the task instructions and the spec in the `## Deviations` section
306
+
307
+ If no spec exists, skip silently and proceed normally (graceful degradation).
308
+
291
309
  1. **Read the component spec from the task's Action field**: understand what the component does, its states, its variants.
292
310
  2. **Apply ALL relevant reference guidelines simultaneously**: typography scale, color token usage, accessibility requirements (ARIA, focus management, keyboard nav), motion constraints.
293
311
  3. **Build the component structure**: markup, styles, and behavior per the spec.
@@ -6,6 +6,7 @@ color: green
6
6
  model: inherit
7
7
  default-tier: sonnet
8
8
  tier-rationale: "Catalogs design patterns present in codebase; open-ended classification"
9
+ size_budget: XL
9
10
  parallel-safe: always
10
11
  typical-duration-seconds: 45
11
12
  reads-only: false
@@ -37,6 +38,7 @@ The orchestrating stage supplies a `<required_reading>` block in the prompt pass
37
38
  - `.design/DESIGN-CONTEXT.md` — goals, decisions, must-haves, baseline audit, domain, scopes
38
39
  - `reference/audit-scoring.md` — maps task types to scoring categories
39
40
  - `reference/brand-voice.md` — voice axis defaults and industry context (use when classifying copy-system patterns and inferring brand register from existing UI text)
41
+ - `reference/information-architecture.md` — nav pattern catalog (use to classify existing navigation implementation: hub-and-spoke, nested, faceted, flat, mega-menu)
40
42
 
41
43
  **Invariant:** Read every file in the `<required_reading>` block before taking any other action.
42
44
 
@@ -117,6 +119,66 @@ Identify: CSS Modules, styled-components, Tailwind utility classes, or inline st
117
119
 
118
120
  ---
119
121
 
122
+ ## Component Convergence Detection
123
+
124
+ After pattern extraction, scan for component implementations against the benchmark corpus.
125
+
126
+ ### Step 1: Enumerate available specs
127
+
128
+ ```bash
129
+ ls reference/components/*.md 2>/dev/null | grep -v TEMPLATE | grep -v README
130
+ ```
131
+
132
+ If `reference/components/` does not exist or is empty, skip this entire section.
133
+
134
+ ### Step 2: Detect implementations per spec
135
+
136
+ For each spec file, run its **Grep Signatures** section patterns against the source root:
137
+
138
+ ```bash
139
+ # Example for button.md — adapt per spec's actual grep signatures
140
+ grep -rn "role=\"button\"\|<button\b" src/ --include="*.tsx" --include="*.jsx" -l 2>/dev/null | wc -l
141
+ ```
142
+
143
+ A component is "detected" if ≥1 signature pattern returns results.
144
+
145
+ ### Step 3: Compute convergence score per detected component
146
+
147
+ For detected components, check coverage against the spec's **States** and **Variants** tables:
148
+ - Count spec states: how many are implemented (aria attributes, CSS classes, data attributes)
149
+ - Count spec variants: how many variant prop values exist in the codebase
150
+ - Convergence % = (implemented items / total spec items) × 100, rounded to 10%
151
+
152
+ ### Step 4: Write `.design/map/component-convergence.md`
153
+
154
+ ```markdown
155
+ ---
156
+ generated: [ISO timestamp]
157
+ total_specs: [N]
158
+ detected: [M]
159
+ ---
160
+
161
+ # Component Convergence
162
+
163
+ ## Matched Components
164
+
165
+ | Component | Spec | Convergence | Key Gaps |
166
+ |-----------|------|-------------|----------|
167
+ | Button | reference/components/button.md | 90% | Missing loading aria-busy |
168
+ | Toast | reference/components/toast.md | 60% | Missing role="alert" on error variant |
169
+
170
+ ## Absent Components (spec exists, no codebase match)
171
+
172
+ - `reference/components/command-palette.md` — no implementation detected
173
+ - `reference/components/tree.md` — no implementation detected
174
+
175
+ ## Summary
176
+
177
+ **N/M specs detected** in codebase · Average convergence: X%
178
+ ```
179
+
180
+ ---
181
+
120
182
  ## DESIGN-PATTERNS.md Output Format
121
183
 
122
184
  Write to `.design/DESIGN-PATTERNS.md`. Use exactly this structure:
@@ -87,7 +87,7 @@ Research loading and rendering performance norms for the project type:
87
87
  Target ~2 minutes of research time:
88
88
 
89
89
  - Use `WebSearch` for: industry design conventions, published pattern libraries, WCAG guidance, framework-specific design docs
90
- - Use `Read` for: in-repo reference files (`reference/heuristics.md`, `reference/accessibility.md`, `reference/anti-patterns.md`) when they exist
90
+ - Use `Read` for: in-repo reference files (`reference/heuristics.md`, `reference/accessibility.md`, `reference/anti-patterns.md`, `reference/user-research.md`, `reference/platforms.md`) when they exist — `user-research.md` informs which evaluation methods fit the project type; `platforms.md` informs platform-appropriate patterns when the project targets mobile, native, or cross-platform
91
91
  - Use `Glob`/`Grep` for: identifying the actual tech stack from project files when DESIGN-CONTEXT.md is ambiguous
92
92
 
93
93
  Prioritize in-repo reference files over web search — they are already project-calibrated.