@hegemonart/get-design-done 1.13.3 → 1.14.1

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.
@@ -0,0 +1,98 @@
1
+ # 21st.dev Magic MCP — Connection Specification
2
+
3
+ This file is the connection specification for the 21st.dev Magic MCP within the get-design-done pipeline. 21st.dev is a component-generator tool — it searches a marketplace of pre-built components and generates new ones via AI. See `connections/connections.md` for the full connection index and capability matrix.
4
+
5
+ ---
6
+
7
+ ## Setup
8
+
9
+ ### Prerequisites
10
+ - Node.js ≥ 18
11
+ - A 21st.dev account and API key at [21st.dev](https://21st.dev)
12
+ - `TWENTY_FIRST_API_KEY` environment variable set
13
+
14
+ ### Install command (Claude Code)
15
+
16
+ ```bash
17
+ npx @21st-dev/magic@latest init
18
+ ```
19
+
20
+ This sets up the local MCP server. Add to Claude Code settings:
21
+ ```json
22
+ {
23
+ "mcpServers": {
24
+ "21st-magic": {
25
+ "command": "npx",
26
+ "args": ["@21st-dev/magic@latest"],
27
+ "env": { "TWENTY_FIRST_API_KEY": "${TWENTY_FIRST_API_KEY}" }
28
+ }
29
+ }
30
+ }
31
+ ```
32
+
33
+ ### Verification
34
+
35
+ ```
36
+ ToolSearch({ query: "mcp__21st", max_results: 5 })
37
+ ```
38
+
39
+ Expect non-empty results including `21st_magic_component_builder` or `21st_magic_component_search`. If empty, re-run `npx @21st-dev/magic@latest init` and restart Claude Code session.
40
+
41
+ ---
42
+
43
+ ## Probe Pattern
44
+
45
+ ```
46
+ ToolSearch({ query: "mcp__21st", max_results: 5 })
47
+ → Empty → 21st-dev: not_configured (skip all 21st.dev steps)
48
+ → Non-empty → 21st-dev: available
49
+ ```
50
+
51
+ Write result to STATE.md `<connections>`: `21st-dev: <status>`
52
+
53
+ Fallback: when `not_configured`, the explore stage skips the prior-art gate and proceeds with custom component generation.
54
+
55
+ ---
56
+
57
+ ## 21st.dev Magic MCP Tools
58
+
59
+ | Tool | Stage | Purpose |
60
+ |------|-------|---------|
61
+ | `21st_magic_component_search` | explore | Semantic search of marketplace; returns top N matching components with fit scores |
62
+ | `21st_magic_component_builder` | design | Generate component with multiple variations from a description |
63
+ | `21st_magic_component_get` | design | Fetch full source code for a specific marketplace component |
64
+ | `svgl_get_brand_logo` | explore + design | Fetch brand logo/icon SVG by brand name (SVGL integration) |
65
+
66
+ ---
67
+
68
+ ## Pipeline Integration
69
+
70
+ | Stage | What 21st.dev provides |
71
+ |-------|------------------------|
72
+ | explore | **Prior-art gate**: `21st_magic_component_search` before any greenfield build; top-3 in `<prior-art>` block in DESIGN.md |
73
+ | explore | **Brand assets**: `svgl_get_brand_logo` for logo/icon lookups by brand name |
74
+ | design | `21st_magic_component_builder` for component scaffolding via `design-component-generator` agent |
75
+
76
+ ### Prior-Art Gate Logic
77
+
78
+ Before building any custom component:
79
+ 1. `21st_magic_component_search(component_description, limit: 3)`
80
+ 2. Evaluate top result fit score (0–100):
81
+ - **≥ 80%**: surface as `<prior-art>` block in DESIGN.md; recommend adoption
82
+ - **< 80%**: note top candidate for reference; proceed with custom build
83
+ 3. Design-executor confirms adoption with user before calling `21st_magic_component_get`
84
+
85
+ This is a **decision gate** — the agent surfaces candidates, the user/executor decides. No automatic code insertion.
86
+
87
+ ### SVGL Brand Logo Integration
88
+
89
+ `svgl_get_brand_logo(brand_name, format: "svg")` returns SVG markup for major brands (GitHub, Vercel, Stripe, etc.). Wire into explore stage for brand asset lookups — eliminates manual SVG hunting.
90
+
91
+ ---
92
+
93
+ ## Fallback Behavior
94
+
95
+ When `21st-dev: not_configured`:
96
+ - Prior-art gate is skipped. Print: `21st.dev not configured — prior-art gate skipped.`
97
+ - Custom component generation proceeds normally.
98
+ - Brand logo lookups fall back to icon library references in `reference/iconography.md` (Phase 15).
@@ -16,6 +16,10 @@ This directory contains connection specifications for external tools and MCPs th
16
16
  | Graphify | Active | [`connections/graphify.md`](connections/graphify.md) | CLI: `graphify`; `gsd-tools graphify *` |
17
17
  | Pinterest | Active | [`connections/pinterest.md`](connections/pinterest.md) | `mcp__mcp-pinterest__*` tools (ToolSearch-only probe; headless scraping, no API key) |
18
18
  | Claude Design | Active | [`connections/claude-design.md`](connections/claude-design.md) | No MCP — bundle file probe; enables `/gdd:handoff` pipeline + bidirectional write-back via figma-writer |
19
+ | paper.design | Active | [`connections/paper-design.md`](connections/paper-design.md) | Uses `mcp__paper-design__*` tools; free tier: 100 calls/week |
20
+ | pencil.dev | Active | [`connections/pencil-dev.md`](connections/pencil-dev.md) | File-based; `.pen` YAML specs; git-tracked; no MCP |
21
+ | 21st.dev Magic MCP | Active | [`connections/21st-dev.md`](connections/21st-dev.md) | Uses `mcp__21st*` tools; `TWENTY_FIRST_API_KEY` required |
22
+ | Magic Patterns | Active | [`connections/magic-patterns.md`](connections/magic-patterns.md) | Claude connector (`mcp__magic_patterns*`) + API key fallback |
19
23
 
20
24
  ---
21
25
 
@@ -23,16 +27,20 @@ This directory contains connection specifications for external tools and MCPs th
23
27
 
24
28
  Each cell describes what the connection contributes at that pipeline stage, or `—` if it is not used.
25
29
 
26
- | Connection | scan | discover | plan | design | verify |
27
- |-----------|------|----------|------|--------|--------|
28
- | Figma | token augmentation via `get_variable_defs` (CONN-03) | decisions pre-populate via `get_variable_defs` (CONN-04) | — | write tokens/annotations/Code Connect via `use_figma` (FWR-01..04) | — |
29
- | Refero | — | reference search via `mcp__refero__search`; fallback → awesome-design-md (CONN-05) | — | — | — |
30
- | Preview | — | — | — | — | screenshots for `? VISUAL` checks (VIS-02) |
31
- | Storybook | — | component inventory (STB-01) | change-risk via story count (STB-02) | `.stories.tsx` stub (STB-03) | a11y per story (STB-02) |
32
- | Chromatic | — | — | change-risk scoping (CHR-02) | — | visual delta narration (CHR-01) |
33
- | Graphify | — | — | dependency scoping (GRF-03) | — | orphan detection (GRF-04) |
34
- | Pinterest | probe only | visual reference search via `pinterest_search`; fallback → Refero → awesome-design-md | — | — | — |
35
- | Claude Design | bundle probe → `claude_design: available` | synthesizer handoff mode — parses bundle → D-XX decisions; discussant `--from-handoff` confirms | — (skipped in handoff) | — (skipped in handoff) | Handoff Faithfulness section; bidirectional write-back via figma-writer `implementation-status` mode |
30
+ | Connection | scan | discover | plan | design | verify | canvas | generator |
31
+ |-----------|------|----------|------|--------|--------|--------|-----------|
32
+ | Figma | token augmentation via `get_variable_defs` (CONN-03) | decisions pre-populate via `get_variable_defs` (CONN-04) | — | write tokens/annotations/Code Connect via `use_figma` (FWR-01..04) | — | — | — |
33
+ | Refero | — | reference search via `mcp__refero__search`; fallback → awesome-design-md (CONN-05) | — | — | — | — | — |
34
+ | Preview | — | — | — | — | screenshots for `? VISUAL` checks (VIS-02) | — | — |
35
+ | Storybook | — | component inventory (STB-01) | change-risk via story count (STB-02) | `.stories.tsx` stub (STB-03) | a11y per story (STB-02) | — | — |
36
+ | Chromatic | — | — | change-risk scoping (CHR-02) | — | visual delta narration (CHR-01) | — | — |
37
+ | Graphify | — | — | dependency scoping (GRF-03) | — | orphan detection (GRF-04) | — | — |
38
+ | Pinterest | probe only | visual reference search via `pinterest_search`; fallback → Refero → awesome-design-md | — | — | — | — | — |
39
+ | Claude Design | bundle probe → `claude_design: available` | synthesizer handoff mode — parses bundle → D-XX decisions; discussant `--from-handoff` confirms | — (skipped in handoff) | — (skipped in handoff) | Handoff Faithfulness section; bidirectional write-back via figma-writer `implementation-status` mode | — | — |
40
+ | paper.design | — | canvas read: `get_selection`, `get_jsx`, `get_computed_styles` | — | paper-writer: annotate/tokenize/roundtrip | `get_screenshot` for `? VISUAL` | ✓ | — |
41
+ | pencil.dev | `.pen` discovery | `.pen` as canonical design source | — | pencil-writer: annotate/roundtrip | spec-vs-impl diff | ✓ | — |
42
+ | 21st.dev | — | prior-art gate: marketplace search before greenfield build | — | component-generator (21st impl) | — | — | ✓ |
43
+ | Magic Patterns | — | — | — | component-generator (magic-patterns impl) | preview_url → `? VISUAL` check | — | ✓ |
36
44
 
37
45
  **Column definitions:**
38
46
 
@@ -41,6 +49,8 @@ Each cell describes what the connection contributes at that pipeline stage, or `
41
49
  - **plan** — what the connection contributes to planning artifacts
42
50
  - **design** — what the connection provides during design execution
43
51
  - **verify** — what the connection checks or surfaces during verification
52
+ - **canvas** — whether the connection provides bidirectional canvas read+write (see `reference/ai-native-tool-interface.md`)
53
+ - **generator** — whether the connection provides AI component generation (see `reference/ai-native-tool-interface.md`)
44
54
 
45
55
  ---
46
56
 
@@ -202,4 +212,24 @@ To add a new connection to the pipeline:
202
212
 
203
213
  - `connections/` is infrastructure scaffolding introduced in Phase 1. Stage integration (wiring detection and graceful degradation into each stage) is Phase 2 work.
204
214
  - Phase 8 added five new active connections. Linear and GitHub remain planned for a future phase.
205
- - The capability matrix columns map to the five pipeline stages: `scan | discover | plan | design | verify`.
215
+ - Phase 14 added four AI-native design tool connections (paper.design, pencil.dev, 21st.dev, Magic Patterns) and the canvas/generator capability columns.
216
+ - The capability matrix columns map to the five pipeline stages: `scan | discover | plan | design | verify`, plus `canvas` and `generator` sub-categories.
217
+
218
+ ---
219
+
220
+ ## Future AI-Native Tools (Backlog)
221
+
222
+ Candidate tools to integrate using the contract in `reference/ai-native-tool-interface.md`.
223
+
224
+ | Tool | Sub-category | Priority |
225
+ |------|-------------|----------|
226
+ | Subframe | canvas | high |
227
+ | v0.dev | generator | high |
228
+ | Galileo AI | generator | medium |
229
+ | Builder.io Visual Copilot | canvas + generator | medium |
230
+ | Locofy | generator | low |
231
+ | Anima | canvas | low |
232
+ | Plasmic | generator | medium |
233
+ | TeleportHQ | generator | low |
234
+
235
+ To add any of these: follow the steps in `reference/ai-native-tool-interface.md §Extending with Future Tools`.
@@ -0,0 +1,105 @@
1
+ # Magic Patterns — Connection Specification
2
+
3
+ This file is the connection specification for Magic Patterns within the get-design-done pipeline. Magic Patterns is a component-generator tool — it generates DS-aware UI components from natural-language descriptions. It integrates via the Magic Patterns Claude connector (no manual setup when enabled) or via a direct API key. See `connections/connections.md` for the full connection index and capability matrix.
4
+
5
+ ---
6
+
7
+ ## Setup
8
+
9
+ ### Prerequisites
10
+
11
+ **Path A — Claude connector (preferred):**
12
+ - Magic Patterns Claude connector enabled in your Claude environment
13
+ - No additional setup required
14
+
15
+ **Path B — API key fallback:**
16
+ - A Magic Patterns account and API key at [magicpatterns.com](https://magicpatterns.com)
17
+ - `MAGIC_PATTERNS_API_KEY` environment variable set
18
+ - MCP server install:
19
+ ```bash
20
+ claude mcp add magic-patterns --transport http https://mcp.magicpatterns.com/sse \
21
+ -e MAGIC_PATTERNS_API_KEY=$MAGIC_PATTERNS_API_KEY
22
+ ```
23
+
24
+ ### Verification
25
+
26
+ ```
27
+ ToolSearch({ query: "mcp__magic_patterns", max_results: 5 })
28
+ ```
29
+
30
+ Non-empty results including `magic_patterns_generate` → Claude connector available (Path A).
31
+ Empty → install Path B and restart Claude Code session.
32
+
33
+ ---
34
+
35
+ ## Probe Pattern
36
+
37
+ Magic Patterns uses a two-path probe. Check Claude connector first; fall back to API key path.
38
+
39
+ ```
40
+ ToolSearch({ query: "mcp__magic_patterns", max_results: 5 })
41
+ → Non-empty → magic-patterns: available (Claude connector)
42
+ → Empty → check MAGIC_PATTERNS_API_KEY env var
43
+ set → magic-patterns: available (API key path)
44
+ unset → magic-patterns: not_configured
45
+ ```
46
+
47
+ Write result to STATE.md `<connections>`: `magic-patterns: <status>`
48
+
49
+ Fallback: when `not_configured`, the design stage skips Magic Patterns and falls back to 21st.dev (if available) or manual component build.
50
+
51
+ ---
52
+
53
+ ## Magic Patterns Tools
54
+
55
+ | Tool | Stage | Purpose |
56
+ |------|-------|---------|
57
+ | `magic_patterns_generate` | design | Generate component from description; returns `{ code, preview_url, component_id }` |
58
+ | `magic_patterns_annotate` | design | Post DESIGN-DEBT findings back to a component by ID |
59
+ | `magic_patterns_regenerate` | design | Roundtrip: regenerate with updated description |
60
+
61
+ ### `magic_patterns_generate` parameters
62
+
63
+ | Parameter | Values | Notes |
64
+ |-----------|--------|-------|
65
+ | `description` | string | Natural-language component spec |
66
+ | `design_system` | `"shadcn" \| "tailwind" \| "mantine" \| "chakra"` | Auto-detected from project in explore stage |
67
+ | `quality_mode` | `"fast" \| "best"` | `fast` for explore iterations; `best` for final design stage output |
68
+
69
+ ---
70
+
71
+ ## Pipeline Integration
72
+
73
+ | Stage | What Magic Patterns provides |
74
+ |-------|------------------------------|
75
+ | explore | DS detection → STATE.md `<design_system>` block for generator targeting |
76
+ | design | `magic_patterns_generate(description, design_system, quality_mode: "best")` → component source + `preview_url` |
77
+ | verify | `preview_url` from generate response → feeds Phase 8 Preview `? VISUAL` check |
78
+ | design | `magic_patterns_annotate(component_id, feedback)` → roundtrip mode; post DESIGN-DEBT notes back |
79
+
80
+ ### Design-System Auto-Detection
81
+
82
+ Before invoking `magic_patterns_generate`, the explore stage detects the project's active design system (see `agents/design-context-builder.md` Step 0C):
83
+
84
+ 1. Check `gdd.config.json` (if present): read `designSystem` field → use directly if set.
85
+ 2. Scan `package.json` dependencies:
86
+ - `@shadcn/ui` or `shadcn` present → `"shadcn"`
87
+ - `@mantine/core` or `@mantine/hooks` present → `"mantine"`
88
+ - `@chakra-ui/react` present → `"chakra"`
89
+ - `tailwindcss` present → `"tailwind"`
90
+ 3. Default: `"tailwind"`
91
+
92
+ Write result to STATE.md `<design_system>` block.
93
+
94
+ ### Preview Integration
95
+
96
+ `magic_patterns_generate` returns `preview_url`. The design-component-generator agent writes this URL to STATE.md `<generator>` block. The verify stage's `? VISUAL` check reads `preview_url` from STATE.md and opens it in Phase 8 Preview for visual comparison.
97
+
98
+ ---
99
+
100
+ ## Fallback Behavior
101
+
102
+ When `magic-patterns: not_configured`:
103
+ - Print: `Magic Patterns not configured — component generator skipped.`
104
+ - Falls back to 21st.dev if `21st-dev: available`.
105
+ - If both not configured, design stage proceeds with manual component build.
@@ -0,0 +1,137 @@
1
+ # paper.design MCP — Connection Specification
2
+
3
+ This file is the connection specification for paper.design within the get-design-done pipeline. paper.design is a canvas tool — it treats the design canvas as both source AND destination, enabling a full canvas→code→verify→canvas round-trip. See `connections/connections.md` for the full connection index and capability matrix.
4
+
5
+ ---
6
+
7
+ ## Setup
8
+
9
+ ### Prerequisites
10
+ - A paper.design account
11
+ - paper.design MCP server registered in your Claude Code session
12
+
13
+ ### Install command (Claude Code)
14
+
15
+ ```bash
16
+ claude mcp add paper-design --transport http https://mcp.paper.design/sse
17
+ ```
18
+
19
+ After running this command, restart the Claude Code session.
20
+
21
+ ### Verification
22
+
23
+ ```
24
+ ToolSearch({ query: "mcp__paper", max_results: 5 })
25
+ ```
26
+
27
+ Expect non-empty results including `mcp__paper-design__get_selection` or similar. If empty, re-run the install command above and restart the Claude Code session.
28
+
29
+ ### Budget
30
+
31
+ paper.design **free tier**: 100 MCP calls/week. Pro tier: 1M calls/week. The pipeline tracks `budget_used` in STATE.md `<connections>` and warns at 90 calls.
32
+
33
+ ---
34
+
35
+ ## Probe Pattern
36
+
37
+ ```
38
+ ToolSearch({ query: "mcp__paper", max_results: 5 })
39
+ → Empty → paper-design: not_configured (skip all paper.design steps)
40
+ → Non-empty → proceed to live call
41
+
42
+ call mcp__paper-design__get_selection
43
+ → Success → paper-design: available
44
+ → Error → paper-design: unavailable
45
+ ```
46
+
47
+ Write result to STATE.md `<connections>`: `paper-design: <status>`
48
+
49
+ Also write initial budget state:
50
+ ```xml
51
+ <connections>
52
+ paper-design: available | budget_used: 0 | budget_limit: 100
53
+ </connections>
54
+ ```
55
+
56
+ ---
57
+
58
+ ## paper.design MCP Tools
59
+
60
+ | Tool | Stage | Purpose |
61
+ |------|-------|---------|
62
+ | `mcp__paper-design__get_selection` | explore | JSON of selected canvas elements (id, type, name, bounds) |
63
+ | `mcp__paper-design__get_jsx` | explore | React JSX string of selected component tree |
64
+ | `mcp__paper-design__get_computed_styles` | explore | CSS computed styles for current selection |
65
+ | `mcp__paper-design__get_screenshot` | verify | Base64 PNG screenshot of selected canvas element |
66
+ | `mcp__paper-design__add_comment` | design | Add annotation comment to a canvas node |
67
+ | `mcp__paper-design__update_styles` | design | Update CSS properties of a canvas node |
68
+ | `mcp__paper-design__set_text_content` | design | Write text content to a canvas text layer |
69
+ | `mcp__paper-design__write_html` | design | Write HTML snippet to a canvas layer |
70
+
71
+ ---
72
+
73
+ ## Pipeline Integration
74
+
75
+ | Stage | What paper.design provides |
76
+ |-------|---------------------------|
77
+ | explore | Canvas read: `get_selection` (node list), `get_jsx` (React component tree), `get_computed_styles` (CSS values) → merged into DESIGN-CONTEXT.md |
78
+ | design | `design-paper-writer` agent: annotate / tokenize / roundtrip modes via write tools |
79
+ | verify | `get_screenshot` for components flagged `? VISUAL` — element-scoped (complements route-scoped Preview screenshots) |
80
+
81
+ ### Canvas Read (Explore Stage)
82
+
83
+ The explore stage context-builder reads the paper.design canvas via:
84
+
85
+ 1. `mcp__paper-design__get_selection` — get selected element IDs and names
86
+ 2. `mcp__paper-design__get_jsx` — get full React component tree of selection
87
+ 3. `mcp__paper-design__get_computed_styles` — get computed CSS values
88
+
89
+ Results are merged into DESIGN-CONTEXT.md as a `<canvas_sources>` block alongside Figma variables, Refero refs, and other sources.
90
+
91
+ ### Write-Back (Design Stage)
92
+
93
+ The `design-paper-writer` agent handles write-back in three modes:
94
+ - **annotate** — add design-decision comments to canvas nodes (`add_comment`)
95
+ - **tokenize** — sync CSS token values to paper.design node styles (`update_styles`)
96
+ - **roundtrip** — write implementation status back as text/HTML layers (`set_text_content`, `write_html`)
97
+
98
+ All writes require user confirmation via proposal→confirm flow. See `agents/design-paper-writer.md`.
99
+
100
+ ### Screenshot Verification (Verify Stage)
101
+
102
+ `mcp__paper-design__get_screenshot(node_id)` captures a PNG of a specific canvas element.
103
+
104
+ - Canvas-element-scoped (NOT route-scoped like Phase 8 Preview)
105
+ - Both are complementary: paper.design → canvas component view; Preview → rendered browser route
106
+ - Screenshots saved to `.design/screenshots/paper-<component>-<date>.png`
107
+
108
+ ---
109
+
110
+ ## Budget Tracking
111
+
112
+ After every write tool call, increment `budget_used` in STATE.md:
113
+
114
+ ```xml
115
+ <connections>
116
+ paper-design: available | budget_used: 12 | budget_limit: 100
117
+ </connections>
118
+ ```
119
+
120
+ Warn when `budget_used >= 90`: `Warning: paper.design budget at 90/100 calls this week.`
121
+
122
+ Read tools (`get_selection`, `get_jsx`, `get_computed_styles`, `get_screenshot`) also consume budget — track them as well.
123
+
124
+ ---
125
+
126
+ ## Fallback Behavior
127
+
128
+ When `paper-design: not_configured`:
129
+ - Skip all paper.design steps. Print: `paper.design not configured — canvas integration skipped.`
130
+ - Explore stage proceeds with code-only context (grep + Figma + Storybook if available).
131
+ - Verify stage uses Preview screenshots only (no canvas-element screenshots).
132
+ - Design stage does not offer paper-writer.
133
+
134
+ When `paper-design: unavailable`:
135
+ - Update STATE.md to `paper-design: unavailable`.
136
+ - Print: `paper.design unavailable — check MCP connection and try again.`
137
+ - Degrade as above.
@@ -0,0 +1,88 @@
1
+ # pencil.dev — Connection Specification
2
+
3
+ This file is the connection specification for pencil.dev within the get-design-done pipeline. pencil.dev uses git-tracked `.pen` files as its source of truth — no MCP server is required. See `connections/connections.md` for the full connection index and capability matrix.
4
+
5
+ ---
6
+
7
+ ## Setup
8
+
9
+ ### Prerequisites
10
+ - pencil.dev VS Code or Cursor extension installed from the marketplace
11
+ - One or more `.pen` files in the project (typically at project root or in `src/`)
12
+
13
+ ### Verification
14
+
15
+ Run in the project directory:
16
+ ```bash
17
+ find . -name "*.pen" -not -path "*/node_modules/*" | head -5
18
+ ```
19
+ One or more results = pencil.dev is in use.
20
+
21
+ No MCP server install needed — the pipeline reads and writes `.pen` files directly via standard file tools.
22
+
23
+ ---
24
+
25
+ ## Probe Pattern
26
+
27
+ pencil.dev does not use MCP tools. Probe is file-based.
28
+
29
+ ```bash
30
+ PEN_FILES=$(find . -name "*.pen" -not -path "*/node_modules/*" 2>/dev/null)
31
+ if [ -n "$PEN_FILES" ]; then
32
+ echo "pencil-dev: available"
33
+ else
34
+ echo "pencil-dev: not_configured"
35
+ fi
36
+ ```
37
+
38
+ Write result to STATE.md `<connections>`: `pencil-dev: available` or `pencil-dev: not_configured`.
39
+
40
+ ---
41
+
42
+ ## .pen File Format
43
+
44
+ `.pen` files are YAML-front-matter component specs:
45
+
46
+ ```yaml
47
+ ---
48
+ component: Button
49
+ variant: primary
50
+ state: default
51
+ design-tokens:
52
+ bg: brand-primary-500
53
+ text: white
54
+ radius: 6px
55
+ padding: "8px 16px"
56
+ ---
57
+
58
+ Notes: Primary CTA button. Use for the main action in any modal or form.
59
+ ```
60
+
61
+ - `component` — component name (must match the implementation filename)
62
+ - `variant` — variant label (matches Storybook story name where applicable)
63
+ - `state` — `default | hover | focus | disabled | error`
64
+ - `design-tokens` — key/value map of token names to values (CSS variables or literal values)
65
+ - Body prose — optional implementation notes
66
+
67
+ `.pen` files are **git-tracked source of truth**. Commits to `.pen` files must be atomic — spec and implementation changes committed together when possible.
68
+
69
+ ---
70
+
71
+ ## Pipeline Integration
72
+
73
+ | Stage | What pencil.dev provides |
74
+ |-------|--------------------------|
75
+ | explore | `.pen` file discovery; synthesizer merges `.pen` declarations with code grep results |
76
+ | verify | Spec-vs-implementation diff: `.pen` declared token values vs. actual token values in code |
77
+ | design | `design-pencil-writer` agent: annotate + roundtrip modes; atomic git commits on `.pen` writes |
78
+
79
+ **Architectural advantage:** Both the design spec (`.pen` file) and implementation (source code) are version-controlled. Pre-merge diff verification is uniquely strong compared to tools where the design lives outside git.
80
+
81
+ ---
82
+
83
+ ## Fallback Behavior
84
+
85
+ When `pencil-dev: not_configured`:
86
+ - All pencil.dev steps are skipped silently.
87
+ - A one-line diagnostic is printed: `pencil.dev not configured — no .pen files found.`
88
+ - Pipeline continues normally.
@@ -32,6 +32,7 @@ const { spawn } = require('child_process');
32
32
  const BUDGET_PATH = path.join(process.cwd(), '.design', 'budget.json');
33
33
  const MANIFEST_PATH = path.join(process.cwd(), '.design', 'cache-manifest.json');
34
34
  const TELEMETRY_PATH = path.join(process.cwd(), '.design', 'telemetry', 'costs.jsonl');
35
+ const PHASE_TOTALS_PATH = path.join(process.cwd(), '.design', 'telemetry', 'phase-totals.json');
35
36
  const STATE_PATH = path.join(process.cwd(), '.design', 'STATE.md');
36
37
 
37
38
  // ---- budget.json loader with defaults per D-12 ----
@@ -49,8 +50,18 @@ function loadBudget() {
49
50
  catch { return defaults; }
50
51
  }
51
52
 
52
- // ---- cumulative phase spend from telemetry (D-02 per_phase_cap_usd check) ----
53
+ // ---- cumulative phase spend (WR-02) ----
54
+ // Reads from the lightweight phase-totals.json written by aggregate-agent-metrics.js
55
+ // instead of replaying the full costs.jsonl on every hook invocation.
56
+ // Falls back to 0 when the file doesn't exist yet (early in a session).
53
57
  function currentPhaseSpend(phase) {
58
+ if (fs.existsSync(PHASE_TOTALS_PATH)) {
59
+ try {
60
+ const data = JSON.parse(fs.readFileSync(PHASE_TOTALS_PATH, 'utf8'));
61
+ return Number(data.totals?.[phase] || 0);
62
+ } catch { /* fall through */ }
63
+ }
64
+ // Fallback: replay JSONL when phase-totals.json not yet written (first spawn of session).
54
65
  if (!fs.existsSync(TELEMETRY_PATH)) return 0;
55
66
  const lines = fs.readFileSync(TELEMETRY_PATH, 'utf8').split(/\r?\n/).filter(Boolean);
56
67
  let sum = 0;
@@ -118,7 +129,7 @@ function spawnAggregator() {
118
129
  cwd: process.cwd(),
119
130
  detached: true,
120
131
  stdio: 'ignore',
121
- env: process.env,
132
+ env: { PATH: process.env.PATH }, // IN-02: minimal env; aggregator needs no secrets
122
133
  });
123
134
  child.unref();
124
135
  } catch {
@@ -6,16 +6,11 @@
6
6
  */
7
7
 
8
8
  const readline = require('readline');
9
+ const path = require('path');
10
+ const { INJECTION_PATTERNS: RAW_PATTERNS } = require(path.join(__dirname, '..', 'scripts', 'injection-patterns.cjs'));
9
11
 
10
- const INJECTION_PATTERNS = [
11
- /ignore\s+(all\s+)?(previous|prior|above)\s+instructions?/i,
12
- /disregard\s+(all\s+)?(previous|prior|above)\s+instructions?/i,
13
- /you\s+are\s+now\s+a\s+different/i,
14
- /system\s*:\s*you\s+are/i,
15
- /<\s*\/?\s*(system|assistant|human)\s*>/i,
16
- /\[INST\]/i,
17
- /###\s*instruction/i,
18
- ];
12
+ // The hook needs bare RegExp objects; extract them from the shared {name,re} entries.
13
+ const INJECTION_PATTERNS = RAW_PATTERNS.map(p => p.re);
19
14
 
20
15
  async function main() {
21
16
  const rl = readline.createInterface({ input: process.stdin });
@@ -165,6 +165,14 @@ if [ "${BASH_SOURCE[0]}" = "$0" ]; then
165
165
  BODY_EXCERPT="$(printf '%s' "${RAW}" | extract_body)"
166
166
  # Strip control chars defensively (T-13.3-03)
167
167
  BODY_EXCERPT="$(printf '%s' "${BODY_EXCERPT}" | tr -d '\000-\010\013\014\016-\037')"
168
+ # Strip double-quotes so the JSON round-trip sed read-back cannot be injected via a
169
+ # crafted release body. Body is display-only — losing quotes is acceptable.
170
+ BODY_EXCERPT="$(printf '%s' "${BODY_EXCERPT}" | tr -d '"')"
171
+ # Validate LATEST_TAG is a safe semver string before trusting it (CR-02).
172
+ if ! printf '%s' "${LATEST_TAG}" | grep -qE '^v?[0-9]+\.[0-9]+(\.[0-9]+)*$'; then
173
+ log "LATEST_TAG '${LATEST_TAG}' failed semver safety check — aborting cache write"
174
+ LATEST_TAG=""
175
+ fi
168
176
  if [ -n "${LATEST_TAG}" ]; then
169
177
  read -r DELTA_STATE DELTA_KIND <<EOF
170
178
  $(classify_delta "${DISPLAY_CURRENT}" "${LATEST_TAG}")
@@ -195,6 +203,11 @@ EOF
195
203
 
196
204
  C_LATEST="$(grep -E '"latest_tag"' "${CACHE}" 2>/dev/null | head -n1 | sed -E 's/.*"latest_tag"[[:space:]]*:[[:space:]]*"([^"]+)".*/\1/')"
197
205
  C_DELTA="$(grep -E '"delta"' "${CACHE}" 2>/dev/null | head -n1 | sed -E 's/.*"delta"[[:space:]]*:[[:space:]]*"([^"]+)".*/\1/')"
206
+ # Allowlist-gate C_DELTA before it reaches any shell context (WR-04).
207
+ case "${C_DELTA:-}" in
208
+ major|minor|patch|off-cadence|none) : ;;
209
+ *) C_DELTA="unknown" ;;
210
+ esac
198
211
  C_NEWER="$(grep -E '"is_newer"' "${CACHE}" 2>/dev/null | head -n1 | sed -E 's/.*"is_newer"[[:space:]]*:[[:space:]]*(true|false).*/\1/')"
199
212
  C_BODY="$(grep -E '"changelog_excerpt"' "${CACHE}" 2>/dev/null | head -n1 | sed -E 's/.*"changelog_excerpt"[[:space:]]*:[[:space:]]*"(.*)".*/\1/' | sed -E 's/\\n/\n/g')"
200
213
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hegemonart/get-design-done",
3
- "version": "1.13.3",
3
+ "version": "1.14.1",
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",