@hegemonart/get-design-done 1.16.0 → 1.18.0

package/.claude-plugin/marketplace.json

@@ -5,14 +5,14 @@
   },
   "metadata": {
     "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).",
-    "version": "1.16.0"
+    "version": "1.18.0"
   },
   "plugins": [
     {
       "name": "get-design-done",
       "source": "./",
-      "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.",
-      "version": "1.16.0",
+      "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.",
+      "version": "1.18.0",
       "author": {
         "name": "hegemonart"
       },
@@ -63,8 +63,10 @@
         "cache-aware",
         "budget",
         "component-specs",
-        "design-system-benchmarks"
+        "design-system-benchmarks",
+        "component-conformance",
+        "convergence-detector"
       ]
     }
   ]
-}
+}

package/.claude-plugin/plugin.json

@@ -1,8 +1,8 @@
 {
   "name": "get-design-done",
   "short_name": "gdd",
-  "version": "1.16.0",
-  "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.",
+  "version": "1.18.0",
+  "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.",
   "author": {
     "name": "hegemonart",
     "url": "https://github.com/hegemonart"
@@ -65,8 +65,20 @@
     "style-vocabulary",
     "industry-palettes",
     "ui-style-vocabulary",
+    "variable-fonts",
+    "container-queries",
+    "view-transitions",
+    "motion-vocabulary",
+    "motion-easings",
+    "transition-taxonomy",
+    "gesture-mechanics",
+    "clip-path-animation",
     "component-specs",
-    "design-system-benchmarks"
+    "design-system-benchmarks",
+    "component-conformance",
+    "convergence-detector"
   ],
-  "skills": ["./skills/"]
-}
+  "skills": [
+    "./skills/"
+  ]
+}

package/CHANGELOG.md

@@ -4,6 +4,90 @@ All notable changes to get-design-done are documented here. Versions follow [sem
 
 ---
 
+## [1.18.0] — 2026-04-24
+
+### Added — Advanced Craft References + Motion Vocabulary
+
+**Wave A — Craft references (4 new files):**
+
+- `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)
+- `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)
+- `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)
+- `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)
+
+**Wave B — Motion vocabulary (RN MIT + hyperframes Apache-2.0):**
+
+- `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)
+- `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)
+- `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)
+- `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)
+- `reference/external/NOTICE.hyperframes` — Apache-2.0 attribution for hyperframes transition taxonomy
+
+**Wave B — Output contract + tooling:**
+
+- `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)
+- `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
+- `scripts/lib/easings.cjs` — Closed-form easing math helper (RN MIT): all 12 presets + in/out/inOut HOFs, cubic-bezier Newton-Raphson solver
+- `scripts/lib/spring.cjs` — Spring simulation helper (RN MIT): PRESETS, criticalDamping(), settleTime(), step()
+- `scripts/tests/test-motion-provenance.sh` — Provenance test: asserts RN-MIT attribution in all motion-vocabulary files; asserts no Remotion/ path citations
+
+**Agent integrations:**
+
+- `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
+- `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`
+- `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
+- `agents/token-mapper.md` — Micro-polish finding #5: easing token consolidation (raw `cubic-bezier()` → `--ease-*` canonical tokens)
+- `reference/motion.md` — Cross-links added pointing to all 4 Phase 18 motion references
+- `reference/registry.json` — 9 new entries: REF-14 through REF-17 + MOT-01 through MOT-05
+
+**Phase 18 keywords added to package.json:** `variable-fonts`, `container-queries`, `view-transitions`, `motion-vocabulary`, `motion-easings`, `transition-taxonomy`, `gesture-mechanics`, `clip-path-animation`
+
+---
+
+## [1.17.0] — 2026-04-24
+
+### Added — Component Benchmark Corpus: Waves 3–5 (20 specs) + Pipeline Integration
+
+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.
+
+#### Wave 3 — Feedback (6 specs)
+
+- **`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).
+- **`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).
+- **`reference/components/progress.md`** — linear + circular variants; determinate (`aria-valuenow`) vs indeterminate (`aria-valuetext`); `role="progressbar"`; `aria-label` required; 4px minimum track height.
+- **`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.
+- **`reference/components/badge.md`** — count/dot/icon variants; `99+` overflow pattern; decorative (no keyboard interaction); count surfaced via `aria-label` on parent element.
+- **`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).
+
+#### Wave 4 — Navigation & Data (9 specs)
+
+- **`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.
+- **`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).
+- **`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).
+- **`reference/components/breadcrumbs.md`** — `role="navigation"` + `aria-label="Breadcrumb"`; `aria-current="page"` on last item; `aria-hidden` on separators; truncate middle not ends.
+- **`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).
+- **`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).
+- **`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).
+- **`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.
+- **`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).
+
+#### Wave 5 — Advanced (5 specs)
+
+- **`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.
+- **`reference/components/slider.md`** — single + range; `role="slider"` + `aria-valuenow/min/max/valuetext`; 44px thumb touch target via `::before` trick; Page Up/Down ±10%.
+- **`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"`.
+- **`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.
+- **`reference/components/stepper.md`** — `role="list"` (not `role="tablist"`); `aria-current="step"` on active step; UUPM wizard/onboarding/checkout flow context (MIT attribution).
+
+#### Pipeline Integration
+
+- **`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).
+- **`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.
+- **`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.
+- **`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.
+
+---
+
 ## [1.16.0] — 2026-04-24
 
 ### Added — Component Benchmark Corpus: Tooling + Waves 1–2 (15 specs)

package/README.md

@@ -76,6 +76,14 @@ You don't need to be a designer. The pipeline carries the design expertise so yo
 
 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.
 
+### v1.18.0 Highlights — Advanced Craft References + Motion Vocabulary
+
+- **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).
+- **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`.
+- **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.
+- **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.
+- **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).
+
 ### v1.15.0 Highlights — Design Knowledge Expansion
 
 - **10 new foundational references** — `iconography.md`, `performance.md`, `brand-voice.md`, `visual-hierarchy-layout.md`, `gestalt.md`, `design-system-guidance.md`, `design-systems-catalog.md`, `framer-motion-patterns.md`, `palette-catalog.md`, `style-vocabulary.md`. Agents now have authoritative answers on icon sizing, Web Vitals budgets, brand voice axes, Gestalt principles, DS governance, and 40+ industry-vertical color palettes.
