@hegemonart/get-design-done 1.15.0 → 1.18.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.
- package/.claude-plugin/marketplace.json +9 -5
- package/.claude-plugin/plugin.json +19 -5
- package/CHANGELOG.md +122 -0
- package/README.md +41 -0
- package/SKILL.md +4 -1
- package/agents/component-benchmark-harvester.md +112 -0
- package/agents/component-benchmark-synthesizer.md +88 -0
- package/agents/design-auditor.md +60 -1
- package/agents/design-doc-writer.md +21 -0
- package/agents/design-executor.md +22 -4
- package/agents/design-pattern-mapper.md +61 -0
- package/agents/motion-mapper.md +74 -9
- package/agents/token-mapper.md +8 -0
- package/connections/design-corpora.md +158 -0
- package/package.json +13 -3
- package/reference/components/README.md +94 -0
- package/reference/components/TEMPLATE.md +184 -0
- package/reference/components/accordion.md +217 -0
- package/reference/components/alert.md +198 -0
- package/reference/components/badge.md +202 -0
- package/reference/components/breadcrumbs.md +198 -0
- package/reference/components/button.md +195 -0
- package/reference/components/card.md +200 -0
- package/reference/components/checkbox.md +207 -0
- package/reference/components/chip.md +209 -0
- package/reference/components/command-palette.md +228 -0
- package/reference/components/date-picker.md +227 -0
- package/reference/components/drawer.md +201 -0
- package/reference/components/file-upload.md +219 -0
- package/reference/components/input.md +208 -0
- package/reference/components/label.md +200 -0
- package/reference/components/link.md +193 -0
- package/reference/components/list.md +217 -0
- package/reference/components/menu.md +212 -0
- package/reference/components/modal-dialog.md +210 -0
- package/reference/components/navbar.md +211 -0
- package/reference/components/pagination.md +205 -0
- package/reference/components/popover.md +197 -0
- package/reference/components/progress.md +210 -0
- package/reference/components/radio.md +203 -0
- package/reference/components/rich-text-editor.md +226 -0
- package/reference/components/select-combobox.md +219 -0
- package/reference/components/sidebar.md +211 -0
- package/reference/components/skeleton.md +197 -0
- package/reference/components/slider.md +208 -0
- package/reference/components/stepper.md +220 -0
- package/reference/components/switch.md +194 -0
- package/reference/components/table.md +229 -0
- package/reference/components/tabs.md +213 -0
- package/reference/components/toast.md +200 -0
- package/reference/components/tooltip.md +201 -0
- package/reference/components/tree.md +225 -0
- package/reference/css-grid-layout.md +835 -0
- package/reference/external/NOTICE.hyperframes +28 -0
- package/reference/image-optimization.md +582 -0
- package/reference/motion-advanced.md +754 -0
- package/reference/motion-easings.md +381 -0
- package/reference/motion-interpolate.md +282 -0
- package/reference/motion-spring.md +234 -0
- package/reference/motion-transition-taxonomy.md +155 -0
- package/reference/motion.md +20 -0
- package/reference/output-contracts/motion-map.schema.json +135 -0
- package/reference/registry.json +285 -0
- package/reference/registry.schema.json +6 -1
- package/reference/variable-fonts-loading.md +532 -0
- package/scripts/lib/easings.cjs +280 -0
- package/scripts/lib/parse-contract.cjs +220 -0
- package/scripts/lib/spring.cjs +160 -0
- package/scripts/tests/test-motion-provenance.sh +64 -0
- package/skills/benchmark/SKILL.md +105 -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.
|
|
8
|
+
"version": "1.18.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.
|
|
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, 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.18.0",
|
|
16
16
|
"author": {
|
|
17
17
|
"name": "hegemonart"
|
|
18
18
|
},
|
|
@@ -61,8 +61,12 @@
|
|
|
61
61
|
"schema-validation",
|
|
62
62
|
"cost-optimization",
|
|
63
63
|
"cache-aware",
|
|
64
|
-
"budget"
|
|
64
|
+
"budget",
|
|
65
|
+
"component-specs",
|
|
66
|
+
"design-system-benchmarks",
|
|
67
|
+
"component-conformance",
|
|
68
|
+
"convergence-detector"
|
|
65
69
|
]
|
|
66
70
|
}
|
|
67
71
|
]
|
|
68
|
-
}
|
|
72
|
+
}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "get-design-done",
|
|
3
3
|
"short_name": "gdd",
|
|
4
|
-
"version": "1.
|
|
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.18.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), 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"
|
|
@@ -64,7 +64,21 @@
|
|
|
64
64
|
"palette-catalog",
|
|
65
65
|
"style-vocabulary",
|
|
66
66
|
"industry-palettes",
|
|
67
|
-
"ui-style-vocabulary"
|
|
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",
|
|
76
|
+
"component-specs",
|
|
77
|
+
"design-system-benchmarks",
|
|
78
|
+
"component-conformance",
|
|
79
|
+
"convergence-detector"
|
|
68
80
|
],
|
|
69
|
-
"skills": [
|
|
70
|
-
|
|
81
|
+
"skills": [
|
|
82
|
+
"./skills/"
|
|
83
|
+
]
|
|
84
|
+
}
|
package/CHANGELOG.md
CHANGED
|
@@ -4,6 +4,128 @@ All notable changes to get-design-done are documented here. Versions follow [sem
|
|
|
4
4
|
|
|
5
5
|
---
|
|
6
6
|
|
|
7
|
+
## [1.18.0] — 2026-04-24
|
|
8
|
+
|
|
9
|
+
### Added — Advanced Craft References + Motion Vocabulary
|
|
10
|
+
|
|
11
|
+
**Wave A — Craft references (4 new files):**
|
|
12
|
+
|
|
13
|
+
- `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)
|
|
14
|
+
- `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)
|
|
15
|
+
- `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)
|
|
16
|
+
- `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)
|
|
17
|
+
|
|
18
|
+
**Wave B — Motion vocabulary (RN MIT + hyperframes Apache-2.0):**
|
|
19
|
+
|
|
20
|
+
- `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)
|
|
21
|
+
- `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)
|
|
22
|
+
- `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)
|
|
23
|
+
- `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)
|
|
24
|
+
- `reference/external/NOTICE.hyperframes` — Apache-2.0 attribution for hyperframes transition taxonomy
|
|
25
|
+
|
|
26
|
+
**Wave B — Output contract + tooling:**
|
|
27
|
+
|
|
28
|
+
- `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)
|
|
29
|
+
- `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
|
|
30
|
+
- `scripts/lib/easings.cjs` — Closed-form easing math helper (RN MIT): all 12 presets + in/out/inOut HOFs, cubic-bezier Newton-Raphson solver
|
|
31
|
+
- `scripts/lib/spring.cjs` — Spring simulation helper (RN MIT): PRESETS, criticalDamping(), settleTime(), step()
|
|
32
|
+
- `scripts/tests/test-motion-provenance.sh` — Provenance test: asserts RN-MIT attribution in all motion-vocabulary files; asserts no Remotion/ path citations
|
|
33
|
+
|
|
34
|
+
**Agent integrations:**
|
|
35
|
+
|
|
36
|
+
- `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
|
|
37
|
+
- `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`
|
|
38
|
+
- `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
|
|
39
|
+
- `agents/token-mapper.md` — Micro-polish finding #5: easing token consolidation (raw `cubic-bezier()` → `--ease-*` canonical tokens)
|
|
40
|
+
- `reference/motion.md` — Cross-links added pointing to all 4 Phase 18 motion references
|
|
41
|
+
- `reference/registry.json` — 9 new entries: REF-14 through REF-17 + MOT-01 through MOT-05
|
|
42
|
+
|
|
43
|
+
**Phase 18 keywords added to package.json:** `variable-fonts`, `container-queries`, `view-transitions`, `motion-vocabulary`, `motion-easings`, `transition-taxonomy`, `gesture-mechanics`, `clip-path-animation`
|
|
44
|
+
|
|
45
|
+
---
|
|
46
|
+
|
|
47
|
+
## [1.17.0] — 2026-04-24
|
|
48
|
+
|
|
49
|
+
### Added — Component Benchmark Corpus: Waves 3–5 (20 specs) + Pipeline Integration
|
|
50
|
+
|
|
51
|
+
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.
|
|
52
|
+
|
|
53
|
+
#### Wave 3 — Feedback (6 specs)
|
|
54
|
+
|
|
55
|
+
- **`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).
|
|
56
|
+
- **`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).
|
|
57
|
+
- **`reference/components/progress.md`** — linear + circular variants; determinate (`aria-valuenow`) vs indeterminate (`aria-valuetext`); `role="progressbar"`; `aria-label` required; 4px minimum track height.
|
|
58
|
+
- **`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.
|
|
59
|
+
- **`reference/components/badge.md`** — count/dot/icon variants; `99+` overflow pattern; decorative (no keyboard interaction); count surfaced via `aria-label` on parent element.
|
|
60
|
+
- **`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).
|
|
61
|
+
|
|
62
|
+
#### Wave 4 — Navigation & Data (9 specs)
|
|
63
|
+
|
|
64
|
+
- **`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.
|
|
65
|
+
- **`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).
|
|
66
|
+
- **`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).
|
|
67
|
+
- **`reference/components/breadcrumbs.md`** — `role="navigation"` + `aria-label="Breadcrumb"`; `aria-current="page"` on last item; `aria-hidden` on separators; truncate middle not ends.
|
|
68
|
+
- **`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).
|
|
69
|
+
- **`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).
|
|
70
|
+
- **`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).
|
|
71
|
+
- **`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.
|
|
72
|
+
- **`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).
|
|
73
|
+
|
|
74
|
+
#### Wave 5 — Advanced (5 specs)
|
|
75
|
+
|
|
76
|
+
- **`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.
|
|
77
|
+
- **`reference/components/slider.md`** — single + range; `role="slider"` + `aria-valuenow/min/max/valuetext`; 44px thumb touch target via `::before` trick; Page Up/Down ±10%.
|
|
78
|
+
- **`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"`.
|
|
79
|
+
- **`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.
|
|
80
|
+
- **`reference/components/stepper.md`** — `role="list"` (not `role="tablist"`); `aria-current="step"` on active step; UUPM wizard/onboarding/checkout flow context (MIT attribution).
|
|
81
|
+
|
|
82
|
+
#### Pipeline Integration
|
|
83
|
+
|
|
84
|
+
- **`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).
|
|
85
|
+
- **`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.
|
|
86
|
+
- **`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.
|
|
87
|
+
- **`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.
|
|
88
|
+
|
|
89
|
+
---
|
|
90
|
+
|
|
91
|
+
## [1.16.0] — 2026-04-24
|
|
92
|
+
|
|
93
|
+
### Added — Component Benchmark Corpus: Tooling + Waves 1–2 (15 specs)
|
|
94
|
+
|
|
95
|
+
This release builds the infrastructure to harvest per-component design knowledge from 18 design systems and ships 15 canonical component specs at `reference/components/`. Every spec follows a locked shape — Purpose · Anatomy · Variants · States · Sizing · Typography · Keyboard & a11y · Motion · Do/Don't · Anti-patterns · Citations · Grep signatures — making the corpus greppable, diffable, and agent-consumable.
|
|
96
|
+
|
|
97
|
+
#### Tooling
|
|
98
|
+
|
|
99
|
+
- **`agents/component-benchmark-harvester.md`** — given a component name, harvests per-source excerpts from 18 design systems (see `connections/design-corpora.md`), consumes Phase 15 impeccable salvage, emits raw harvest to `.planning/benchmarks/raw/<component>.md` with source-attributed excerpts and convergence pre-analysis.
|
|
100
|
+
- **`agents/component-benchmark-synthesizer.md`** — reads the raw harvest and emits a canonical `reference/components/<name>.md` using the locked TEMPLATE.md shape. Convergence analysis is explicit: NORM (≥4 systems agree) vs. DIVERGE (systems disagree with rationale).
|
|
101
|
+
- **`skills/benchmark/SKILL.md`** — new `/gdd:benchmark` command with 4 modes: `<component>` (single), `--wave <N>` (full wave), `--list` (coverage table), `--refresh <component>` (re-harvest on design-system version bump).
|
|
102
|
+
- **`connections/design-corpora.md`** — 18-system catalog with canonical URLs, licensing/attribution notes, and fallback chain (canonical → archive.org → Refero MCP → Pinterest MCP).
|
|
103
|
+
- **`reference/components/TEMPLATE.md`** — locked 12-section spec shape. All future component specs must conform.
|
|
104
|
+
- **`reference/components/README.md`** — corpus index with category tables (Wave 1–5) and coverage summary.
|
|
105
|
+
|
|
106
|
+
#### Wave 1 — Inputs (8 specs)
|
|
107
|
+
|
|
108
|
+
- **`reference/components/button.md`** — primary/secondary/ghost/destructive/icon-only variants, 96% press scale norm, WAI-ARIA button keyboard contract, `transition:all` BAN, non-descriptive-label anti-pattern.
|
|
109
|
+
- **`reference/components/input.md`** — text/search/password/number, placeholder-as-label anti-pattern, floating vs. static label trade-off (static preferred), `aria-describedby` error linking, WAI-ARIA textbox contract.
|
|
110
|
+
- **`reference/components/select-combobox.md`** — native vs. custom decision tree, WAI-ARIA listbox + combobox contracts (verbatim), `aria-activedescendant` pattern, multi-select approaches, virtualised list note, async empty state.
|
|
111
|
+
- **`reference/components/checkbox.md`** — binary/indeterminate states, `fieldset`+`legend` group requirement, `.indeterminate` JS property, WAI-ARIA checkbox contract.
|
|
112
|
+
- **`reference/components/radio.md`** — arrow-key auto-advance behavior, Tab-as-group-unit pattern, single-radio anti-pattern, WAI-ARIA radiogroup contract.
|
|
113
|
+
- **`reference/components/switch.md`** — switch vs. checkbox semantic distinction (`role="switch"` not `role="checkbox"`), spring thumb animation, pill track (`border-radius: 9999px`), immediate-action rule.
|
|
114
|
+
- **`reference/components/link.md`** — link vs. button semantic boundary, underline requirement for inline links (WCAG 1.4.1), external-link disclosure, `rel="noopener noreferrer"`, non-descriptive link text anti-pattern.
|
|
115
|
+
- **`reference/components/label.md`** — four association methods ranked (`<label for>` → `aria-labelledby` → `aria-label` → `<legend>`), `.sr-only` CSS pattern, legend-for-groups rule, placeholder failure analysis.
|
|
116
|
+
|
|
117
|
+
#### Wave 2 — Containers (7 specs)
|
|
118
|
+
|
|
119
|
+
- **`reference/components/card.md`** — stretched-link pattern for nested interactivity, `<article>` vs `<div>` semantics, elevated/outlined/clickable variants, `aria-busy` skeleton state.
|
|
120
|
+
- **`reference/components/modal-dialog.md`** — focus trap, Escape contract, portal rendering, `aria-modal`+`aria-labelledby` requirement, `role="alertdialog"` for confirmations, scroll-lock, focus return on close.
|
|
121
|
+
- **`reference/components/drawer.md`** — focus trap (same as modal), swipe-to-close for bottom sheet, side direction routing, nav drawer vs. content drawer role distinction, slide-in motion.
|
|
122
|
+
- **`reference/components/popover.md`** — Floating UI positioning (flip+shift+arrow middlewares), non-modal vs. modal distinction, `aria-expanded`+`aria-controls` trigger contract, `role="tooltip"` on interactive content anti-pattern.
|
|
123
|
+
- **`reference/components/tooltip.md`** — no-interactive-content rule, hover+focus trigger (not hover-only), Escape dismiss, 300ms delay, `aria-describedby` contract, tooltip vs. popover boundary.
|
|
124
|
+
- **`reference/components/accordion.md`** — `h2`–`h6` header requirement, `aria-expanded`-on-trigger rule, `grid-template-rows` CSS height animation trick, `role="region"` landmark note (skip if >6 items).
|
|
125
|
+
- **`reference/components/tabs.md`** — roving tabindex pattern, arrow-key navigation (not Tab), automatic vs. manual activation modes, tablist label requirement, `hidden` on inactive panels.
|
|
126
|
+
|
|
127
|
+
---
|
|
128
|
+
|
|
7
129
|
## [1.15.0] — 2026-04-24
|
|
8
130
|
|
|
9
131
|
### Added — Design Knowledge Expansion: 10 foundational references + MIFB micro-polish + UUPM ingest
|
package/README.md
CHANGED
|
@@ -76,6 +76,14 @@ 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.18.0 Highlights — Advanced Craft References + Motion Vocabulary
|
|
80
|
+
|
|
81
|
+
- **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).
|
|
82
|
+
- **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`.
|
|
83
|
+
- **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.
|
|
84
|
+
- **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.
|
|
85
|
+
- **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).
|
|
86
|
+
|
|
79
87
|
### v1.15.0 Highlights — Design Knowledge Expansion
|
|
80
88
|
|
|
81
89
|
- **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.
|
|
@@ -389,6 +397,39 @@ After each design cycle, `/gdd:reflect` reads `.design/learnings/`, `.design/tel
|
|
|
389
397
|
|
|
390
398
|
---
|
|
391
399
|
|
|
400
|
+
## Component Benchmark Corpus
|
|
401
|
+
|
|
402
|
+
Per-component design specifications harvested from 18 major design systems and synthesized into a locked, agent-consumable format. Every spec is ≤350 lines, greppable, diff-friendly, and cross-linked to `reference/anti-patterns.md`.
|
|
403
|
+
|
|
404
|
+
**Wave 1 — Inputs (v1.16.0)**: Button · Input · Select/Combobox · Checkbox · Radio · Switch · Link · Label
|
|
405
|
+
|
|
406
|
+
**Wave 2 — Containers (v1.16.0)**: Card · Modal/Dialog · Drawer/Sheet · Popover · Tooltip · Accordion · Tabs
|
|
407
|
+
|
|
408
|
+
**Wave 3 — Feedback (v1.17.0)**: Toast · Alert · Progress · Skeleton · Badge · Chip
|
|
409
|
+
|
|
410
|
+
**Wave 4 — Navigation & Data (v1.17.0)**: Menu · Navbar · Sidebar · Breadcrumbs · Pagination · Table · List · Tree · Command-palette
|
|
411
|
+
|
|
412
|
+
**Wave 5 — Advanced (v1.17.0)**: Date-picker · Slider · File-upload · Rich-text editor · Stepper
|
|
413
|
+
|
|
414
|
+
**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.
|
|
415
|
+
|
|
416
|
+
**Pipeline integration (v1.17.0):**
|
|
417
|
+
- `design-auditor` — detects component implementations via grep signatures, scores conformance against specs, emits Component Conformance addendum
|
|
418
|
+
- `design-executor` — reads matching spec as pre-flight contract for `type:components` tasks
|
|
419
|
+
- `design-doc-writer` — scaffolds handoff docs from spec anatomy/variants when a benchmark spec exists
|
|
420
|
+
- `design-pattern-mapper` — writes `.design/map/component-convergence.md` (matched/absent components + convergence %)
|
|
421
|
+
|
|
422
|
+
```bash
|
|
423
|
+
/gdd:benchmark button # harvest + synthesize a single spec
|
|
424
|
+
/gdd:benchmark --wave 1 # run all Wave 1 specs
|
|
425
|
+
/gdd:benchmark --list # coverage table
|
|
426
|
+
/gdd:benchmark --refresh modal-dialog # re-harvest after design-system update
|
|
427
|
+
```
|
|
428
|
+
|
|
429
|
+
Sources: `connections/design-corpora.md` — Material 3, Apple HIG, Radix, WAI-ARIA APG, shadcn/ui, Polaris, Carbon, Fluent 2, Primer, Atlassian, Ant Design, Mantine, Chakra, Base Web, Nord, Spectrum, Lightning, Gestalt (Pinterest).
|
|
430
|
+
|
|
431
|
+
---
|
|
432
|
+
|
|
392
433
|
## Authority Watcher
|
|
393
434
|
|
|
394
435
|
Subscribe to a curated whitelist of design-authority sources, diff it against a snapshot, and feed only genuinely new, classified entries into the Self-Improvement reflector. Authority monitoring — not trend watching.
|
package/SKILL.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
name: get-design-done
|
|
3
3
|
short_name: gdd
|
|
4
4
|
description: "Master design pipeline for Claude Code. 5-stage workflow: Brief → Explore → Plan → Design → Verify. Run 'brief' first in any new project to capture the design problem, then 'explore' to inventory the codebase and interview for context. Invoke without arguments for status and auto-routing."
|
|
5
|
-
argument-hint: "[brief|explore|plan|design|verify|handoff|map|next|help|status|style|darkmode|compare|figma-write|graphify|discuss|list-assumptions|progress|health|todo|stats|note|plant-seed|add-backlog|review-backlog|scan|discover|settings|update|reapply-patches|audit|pause|resume|new-cycle|debug|quick|new-project|complete-cycle|fast|do|ship|undo|pr-branch|sketch|sketch-wrap-up|spike|spike-wrap-up|reflect|apply-reflections|analyze-dependencies|extract-learnings|skill-manifest|warm-cache|optimize|cache-manager|watch-authorities|check-update]"
|
|
5
|
+
argument-hint: "[brief|explore|plan|design|verify|handoff|map|next|help|status|style|darkmode|compare|figma-write|graphify|discuss|list-assumptions|progress|health|todo|stats|note|plant-seed|add-backlog|review-backlog|scan|discover|settings|update|reapply-patches|audit|pause|resume|new-cycle|debug|quick|new-project|complete-cycle|fast|do|ship|undo|pr-branch|sketch|sketch-wrap-up|spike|spike-wrap-up|reflect|apply-reflections|analyze-dependencies|extract-learnings|skill-manifest|warm-cache|optimize|cache-manager|watch-authorities|check-update|benchmark]"
|
|
6
6
|
user-invocable: true
|
|
7
7
|
---
|
|
8
8
|
|
|
@@ -85,6 +85,8 @@ Each stage produces artifacts in `.design/` inside the current project.
|
|
|
85
85
|
| `extract-learnings [--cycle <slug>]` | `get-design-done:extract-learnings` | Extract decisions, lessons, patterns, and surprises from a completed cycle → `.design/cycles/<slug>/LEARNINGS.md` |
|
|
86
86
|
| `skill-manifest [--refresh]` | `get-design-done:skill-manifest` | List or refresh the local skill manifest used by the router for discovery |
|
|
87
87
|
| `watch-authorities [--refresh] [--since <date>] [--feed <name>] [--schedule <cadence>]` | `get-design-done:gdd-watch-authorities` | Run design-authority-watcher — fetch curated feeds, diff snapshot, classify new entries → `.design/authority-report.md` (consumed by `/gdd:reflect`) |
|
|
88
|
+
| `benchmark <component\|--wave N\|--list\|--refresh component>` | `get-design-done:gdd-benchmark` | Harvest + synthesize per-component design specs from 18 design systems → `reference/components/<name>.md` |
|
|
89
|
+
| `benchmark <component\|--wave N\|--list\|--refresh component>` | `get-design-done:gdd-benchmark` | Harvest + synthesize per-component design specs from 18 design systems → `reference/components/<name>.md` |
|
|
88
90
|
|
|
89
91
|
## Handoff Routing
|
|
90
92
|
|
|
@@ -203,6 +205,7 @@ If `$ARGUMENTS` is a stage or command name — invoke it directly, no state chec
|
|
|
203
205
|
/gdd:reflect → Skill("get-design-done:gdd-reflect")
|
|
204
206
|
/gdd:apply-reflections → Skill("get-design-done:gdd-apply-reflections")
|
|
205
207
|
/gdd:watch-authorities → Skill("get-design-done:gdd-watch-authorities")
|
|
208
|
+
/gdd:benchmark → Skill("get-design-done:gdd-benchmark")
|
|
206
209
|
/gdd:pause → Skill("get-design-done:gdd-pause")
|
|
207
210
|
/gdd:resume → Skill("get-design-done:gdd-resume")
|
|
208
211
|
# --- Lifecycle ---
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: component-benchmark-harvester
|
|
3
|
+
description: Given a component name, harvests design-system excerpts from 18 sources (design-corpora.md) and emits raw, source-attributed output to .planning/benchmarks/raw/<component>.md. Spawned by /gdd:benchmark.
|
|
4
|
+
tools: Read, Write, WebFetch, Bash, Grep, Glob
|
|
5
|
+
color: yellow
|
|
6
|
+
default-tier: sonnet
|
|
7
|
+
tier-rationale: "Network fetch + multi-source synthesis is open-ended; Haiku misses cross-system nuance, Opus overkill for structured harvesting."
|
|
8
|
+
parallel-safe: conditional-on-touches
|
|
9
|
+
typical-duration-seconds: 120
|
|
10
|
+
reads-only: false
|
|
11
|
+
writes:
|
|
12
|
+
- ".planning/benchmarks/raw/"
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
@reference/shared-preamble.md
|
|
16
|
+
|
|
17
|
+
# component-benchmark-harvester
|
|
18
|
+
|
|
19
|
+
## Role
|
|
20
|
+
|
|
21
|
+
You are the harvesting agent for the component benchmark corpus. Given a component name
|
|
22
|
+
(e.g. "button", "modal-dialog"), you systematically gather per-source excerpts from the
|
|
23
|
+
18 design systems catalogued in `connections/design-corpora.md` and emit a consolidated
|
|
24
|
+
raw harvest file at `.planning/benchmarks/raw/<component>.md`.
|
|
25
|
+
|
|
26
|
+
The raw harvest is **input to `component-benchmark-synthesizer`** — it is not the final
|
|
27
|
+
spec. Focus on breadth and attribution; the synthesizer does convergence analysis.
|
|
28
|
+
|
|
29
|
+
## Required Reading
|
|
30
|
+
|
|
31
|
+
The orchestrating skill supplies a `<required_reading>` block in the prompt. Read every
|
|
32
|
+
listed file before acting. Minimum expected inputs:
|
|
33
|
+
|
|
34
|
+
- `connections/design-corpora.md` — system catalog with URLs, licenses, fallback chain
|
|
35
|
+
- `.planning/research/impeccable-salvage/` — any files relevant to the target component
|
|
36
|
+
|
|
37
|
+
## Step 1 — Check impeccable salvage
|
|
38
|
+
|
|
39
|
+
Before any network fetch, `Grep` the impeccable salvage directory for the component name
|
|
40
|
+
(case-insensitive). Extract any relevant prose as the first source in the raw file.
|
|
41
|
+
|
|
42
|
+
## Step 2 — Fetch each design system
|
|
43
|
+
|
|
44
|
+
For each of the 18 systems in `design-corpora.md`:
|
|
45
|
+
|
|
46
|
+
1. Attempt `WebFetch` on `<canonical-url>/<component-slug>` (try common slug variants:
|
|
47
|
+
kebab-case, camelCase, plain name).
|
|
48
|
+
2. On fetch failure, try the fallback chain: archive.org → Refero MCP → Pinterest MCP.
|
|
49
|
+
3. Extract the relevant sections: anatomy, variants, states, a11y/keyboard, do/don't.
|
|
50
|
+
4. Note which fallback tier was used (if any).
|
|
51
|
+
|
|
52
|
+
**Prioritise signal over volume.** One precise quoted sentence beats three paraphrased
|
|
53
|
+
paragraphs. For WAI-ARIA APG keyboard contracts, quote verbatim.
|
|
54
|
+
|
|
55
|
+
## Step 3 — Write raw harvest file
|
|
56
|
+
|
|
57
|
+
Write `.planning/benchmarks/raw/<component>.md` with this structure:
|
|
58
|
+
|
|
59
|
+
```markdown
|
|
60
|
+
# <Component Name> — Raw Benchmark Harvest
|
|
61
|
+
|
|
62
|
+
Harvested: <ISO date>
|
|
63
|
+
Target: reference/components/<component>.md
|
|
64
|
+
|
|
65
|
+
## Convergence Notes (pre-synthesis)
|
|
66
|
+
|
|
67
|
+
_Fill in patterns you noticed while harvesting — what ≥4 systems agree on._
|
|
68
|
+
|
|
69
|
+
## Sources
|
|
70
|
+
|
|
71
|
+
### <System Name>
|
|
72
|
+
> Source: [<System Name>](<url>) — <license> — accessed <date>
|
|
73
|
+
> Source tier: canonical | archive.org | refero | pinterest
|
|
74
|
+
|
|
75
|
+
**Anatomy:** …
|
|
76
|
+
**Variants:** …
|
|
77
|
+
**States:** …
|
|
78
|
+
**Keyboard & a11y:** …
|
|
79
|
+
**Do/Don't:** …
|
|
80
|
+
|
|
81
|
+
### <next system>
|
|
82
|
+
…
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
One `###` section per source. Omit a source only if the fallback chain is fully
|
|
86
|
+
exhausted — document the failure with `**Status: unreachable**`.
|
|
87
|
+
|
|
88
|
+
## Step 4 — Convergence pre-analysis
|
|
89
|
+
|
|
90
|
+
After all sources, add a `## Convergence Notes (pre-synthesis)` summary identifying:
|
|
91
|
+
- What the majority of systems (≥4) agree on → mark `NORM`
|
|
92
|
+
- Where systems meaningfully diverge → mark `DIVERGE` with a brief note
|
|
93
|
+
|
|
94
|
+
This pre-analysis seeds the synthesizer's convergence analysis.
|
|
95
|
+
|
|
96
|
+
## Output Contract
|
|
97
|
+
|
|
98
|
+
- File: `.planning/benchmarks/raw/<component>.md`
|
|
99
|
+
- One `###` block per harvested source (≥4 blocks minimum for a useful spec)
|
|
100
|
+
- WAI-ARIA APG keyboard contracts quoted verbatim
|
|
101
|
+
- Convergence pre-analysis section present
|
|
102
|
+
|
|
103
|
+
## Completion Marker
|
|
104
|
+
|
|
105
|
+
End your response with:
|
|
106
|
+
|
|
107
|
+
```
|
|
108
|
+
## HARVEST COMPLETE
|
|
109
|
+
Component: <name>
|
|
110
|
+
Sources harvested: <N>
|
|
111
|
+
Raw file: .planning/benchmarks/raw/<component>.md
|
|
112
|
+
```
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: component-benchmark-synthesizer
|
|
3
|
+
description: Reads a raw harvest file from .planning/benchmarks/raw/<component>.md and emits a canonical component spec at reference/components/<name>.md using the locked TEMPLATE.md shape. Spawned by /gdd:benchmark after harvesting.
|
|
4
|
+
tools: Read, Write, Grep, Glob
|
|
5
|
+
color: green
|
|
6
|
+
default-tier: sonnet
|
|
7
|
+
tier-rationale: "Synthesis across ≥4 sources with explicit convergence analysis requires multi-step reasoning; Haiku loses cross-source nuance, Opus overkill for structured template fill."
|
|
8
|
+
parallel-safe: conditional-on-touches
|
|
9
|
+
typical-duration-seconds: 90
|
|
10
|
+
reads-only: false
|
|
11
|
+
writes:
|
|
12
|
+
- "reference/components/"
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
@reference/shared-preamble.md
|
|
16
|
+
|
|
17
|
+
# component-benchmark-synthesizer
|
|
18
|
+
|
|
19
|
+
## Role
|
|
20
|
+
|
|
21
|
+
You are the synthesis agent for the component benchmark corpus. You read a raw harvest
|
|
22
|
+
file at `.planning/benchmarks/raw/<component>.md` (produced by `component-benchmark-harvester`)
|
|
23
|
+
and emit a canonical component spec at `reference/components/<name>.md`, following
|
|
24
|
+
`reference/components/TEMPLATE.md` exactly.
|
|
25
|
+
|
|
26
|
+
Your primary intellectual task is **convergence analysis**: determine what the design
|
|
27
|
+
systems agree on (norms) vs. where they meaningfully diverge (trade-offs), and encode
|
|
28
|
+
that signal in the spec so future agents know what is non-negotiable.
|
|
29
|
+
|
|
30
|
+
## Required Reading
|
|
31
|
+
|
|
32
|
+
The orchestrating skill supplies a `<required_reading>` block in the prompt. Read every
|
|
33
|
+
listed file before acting. Minimum expected inputs:
|
|
34
|
+
|
|
35
|
+
- `.planning/benchmarks/raw/<component>.md` — the raw harvest to synthesize
|
|
36
|
+
- `reference/components/TEMPLATE.md` — the locked spec shape you must follow
|
|
37
|
+
- `reference/anti-patterns.md` — for cross-linking anti-pattern entries
|
|
38
|
+
|
|
39
|
+
## Convergence Analysis Rules
|
|
40
|
+
|
|
41
|
+
After reading all source sections from the raw file:
|
|
42
|
+
|
|
43
|
+
1. **Count agreement** — if ≥4 of the 18 systems agree on a property (anatomy element,
|
|
44
|
+
state name, keyboard key, constraint), mark it `**Norm** (≥N/18 systems agree)`.
|
|
45
|
+
2. **Flag divergence** — if systems meaningfully disagree on a property, mark it
|
|
46
|
+
`**Diverge** — <brief note on what differs and why>`.
|
|
47
|
+
3. **Do not invent** — if fewer than 2 sources mention a property, omit it from the spec
|
|
48
|
+
rather than guessing. The corpus is additive; gaps will be filled when more sources
|
|
49
|
+
are harvested.
|
|
50
|
+
|
|
51
|
+
## Output Rules
|
|
52
|
+
|
|
53
|
+
- Strictly follow `reference/components/TEMPLATE.md` — every section must be present,
|
|
54
|
+
in order, even if sparse.
|
|
55
|
+
- **Max 350 lines** — dense, diff-friendly, greppable. Extract verbose prose to
|
|
56
|
+
`reference/` cross-links rather than embedding it.
|
|
57
|
+
- **WAI-ARIA keyboard contract** — quote verbatim from WAI-ARIA APG source. Mark the
|
|
58
|
+
source attribution inline.
|
|
59
|
+
- **Failing-example block** — each spec must include a `## Failing Example` section
|
|
60
|
+
showing what a broken implementation looks like (missing a11y attribute, wrong role,
|
|
61
|
+
broken keyboard handler). Include at least one grep detection pattern:
|
|
62
|
+
```
|
|
63
|
+
# Grep: detect common failure
|
|
64
|
+
grep -r "pattern" src/
|
|
65
|
+
```
|
|
66
|
+
- **Benchmark citations** — every claim carries an inline citation: `(Material 3, Polaris)`
|
|
67
|
+
or `(WAI-ARIA APG §4.2)`.
|
|
68
|
+
|
|
69
|
+
## Output Path
|
|
70
|
+
|
|
71
|
+
Write the final spec to `reference/components/<name>.md` (kebab-case, matching the
|
|
72
|
+
component slug used in harvesting).
|
|
73
|
+
|
|
74
|
+
Update `reference/components/README.md`:
|
|
75
|
+
- Find the correct category section (Inputs / Containers / Feedback / Navigation / Advanced)
|
|
76
|
+
- Add a one-line entry: `| [Name](name.md) | <one-line purpose> | <anatomy snippet> |`
|
|
77
|
+
|
|
78
|
+
## Completion Marker
|
|
79
|
+
|
|
80
|
+
End your response with:
|
|
81
|
+
|
|
82
|
+
```
|
|
83
|
+
## SYNTHESIS COMPLETE
|
|
84
|
+
Component: <name>
|
|
85
|
+
Spec: reference/components/<name>.md
|
|
86
|
+
Lines: <N>
|
|
87
|
+
Systems cited: <N>
|
|
88
|
+
```
|
package/agents/design-auditor.md
CHANGED
|
@@ -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:
|
|
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,10 @@ 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)
|
|
55
60
|
|
|
56
61
|
---
|
|
57
62
|
|
|
@@ -447,6 +452,60 @@ If framer-motion is in use and neither `reducedMotion="user"` in `MotionConfig`
|
|
|
447
452
|
|
|
448
453
|
---
|
|
449
454
|
|
|
455
|
+
## Component Conformance Addendum
|
|
456
|
+
|
|
457
|
+
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.
|
|
458
|
+
|
|
459
|
+
### Step 1: Discover available specs
|
|
460
|
+
|
|
461
|
+
```bash
|
|
462
|
+
ls reference/components/*.md | grep -v TEMPLATE | grep -v README
|
|
463
|
+
```
|
|
464
|
+
|
|
465
|
+
### Step 2: Detect implementations in codebase
|
|
466
|
+
|
|
467
|
+
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:
|
|
468
|
+
|
|
469
|
+
```bash
|
|
470
|
+
# Check for Button implementation
|
|
471
|
+
grep -rn "role=\"button\"\|<button\b\|Button\b" src/ --include="*.tsx" --include="*.jsx" | head -5
|
|
472
|
+
|
|
473
|
+
# Check for Toast implementation
|
|
474
|
+
grep -rn "role=\"status\"\|role=\"alert\"\|toast\|Toast\b" src/ --include="*.tsx" --include="*.jsx" | head -5
|
|
475
|
+
```
|
|
476
|
+
|
|
477
|
+
### Step 3: Score conformance per detected component
|
|
478
|
+
|
|
479
|
+
For each detected component, check:
|
|
480
|
+
- **States covered**: count how many States from the spec are implemented (look for aria states, visual states)
|
|
481
|
+
- **Variants covered**: count how many spec Variants exist in the codebase
|
|
482
|
+
- **A11y contract**: spot-check 2–3 WAI-ARIA items from the Keyboard & Accessibility section
|
|
483
|
+
|
|
484
|
+
Score = (implemented items) / (total spec items checked) × 100. Round to nearest 10%.
|
|
485
|
+
|
|
486
|
+
### Step 4: Emit in DESIGN-AUDIT.md
|
|
487
|
+
|
|
488
|
+
Add after the Priority Fix List:
|
|
489
|
+
|
|
490
|
+
```markdown
|
|
491
|
+
## Component Conformance
|
|
492
|
+
|
|
493
|
+
> Informational addendum — does not affect /28 pillar score.
|
|
494
|
+
> Specs from `reference/components/` benchmarked against codebase.
|
|
495
|
+
|
|
496
|
+
| Component | Detected | Conformance | Key Gaps |
|
|
497
|
+
|-----------|----------|-------------|----------|
|
|
498
|
+
| Button | ✓ | 80% | Missing `aria-busy` on loading state |
|
|
499
|
+
| Toast | ✓ | 60% | Missing `role="alert"` on error variant |
|
|
500
|
+
| Table | ✗ | — | No implementation found |
|
|
501
|
+
|
|
502
|
+
**Summary**: N/M specs detected in codebase; average conformance X%.
|
|
503
|
+
```
|
|
504
|
+
|
|
505
|
+
If `reference/components/` does not exist or contains no specs, skip this section entirely (graceful degradation).
|
|
506
|
+
|
|
507
|
+
---
|
|
508
|
+
|
|
450
509
|
## Constraints
|
|
451
510
|
|
|
452
511
|
**MUST NOT:**
|
|
@@ -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
|