@hegemonart/get-design-done 1.15.0 → 1.16.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 +5 -3
- package/.claude-plugin/plugin.json +4 -2
- package/CHANGELOG.md +38 -0
- package/README.md +23 -0
- package/SKILL.md +4 -1
- package/agents/component-benchmark-harvester.md +112 -0
- package/agents/component-benchmark-synthesizer.md +88 -0
- package/connections/design-corpora.md +158 -0
- package/package.json +4 -2
- package/reference/components/README.md +90 -0
- package/reference/components/TEMPLATE.md +184 -0
- package/reference/components/accordion.md +217 -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/drawer.md +201 -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/modal-dialog.md +210 -0
- package/reference/components/popover.md +197 -0
- package/reference/components/radio.md +203 -0
- package/reference/components/select-combobox.md +219 -0
- package/reference/components/switch.md +194 -0
- package/reference/components/tabs.md +213 -0
- package/reference/components/tooltip.md +201 -0
- package/reference/registry.json +102 -0
- package/reference/registry.schema.json +2 -1
- 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.16.0"
|
|
9
9
|
},
|
|
10
10
|
"plugins": [
|
|
11
11
|
{
|
|
12
12
|
"name": "get-design-done",
|
|
13
13
|
"source": "./",
|
|
14
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.
|
|
15
|
+
"version": "1.16.0",
|
|
16
16
|
"author": {
|
|
17
17
|
"name": "hegemonart"
|
|
18
18
|
},
|
|
@@ -61,7 +61,9 @@
|
|
|
61
61
|
"schema-validation",
|
|
62
62
|
"cost-optimization",
|
|
63
63
|
"cache-aware",
|
|
64
|
-
"budget"
|
|
64
|
+
"budget",
|
|
65
|
+
"component-specs",
|
|
66
|
+
"design-system-benchmarks"
|
|
65
67
|
]
|
|
66
68
|
}
|
|
67
69
|
]
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "get-design-done",
|
|
3
3
|
"short_name": "gdd",
|
|
4
|
-
"version": "1.
|
|
4
|
+
"version": "1.16.0",
|
|
5
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.",
|
|
6
6
|
"author": {
|
|
7
7
|
"name": "hegemonart",
|
|
@@ -64,7 +64,9 @@
|
|
|
64
64
|
"palette-catalog",
|
|
65
65
|
"style-vocabulary",
|
|
66
66
|
"industry-palettes",
|
|
67
|
-
"ui-style-vocabulary"
|
|
67
|
+
"ui-style-vocabulary",
|
|
68
|
+
"component-specs",
|
|
69
|
+
"design-system-benchmarks"
|
|
68
70
|
],
|
|
69
71
|
"skills": ["./skills/"]
|
|
70
72
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -4,6 +4,44 @@ All notable changes to get-design-done are documented here. Versions follow [sem
|
|
|
4
4
|
|
|
5
5
|
---
|
|
6
6
|
|
|
7
|
+
## [1.16.0] — 2026-04-24
|
|
8
|
+
|
|
9
|
+
### Added — Component Benchmark Corpus: Tooling + Waves 1–2 (15 specs)
|
|
10
|
+
|
|
11
|
+
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.
|
|
12
|
+
|
|
13
|
+
#### Tooling
|
|
14
|
+
|
|
15
|
+
- **`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.
|
|
16
|
+
- **`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).
|
|
17
|
+
- **`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).
|
|
18
|
+
- **`connections/design-corpora.md`** — 18-system catalog with canonical URLs, licensing/attribution notes, and fallback chain (canonical → archive.org → Refero MCP → Pinterest MCP).
|
|
19
|
+
- **`reference/components/TEMPLATE.md`** — locked 12-section spec shape. All future component specs must conform.
|
|
20
|
+
- **`reference/components/README.md`** — corpus index with category tables (Wave 1–5) and coverage summary.
|
|
21
|
+
|
|
22
|
+
#### Wave 1 — Inputs (8 specs)
|
|
23
|
+
|
|
24
|
+
- **`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.
|
|
25
|
+
- **`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.
|
|
26
|
+
- **`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.
|
|
27
|
+
- **`reference/components/checkbox.md`** — binary/indeterminate states, `fieldset`+`legend` group requirement, `.indeterminate` JS property, WAI-ARIA checkbox contract.
|
|
28
|
+
- **`reference/components/radio.md`** — arrow-key auto-advance behavior, Tab-as-group-unit pattern, single-radio anti-pattern, WAI-ARIA radiogroup contract.
|
|
29
|
+
- **`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.
|
|
30
|
+
- **`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.
|
|
31
|
+
- **`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.
|
|
32
|
+
|
|
33
|
+
#### Wave 2 — Containers (7 specs)
|
|
34
|
+
|
|
35
|
+
- **`reference/components/card.md`** — stretched-link pattern for nested interactivity, `<article>` vs `<div>` semantics, elevated/outlined/clickable variants, `aria-busy` skeleton state.
|
|
36
|
+
- **`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.
|
|
37
|
+
- **`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.
|
|
38
|
+
- **`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.
|
|
39
|
+
- **`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.
|
|
40
|
+
- **`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).
|
|
41
|
+
- **`reference/components/tabs.md`** — roving tabindex pattern, arrow-key navigation (not Tab), automatic vs. manual activation modes, tablist label requirement, `hidden` on inactive panels.
|
|
42
|
+
|
|
43
|
+
---
|
|
44
|
+
|
|
7
45
|
## [1.15.0] — 2026-04-24
|
|
8
46
|
|
|
9
47
|
### Added — Design Knowledge Expansion: 10 foundational references + MIFB micro-polish + UUPM ingest
|
package/README.md
CHANGED
|
@@ -389,6 +389,29 @@ After each design cycle, `/gdd:reflect` reads `.design/learnings/`, `.design/tel
|
|
|
389
389
|
|
|
390
390
|
---
|
|
391
391
|
|
|
392
|
+
## Component Benchmark Corpus
|
|
393
|
+
|
|
394
|
+
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`.
|
|
395
|
+
|
|
396
|
+
**Wave 1 — Inputs (v1.16.0)**: Button · Input · Select/Combobox · Checkbox · Radio · Switch · Link · Label
|
|
397
|
+
|
|
398
|
+
**Wave 2 — Containers (v1.16.0)**: Card · Modal/Dialog · Drawer/Sheet · Popover · Tooltip · Accordion · Tabs
|
|
399
|
+
|
|
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
|
|
401
|
+
|
|
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.
|
|
403
|
+
|
|
404
|
+
```bash
|
|
405
|
+
/gdd:benchmark button # harvest + synthesize a single spec
|
|
406
|
+
/gdd:benchmark --wave 1 # run all Wave 1 specs
|
|
407
|
+
/gdd:benchmark --list # coverage table
|
|
408
|
+
/gdd:benchmark --refresh modal-dialog # re-harvest after design-system update
|
|
409
|
+
```
|
|
410
|
+
|
|
411
|
+
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).
|
|
412
|
+
|
|
413
|
+
---
|
|
414
|
+
|
|
392
415
|
## Authority Watcher
|
|
393
416
|
|
|
394
417
|
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
|
+
```
|
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
# Design Corpora — Component Benchmark Sources
|
|
2
|
+
|
|
3
|
+
This file is the canonical source list for `agents/component-benchmark-harvester.md`.
|
|
4
|
+
It catalogs the 18 design systems used when harvesting per-component benchmarks,
|
|
5
|
+
with licensing notes and a documented fallback chain.
|
|
6
|
+
|
|
7
|
+
## Fallback Chain
|
|
8
|
+
|
|
9
|
+
When a primary URL is unreachable, try in order:
|
|
10
|
+
|
|
11
|
+
1. **Canonical URL** — documented per-system below
|
|
12
|
+
2. **archive.org snapshot** — `https://web.archive.org/web/*/` + canonical URL
|
|
13
|
+
3. **Refero MCP search** — `mcp__refero__search` with component name + system name
|
|
14
|
+
4. **Pinterest MCP visual search** — `mcp__pinterest__search` with component name + system name
|
|
15
|
+
|
|
16
|
+
Document which tier was used in the raw harvest file under `Source tier:`.
|
|
17
|
+
|
|
18
|
+
---
|
|
19
|
+
|
|
20
|
+
## Design Systems Catalog
|
|
21
|
+
|
|
22
|
+
### 1. Material Design 3 (Google)
|
|
23
|
+
- **Canonical**: https://m3.material.io/components
|
|
24
|
+
- **License**: Apache 2.0 (docs: Creative Commons BY 4.0)
|
|
25
|
+
- **Coverage**: Full component set with anatomy, variants, accessibility, theming tokens
|
|
26
|
+
- **Notes**: Use `/components/<slug>` path. Best for density, motion, and adaptive layout guidance.
|
|
27
|
+
|
|
28
|
+
### 2. Apple HIG
|
|
29
|
+
- **Canonical**: https://developer.apple.com/design/human-interface-guidelines/
|
|
30
|
+
- **License**: © Apple Inc. — educational fair use for benchmarking
|
|
31
|
+
- **Coverage**: iOS, macOS, visionOS, watchOS; focus on a11y, gestures, platform norms
|
|
32
|
+
- **Notes**: Crawl per-platform variant pages. Best for accessibility contracts and iOS-native patterns.
|
|
33
|
+
|
|
34
|
+
### 3. Radix UI Primitives + WAI-ARIA APG
|
|
35
|
+
- **Canonical (Radix)**: https://www.radix-ui.com/primitives/docs/components/
|
|
36
|
+
- **Canonical (WAI-ARIA APG)**: https://www.w3.org/WAI/ARIA/apg/patterns/
|
|
37
|
+
- **License**: MIT (Radix); W3C (WAI-ARIA APG — freely usable)
|
|
38
|
+
- **Coverage**: Unstyled primitives + full ARIA keyboard contracts
|
|
39
|
+
- **Notes**: WAI-ARIA APG keyboard contracts should be quoted verbatim. Radix wraps them with implementation detail.
|
|
40
|
+
|
|
41
|
+
### 4. shadcn/ui
|
|
42
|
+
- **Canonical**: https://ui.shadcn.com/docs/components/
|
|
43
|
+
- **License**: MIT
|
|
44
|
+
- **Coverage**: Radix-based, Tailwind-styled components; real-world usage patterns
|
|
45
|
+
- **Notes**: Best for "what real teams ship" convergence signal alongside spec systems.
|
|
46
|
+
|
|
47
|
+
### 5. Polaris (Shopify)
|
|
48
|
+
- **Canonical**: https://polaris.shopify.com/components/
|
|
49
|
+
- **License**: Creative Commons BY-NC-SA 4.0 (docs)
|
|
50
|
+
- **Coverage**: E-commerce-optimised components; excellent do/don't examples
|
|
51
|
+
- **Notes**: Polaris has unusually detailed do/don't guidance — mine it for anti-pattern blocks.
|
|
52
|
+
|
|
53
|
+
### 6. Carbon Design System (IBM)
|
|
54
|
+
- **Canonical**: https://carbondesignsystem.com/components/
|
|
55
|
+
- **License**: Apache 2.0
|
|
56
|
+
- **Coverage**: Enterprise UI; data-heavy components; full accessibility matrix
|
|
57
|
+
- **Notes**: Best for data-dense table/form contexts and enterprise accessibility contracts.
|
|
58
|
+
|
|
59
|
+
### 7. Fluent 2 (Microsoft)
|
|
60
|
+
- **Canonical**: https://fluent2.microsoft.design/components/web/
|
|
61
|
+
- **License**: MIT
|
|
62
|
+
- **Coverage**: Windows / Microsoft 365 design language; dense information hierarchy
|
|
63
|
+
- **Notes**: Good for focus-management patterns in complex workflows.
|
|
64
|
+
|
|
65
|
+
### 8. Primer (GitHub)
|
|
66
|
+
- **Canonical**: https://primer.style/components/
|
|
67
|
+
- **License**: MIT
|
|
68
|
+
- **Coverage**: Developer tools UI; markdown + code contexts; icon integration
|
|
69
|
+
- **Notes**: Best for developer-tool and productivity-app component norms.
|
|
70
|
+
|
|
71
|
+
### 9. Atlassian Design System
|
|
72
|
+
- **Canonical**: https://atlassian.design/components/
|
|
73
|
+
- **License**: Atlassian Design System License (educational fair use)
|
|
74
|
+
- **Coverage**: Collaboration software; complex overlays; strong focus management
|
|
75
|
+
- **Notes**: Excellent focus-trap and dialog accessibility guidance.
|
|
76
|
+
|
|
77
|
+
### 10. Ant Design
|
|
78
|
+
- **Canonical**: https://ant.design/components/
|
|
79
|
+
- **License**: MIT
|
|
80
|
+
- **Coverage**: Large enterprise component set; Asian market conventions
|
|
81
|
+
- **Notes**: High component density; useful for form and data-table convergence.
|
|
82
|
+
|
|
83
|
+
### 11. Mantine
|
|
84
|
+
- **Canonical**: https://mantine.dev/
|
|
85
|
+
- **License**: MIT
|
|
86
|
+
- **Coverage**: Full-featured React library; excellent composability patterns
|
|
87
|
+
- **Notes**: Good for controlled vs uncontrolled patterns and React-idiomatic API design.
|
|
88
|
+
|
|
89
|
+
### 12. Chakra UI
|
|
90
|
+
- **Canonical**: https://chakra-ui.com/docs/components/
|
|
91
|
+
- **License**: MIT
|
|
92
|
+
- **Coverage**: Accessible by default; strong theming; popular in SaaS
|
|
93
|
+
- **Notes**: Good accessibility defaults baseline; useful for theming-token convergence.
|
|
94
|
+
|
|
95
|
+
### 13. Base Web (Uber)
|
|
96
|
+
- **Canonical**: https://baseweb.design/components/
|
|
97
|
+
- **License**: MIT
|
|
98
|
+
- **Coverage**: High-density, internationalization-aware components
|
|
99
|
+
- **Notes**: Good for RTL, i18n, and high-density layout patterns.
|
|
100
|
+
|
|
101
|
+
### 14. Nord Design System (Trivago)
|
|
102
|
+
- **Canonical**: https://nordhealth.design/components/
|
|
103
|
+
- **License**: MIT
|
|
104
|
+
- **Coverage**: Healthcare / hospitality UI; strong accessibility focus
|
|
105
|
+
- **Notes**: Smaller corpus; useful for healthcare context accessibility norms.
|
|
106
|
+
|
|
107
|
+
### 15. Spectrum (Adobe)
|
|
108
|
+
- **Canonical**: https://spectrum.adobe.com/page/component-list/
|
|
109
|
+
- **License**: Apache 2.0
|
|
110
|
+
- **Coverage**: Creative tools UI; multi-surface (web, mobile, desktop)
|
|
111
|
+
- **Notes**: Best for creative-tool contexts and platform-adaptive component behavior.
|
|
112
|
+
|
|
113
|
+
### 16. Lightning Design System (Salesforce)
|
|
114
|
+
- **Canonical**: https://www.lightningdesignsystem.com/components/
|
|
115
|
+
- **License**: BSD 3-Clause (Salesforce SLDS license)
|
|
116
|
+
- **Coverage**: CRM / enterprise SaaS; dense forms; complex data grids
|
|
117
|
+
- **Notes**: Good for enterprise form validation patterns and data-heavy contexts.
|
|
118
|
+
|
|
119
|
+
### 17. Evergreen (Segment)
|
|
120
|
+
- **Canonical**: https://evergreen.segment.com/components/
|
|
121
|
+
- **License**: MIT
|
|
122
|
+
- **Coverage**: Analytics / data SaaS; compact components
|
|
123
|
+
- **Notes**: Small system; useful as a convergence signal for SaaS-optimised defaults.
|
|
124
|
+
|
|
125
|
+
### 18. Gestalt (Pinterest)
|
|
126
|
+
- **Canonical**: https://gestalt.pinterest.systems/
|
|
127
|
+
- **License**: Apache 2.0
|
|
128
|
+
- **Coverage**: Visual-content feed; strong image + card patterns
|
|
129
|
+
- **Notes**: Best for card / masonry / visual-content component norms.
|
|
130
|
+
|
|
131
|
+
---
|
|
132
|
+
|
|
133
|
+
## Supplemental Source
|
|
134
|
+
|
|
135
|
+
### Phase 15 Impeccable Salvage
|
|
136
|
+
- **Path**: `.planning/research/impeccable-salvage/`
|
|
137
|
+
- **License**: MIT (internal port)
|
|
138
|
+
- **Notes**: Harvested design-knowledge prose from the pre-Phase-15 impeccable plugin.
|
|
139
|
+
The harvester should consume this directory for any component-relevant excerpts before
|
|
140
|
+
reaching out to external URLs.
|
|
141
|
+
|
|
142
|
+
---
|
|
143
|
+
|
|
144
|
+
## Attribution Convention
|
|
145
|
+
|
|
146
|
+
Every excerpt written to `.planning/benchmarks/raw/<component>.md` must carry a
|
|
147
|
+
source-attribution line in the format:
|
|
148
|
+
|
|
149
|
+
```
|
|
150
|
+
> Source: [System Name](<canonical-url>) — [license] — accessed <date>
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
For WAI-ARIA APG keyboard contracts quoted verbatim, use:
|
|
154
|
+
|
|
155
|
+
```
|
|
156
|
+
> Source: WAI-ARIA Authoring Practices Guide (<url>) — W3C — accessed <date>
|
|
157
|
+
> Quoted verbatim per W3C document license.
|
|
158
|
+
```
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hegemonart/get-design-done",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.16.0",
|
|
4
4
|
"description": "A Claude Code plugin for systematic design improvement",
|
|
5
5
|
"author": "Hegemon",
|
|
6
6
|
"homepage": "https://github.com/hegemonart/get-design-done",
|
|
@@ -66,7 +66,9 @@
|
|
|
66
66
|
"palette-catalog",
|
|
67
67
|
"style-vocabulary",
|
|
68
68
|
"industry-palettes",
|
|
69
|
-
"ui-style-vocabulary"
|
|
69
|
+
"ui-style-vocabulary",
|
|
70
|
+
"component-specs",
|
|
71
|
+
"design-system-benchmarks"
|
|
70
72
|
],
|
|
71
73
|
"skills": [
|
|
72
74
|
"SKILL.md"
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
# Component Benchmark Corpus
|
|
2
|
+
|
|
3
|
+
Per-component design specifications harvested from 18 major design systems.
|
|
4
|
+
Each spec is ≤350 lines, greppable, diff-friendly, and agent-consumable.
|
|
5
|
+
|
|
6
|
+
**Spec shape**: `TEMPLATE.md` — Purpose · Anatomy · Variants · States · Sizing ·
|
|
7
|
+
Typography · Keyboard/a11y · Motion · Do/Don't · Anti-patterns · Citations · Grep signatures
|
|
8
|
+
|
|
9
|
+
**Harvest source list**: `connections/design-corpora.md` (18 systems)
|
|
10
|
+
**Tooling**: `agents/component-benchmark-harvester.md` → `agents/component-benchmark-synthesizer.md`
|
|
11
|
+
**CLI**: `/gdd:benchmark <component>` — see `skills/benchmark/SKILL.md`
|
|
12
|
+
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
## Wave 1 — Inputs (foundational)
|
|
16
|
+
|
|
17
|
+
| Component | Spec | Purpose |
|
|
18
|
+
|-----------|------|---------|
|
|
19
|
+
| Button | [button.md](button.md) | Triggers actions; primary, secondary, ghost, destructive variants |
|
|
20
|
+
| Input | [input.md](input.md) | Single-line text entry with label, error, helper text |
|
|
21
|
+
| Select / Combobox | [select-combobox.md](select-combobox.md) | Choose one option from a list; keyboard-navigable dropdown |
|
|
22
|
+
| Checkbox | [checkbox.md](checkbox.md) | Binary or indeterminate choice; groupable with fieldset |
|
|
23
|
+
| Radio | [radio.md](radio.md) | Mutually exclusive choice within a group |
|
|
24
|
+
| Switch | [switch.md](switch.md) | Binary toggle with immediate effect (vs. checkbox form submission) |
|
|
25
|
+
| Link | [link.md](link.md) | Navigation anchor; inline or standalone; external-link pattern |
|
|
26
|
+
| Label | [label.md](label.md) | Accessible association between caption and form control |
|
|
27
|
+
|
|
28
|
+
---
|
|
29
|
+
|
|
30
|
+
## Wave 2 — Containers
|
|
31
|
+
|
|
32
|
+
| Component | Spec | Purpose |
|
|
33
|
+
|-----------|------|---------|
|
|
34
|
+
| Card | [card.md](card.md) | Contained content surface; clickable or static |
|
|
35
|
+
| Modal / Dialog | [modal-dialog.md](modal-dialog.md) | Blocking overlay with focus trap and backdrop |
|
|
36
|
+
| Drawer / Sheet | [drawer.md](drawer.md) | Side or bottom sliding panel |
|
|
37
|
+
| Popover | [popover.md](popover.md) | Anchored overlay; dismisses on outside-click or Escape |
|
|
38
|
+
| Tooltip | [tooltip.md](tooltip.md) | Hover/focus-triggered label; no interactive content |
|
|
39
|
+
| Accordion | [accordion.md](accordion.md) | Collapsible content sections; single or multi-open |
|
|
40
|
+
| Tabs | [tabs.md](tabs.md) | Horizontal/vertical tab navigation with keyboard support |
|
|
41
|
+
|
|
42
|
+
---
|
|
43
|
+
|
|
44
|
+
## Wave 3 — Feedback *(Phase 17)*
|
|
45
|
+
|
|
46
|
+
| Component | Spec | Purpose |
|
|
47
|
+
|-----------|------|---------|
|
|
48
|
+
| Toast / Snackbar | — | Ephemeral status notification |
|
|
49
|
+
| Alert / Banner | — | Persistent inline status message |
|
|
50
|
+
| Progress | — | Linear and circular completion indicator |
|
|
51
|
+
| Skeleton | — | Loading placeholder matching content shape |
|
|
52
|
+
| Badge | — | Numeric or status indicator overlaid on another element |
|
|
53
|
+
| Chip / Tag | — | Compact, dismissible label |
|
|
54
|
+
|
|
55
|
+
---
|
|
56
|
+
|
|
57
|
+
## Wave 4 — Navigation *(Phase 17)*
|
|
58
|
+
|
|
59
|
+
| Component | Spec | Purpose |
|
|
60
|
+
|-----------|------|---------|
|
|
61
|
+
| Breadcrumb | — | Hierarchical location trail |
|
|
62
|
+
| Pagination | — | Page-set navigation |
|
|
63
|
+
| Stepper | — | Sequential multi-step progress indicator |
|
|
64
|
+
| Navigation Menu | — | Top-level or sidebar navigation |
|
|
65
|
+
| Command Menu | — | Keyboard-first search + action launcher |
|
|
66
|
+
|
|
67
|
+
---
|
|
68
|
+
|
|
69
|
+
## Wave 5 — Data & Advanced *(Phase 17)*
|
|
70
|
+
|
|
71
|
+
| Component | Spec | Purpose |
|
|
72
|
+
|-----------|------|---------|
|
|
73
|
+
| Table / Data Grid | — | Tabular data with sorting, filtering, selection |
|
|
74
|
+
| Date Picker | — | Calendar-based date/range selection |
|
|
75
|
+
| File Upload | — | Drag-drop or browse file input |
|
|
76
|
+
| Rich Text Editor | — | WYSIWYG content authoring |
|
|
77
|
+
| Virtualized List | — | Windowed rendering for large datasets |
|
|
78
|
+
|
|
79
|
+
---
|
|
80
|
+
|
|
81
|
+
## Coverage Summary
|
|
82
|
+
|
|
83
|
+
| Wave | Specs | Status |
|
|
84
|
+
|------|-------|--------|
|
|
85
|
+
| Wave 1 — Inputs | 8 | v1.16.0 |
|
|
86
|
+
| Wave 2 — Containers | 7 | v1.16.0 |
|
|
87
|
+
| Wave 3 — Feedback | 6 | Phase 17 |
|
|
88
|
+
| Wave 4 — Navigation | 5 | Phase 17 |
|
|
89
|
+
| Wave 5 — Data & Advanced | 5 | Phase 17 |
|
|
90
|
+
| **Total** | **31** | — |
|