@@ -397,9 +405,19 @@ Per-component design specifications harvested from 18 major design systems and s
 
 **Wave 2 — Containers (v1.16.0)**: Card · Modal/Dialog · Drawer/Sheet · Popover · Tooltip · Accordion · Tabs
 
-**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
+**Wave 3 — Feedback (v1.17.0)**: Toast · Alert · Progress · Skeleton · Badge · Chip
+
+**Wave 4 — Navigation & Data (v1.17.0)**: Menu · Navbar · Sidebar · Breadcrumbs · Pagination · Table · List · Tree · Command-palette
+
+**Wave 5 — Advanced (v1.17.0)**: Date-picker · Slider · File-upload · Rich-text editor · Stepper
+
+**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.
 
-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.
+**Pipeline integration (v1.17.0):**
+- `design-auditor` — detects component implementations via grep signatures, scores conformance against specs, emits Component Conformance addendum
+- `design-executor` — reads matching spec as pre-flight contract for `type:components` tasks
+- `design-doc-writer` — scaffolds handoff docs from spec anatomy/variants when a benchmark spec exists
+- `design-pattern-mapper` — writes `.design/map/component-convergence.md` (matched/absent components + convergence %)
 
 ```bash
 /gdd:benchmark button                  # harvest + synthesize a single spec

package/agents/design-auditor.md

@@ -6,7 +6,8 @@ color: green
 model: inherit
 default-tier: sonnet
 tier-rationale: "Emits structured findings from code inspection; Sonnet balances depth with cost"
-size_budget: XL
+size_budget: XXL
+size_budget_rationale: "Phase 17 added Component Conformance addendum (+54 lines for spec-grep detection + conformance scoring algorithm)"
 parallel-safe: always
 typical-duration-seconds: 45
 reads-only: false
@@ -52,6 +53,10 @@ Minimum expected files:
 - `reference/performance.md` — Core Web Vitals budgets, JS/font/image budgets, React runtime performance
 - `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
 - `reference/design-systems-catalog.md` — 18-system index for identifying pattern precedents and system alignment
