@hegemonart/get-design-done 1.14.8 → 1.15.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.
@@ -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.14.8"
8
+ "version": "1.15.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.14.8",
15
+ "version": "1.15.0",
16
16
  "author": {
17
17
  "name": "hegemonart"
18
18
  },
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "get-design-done",
3
3
  "short_name": "gdd",
4
- "version": "1.14.8",
4
+ "version": "1.15.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",
@@ -53,10 +53,18 @@
53
53
  "cost-optimization",
54
54
  "cache-aware",
55
55
  "budget",
56
- "onboarding",
57
- "first-run",
58
- "demo",
59
- "proof-path"
56
+ "iconography",
57
+ "brand-voice",
58
+ "performance-budget",
59
+ "framer-motion",
60
+ "motion-design",
61
+ "micro-polish",
62
+ "surfaces",
63
+ "make-interfaces-feel-better",
64
+ "palette-catalog",
65
+ "style-vocabulary",
66
+ "industry-palettes",
67
+ "ui-style-vocabulary"
60
68
  ],
61
69
  "skills": ["./skills/"]
62
70
  }
package/CHANGELOG.md CHANGED
@@ -4,6 +4,65 @@ All notable changes to get-design-done are documented here. Versions follow [sem
4
4
 
5
5
  ---
6
6
 
7
+ ## [1.15.0] — 2026-04-24
8
+
9
+ ### Added — Design Knowledge Expansion: 10 foundational references + MIFB micro-polish + UUPM ingest
10
+
11
+ This release closes the plugin's shallow-coverage gaps across iconography, performance, brand voice, visual hierarchy, Gestalt principles, design-system governance, and adds two new UUPM-sourced knowledge bases (palette catalog + style vocabulary). It also lands the complete MIT-licensed MIFB (make-interfaces-feel-better) micro-polish track.
12
+
13
+ #### Impeccable removal
14
+
15
+ All `impeccable-*` skill coupling removed from the plugin. References in `reference/checklists.md` and `reference/review-format.md` replaced with native GDD equivalents (`DESIGN-CONTEXT.md`, `/gdd:fast`, `design:design-critique`). Salvage archive at `.planning/research/impeccable-salvage/` for Phase 16.
16
+
17
+ #### 10 new foundational reference files
18
+
19
+ - **`reference/iconography.md`** — Optical sizing, stroke-weight rules, metaphor taxonomy (functional/status/nav/brand), dark-mode variants, icon animation guidelines, semantic vs. decorative labeling, touch-target pairing, catalog of 9 public icon libraries (Lucide, Phosphor, Heroicons, Radix Icons, Tabler, Iconoir, Remix, SF Symbols, Feather). Metaphor taxonomy absorbs UUPM `icons.csv` (MIT).
20
+ - **`reference/performance.md`** — Core Web Vitals targets by project type (SaaS/marketing/e-commerce/docs/dashboards), LCP/INP/CLS/TTFB budgets, critical CSS, image budgets, animation frame budget (16.67ms), JS bundle budgets (<170KB gzipped), font budgets, Lighthouse CI hookup. React runtime section absorbs UUPM `react-performance.csv` (MIT).
21
+ - **`reference/design-systems-catalog.md`** — Quick-reference index of 18 major design systems: Material 3, Apple HIG, Radix+WAI-ARIA, shadcn/ui, Polaris, Carbon, Fluent 2, Primer, Atlassian, Ant Design, Mantine, Chakra, Base Web, Nord, Spectrum, Lightning, Evergreen, Gestalt (Pinterest).
22
+ - **`reference/brand-voice.md`** — 5 voice axes (Formal↔Casual, Serious↔Playful, Expert↔Approachable, Reverent↔Irreverent, Authoritative↔Collaborative), 12 Jungian archetypes + 6 design-register variants, tone-by-context table (8 contexts), 20+ industry-vertical context table. Industry-context absorbs UUPM `products.csv` + `ui-reasoning.csv` (MIT).
23
+ - **`reference/visual-hierarchy-layout.md`** — Z-order/depth cues, whitespace principles, asymmetry/rhythm, compositional grids (4/8/12/16-col), figure-ground, reading-order patterns (F/Z/inverted-triangle), progressive disclosure. Landing-archetypes subsection absorbs UUPM `landing.csv` (24 patterns, MIT).
24
+ - **`reference/gestalt.md`** — All 8 Gestalt principles (Proximity, Similarity, Continuity, Closure, Figure-Ground, Common Fate, Common Region, Prägnanz), each with definition, design application, scoring rubric, and CSS grep signatures. UUPM `ux-guidelines.csv` deduped across gestalt/heuristics/anti-patterns/priority-matrix (MIT).
25
+ - **`reference/design-system-guidance.md`** — Token versioning/deprecation, multi-brand token architecture (base/semantic/component layers), platform translation (Style Dictionary/Tokens Studio/Terrazzo), governance/RFC model, documentation standard, maturity rubric levels 0–5.
26
+ - **`reference/framer-motion-patterns.md`** — Spring vs. tween config, AnimatePresence (including `initial={false}` rule), layout animations, variants+staggering, gesture motion (`whileHover`, `whileTap` canonical 0.96), scroll-linked animations, `prefers-reduced-motion` compliance, 60fps GPU-safe property rules, MotionConfig, common pitfalls. UUPM `stacks/react.csv` framer rows absorbed (MIT).
27
+ - **`reference/palette-catalog.md`** — 40+ industry-vertical color palettes with 12 semantic token roles each, all WCAG 4.5:1 body / 3:1 UI verified. Data sibling at `reference/data/palettes.csv`. UUPM `colors.csv` absorbed (MIT).
28
+ - **`reference/style-vocabulary.md`** — 38+ named UI aesthetics (Glassmorphism, Brutalism, Neumorphism, Bento, Claymorphism, Aurora, AI-Native, Swiss Modernism 2.0, Vaporwave, Editorial Grid, HUD/Sci-Fi FUI, and more) with keywords, signature effects, best-for, avoid-for, era. Data sibling at `reference/data/styles.csv`. UUPM `styles.csv` absorbed (MIT).
29
+
30
+ #### MIFB micro-polish track
31
+
32
+ Source: [jakub.kr/writing/details-that-make-interfaces-feel-better](https://jakub.kr/writing/details-that-make-interfaces-feel-better) (MIT, Jakub Krehel)
33
+
34
+ - **`reference/surfaces.md`** (new) — Concentric radius formula (`outerRadius = innerRadius + padding`), optical alignment offsets, 3-layer shadow system (exact `rgba` values), image outline rule (pure black/white opacity only), hit-area `::after` pseudo-element pattern.
35
+ - **`reference/typography.md`** extended — `text-wrap: balance` (headings, ≤6 lines Chromium), `text-wrap: pretty` (body/captions), `-webkit-font-smoothing: antialiased` at `:root` only, `font-variant-numeric: tabular-nums` for dynamic numerals. UUPM `typography.csv` (57 pairings) absorbed into expanded pairings catalog (MIT). `reference/data/google-fonts.csv` registered as data sibling.
36
+ - **`reference/motion.md`** extended — 6 new subsections: interruptible animations (transitions vs. keyframes decision table), split-and-stagger enter/exit pattern, contextual icon cross-fade (canonical `scale 0.25→1`, `opacity 0→1`, `blur 4→0`, `bounce: 0`), scale-on-press canonical `0.96`, `<AnimatePresence initial={false}>` rule, `will-change` GPU-compositable property table.
37
+ - **`reference/anti-patterns.md`** — 4 new BAN entries: BAN-10 same-radius-nested, BAN-11 tinted image outline, BAN-12 `transition: all`, BAN-13 `will-change: all`. Each with grep signature and fix pointer.
38
+ - **`reference/checklists.md`** — New "Micro-polish check" gate (14 items across typography/surfaces/motion). `scale(0.97)` mention reconciled to canonical `0.96`.
39
+
40
+ #### ⚠️ BREAKING — 7th audit pillar: Micro-polish (weight redistribution)
41
+
42
+ A new **Micro-polish** pillar (5%) has been added to `reference/audit-scoring.md`. Weight was redistributed from the Anti-Pattern Compliance pillar (10% → 5%). **Total remains 100%, but per-pillar weights changed.** Cross-cycle score comparisons that mix v1.14.x and v1.15.0 audit reports should account for this weight shift.
43
+
44
+ #### Mapper extensions
45
+
46
+ All four mapper agents (`motion-mapper`, `token-mapper`, `visual-hierarchy-mapper`, `a11y-mapper`) gain "Micro-polish findings" output sections with grep-driven detection of BAN-10/11/12/13 and MIFB rule violations.
47
+
48
+ #### Agent integrations
49
+
50
+ - `design-context-builder` — reads `brand-voice.md` for archetype resolution, `palette-catalog.md` for palette proposal, `style-vocabulary.md` for style-direction picker.
51
+ - `design-auditor` — reads `iconography.md`, `performance.md`, `gestalt.md`, `framer-motion-patterns.md`, `surfaces.md`; includes 7th pillar micro_polish in output schema.
52
+ - `design-executor` — reads `brand-voice.md` (type:copy), `design-system-guidance.md` (type:tokens), `framer-motion-patterns.md` (type:motion), `performance.md` (type:layout).
53
+ - `design-pattern-mapper` — extended with `iconography-system` and `brand-voice` categories.
54
+ - `design-verifier` — micro_polish added as supplemental dimension.
55
+
56
+ #### Attribution
57
+
58
+ - Jakub Krehel (MIT) — micro-polish rules in typography.md, surfaces.md, motion.md, anti-patterns.md BAN-10/11/12/13, checklists.md Micro-polish gate.
59
+ - nextlevelbuilder/ui-ux-pro-max-skill v2.5.0 (MIT) — data snapshot ingested into iconography, performance, brand-voice, visual-hierarchy-layout, typography, framer-motion-patterns, palette-catalog, style-vocabulary, gestalt/heuristics/anti-patterns/priority-matrix dedup. **One-shot snapshot — no live re-sync contract.**
60
+
61
+ #### UUPM deferrals (explicitly routed, not discarded)
62
+
63
+ - `charts.csv` → Phase 19 `reference/data-visualization.md`
64
+ - `app-interface.csv` → Phase 17 component-corpus authoring
65
+ - `stacks/*.csv` (14 non-React) → future stack-playbook phase
7
66
  ## [1.14.8] — 2026-04-24
8
67
 
9
68
  ### Added — Phase 14.7 First-Run Proof Path
package/README.md CHANGED
@@ -76,6 +76,13 @@ 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.15.0 Highlights — Design Knowledge Expansion
80
+
81
+ - **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.
82
+ - **MIFB micro-polish track** — MIT content from [Jakub Krehel](https://jakub.kr/writing/details-that-make-interfaces-feel-better): new `reference/surfaces.md` (concentric radius, 3-layer shadow), `text-wrap: balance/pretty`, canonical press scale `0.96`, `AnimatePresence initial={false}`, `bounce: 0` icon cross-fade, and 4 new BAN entries. All four mapper agents gain "Micro-polish findings" detection. New 7th audit pillar: **Micro-polish** (5%).
83
+ - **UUPM data ingest** — One-shot MIT snapshot from [nextlevelbuilder/ui-ux-pro-max-skill](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill) v2.5.0: icon metaphor taxonomy, React perf heuristics, 20+ industry verticals, 24 landing-page archetypes, 57 font pairings, 40+ WCAG-verified palettes, 38+ UI aesthetic styles — all rewritten in GDD voice.
84
+ - **⚠️ Breaking** — 7th audit pillar changes Anti-Pattern Compliance weight (10%→5%). Cross-cycle score comparisons spanning v1.14.x and v1.15.0 should account for this weight shift.
85
+
79
86
  ### v1.14.0 Highlights
80
87
 
81
88
  - **AI-native canvas tools** — paper.design (MCP canvas read/write, screenshot verification) and pencil.dev (git-tracked `.pen` spec files, no MCP required) complete a full canvas→code→verify→canvas round-trip.
@@ -109,6 +109,31 @@ scope: static-only
109
109
 
110
110
  ## Scope note
111
111
  Static scan only. Runtime contrast, focus-trap, and screen-reader behavior require a live audit (Phase 8).
112
+
113
+ ## Micro-polish a11y findings
114
+
115
+ After the standard accessibility map, scan and report:
116
+
117
+ 1. **Interactive elements visually < 40×40 without hit-area extension**
118
+ - Grep: `<button`, `<a`, elements with `onClick` where width/height classes suggest small size (e.g., `w-4 h-4`, `w-5 h-5`, `w-6 h-6`) without `::after` pseudo-element or explicit padding expansion
119
+ - Fix: add `::after { content:''; position:absolute; inset:-10px }` to reach 40×40 minimum
120
+ - This pairs with existing WCAG touch-target check but adds the concrete `::after` fix pointer
121
+
122
+ 2. **Icon buttons without expanded click area**
123
+ - Grep: `<button[^>]*>` containing only an `<svg>` or icon component with small container size
124
+ - Flag if no `p-2` or larger padding that would expand the hit area
125
+ - Fix: add `p-2` (8px each side) to 24px icon → 40px total; or use `::after` pattern
126
+
127
+ ### Output format:
128
+ ```
129
+ ## Micro-polish a11y findings
130
+
131
+ | Finding | File | Line | Element | Measured Size | Fix |
132
+ |---------|------|------|---------|---------------|-----|
133
+ | small-hit-area | ... | ... | IconButton (close) | 20×20px | Add p-2 padding or ::after inset:-10px |
134
+
135
+ Total: N findings. (0 = clean)
136
+ ```
112
137
  ```
113
138
 
114
139
  ## Constraints
@@ -1,6 +1,6 @@
1
1
  ---
2
2
  name: design-auditor
3
- description: Retrospective 6-pillar audit (copy, visual hierarchy, color, typography, layout/spacing, experience) with 1–4 scores. Writes .design/DESIGN-AUDIT.md. SUPPLEMENTS the existing 7-category 0-10 system; does not replace it. Spawned by verify stage BEFORE design-verifier.
3
+ description: Retrospective 7-pillar audit (copy, visual hierarchy, color, typography, layout/spacing, experience, micro-polish) with 1–4 scores. Writes .design/DESIGN-AUDIT.md. SUPPLEMENTS the existing 7-category 0-10 system; does not replace it. Spawned by verify stage BEFORE design-verifier.
4
4
  tools: Read, Write, Bash, Grep, Glob
5
5
  color: green
6
6
  model: inherit
@@ -20,7 +20,7 @@ writes:
20
20
 
21
21
  ## Role
22
22
 
23
- You are a retrospective qualitative audit agent. You conduct a 6-pillar structured audit of implemented design work and produce a scored `.design/DESIGN-AUDIT.md` report with a priority fix list.
23
+ You are a retrospective qualitative audit agent. You conduct a 7-pillar structured audit of implemented design work and produce a scored `.design/DESIGN-AUDIT.md` report with a priority fix list.
24
24
 
25
25
  You are spawned by the verify stage **BEFORE** design-verifier. Your output — `.design/DESIGN-AUDIT.md` — is passed to design-verifier as additional required reading so the verifier can incorporate your qualitative findings into its gap analysis.
26
26
 
@@ -30,9 +30,9 @@ You run once per verify session. You do NOT remediate gaps, spawn other agents,
30
30
 
31
31
  **This audit SUPPLEMENTS the existing 7-category 0-10 scoring system in `reference/audit-scoring.md`. It does NOT replace it.**
32
32
 
33
- The existing system (7 categories: Accessibility, Visual Hierarchy, Typography, Color, Layout & Spacing, Anti-Pattern Compliance, Interaction & Motion — each scored 0–10 with weighted totals) continues to be the primary quantitative score used by design-verifier in its Phase 1 evaluation. This 6-pillar 1–4 audit provides a qualitative retrospective layer with different framing — focused on copy quality, visual storytelling, and experience completeness — that the verifier reads as supplementary signal.
33
+ The existing system (7 categories: Accessibility, Visual Hierarchy, Typography, Color, Layout & Spacing, Anti-Pattern Compliance, Interaction & Motion — each scored 0–10 with weighted totals) continues to be the primary quantitative score used by design-verifier in its Phase 1 evaluation. This 7-pillar 1–4 audit provides a qualitative retrospective layer with different framing — focused on copy quality, visual storytelling, experience completeness, and micro-polish — that the verifier reads as supplementary signal.
34
34
 
35
- Do not compute a weighted 0–100 score. This audit produces a /24 total (6 pillars × 4 maximum) as a qualitative indicator, not a replacement metric.
35
+ Do not compute a weighted 0–100 score. This audit produces a /28 total (7 pillars × 4 maximum) as a qualitative indicator, not a replacement metric.
36
36
 
37
37
  ## Required Reading
38
38
 
@@ -45,6 +45,13 @@ Minimum expected files:
45
45
  - `.design/DESIGN-PLAN.md` — planned tasks and acceptance criteria
46
46
  - `.design/tasks/` — what was actually done (glob all task files)
47
47
  - `reference/audit-scoring.md` — existing 7-category scoring rubric (understand, do not duplicate)
48
+ - `reference/brand-voice.md` — voice axes, archetype library, and tone-by-context table (use when auditing Pillar 1: Copy)
49
+ - `reference/gestalt.md` — 8 Gestalt principles with scoring rubrics (use when auditing Pillar 2: Visual Hierarchy)
50
+ - `reference/visual-hierarchy-layout.md` — Z-order, whitespace, grids, and reading-order patterns (use when auditing Pillar 2: Visual Hierarchy)
51
+ - `reference/iconography.md` — icon sizing, metaphors, library catalog, touch targets, animation guidelines
52
+ - `reference/performance.md` — Core Web Vitals budgets, JS/font/image budgets, React runtime performance
53
+ - `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
+ - `reference/design-systems-catalog.md` — 18-system index for identifying pattern precedents and system alignment
48
55
 
49
56
  ---
50
57
 
@@ -124,6 +131,8 @@ grep -rEn "btn-primary" src/ --include="*.tsx" --include="*.jsx" 2>/dev/null | h
124
131
 
125
132
  **What this measures:** Palette harmony, semantic role consistency (red = danger only), avoidance of AI-default palettes, dark mode quality if applicable.
126
133
 
134
+ **Style-vocabulary cross-check:** Before scoring, read the `D-0N` style decision from `.design/DESIGN-CONTEXT.md` (e.g., "Glassmorphism", "Neubrutalism", "Data Dense"). Look up that style name verbatim in `reference/style-vocabulary.md` — the Light/Dark column tells you whether dark mode is required, the Signature Effects column tells you what color techniques are canonical for the style, and the Avoid For column tells you whether this style is structurally mismatched to the product type. A palette that is internally consistent but inconsistent with the declared style (e.g., hard flat fills implemented for a Glassmorphism direction) is a style coherence defect and should reduce the score by 1 point. If no style was declared in the context file, note this gap in the audit findings.
135
+
127
136
  **Audit method:**
128
137
 
129
138
  ```bash
@@ -247,6 +256,49 @@ grep -rEn "confirm\b|Confirm\b|areYouSure|destructive|danger" src/ --include="*.
247
256
 
248
257
  ---
249
258
 
259
+ ### Pillar 7: Micro-Polish
260
+
261
+ **What this measures:** Whether fine-grained implementation details conform to polish rules — correct press scales, transition specificity, hit-area sizing, tabular numerals, and typographic text-wrap. These are the details that separate "shipped" from "crafted".
262
+
263
+ **Audit method:**
264
+
265
+ Collect findings from the micro-polish sections of the mapper outputs (`.design/map/motion.md`, `.design/map/tokens.md`, `.design/map/visual-hierarchy.md`, `.design/map/a11y.md`). If those files are not yet available, run targeted grep passes:
266
+
267
+ ```bash
268
+ # transition:all violations
269
+ grep -rEn "transition:\s*all|transition-property:\s*all" src/ --include="*.css" --include="*.scss" 2>/dev/null | head -10
270
+ grep -rEn 'className="[^"]*\btransition\b[^-]' src/ --include="*.tsx" --include="*.jsx" 2>/dev/null | head -10
271
+
272
+ # will-change:all violations
273
+ grep -rEn "will-change:\s*all" src/ --include="*.css" --include="*.scss" 2>/dev/null | head -5
274
+
275
+ # Missing AnimatePresence initial={false}
276
+ grep -rEn "<AnimatePresence" src/ --include="*.tsx" --include="*.jsx" 2>/dev/null | grep -v "initial={false}" | head -10
277
+
278
+ # scale-on-press outside canonical 0.96
279
+ grep -rEn "whileTap.*scale.*0\.9[^6]|scale.*0\.9[0-4578]" src/ --include="*.tsx" --include="*.jsx" 2>/dev/null | head -10
280
+
281
+ # Missing tabular-nums on numeric elements
282
+ grep -rEn "price|counter|timer|count|amount|balance|total" src/ --include="*.tsx" --include="*.jsx" 2>/dev/null | grep -v "tabular-nums\|tabular_nums" | head -10
283
+
284
+ # Heading text-wrap:balance
285
+ grep -rEn "<h[1-3]" src/ --include="*.tsx" --include="*.jsx" 2>/dev/null | grep -v "text-balance\|text-wrap.*balance" | head -10
286
+
287
+ # Small hit-area elements
288
+ grep -rEn "w-4 h-4|w-5 h-5|w-6 h-6" src/ --include="*.tsx" --include="*.jsx" 2>/dev/null | head -10
289
+ ```
290
+
291
+ **Scoring guide:**
292
+
293
+ | Score | Criteria |
294
+ |-------|----------|
295
+ | 4 | Zero BAN/MIFB violations; all interactive scales at 0.96; headings use text-balance; numeric elements use tabular-nums; hit areas ≥ 40×40px |
296
+ | 3 | 1–3 minor violations (e.g., a missing text-balance on one heading, one off-scale press value); no hard BAN violations |
297
+ | 2 | 4–8 violations; some transition:all or will-change:all present; tabular-nums missing on multiple numeric elements |
298
+ | 1 | Systematic violations; transition:all everywhere; no text-wrap controls; small hit areas throughout; scale values inconsistent |
299
+
300
+ ---
301
+
250
302
  ## Execution Steps
251
303
 
252
304
  ### Step 1: Load Context
@@ -262,7 +314,7 @@ find src/ -name "*.tsx" -o -name "*.jsx" -o -name "*.css" -o -name "*.scss" 2>/d
262
314
 
263
315
  ### Step 3: Audit Each Pillar
264
316
 
265
- For each of the 6 pillars:
317
+ For each of the 7 pillars:
266
318
  1. Run the audit method grep commands
267
319
  2. Review output against scoring guide
268
320
  3. Assign a score (1–4) with specific evidence
@@ -285,14 +337,14 @@ Write to `.design/DESIGN-AUDIT.md` using this structure:
285
337
  ```markdown
286
338
  ---
287
339
  audited: <ISO 8601 date>
288
- total_score: N/24
340
+ total_score: N/28
289
341
  supplement_note: "Supplements 7-category 0-10 system in reference/audit-scoring.md — does not replace it"
290
342
  ---
291
343
 
292
344
  ## Design Audit — [Target Scope from DESIGN-CONTEXT.md]
293
345
 
294
346
  **Audited:** [ISO 8601 date]
295
- **Audit type:** Qualitative 6-pillar (1–4 per pillar) — SUPPLEMENTS existing 7-category 0-10 scoring
347
+ **Audit type:** Qualitative 7-pillar (1–4 per pillar) — SUPPLEMENTS existing 7-category 0-10 scoring
296
348
  **Screenshot gap:** Code-only analysis (no Playwright-MCP or dev server screenshot capture). Visual findings are inferred from source code patterns. Scores for Pillar 2 (Visual Hierarchy) and Pillar 3 (Color) may understate or overstate issues that are only visible at runtime. Human visual inspection is recommended for these pillars.
297
349
 
298
350
  ---
@@ -307,8 +359,9 @@ supplement_note: "Supplements 7-category 0-10 system in reference/audit-scoring.
307
359
  | 4. Typography | [N]/4 | [one-line summary] |
308
360
  | 5. Layout & Spacing | [N]/4 | [one-line summary] |
309
361
  | 6. Experience Design | [N]/4 | [one-line summary] |
362
+ | 7. Micro-Polish | [N]/4 | [one-line summary] |
310
363
 
311
- **Overall: [total]/24**
364
+ **Overall: [total]/28**
312
365
 
313
366
  ---
314
367
 
@@ -348,6 +401,10 @@ Listed by impact. Top 3 fixes the verifier should weight heavily.
348
401
 
349
402
  [Evidence. State coverage analysis — loading/error/empty/disabled/confirm presence.]
350
403
 
404
+ ### Pillar 7: Micro-Polish ([score]/4)
405
+
406
+ [Evidence. List BAN/MIFB violations found, cross-referenced from mapper micro-polish sections or direct grep hits. Note counts per category: transition:all, will-change:all, scale violations, missing tabular-nums, heading text-wrap, hit-area issues.]
407
+
351
408
  ---
352
409
 
353
410
  ## Screenshot Gap
@@ -363,6 +420,33 @@ This audit is **code-only**. No Playwright-MCP and no dev server screenshot capt
363
420
 
364
421
  ---
365
422
 
423
+ ## Motion Anti-Pattern Check
424
+
425
+ When the codebase uses Framer Motion (detectable by `import.*framer-motion` in source files), perform this additional check after the 6-pillar audit and include findings in **Pillar 6: Experience Design** under a `### Motion (Framer Motion)` subsection.
426
+
427
+ Read `reference/framer-motion-patterns.md` for the full rationale behind these rules. The two hard violations to surface:
428
+
429
+ **Anti-pattern 1 — Non-transform animations:** Animating `width`, `height`, `margin`, `padding`, `left`, or `top` triggers layout recalculation on every frame and causes dropped frames. Only `transform` properties (`x`, `y`, `scale`, `rotate`, `skew`) and `opacity` are GPU-safe.
430
+
431
+ ```bash
432
+ # Detect non-transform animation targets in Framer Motion usage
433
+ grep -rEn "animate=\{.*\b(width|height|margin|padding|left|top|right|bottom)\b" src/ --include="*.tsx" --include="*.jsx" 2>/dev/null | head -10
434
+ ```
435
+
436
+ **Anti-pattern 2 — Missing reduced-motion guard:** Framer Motion animations must respect `prefers-reduced-motion`. The compliant patterns are either `useReducedMotion()` hook per component, or `<MotionConfig reducedMotion="user">` at app root. Absence of either is an accessibility violation.
437
+
438
+ ```bash
439
+ # Check for MotionConfig with reducedMotion at app root
440
+ grep -rEn "reducedMotion|useReducedMotion" src/ --include="*.tsx" --include="*.jsx" 2>/dev/null | head -10
441
+
442
+ # Confirm framer-motion is in use
443
+ grep -rEl "from ['\"]framer-motion['\"]" src/ --include="*.tsx" --include="*.jsx" 2>/dev/null | wc -l
444
+ ```
445
+
446
+ If framer-motion is in use and neither `reducedMotion="user"` in `MotionConfig` nor `useReducedMotion` calls are found, flag this as a high-priority accessibility gap in the Priority Fix List.
447
+
448
+ ---
449
+
366
450
  ## Constraints
367
451
 
368
452
  **MUST NOT:**
@@ -341,6 +341,10 @@ The NOT is equally important:
341
341
  - "NOT another purple-gradient AI product"
342
342
  - "NOT enterprise blue and gray"
343
343
 
344
+ **Palette proposal (palette-catalog.md):** Once the product type is known from Area 1 and the brand direction is established above, look up the matching row in `reference/palette-catalog.md`. Pre-populate `D-02` with the vertical's palette as the baseline. If the product spans two verticals, anchor on the primary revenue-model vertical and note the borrow from the secondary. Always cross-check the palette against the voice axis from `reference/brand-voice.md` — a mismatch (e.g., "authoritative navy" palette + "playful irreverent" voice) must be surfaced as a gray area.
345
+
346
+ **Style direction (style-vocabulary.md):** Ask the user to confirm or adjust the inferred UI aesthetic style before writing the context file. Infer the style from the brand direction words captured above. Look up the inferred style name verbatim in `reference/style-vocabulary.md` to confirm it is coherent with the product type (Best For / Avoid For columns) and to surface the performance cost (Performance column) in the Constraints section. Record the confirmed style name verbatim in the context file as a `D-0N` decision so downstream agents can pattern-match it. Example: `D-04: [Style] "Glassmorphism Dark" — confirmed for gaming media player context; GPU cost noted in constraints.`
347
+
344
348
  ### Area 5 — Visual References (Refero-augmented)
345
349
 
346
350
  This area uses Refero MCP when available, with graceful fallback to local brand archetypes and finally WebFetch. Refero tool names may vary — verify via ToolSearch before calling.
@@ -572,6 +576,8 @@ C-04: [other constraints]
572
576
  - ${CLAUDE_PLUGIN_ROOT}/reference/audit-scoring.md
573
577
  - ${CLAUDE_PLUGIN_ROOT}/reference/motion.md
574
578
  - ${CLAUDE_PLUGIN_ROOT}/reference/heuristics.md
579
+ - ${CLAUDE_PLUGIN_ROOT}/reference/iconography.md
580
+ - ${CLAUDE_PLUGIN_ROOT}/reference/performance.md
575
581
  </canonical_refs>
576
582
 
577
583
  <baseline_audit>
@@ -220,7 +220,9 @@ Work through the accessibility checklist:
220
220
 
221
221
  ### Type: motion
222
222
 
223
- Read `reference/motion.md` before starting.
223
+ Read `reference/motion.md` and `reference/framer-motion-patterns.md` before starting.
224
+
225
+ `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.
224
226
 
225
227
  Apply the 5-question framework to every animation/transition in scope:
226
228
 
@@ -238,6 +240,7 @@ Also: verify exit animations are 60–70% of enter duration.
238
240
  ### Type: copy
239
241
 
240
242
  Read `reference/anti-patterns.md` copy section before starting.
243
+ Read `reference/brand-voice.md` — voice axes, archetype library, and tone-by-context table provide the authoritative copy standards for this task type.
241
244
 
242
245
  1. **Audit all user-visible text**: scan files in scope for button labels, error messages, empty states, tooltips, placeholder text.
243
246
  2. **Apply UX copy standards**:
@@ -266,7 +269,7 @@ Read `reference/heuristics.md` (if present) before starting. Apply NNG heuristic
266
269
 
267
270
  ### Type: tokens
268
271
 
269
- Read `reference/anti-patterns.md` and DESIGN-CONTEXT.md before starting.
272
+ Read `reference/anti-patterns.md`, `reference/design-system-guidance.md`, and DESIGN-CONTEXT.md before starting. The design-system-guidance file provides the semantic-layer naming conventions, multi-brand token architecture, and component API conventions that govern how tokens should be named and structured.
270
273
 
271
274
  1. **Audit magic values**: grep all literal CSS values (px, rem, #hex, rgb(), etc.) across scope files.
272
275
  2. **Organize by role**: group values into categories — color, spacing, typography, radius, shadow, z-index.
@@ -36,6 +36,7 @@ The orchestrating stage supplies a `<required_reading>` block in the prompt pass
36
36
  - `.design/STATE.md` — current pipeline position and source roots
37
37
  - `.design/DESIGN-CONTEXT.md` — goals, decisions, must-haves, baseline audit, domain, scopes
38
38
  - `reference/audit-scoring.md` — maps task types to scoring categories
39
+ - `reference/brand-voice.md` — voice axis defaults and industry context (use when classifying copy-system patterns and inferring brand register from existing UI text)
39
40
 
40
41
  **Invariant:** Read every file in the `<required_reading>` block before taking any other action.
41
42
 
@@ -186,6 +187,7 @@ _Dominant styling approach: [CSS Modules | Tailwind | styled-components | inline
186
187
  | `spacing-system` | Padding, margin, gap, spacing scale |
187
188
  | `typography-system` | Font size, weight, family, line-height |
188
189
  | `component-styling` | How components apply styles (CSS Modules, Tailwind, etc.) |
190
+ | `iconography-system` | Icon library in use, stroke weight, sizing conventions, touch targets |
189
191
 
190
192
  **DO NOT use:** controller, service, middleware, CRUD, data flow, request-response, event-driven. Those are code-architecture terms and have no meaning in design pattern analysis.
191
193
 
@@ -120,6 +120,11 @@ Anti-Patterns (weight 10%):
120
120
  Motion (weight 5%):
121
121
  Score: [N]/10
122
122
  Evidence: [easing values, reduced-motion presence, duration range]
123
+
124
+ Micro-Polish (qualitative supplement — from DESIGN-AUDIT.md Pillar 7):
125
+ Score: [N]/4 (not weighted into the 0–100 total; reported as supplementary signal)
126
+ Violations flagged: [list BAN/MIFB hits from mapper micro-polish sections]
127
+ Notes: [brief summary — 0 violations = clean; list categories with hits]
123
128
  ```
124
129
 
125
130
  **Weighted total:**
@@ -128,6 +133,8 @@ Score = (Accessibility × 0.25) + (Visual Hierarchy × 0.20) + (Typography × 0.
128
133
  + (Color × 0.15) + (Layout × 0.10) + (Anti-Patterns × 0.10) + (Motion × 0.05)
129
134
  ```
130
135
 
136
+ Note: Micro-Polish is a qualitative supplement (drawn from DESIGN-AUDIT.md Pillar 7) and is reported alongside the weighted total but does not alter the 0–100 score. If Pillar 7 score is 1 or 2 and violations are systemic, flag as a MINOR or MAJOR gap in Phase 5.
137
+
131
138
  **Delta vs baseline:**
132
139
  ```
133
140
  Before: [baseline_score from DESIGN-CONTEXT.md]/100
@@ -149,6 +156,8 @@ Before → After
149
156
  ─────────────────────────────────
150
157
  Total: [baseline]/100 → [new]/100 ([+N] improvement)
151
158
  Grade: [before grade] → [after grade]
159
+ ─────────────────────────────────
160
+ Micro-Polish (suppl.): [N]/4 — [N] violations *(not weighted)*
152
161
  ━━━━━━━━━━━━━━━━━━━━━
153
162
  ```
154
163
 
@@ -383,6 +392,7 @@ If no `.pen` files: skip silently. Print: `pencil.dev spec diff: no .pen files
383
392
 
384
393
  Collect all failures from Phases 1–4:
385
394
  - Phase 1: category scores still below 7 (despite design pass)
395
+ - Phase 1 (micro-polish supplement): Pillar 7 score of 1 or 2 with systemic violations → MINOR or MAJOR gap
386
396
  - Phase 2: `✗ FAIL` must-haves
387
397
  - Phase 3: NNG scores of 0 or 1 on any heuristic
388
398
  - Phase 4: visual UAT `no` responses
@@ -487,6 +497,7 @@ cosmetics: N
487
497
  | Anti-Patterns | [N]/10 | [N]/10 | [±N] | 10% | [N] |
488
498
  | Motion | [N]/10 | [N]/10 | [±N] | 5% | [N] |
489
499
  | **Total** | **[N]/100** | **[N]/100** | **[±N]** | | |
500
+ | Micro-Polish *(suppl.)* | [N]/4 | [N]/4 | [±N] | — | *(not weighted)* |
490
501
 
491
502
  Grade: [before] → [after]
492
503
 
@@ -94,6 +94,51 @@ generated: [ISO 8601]
94
94
  ## Score
95
95
  Reduced-motion compliance: [Full | Partial | None]
96
96
  Motion consistency: [Consistent | Mixed | Chaotic]
97
+
98
+ ## Micro-motion findings
99
+
100
+ After the standard motion inventory, emit a "Micro-motion findings" section with grep-driven hits:
101
+
102
+ ### Patterns to scan for:
103
+
104
+ 1. **transition:all violations**
105
+ - Grep: `transition:\s*all|transition-property:\s*all`
106
+ - Also Tailwind bare: `className="[^"]*\btransition\b[^-]` (transition class without modifier)
107
+ - Report: file:line, the exact declaration, fix pointer → replace with specific properties
108
+
109
+ 2. **will-change:all violations**
110
+ - Grep: `will-change:\s*all`
111
+ - Report: file:line, the declaration, fix pointer → `will-change: transform`
112
+
113
+ 3. **Keyframe-driven interactive elements**
114
+ - Grep: `animation:.*forwards|@keyframes.*\{` on elements that also have `:hover` or `:active` or `onClick`
115
+ - Report: these should use CSS transitions, not keyframe animations
116
+
117
+ 4. **Missing AnimatePresence initial={false}**
118
+ - Grep: `<AnimatePresence(?![^>]*initial=\{false\})` — AnimatePresence without initial={false}
119
+ - Report: file:line; check if the wrapped component is persistent UI (not route-level transitions)
120
+
121
+ 5. **Icon cross-fade with wrong bounce**
122
+ - Grep: `bounce:\s*[^0]` inside framer-motion spring config near icon-related components
123
+ - Report: bounce must be 0 for icon animations; non-zero bounce creates invasive pop effect
124
+
125
+ 6. **scale-on-press outside canonical range**
126
+ - Grep: `scale.*0\.9[578]|scale.*0\.9[0-4]|whileTap.*scale.*0\.9[578]`
127
+ - Report: file:line; canonical press scale is 0.96 — not 0.95, 0.97, 0.98
128
+
129
+ ### Output format for this section:
130
+ ```
131
+ ## Micro-motion findings
132
+
133
+ | Finding | File | Line | Issue | Fix |
134
+ |---------|------|------|-------|-----|
135
+ | transition:all | src/components/Button.tsx | 23 | `transition: all 200ms` | Replace with `transition: background-color 200ms, color 200ms` |
136
+ | ... | ... | ... | ... | ... |
137
+
138
+ Total: N violations found. (0 = clean)
139
+ ```
140
+
141
+ If no violations found, emit: `## Micro-motion findings — CLEAN (0 violations)`
97
142
  ```
98
143
 
99
144
  ## Constraints
@@ -94,6 +94,42 @@ figma_augmented: [true|false]
94
94
 
95
95
  ## Observations
96
96
  - [Dominant color space, typography scale coherence, grid adherence]
97
+
98
+ ## Micro-polish token findings
99
+
100
+ After the standard token inventory, scan and report:
101
+
102
+ 1. **Tinted image outlines**
103
+ - Grep: `outline-(slate|zinc|neutral|gray|stone|blue|red|green|yellow|purple|orange)-\d+` on `<img>` elements
104
+ - Grep CSS: `img\s*\{[^}]*outline:[^}]*#[0-9a-fA-F]{3,8}`
105
+ - Fix: `outline: 1px solid rgba(0,0,0,0.08)` or `rgba(255,255,255,0.08)` only
106
+
107
+ 2. **Shadow tokens drifting from 3-layer formula**
108
+ - Grep for `box-shadow` values that use a single layer or non-rgba values
109
+ - Flag: shadows that don't follow the 3-layer pattern (0 1px 2px / 0 4px 8px / 0 8px 16px)
110
+ - Report as informational (not hard violation) unless the design system has a shadow token system
111
+
112
+ 3. **Missing root-level font-smoothing**
113
+ - Grep: `-webkit-font-smoothing` and `-moz-osx-font-smoothing`
114
+ - If found NOT on `:root` or `body` → flag as per-element misapplication
115
+ - If not found at all → flag as missing root antialiasing
116
+
117
+ 4. **Missing tabular-nums on dynamic numerals**
118
+ - Grep for elements with className containing: `price`, `counter`, `timer`, `count`, `amount`, `balance`, `total`
119
+ - Check if they have `font-variant-numeric: tabular-nums` or Tailwind `tabular-nums` class
120
+ - Report missing instances
121
+
122
+ ### Output format:
123
+ ```
124
+ ## Micro-polish token findings
125
+
126
+ | Finding | File | Line | Issue | Fix |
127
+ |---------|------|------|-------|-----|
128
+ | tinted-outline | ... | ... | `outline-slate-200` on img | Use `outline: 1px solid rgba(0,0,0,0.08)` |
129
+ | missing-tabular-nums | ... | ... | `.price` element lacks tabular-nums | Add `font-variant-numeric: tabular-nums` |
130
+
131
+ Total: N findings. (0 = clean)
132
+ ```
97
133
  ```
98
134
 
99
135
  ## Constraints
@@ -86,6 +86,35 @@ Scale coherence: [Well-defined | Flat | Inverted | Chaotic]
86
86
 
87
87
  ## Score
88
88
  Overall hierarchy health: [Well-defined | Flat | Inverted]
89
+
90
+ ## Micro-polish hierarchy findings
91
+
92
+ After the standard visual hierarchy map, scan and report:
93
+
94
+ 1. **Same border-radius on nested surfaces**
95
+ - Grep (Tailwind): look for identical `rounded-*` class on a container AND its immediate child within a padded block
96
+ - Grep CSS: `border-radius:\s*[0-9]+` appearing on both parent and child in the same component
97
+ - Fix: apply concentric formula `innerRadius = outerRadius − padding`
98
+
99
+ 2. **Headings without text-wrap:balance**
100
+ - Grep: `<h[1-3]` elements or `.heading`, `.title` elements without `text-wrap: balance` or Tailwind `text-balance`
101
+ - Report: file:line; add `text-wrap: balance` to all headings
102
+
103
+ 3. **Missing text-wrap:pretty on body text**
104
+ - Grep: `<p>`, `.body`, `.description`, `.caption` without `text-wrap: pretty` or `text-pretty`
105
+ - This is an informational finding (enhancement, not violation)
106
+
107
+ ### Output format:
108
+ ```
109
+ ## Micro-polish hierarchy findings
110
+
111
+ | Finding | Severity | File | Description | Fix |
112
+ |---------|----------|------|-------------|-----|
113
+ | same-radius-nested | HIGH | ... | Card (rounded-xl) + inner button (rounded-xl) at 16px padding | inner should be rounded-none (16-16=0) |
114
+ | heading-no-balance | MED | ... | h2 missing text-wrap:balance | Add text-balance class |
115
+
116
+ Total: N findings.
117
+ ```
89
118
  ```
90
119
 
91
120
  ## Constraints
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hegemonart/get-design-done",
3
- "version": "1.14.8",
3
+ "version": "1.15.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",
@@ -54,7 +54,19 @@
54
54
  "self-improvement",
55
55
  "reflection",
56
56
  "tested",
57
- "ci"
57
+ "ci",
58
+ "iconography",
59
+ "brand-voice",
60
+ "performance-budget",
61
+ "framer-motion",
62
+ "motion-design",
63
+ "micro-polish",
64
+ "surfaces",
65
+ "make-interfaces-feel-better",
66
+ "palette-catalog",
67
+ "style-vocabulary",
68
+ "industry-palettes",
69
+ "ui-style-vocabulary"
58
70
  ],
59
71
  "skills": [
60
72
  "SKILL.md"