@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.
- package/.claude-plugin/marketplace.json +2 -2
- package/.claude-plugin/plugin.json +13 -5
- package/CHANGELOG.md +59 -0
- package/README.md +7 -0
- package/agents/a11y-mapper.md +25 -0
- package/agents/design-auditor.md +92 -8
- package/agents/design-context-builder.md +6 -0
- package/agents/design-executor.md +5 -2
- package/agents/design-pattern-mapper.md +2 -0
- package/agents/design-verifier.md +11 -0
- package/agents/motion-mapper.md +45 -0
- package/agents/token-mapper.md +36 -0
- package/agents/visual-hierarchy-mapper.md +29 -0
- package/package.json +14 -2
- package/reference/anti-patterns.md +69 -0
- package/reference/audit-scoring.md +34 -3
- package/reference/brand-voice.md +199 -0
- package/reference/checklists.md +30 -3
- package/reference/data/google-fonts.csv +51 -0
- package/reference/data/palettes.csv +41 -0
- package/reference/data/styles.csv +39 -0
- package/reference/design-system-guidance.md +177 -0
- package/reference/design-systems-catalog.md +151 -0
- package/reference/framer-motion-patterns.md +411 -0
- package/reference/gestalt.md +219 -0
- package/reference/iconography.md +231 -0
- package/reference/motion.md +102 -0
- package/reference/palette-catalog.md +82 -0
- package/reference/performance.md +304 -0
- package/reference/registry.json +257 -28
- package/reference/review-format.md +2 -2
- package/reference/style-vocabulary.md +62 -0
- package/reference/surfaces.md +114 -0
- package/reference/typography.md +80 -0
- package/reference/visual-hierarchy-layout.md +306 -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.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.
|
|
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.
|
|
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
|
-
"
|
|
57
|
-
"
|
|
58
|
-
"
|
|
59
|
-
"
|
|
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.
|
package/agents/a11y-mapper.md
CHANGED
|
@@ -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
|
package/agents/design-auditor.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: design-auditor
|
|
3
|
-
description: Retrospective
|
|
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
|
|
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
|
|
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 /
|
|
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
|
|
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/
|
|
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
|
|
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]/
|
|
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
|
|
package/agents/motion-mapper.md
CHANGED
|
@@ -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
|
package/agents/token-mapper.md
CHANGED
|
@@ -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.
|
|
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"
|