+- `reference/variable-fonts-loading.md` (if present) — variable font axes, font-display trade-offs, fallback metric overrides; use when auditing Pillar 4 (Typography)
+- `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
+- `reference/css-grid-layout.md` (if present) — subgrid, container queries, fluid clamp() typography, logical properties; use when auditing Pillar 5 (Layout & Spacing)
+- `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)
 
 ---
 
@@ -447,6 +452,60 @@ If framer-motion is in use and neither `reducedMotion="user"` in `MotionConfig`
 
 ---
 
+## Component Conformance Addendum
+
+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.
+
+### Step 1: Discover available specs
+
+```bash
+ls reference/components/*.md | grep -v TEMPLATE | grep -v README
+```
+
+### Step 2: Detect implementations in codebase
+
+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:
+
+```bash
+# Check for Button implementation
+grep -rn "role=\"button\"\|<button\b\|Button\b" src/ --include="*.tsx" --include="*.jsx" | head -5
+
+# Check for Toast implementation
+grep -rn "role=\"status\"\|role=\"alert\"\|toast\|Toast\b" src/ --include="*.tsx" --include="*.jsx" | head -5
+```
+
+### Step 3: Score conformance per detected component
+
+For each detected component, check:
+- **States covered**: count how many States from the spec are implemented (look for aria states, visual states)
+- **Variants covered**: count how many spec Variants exist in the codebase
+- **A11y contract**: spot-check 2–3 WAI-ARIA items from the Keyboard & Accessibility section
+
+Score = (implemented items) / (total spec items checked) × 100. Round to nearest 10%.
+
+### Step 4: Emit in DESIGN-AUDIT.md
+
+Add after the Priority Fix List:
+
+```markdown
+## Component Conformance
+
+> Informational addendum — does not affect /28 pillar score.
+> Specs from `reference/components/` benchmarked against codebase.
+
+| Component | Detected | Conformance | Key Gaps |
+|-----------|----------|-------------|----------|
+| Button | ✓ | 80% | Missing `aria-busy` on loading state |
+| Toast | ✓ | 60% | Missing `role="alert"` on error variant |
+| Table | ✗ | — | No implementation found |
+
+**Summary**: N/M specs detected in codebase; average conformance X%.
+```
+
+If `reference/components/` does not exist or contains no specs, skip this section entirely (graceful degradation).
+
+---
+
 ## Constraints
 
 **MUST NOT:**

package/agents/design-doc-writer.md

@@ -61,6 +61,27 @@ The orchestrating stage (style command) supplies a `<required_reading>` block in
 
 ---
 
+## Component Spec Scaffold
+
+Before Step 1, check whether a benchmark spec exists for this component:
+
+```bash
+# component_name is title-cased (e.g., "Button") → convert to kebab-case for file lookup
+# e.g., "CommandPalette" → "command-palette", "RichTextEditor" → "rich-text-editor"
+ls reference/components/<kebab-name>.md 2>/dev/null
+```
+
+**If the spec exists**, read its **Purpose**, **Anatomy**, **Variants**, and **States** sections. Use them to:
+1. Pre-fill the DESIGN-STYLE doc's structure with the benchmark section headers and variant table
+2. Pull the "Benchmark Citations" entry from the spec and include: `> Benchmarked against: [systems list]`
+3. Fill in project-specific values from DESIGN-CONTEXT.md on top of the scaffold (brand tokens, chosen variants, etc.)
+
+**If no spec exists**, generate the DESIGN-STYLE doc from scratch as before — no change to existing behaviour.
+
+This step runs for both `pipeline_complete: true` and `pipeline_complete: false` modes.
+
+---
+
 ## Work
 
 ### Common Step 1 — Extract Design Tokens from Source File

package/agents/design-executor.md

@@ -5,7 +5,8 @@ tools: Read, Write, Edit, Bash, Grep, Glob
 color: yellow
 default-tier: sonnet
 tier-rationale: "Follows an Opus-authored plan; executes rather than plans"
-size_budget: XL
+size_budget: XXL
+size_budget_rationale: "Phase 17 added Benchmark Spec Pre-Flight section for type:components (+17 lines)"
 parallel-safe: conditional-on-touches
 typical-duration-seconds: 60
 reads-only: false
@@ -128,7 +129,7 @@ For `audit` tasks: grep the codebase using patterns from `reference/anti-pattern
 
 ### Type: typography
 
-Read `reference/typography.md` before starting.
+Read `reference/typography.md` before starting. If `reference/variable-fonts-loading.md` is present, also read it — apply variable font axis guidance, font-display trade-offs, fallback metric overrides (size-adjust, ascent-override), and FOIT/FOUT rules to any web font or @font-face decisions in this task.
 
 1. **Identify current state**: grep all font-size values in the codebase. List every unique value.
 2. **Design the target scale**: from the `<decisions>` in DESIGN-CONTEXT.md, pick the modular ratio (default: 1.25, base 16px). Compute: 12/14/16/20/24/30/36/48px (or `text-xs` through `text-5xl` in Tailwind).
@@ -177,7 +178,7 @@ before committing final values.
 
 ### Type: layout
 
-Read `reference/layout.md` (if present) and relevant DESIGN-CONTEXT.md decisions before starting.
+Read `reference/layout.md` (if present) and relevant DESIGN-CONTEXT.md decisions before starting. If `reference/css-grid-layout.md` is present, also read it — apply modern Grid patterns (subgrid, container queries with `@container`, fluid `clamp()` typography, logical properties, safe-area insets, anchor positioning). If `reference/image-optimization.md` is present, apply it to any image-related layout decisions (format choice, srcset/sizes, lazy-loading, CDN transforms, image budget enforcement).
 
 1. **Inventory layout structure**: identify all grid, flex, and positioning patterns in scope files.
 2. **Check spacing consistency**: grep for magic spacing values (px or rem) not from a spacing scale. Map to nearest scale step.
@@ -220,7 +221,7 @@ Work through the accessibility checklist:
 
 ### Type: motion
 
-Read `reference/motion.md` and `reference/framer-motion-patterns.md` before starting.
+Read `reference/motion.md` and `reference/framer-motion-patterns.md` before starting. If `reference/motion-advanced.md` is present, also read it — apply advanced patterns (gesture/drag mechanics, clip-path animations, blur-to-mask crossfades, CSS transitions vs keyframes for interruptible UI, WAAPI, Framer Motion hardware-accel gotcha, motion cohesion rules, next-day review process). If `reference/motion-easings.md` is present, use canonical `--ease-*` tokens rather than raw cubic-bezier strings. If `reference/motion-spring.md` is present, use named presets (gentle/wobbly/stiff/slow) for spring configurations.
 
 `reference/framer-motion-patterns.md` contains Framer Motion-specific implementation patterns that complement the framework-agnostic rules in `reference/motion.md`. When the codebase uses Framer Motion (detectable by `framer-motion` imports), apply the patterns from that file: spring/tween configuration, `AnimatePresence` with `initial={false}`, layout animations, variants with `staggerChildren`, gesture props (`whileHover`, `whileTap` at scale 0.96), `useReducedMotion` or `MotionConfig reducedMotion="user"` for a11y, and the hard constraint that `bounce: 0` for all micro-interactions.
 
@@ -288,6 +289,23 @@ Read `reference/anti-patterns.md`, `reference/design-system-guidance.md`, and DE
 
 Read all relevant reference files for this component's concerns (typography, color, accessibility, motion) before starting.
 
+#### Benchmark Spec Pre-Flight
+
+Before executing the task, check for a benchmark spec:
+
+```bash
+# Extract component name from task description (PascalCase → kebab-case)
+ls reference/components/<name>.md 2>/dev/null
+```
+
+If `reference/components/<name>.md` exists:
+1. Read the spec's **Anatomy**, **States**, **Variants**, and **Keyboard & Accessibility** sections
+2. Use these as the authoritative contract for the implementation — do not re-discover naming conventions, ARIA roles, or keyboard patterns that the spec already defines
+3. In the task output file (`task-NN.md`), add a line: `Spec pre-flight: reference/components/<name>.md — [N] states, [M] variants, WAI-ARIA contract applied`
+4. Flag any deviation between the task instructions and the spec in the `## Deviations` section
+
+If no spec exists, skip silently and proceed normally (graceful degradation).
+
 1. **Read the component spec from the task's Action field**: understand what the component does, its states, its variants.
 2. **Apply ALL relevant reference guidelines simultaneously**: typography scale, color token usage, accessibility requirements (ARIA, focus management, keyboard nav), motion constraints.
 3. **Build the component structure**: markup, styles, and behavior per the spec.

package/agents/design-pattern-mapper.md

@@ -6,6 +6,7 @@ color: green
 model: inherit
 default-tier: sonnet
 tier-rationale: "Catalogs design patterns present in codebase; open-ended classification"
+size_budget: XL
 parallel-safe: always
 typical-duration-seconds: 45
 reads-only: false
@@ -117,6 +118,66 @@ Identify: CSS Modules, styled-components, Tailwind utility classes, or inline st
 
 ---
 
+## Component Convergence Detection
+
+After pattern extraction, scan for component implementations against the benchmark corpus.
+
+### Step 1: Enumerate available specs
+
+```bash
+ls reference/components/*.md 2>/dev/null | grep -v TEMPLATE | grep -v README
+```
+
+If `reference/components/` does not exist or is empty, skip this entire section.
+
+### Step 2: Detect implementations per spec
+
+For each spec file, run its **Grep Signatures** section patterns against the source root:
+
+```bash
+# Example for button.md — adapt per spec's actual grep signatures
+grep -rn "role=\"button\"\|<button\b" src/ --include="*.tsx" --include="*.jsx" -l 2>/dev/null | wc -l
+```
+
+A component is "detected" if ≥1 signature pattern returns results.
+
+### Step 3: Compute convergence score per detected component
+
+For detected components, check coverage against the spec's **States** and **Variants** tables:
+- Count spec states: how many are implemented (aria attributes, CSS classes, data attributes)
+- Count spec variants: how many variant prop values exist in the codebase
+- Convergence % = (implemented items / total spec items) × 100, rounded to 10%
+
+### Step 4: Write `.design/map/component-convergence.md`
+
+```markdown
+---
+generated: [ISO timestamp]
+total_specs: [N]
+detected: [M]
+---
+
+# Component Convergence
+
+## Matched Components
+
+| Component | Spec | Convergence | Key Gaps |
+|-----------|------|-------------|----------|
+| Button | reference/components/button.md | 90% | Missing loading aria-busy |
+| Toast | reference/components/toast.md | 60% | Missing role="alert" on error variant |
+
+## Absent Components (spec exists, no codebase match)
+
+- `reference/components/command-palette.md` — no implementation detected
+- `reference/components/tree.md` — no implementation detected
+
+## Summary
+
+**N/M specs detected** in codebase · Average convergence: X%
+```
+
+---
+
 ## DESIGN-PATTERNS.md Output Format
 
 Write to `.design/DESIGN-PATTERNS.md`. Use exactly this structure:

package/agents/motion-mapper.md

@@ -25,6 +25,10 @@ You inventory motion and animation patterns. Zero session memory. You do not mod
 
 - `.design/STATE.md`
 - `reference/motion.md` (if present)
+- `reference/motion-advanced.md` (if present) — advanced patterns: spring physics, scroll-driven, FLIP, View Transitions API, gesture/drag mechanics, clip-path patterns, blur crossfades, Framer Motion hardware-accel gotcha
+- `reference/motion-easings.md` (if present) — 12 canonical easing presets; classify each detected easing against this catalog
+- `reference/motion-transition-taxonomy.md` (if present) — 8 transition families; classify page/route transitions against this taxonomy
+- `reference/motion-spring.md` (if present) — spring presets; classify spring configs against gentle/wobbly/stiff/slow
 - Any files supplied by the orchestrator
 
 ## Scan Strategy
@@ -61,8 +65,37 @@ From the collected values, bucket by:
 - Normal: 200–400ms
 - Slow: >400ms
 
+## Advanced Scan Patterns (Phase 18+)
+
+When `reference/motion-advanced.md` is present, additionally scan for:
+
+```bash
+# Gesture / drag patterns
+grep -rEn "setPointerCapture|onPointerDown.*drag|dragConstraints|useDragControls" src/ | head -40
+grep -rEn "velocity|flick|swipe.*dismiss|drag.*dismiss" src/ | head -40
+
+# Clip-path animations
+grep -rEn "clip-path|clipPath|inset\(" src/ | head -40
+
+# FLIP / View Transitions
+grep -rEn "layoutId|startViewTransition|view-transition-name" src/ | head -30
+
+# Scroll-driven
+grep -rEn "animation-timeline|ScrollTimeline|useScroll\b" src/ | head -30
+
+# WAAPI
+grep -rEn "\.animate\(\[|WebAnimation|getAnimations" src/ | head -20
+```
+
+Classify gesture patterns against `reference/motion-advanced.md` (velocity formula, pointer capture, multi-touch protection).
+Classify easing values against the 12 canonical presets in `reference/motion-easings.md`; output `"custom"` with justification for anything that doesn't match.
+Classify page/route transitions against the 8 families in `reference/motion-transition-taxonomy.md`.
+Classify spring configs against the 4 presets in `reference/motion-spring.md`.
+
 ## Output Format — `.design/map/motion.md`
 
+**The output MUST begin with a structured JSON block** enclosed in ` ```json ``` ` fences, followed by the prose sections. The JSON block must conform to `reference/output-contracts/motion-map.schema.json`. Malformed or missing blocks are validation failures.
+
 ```markdown
 ---
 generated: [ISO 8601]
@@ -70,22 +103,54 @@ generated: [ISO 8601]
 
 # Motion Map
 
+```json
+{
+  "schema_version": "1.0.0",
+  "generated_at": "[ISO 8601]",
+  "summary": {
+    "total_animations": 0,
+    "custom_easings": 0,
+    "reduced_motion_compliant": false,
+    "libraries": []
+  },
+  "animations": [
+    {
+      "id": "example-toast-enter",
+      "location": { "file": "src/components/Toast.tsx", "line": 12 },
+      "description": "Toast enter animation — opacity + translateY",
+      "easing": "cubic-out",
+      "duration_class": "quick",
+      "duration_ms": 180,
+      "trigger": "state-change",
+      "library": "framer-motion",
+      "reduced_motion_handled": true
+    }
+  ]
+}
+```
+
 ## CSS transitions
-| File | Property | Duration | Easing |
-|------|----------|----------|--------|
+| File | Property | Duration | Easing | Canonical Easing |
+|------|----------|----------|--------|-----------------|
 
 ## Library usage
 | Library | Files | Notes |
 |---------|-------|-------|
 
 ## Duration distribution
-- Fast (<200ms): [N]
-- Normal (200–400ms): [N]
-- Slow (>400ms): [N]
-
-## Easing functions
-| Easing | Count |
-|--------|-------|
+- Instant (<100ms): [N]
+- Quick (100–200ms): [N]
+- Standard (200–400ms): [N]
+- Slow (400–800ms): [N]
+- Narrative (>800ms): [N]
+
+## Easing classification
+| Detected Easing | Canonical Name | Count | Notes |
+|----------------|---------------|-------|-------|
+
+## Advanced patterns detected
+| Pattern | Files | Notes |
+|---------|-------|-------|
 
 ## Reduced-motion compliance
 - `prefers-reduced-motion` queries present: [N]

package/agents/token-mapper.md

@@ -119,6 +119,14 @@ After the standard token inventory, scan and report:
    - Check if they have `font-variant-numeric: tabular-nums` or Tailwind `tabular-nums` class
    - Report missing instances
 
+5. **Easing token consolidation** (when `reference/motion-easings.md` is present)
+   - Grep: `cubic-bezier\(` in CSS/SCSS/styled-components/Tailwind config
+   - Grep: `ease:` or `easing:` in Framer Motion / GSAP configs
+   - For each raw easing value found, check if a canonical `--ease-*` token from `reference/motion-easings.md` would serve the same purpose
+   - Report raw values that map to a canonical preset (recommend the `--ease-*` token)
+   - Report raw values with no canonical match as informational (may warrant a custom token)
+   - Do NOT flag values that are already using `--ease-*` tokens
+
 ### Output format:
 ```
 ## Micro-polish token findings

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hegemonart/get-design-done",
-  "version": "1.16.0",
+  "version": "1.18.0",
   "description": "A Claude Code plugin for systematic design improvement",
   "author": "Hegemon",
   "homepage": "https://github.com/hegemonart/get-design-done",
@@ -67,6 +67,14 @@
     "style-vocabulary",
     "industry-palettes",
     "ui-style-vocabulary",
+    "variable-fonts",
+    "container-queries",
+    "view-transitions",
+    "motion-vocabulary",
+    "motion-easings",
+    "transition-taxonomy",
+    "gesture-mechanics",
+    "clip-path-animation",
     "component-specs",
     "design-system-benchmarks"
   ],
@@ -74,4 +82,4 @@
     "SKILL.md"
   ],
   "hooks": "hooks/hooks.json"
-}
+}