get-shit-pretty 0.2.0 → 0.4.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/LICENSE +21 -0
- package/README.md +15 -9
- package/agents/{gsp-accessibility-auditor.md → gsp-auditor.md} +17 -14
- package/agents/gsp-brand-auditor.md +97 -0
- package/agents/gsp-brand-strategist.md +64 -27
- package/agents/{gsp-design-engineer.md → gsp-builder.md} +12 -9
- package/agents/gsp-campaign-director.md +50 -11
- package/agents/gsp-codebase-scanner.md +171 -0
- package/agents/gsp-critic.md +18 -13
- package/agents/gsp-designer.md +126 -0
- package/agents/gsp-identity-designer.md +90 -0
- package/agents/gsp-project-researcher.md +102 -0
- package/agents/gsp-researcher.md +54 -18
- package/agents/gsp-reviewer.md +66 -0
- package/agents/gsp-scoper.md +103 -0
- package/agents/gsp-system-architect.md +91 -26
- package/agents/gsp-verbal-strategist.md +84 -0
- package/bin/install.js +161 -5
- package/commands/gsp/brand-audit.md +116 -0
- package/commands/gsp/brand-discover.md +17 -0
- package/commands/gsp/brand-identity.md +200 -0
- package/commands/gsp/brand-patterns.md +223 -0
- package/commands/gsp/brand-research.md +99 -0
- package/commands/gsp/brand-strategy.md +140 -0
- package/commands/gsp/brand-system.md +17 -0
- package/commands/gsp/brand-verbal.md +94 -0
- package/commands/gsp/brand.md +9 -83
- package/commands/gsp/brief.md +142 -0
- package/commands/gsp/build.md +49 -41
- package/commands/gsp/critique.md +140 -0
- package/commands/gsp/design.md +65 -50
- package/commands/gsp/discover.md +17 -0
- package/commands/gsp/doctor.md +319 -0
- package/commands/gsp/help.md +85 -38
- package/commands/gsp/identity.md +18 -0
- package/commands/gsp/launch.md +55 -35
- package/commands/gsp/new-project.md +5 -86
- package/commands/gsp/new.md +237 -0
- package/commands/gsp/plan.md +18 -0
- package/commands/gsp/progress.md +58 -26
- package/commands/gsp/research.md +91 -34
- package/commands/gsp/review.md +115 -59
- package/commands/gsp/strategy.md +18 -0
- package/commands/gsp/system.md +8 -65
- package/commands/gsp/update.md +102 -0
- package/commands/gsp/verbal.md +18 -0
- package/package.json +2 -2
- package/prompts/01-design-system-architect.md +35 -3
- package/prompts/03-ui-ux-pattern-master.md +11 -1
- package/prompts/09-design-to-code-translator.md +9 -0
- package/prompts/10-project-scoper.md +51 -0
- package/prompts/11-deliverable-reviewer.md +58 -0
- package/prompts/12-project-researcher.md +57 -0
- package/references/brand-archetypes.md +151 -0
- package/references/brand-prism.md +138 -0
- package/references/chunk-format.md +48 -0
- package/references/design-trends.md +47 -0
- package/references/positioning-frameworks.md +197 -0
- package/references/questioning.md +1 -1
- package/references/trends/aurora-gradients.md +245 -0
- package/references/trends/bento-grid.md +473 -0
- package/references/trends/claymorphism.md +232 -0
- package/references/trends/dark-mode-oled.md +282 -0
- package/references/trends/glassmorphism.md +455 -0
- package/references/trends/kinetic-typography.md +277 -0
- package/references/trends/liquid-glass.md +236 -0
- package/references/trends/micro-interactions.md +307 -0
- package/references/trends/neubrutalism.md +276 -0
- package/references/voice-tone.md +193 -0
- package/scripts/gsp-statusline.js +1 -1
- package/templates/branding/brief.md +74 -0
- package/templates/branding/config.json +26 -0
- package/templates/branding/roadmap.md +43 -0
- package/templates/branding/state.md +29 -0
- package/templates/changelog.md +4 -0
- package/templates/codebase-inventory.md +71 -0
- package/templates/exports-index.md +93 -0
- package/templates/manifest.md +19 -0
- package/templates/phases/brief.md +53 -0
- package/templates/phases/build.md +24 -48
- package/templates/phases/critique.md +68 -0
- package/templates/phases/design.md +54 -32
- package/templates/phases/discover.md +60 -0
- package/templates/phases/identity.md +78 -0
- package/templates/phases/launch.md +48 -55
- package/templates/phases/research.md +75 -47
- package/templates/phases/review.md +27 -75
- package/templates/phases/strategy.md +67 -0
- package/templates/phases/system.md +84 -78
- package/templates/phases/verbal.md +63 -0
- package/templates/{project.md → projects/brief.md} +13 -17
- package/templates/projects/config.json +32 -0
- package/templates/projects/roadmap.md +59 -0
- package/templates/{state.md → projects/state.md} +19 -9
- package/agents/gsp-spec-engineer.md +0 -121
- package/agents/gsp-ui-designer.md +0 -59
- package/commands/gsp/spec.md +0 -88
- package/templates/config.json +0 -26
- package/templates/phases/brand.md +0 -60
- package/templates/phases/spec.md +0 -46
- package/templates/roadmap.md +0 -62
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: gsp:brand-verbal
|
|
3
|
+
description: Verbal identity — voice, tone spectrum, messaging matrix, naming
|
|
4
|
+
allowed-tools:
|
|
5
|
+
- Read
|
|
6
|
+
- Write
|
|
7
|
+
- Bash
|
|
8
|
+
- Task
|
|
9
|
+
- WebSearch
|
|
10
|
+
- WebFetch
|
|
11
|
+
---
|
|
12
|
+
<context>
|
|
13
|
+
Phase 3 of the GSP branding diamond. Creates the brand's verbal identity — how it speaks, what it says, and how tone adapts across contexts. Built on the brand strategy (archetype, prism, positioning).
|
|
14
|
+
</context>
|
|
15
|
+
|
|
16
|
+
<objective>
|
|
17
|
+
Create the brand's verbal identity system.
|
|
18
|
+
|
|
19
|
+
**Input:** Strategy chunks (or STRATEGY.md fallback)
|
|
20
|
+
**Output:** `.design/branding/{brand}/verbal/` (7 chunks + INDEX.md)
|
|
21
|
+
**Agent:** `gsp-verbal-strategist`
|
|
22
|
+
</objective>
|
|
23
|
+
|
|
24
|
+
<execution_context>
|
|
25
|
+
@/Users/jubs/.claude/get-shit-pretty/templates/phases/verbal.md
|
|
26
|
+
@/Users/jubs/.claude/get-shit-pretty/references/voice-tone.md
|
|
27
|
+
</execution_context>
|
|
28
|
+
|
|
29
|
+
<process>
|
|
30
|
+
## Step 1: Find brand
|
|
31
|
+
|
|
32
|
+
Scan `.design/branding/` for brand directories. If only one brand exists, use it. If multiple, ask the user which brand to work on.
|
|
33
|
+
|
|
34
|
+
Also read BRIEF.md for audience context.
|
|
35
|
+
|
|
36
|
+
## Step 1.5: Load strategy output
|
|
37
|
+
|
|
38
|
+
**Chunk-first:** Read `.design/branding/{brand}/strategy/INDEX.md`. If it exists, load all 6 strategy chunks.
|
|
39
|
+
|
|
40
|
+
**Fallback:** If INDEX.md doesn't exist, read `.design/branding/{brand}/strategy/STRATEGY.md` (legacy monolith). Log: "⚠️ Legacy strategy format detected — consider re-running /gsp:brand-strategy for chunk output."
|
|
41
|
+
|
|
42
|
+
If neither exists, tell the user to run `/gsp:brand-strategy` first.
|
|
43
|
+
|
|
44
|
+
## Step 1.75: Voice direction (interactive)
|
|
45
|
+
|
|
46
|
+
Load strategy/archetype.md communication style + strategy/brand-prism.md personality.
|
|
47
|
+
If `.design/branding/{brand}/audit/` exists, load `audit/brand-inventory.md` voice samples.
|
|
48
|
+
|
|
49
|
+
Present voice direction:
|
|
50
|
+
|
|
51
|
+
"Your archetype ({archetype}) communicates with {style}.
|
|
52
|
+
{If evolve: "Your current voice sounds like: {samples from audit}.
|
|
53
|
+
We're {preserving/evolving} it."}
|
|
54
|
+
|
|
55
|
+
Here are two directions:
|
|
56
|
+
A: {direction} — '{example sentence}'
|
|
57
|
+
B: {direction} — '{example sentence}'
|
|
58
|
+
|
|
59
|
+
Which resonates? Or describe what you hear."
|
|
60
|
+
|
|
61
|
+
Confirm voice direction. This direction is passed to the verbal strategist agent.
|
|
62
|
+
|
|
63
|
+
## Step 2: Spawn verbal strategist
|
|
64
|
+
|
|
65
|
+
Spawn the `gsp-verbal-strategist` agent with:
|
|
66
|
+
- All strategy chunks (or STRATEGY.md fallback content)
|
|
67
|
+
- The BRIEF.md content (for audience context)
|
|
68
|
+
- The verbal identity template
|
|
69
|
+
- The voice-tone reference
|
|
70
|
+
- User-confirmed voice direction from Step 1.75
|
|
71
|
+
- `.design/branding/{brand}/audit/brand-inventory.md` voice samples (if exist)
|
|
72
|
+
- **Output path:** `.design/branding/{brand}/verbal/`
|
|
73
|
+
|
|
74
|
+
The agent writes chunks directly to the verbal directory:
|
|
75
|
+
1. `brand-voice.md`
|
|
76
|
+
2. `tone-spectrum.md`
|
|
77
|
+
3. `voice-chart.md`
|
|
78
|
+
4. `messaging-matrix.md`
|
|
79
|
+
5. `brand-narrative.md`
|
|
80
|
+
6. `tagline-directions.md`
|
|
81
|
+
7. `nomenclature.md`
|
|
82
|
+
8. `INDEX.md`
|
|
83
|
+
|
|
84
|
+
## Step 3: Update state
|
|
85
|
+
|
|
86
|
+
Update `.design/branding/{brand}/STATE.md`:
|
|
87
|
+
- Set Phase 3 (Verbal) status to `complete`
|
|
88
|
+
- Record completion date
|
|
89
|
+
|
|
90
|
+
## Step 4: Route next
|
|
91
|
+
|
|
92
|
+
Display verbal identity summary (voice attributes, tone position, tagline directions) and end with:
|
|
93
|
+
"Verbal identity updated. Run `/gsp:brand-identity` to continue — it will skip verbal and run visual identity."
|
|
94
|
+
</process>
|
package/commands/gsp/brand.md
CHANGED
|
@@ -1,94 +1,20 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: gsp:brand
|
|
3
|
-
description:
|
|
3
|
+
description: Brand identity (alias for /gsp:brand-identity)
|
|
4
4
|
allowed-tools:
|
|
5
5
|
- Read
|
|
6
|
-
- Write
|
|
7
|
-
- Bash
|
|
8
|
-
- Task
|
|
9
|
-
- WebSearch
|
|
10
|
-
- WebFetch
|
|
11
6
|
---
|
|
12
|
-
<context>
|
|
13
|
-
Phase 2 of the GSP design pipeline. Uses the Brand Identity Creator prompt to develop a complete brand identity from strategy to visual applications.
|
|
14
|
-
</context>
|
|
15
|
-
|
|
16
|
-
<objective>
|
|
17
|
-
Create a complete brand identity for the project.
|
|
18
|
-
|
|
19
|
-
**Input:** `.design/BRIEF.md` + `.design/research/TRENDS.md`
|
|
20
|
-
**Output:** `.design/brand/IDENTITY.md`
|
|
21
|
-
**Agent:** `gsp-brand-strategist`
|
|
22
|
-
</objective>
|
|
23
|
-
|
|
24
|
-
<execution_context>
|
|
25
|
-
@/Users/jubs/.claude/get-shit-pretty/prompts/02-brand-identity-creator.md
|
|
26
|
-
@/Users/jubs/.claude/get-shit-pretty/templates/phases/brand.md
|
|
27
|
-
</execution_context>
|
|
28
|
-
|
|
29
7
|
<process>
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
Read:
|
|
33
|
-
- `.design/BRIEF.md` — project context, audience, personality
|
|
34
|
-
- `.design/research/TRENDS.md` — trend insights (if available; proceed without if not)
|
|
35
|
-
|
|
36
|
-
If BRIEF.md doesn't exist, tell the user to run `/gsp:new-project` first.
|
|
37
|
-
|
|
38
|
-
## Step 2: Spawn brand strategist
|
|
39
|
-
|
|
40
|
-
Spawn the `gsp-brand-strategist` agent with:
|
|
41
|
-
- The full BRIEF.md and TRENDS.md content
|
|
42
|
-
- The Brand Identity Creator prompt (02)
|
|
43
|
-
- The brand output template
|
|
44
|
-
|
|
45
|
-
The agent should deliver:
|
|
46
|
-
1. Brand strategy (story, archetype, voice matrix, messaging hierarchy)
|
|
47
|
-
2. 3 logo directions with variations and usage rules
|
|
48
|
-
3. Complete color system (Hex, RGB, Pantone, CMYK + rationale)
|
|
49
|
-
4. Typography system
|
|
50
|
-
5. Imagery and photography style guide
|
|
51
|
-
6. Brand applications
|
|
52
|
-
7. Brand book structure
|
|
53
|
-
|
|
54
|
-
## Step 3: Generate color palettes via tints.dev
|
|
55
|
-
|
|
56
|
-
For each brand color defined in the identity (primary, secondary, accent), generate a full 11-stop Tailwind palette using the [tints.dev](https://tints.dev) API by [Simeon Griggs](https://github.com/SimeonGriggs/tints.dev):
|
|
57
|
-
|
|
58
|
-
```
|
|
59
|
-
WebFetch: https://tints.dev/api/{colorName}/{hexWithout#}
|
|
8
|
+
Display:
|
|
60
9
|
```
|
|
10
|
+
🎨 GSP — Redirecting...
|
|
61
11
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
The API returns OKLCH values for stops 50–950. Store the raw palettes in `.design/brand/palettes.json` with this structure:
|
|
65
|
-
|
|
66
|
-
```json
|
|
67
|
-
{
|
|
68
|
-
"$schema": "tints.dev",
|
|
69
|
-
"$generator": "https://tints.dev by Simeon Griggs (https://github.com/SimeonGriggs/tints.dev)",
|
|
70
|
-
"primary": { "50": "oklch(...)", "100": "oklch(...)", ... "950": "oklch(...)" },
|
|
71
|
-
"secondary": { ... },
|
|
72
|
-
"accent": { ... }
|
|
73
|
-
}
|
|
12
|
+
/gsp:brand now redirects to /gsp:brand-identity.
|
|
13
|
+
The branding diamond is 4 commands: brand-research → brand-strategy → brand-identity → brand-patterns.
|
|
74
14
|
```
|
|
75
15
|
|
|
76
|
-
|
|
77
|
-
- `
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
Write the completed identity to `.design/brand/IDENTITY.md`.
|
|
82
|
-
Write the generated palettes to `.design/brand/palettes.json`.
|
|
83
|
-
|
|
84
|
-
## Step 5: Update state
|
|
85
|
-
|
|
86
|
-
Update `.design/STATE.md`:
|
|
87
|
-
- Set Phase 2 (Brand) status to `complete`
|
|
88
|
-
- Record completion date
|
|
89
|
-
|
|
90
|
-
## Step 6: Route next
|
|
91
|
-
|
|
92
|
-
Display brand identity summary and end with:
|
|
93
|
-
"Run `/gsp:system` to build the design system from this identity."
|
|
16
|
+
Tell the user:
|
|
17
|
+
- To create a full brand from scratch: run `/gsp:new` and choose "Brand identity"
|
|
18
|
+
- To run the identity phase (verbal + visual): run `/gsp:brand-identity`
|
|
19
|
+
- To see all brand commands: run `/gsp:help`
|
|
94
20
|
</process>
|
|
@@ -0,0 +1,142 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: gsp:brief
|
|
3
|
+
description: Project scoping — screen list, adaptations, gap analysis
|
|
4
|
+
allowed-tools:
|
|
5
|
+
- Read
|
|
6
|
+
- Write
|
|
7
|
+
- Bash
|
|
8
|
+
- Task
|
|
9
|
+
- Grep
|
|
10
|
+
- Glob
|
|
11
|
+
---
|
|
12
|
+
<context>
|
|
13
|
+
Phase 1 of the GSP project diamond. Scopes the project by determining what screens and components are needed, what adaptations the brand system requires for this specific project, and performs gap analysis against the codebase.
|
|
14
|
+
|
|
15
|
+
Encourages treating the project as a bounded issue (or set of issues) and a PR — ship small, ship complete.
|
|
16
|
+
|
|
17
|
+
Works with the dual-diamond architecture: reads brand system from `.design/branding/{brand}/system/` via `brand.ref`, reads/writes project assets in `.design/projects/{project}/`.
|
|
18
|
+
</context>
|
|
19
|
+
|
|
20
|
+
<objective>
|
|
21
|
+
Scope the project and plan adaptations from the brand system.
|
|
22
|
+
|
|
23
|
+
**Input:** Brand system (via brand.ref) + project BRIEF.md + config.json
|
|
24
|
+
**Output:** `{project}/brief/` (scope.md, target-adaptations.md, conditionals, INDEX.md)
|
|
25
|
+
**Agent:** `gsp-scoper`
|
|
26
|
+
</objective>
|
|
27
|
+
|
|
28
|
+
<execution_context>
|
|
29
|
+
@/Users/jubs/.claude/get-shit-pretty/prompts/10-project-scoper.md
|
|
30
|
+
@/Users/jubs/.claude/get-shit-pretty/templates/phases/brief.md
|
|
31
|
+
</execution_context>
|
|
32
|
+
|
|
33
|
+
<process>
|
|
34
|
+
## Step 0: Resolve project and brand
|
|
35
|
+
|
|
36
|
+
Scan `.design/projects/` for project directories. If only one project exists, use it. If multiple, ask the user which project to work on.
|
|
37
|
+
|
|
38
|
+
Set `PROJECT_PATH` = `.design/projects/{project}`
|
|
39
|
+
|
|
40
|
+
Read `{PROJECT_PATH}/brand.ref` to resolve brand path:
|
|
41
|
+
- Extract `brand` name and `path` from brand.ref
|
|
42
|
+
- Set `BRAND_PATH` = `.design/branding/{brand}`
|
|
43
|
+
|
|
44
|
+
If brand.ref doesn't exist, tell the user to run `/gsp:new` to set up the project with a brand reference.
|
|
45
|
+
|
|
46
|
+
## Step 1: Load context
|
|
47
|
+
|
|
48
|
+
### Brand system (chunk-first)
|
|
49
|
+
|
|
50
|
+
Read `{BRAND_PATH}/system/INDEX.md`. If it exists, load all foundation chunks + selective component chunks.
|
|
51
|
+
|
|
52
|
+
Fallback: read `{BRAND_PATH}/system/SYSTEM.md` (legacy monolith). Log: "⚠️ Legacy system format detected."
|
|
53
|
+
|
|
54
|
+
If neither exists, tell the user to run `/gsp:brand-system` first to create the brand's design system.
|
|
55
|
+
|
|
56
|
+
Also read `{BRAND_PATH}/system/tokens.json`.
|
|
57
|
+
|
|
58
|
+
### Project context
|
|
59
|
+
|
|
60
|
+
Read:
|
|
61
|
+
- `{PROJECT_PATH}/BRIEF.md` — what we're building, platforms, tech stack
|
|
62
|
+
- `{PROJECT_PATH}/config.json` — get `implementation_target`, `design_scope`, `codebase_type`
|
|
63
|
+
|
|
64
|
+
### Codebase context
|
|
65
|
+
|
|
66
|
+
Read `{PROJECT_PATH}/codebase/INVENTORY.md` (if exists) — existing tokens, components, architecture.
|
|
67
|
+
|
|
68
|
+
Read `.design/CHANGELOG.md` — quick history of what prior projects built.
|
|
69
|
+
For projects with overlapping scope, read their `codebase/MANIFEST.md` for detail.
|
|
70
|
+
Glob `.design/projects/*/STATE.md` — detect active sibling projects.
|
|
71
|
+
|
|
72
|
+
## Step 1.5: Scope check
|
|
73
|
+
|
|
74
|
+
**If `design_scope` is `tokens`:**
|
|
75
|
+
1. Update `{PROJECT_PATH}/STATE.md` — set Phase 1 (Brief) status to `skipped`
|
|
76
|
+
2. Display: "Brief phase skipped — design scope is `tokens`."
|
|
77
|
+
3. Route: "Run `/gsp:build`."
|
|
78
|
+
4. Stop here.
|
|
79
|
+
|
|
80
|
+
## Step 1.7: Issue framing
|
|
81
|
+
|
|
82
|
+
Suggest to the user:
|
|
83
|
+
"Consider framing this project as a bounded issue (or set of issues) and a PR. Smaller scope = higher quality. What's the tightest version of this that ships?"
|
|
84
|
+
|
|
85
|
+
If the project scope feels large, suggest breaking it into multiple bounded issues — each one a focused deliverable that can be reviewed independently.
|
|
86
|
+
|
|
87
|
+
## Step 2: Spawn scoper
|
|
88
|
+
|
|
89
|
+
Spawn the `gsp-scoper` agent with:
|
|
90
|
+
- Brand system chunks (or fallback)
|
|
91
|
+
- tokens.json
|
|
92
|
+
- BRIEF.md
|
|
93
|
+
- config.json preferences
|
|
94
|
+
- INVENTORY.md (when exists)
|
|
95
|
+
- CHANGELOG.md + relevant MANIFEST.md files — for overlap detection and provenance
|
|
96
|
+
- The Project Scoper prompt (10)
|
|
97
|
+
- The brief output template
|
|
98
|
+
- `implementation_target`, `design_scope`, `codebase_type`
|
|
99
|
+
- **Output path:** `{PROJECT_PATH}/brief/`
|
|
100
|
+
|
|
101
|
+
If any sibling project is active and its scope overlaps with this project, flag it: "⚠️ {name} is actively working on {scope}. Coordinate to avoid conflicts."
|
|
102
|
+
If this project modifies components from a sibling's manifest, note provenance.
|
|
103
|
+
|
|
104
|
+
The agent writes chunks directly:
|
|
105
|
+
- `brief/scope.md`
|
|
106
|
+
- `brief/target-adaptations.md`
|
|
107
|
+
- `brief/install-manifest.md` (shadcn/rn-reusables)
|
|
108
|
+
- `brief/gap-analysis.md` (existing target)
|
|
109
|
+
- `brief/file-references.md` (existing target)
|
|
110
|
+
- `brief/INDEX.md`
|
|
111
|
+
|
|
112
|
+
## Step 3: Write exports
|
|
113
|
+
|
|
114
|
+
Update `{PROJECT_PATH}/exports/INDEX.md`:
|
|
115
|
+
- If INDEX.md doesn't exist, copy it from `templates/exports-index.md`
|
|
116
|
+
- Replace everything between `<!-- BEGIN:brief -->` and `<!-- END:brief -->` with populated table:
|
|
117
|
+
|
|
118
|
+
```markdown
|
|
119
|
+
<!-- BEGIN:brief -->
|
|
120
|
+
| Section | File |
|
|
121
|
+
|---------|------|
|
|
122
|
+
| Scope | [scope.md](../brief/scope.md) |
|
|
123
|
+
| Target Adaptations | [target-adaptations.md](../brief/target-adaptations.md) |
|
|
124
|
+
| Install Manifest | [install-manifest.md](../brief/install-manifest.md) |
|
|
125
|
+
| Gap Analysis | [gap-analysis.md](../brief/gap-analysis.md) |
|
|
126
|
+
| File References | [file-references.md](../brief/file-references.md) |
|
|
127
|
+
<!-- END:brief -->
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
Only include rows for chunks that were actually produced.
|
|
131
|
+
|
|
132
|
+
## Step 4: Update state
|
|
133
|
+
|
|
134
|
+
Update `{PROJECT_PATH}/STATE.md`:
|
|
135
|
+
- Set Phase 1 (Brief) status to `complete`
|
|
136
|
+
- Record completion date
|
|
137
|
+
|
|
138
|
+
## Step 5: Route next
|
|
139
|
+
|
|
140
|
+
"Run `/gsp:research` to research UX patterns, competitor experiences, and technical approaches for this project."
|
|
141
|
+
</process>
|
|
142
|
+
</output>
|
package/commands/gsp/build.md
CHANGED
|
@@ -8,15 +8,17 @@ allowed-tools:
|
|
|
8
8
|
- Task
|
|
9
9
|
---
|
|
10
10
|
<context>
|
|
11
|
-
Phase
|
|
11
|
+
Phase 5 of the GSP project diamond. Uses the Design-to-Code Translator prompt to convert design, research, and brief into production-ready frontend components.
|
|
12
|
+
|
|
13
|
+
Works with the dual-diamond architecture: reads brand system from `.design/branding/{brand}/system/` via `brand.ref`, reads/writes project assets in `.design/projects/{project}/`.
|
|
12
14
|
</context>
|
|
13
15
|
|
|
14
16
|
<objective>
|
|
15
17
|
Translate designs into production-ready frontend code.
|
|
16
18
|
|
|
17
|
-
**Input:**
|
|
18
|
-
**Output:**
|
|
19
|
-
**Agent:** `gsp-
|
|
19
|
+
**Input:** Design chunks + research chunks + brief chunks + brand system chunks
|
|
20
|
+
**Output:** `{project}/build/CODE.md` + `{project}/build/components/`
|
|
21
|
+
**Agent:** `gsp-builder`
|
|
20
22
|
</objective>
|
|
21
23
|
|
|
22
24
|
<execution_context>
|
|
@@ -25,60 +27,66 @@ Translate designs into production-ready frontend code.
|
|
|
25
27
|
</execution_context>
|
|
26
28
|
|
|
27
29
|
<process>
|
|
28
|
-
## Step
|
|
30
|
+
## Step 0: Resolve project and brand
|
|
29
31
|
|
|
30
|
-
|
|
32
|
+
Scan `.design/projects/` for project directories. If only one project exists, use it. If multiple, ask the user which project to work on.
|
|
31
33
|
|
|
32
|
-
|
|
33
|
-
- `.design/specs/SPECS.md` — implementation specs (primary input)
|
|
34
|
-
- `.design/system/SYSTEM.md` — design system
|
|
35
|
-
- `.design/system/tokens.json` — design tokens
|
|
36
|
-
- `.design/BRIEF.md` — tech stack preference
|
|
37
|
-
- `.design/review/CRITIQUE.md` — any fixes to incorporate
|
|
34
|
+
Set `PROJECT_PATH` = `.design/projects/{project}`
|
|
38
35
|
|
|
39
|
-
|
|
40
|
-
-
|
|
41
|
-
|
|
36
|
+
Read `{PROJECT_PATH}/brand.ref` to resolve brand path:
|
|
37
|
+
- Set `BRAND_PATH` = `.design/branding/{brand}`
|
|
38
|
+
|
|
39
|
+
## Step 1: Load context
|
|
42
40
|
|
|
43
|
-
|
|
41
|
+
Read `{PROJECT_PATH}/config.json` to get `implementation_target`, `design_scope`, `codebase_type`.
|
|
44
42
|
|
|
45
|
-
|
|
43
|
+
**When building a specific screen** (user specifies which) and chunks are available:
|
|
44
|
+
1. Read `{PROJECT_PATH}/exports/INDEX.md` — find chunk file paths
|
|
45
|
+
2. Load screen chunk: `{PROJECT_PATH}/design/screen-{NN}-{name}.md`
|
|
46
|
+
3. Load referenced component chunks from `{BRAND_PATH}/system/components/`
|
|
47
|
+
4. Load `{PROJECT_PATH}/brief/target-adaptations.md`
|
|
48
|
+
5. Load `{PROJECT_PATH}/brief/install-manifest.md` (shadcn/rn-reusables)
|
|
49
|
+
5b. Load `{PROJECT_PATH}/brief/gap-analysis.md` + `file-references.md` (existing target)
|
|
50
|
+
5d. Load `{PROJECT_PATH}/research/reference-specs.md` (if exists)
|
|
51
|
+
5e. Load `{PROJECT_PATH}/research/technical-research.md` (if exists)
|
|
52
|
+
5c. Load `{PROJECT_PATH}/codebase/INVENTORY.md` (when exists)
|
|
53
|
+
6. Load `{BRAND_PATH}/system/tokens.json`
|
|
54
|
+
7. Read `{PROJECT_PATH}/BRIEF.md` — tech stack preference
|
|
55
|
+
8. Load `{PROJECT_PATH}/critique/prioritized-fixes.md` (if available)
|
|
46
56
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
- The Design-to-Code Translator prompt (09)
|
|
50
|
-
- The build output template
|
|
51
|
-
- The target tech stack
|
|
52
|
-
- The `implementation_target` value
|
|
57
|
+
**When building all screens** (or no chunks available):
|
|
58
|
+
Read full monolith files from `{PROJECT_PATH}/` as fallback. Log: "⚠️ Legacy format detected — consider re-running phases for chunk output."
|
|
53
59
|
|
|
54
|
-
|
|
60
|
+
If design doesn't exist (no INDEX.md in design/), tell the user to run `/gsp:design` first.
|
|
55
61
|
|
|
56
|
-
|
|
62
|
+
## Step 2: Spawn builder
|
|
57
63
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
5. Error, loading, and empty states
|
|
64
|
-
6. Animations and transitions
|
|
65
|
-
7. Styling with design tokens (dark mode, breakpoints)
|
|
66
|
-
8. Performance optimization notes
|
|
67
|
-
9. Testing strategy
|
|
64
|
+
Spawn the `gsp-builder` agent with all design, plan, system, and token files, the Design-to-Code Translator prompt (09), build output template, target tech stack, implementation_target, design_scope, and codebase inventory.
|
|
65
|
+
|
|
66
|
+
**When `design_scope` is `tokens`:**
|
|
67
|
+
- Output token files only
|
|
68
|
+
- Skip component code generation
|
|
68
69
|
|
|
69
70
|
## Step 3: Write output
|
|
70
71
|
|
|
71
|
-
1. Write implementation guide to
|
|
72
|
-
2. Write individual components to
|
|
72
|
+
1. Write implementation guide to `{PROJECT_PATH}/build/CODE.md`
|
|
73
|
+
2. Write individual components to `{PROJECT_PATH}/build/components/`
|
|
74
|
+
|
|
75
|
+
### Write manifest
|
|
76
|
+
|
|
77
|
+
Write `{PROJECT_PATH}/codebase/MANIFEST.md` from `templates/manifest.md`:
|
|
78
|
+
1. **Components table** — one row per component produced (scan `build/components/`). Action = `added` or `modified` based on INVENTORY.md.
|
|
79
|
+
2. **Patterns table** — patterns established (infer from CODE.md).
|
|
80
|
+
3. **Files Touched** — flat list of all target file paths.
|
|
73
81
|
|
|
74
82
|
## Step 4: Update state
|
|
75
83
|
|
|
76
|
-
Update
|
|
77
|
-
- Set Phase
|
|
84
|
+
Update `{PROJECT_PATH}/STATE.md`:
|
|
85
|
+
- Set Phase 5 (Build) status to `complete`
|
|
78
86
|
- Record completion date
|
|
79
87
|
|
|
80
88
|
## Step 5: Route next
|
|
81
89
|
|
|
82
|
-
|
|
83
|
-
"Run `/gsp:launch` to create marketing campaign assets."
|
|
90
|
+
"Run `/gsp:review` to validate built deliverables against design intent."
|
|
84
91
|
</process>
|
|
92
|
+
</output>
|
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: gsp:critique
|
|
3
|
+
description: Design critique (Nielsen's heuristics) + WCAG accessibility audit
|
|
4
|
+
allowed-tools:
|
|
5
|
+
- Read
|
|
6
|
+
- Write
|
|
7
|
+
- Bash
|
|
8
|
+
- Task
|
|
9
|
+
---
|
|
10
|
+
<context>
|
|
11
|
+
Phase 4 of the GSP project diamond. Runs two agents in parallel: the Design Critique Partner (Nielsen's 10 heuristics) and the Accessibility Auditor (WCAG 2.2 AA).
|
|
12
|
+
|
|
13
|
+
Works with the dual-diamond architecture: reads brand context from `.design/branding/{brand}/` via `brand.ref`, reads/writes project assets in `.design/projects/{project}/`.
|
|
14
|
+
</context>
|
|
15
|
+
|
|
16
|
+
<objective>
|
|
17
|
+
Critique design quality and audit accessibility compliance.
|
|
18
|
+
|
|
19
|
+
**Input:** All prior project chunks + brand identity
|
|
20
|
+
**Output:** `{project}/critique/` (critique + accessibility chunks + INDEX.md) + exports/INDEX.md update
|
|
21
|
+
**Agents:** `gsp-critic` + `gsp-auditor`
|
|
22
|
+
</objective>
|
|
23
|
+
|
|
24
|
+
<execution_context>
|
|
25
|
+
@/Users/jubs/.claude/get-shit-pretty/prompts/06-design-critique-partner.md
|
|
26
|
+
@/Users/jubs/.claude/get-shit-pretty/prompts/08-accessibility-auditor.md
|
|
27
|
+
@/Users/jubs/.claude/get-shit-pretty/templates/phases/critique.md
|
|
28
|
+
@/Users/jubs/.claude/get-shit-pretty/references/nielsen-heuristics.md
|
|
29
|
+
@/Users/jubs/.claude/get-shit-pretty/references/wcag-checklist.md
|
|
30
|
+
</execution_context>
|
|
31
|
+
|
|
32
|
+
<process>
|
|
33
|
+
## Step 0: Resolve project and brand
|
|
34
|
+
|
|
35
|
+
Scan `.design/projects/` for project directories. If only one project exists, use it. If multiple, ask the user which project to work on.
|
|
36
|
+
|
|
37
|
+
Set `PROJECT_PATH` = `.design/projects/{project}`
|
|
38
|
+
|
|
39
|
+
Read `{PROJECT_PATH}/brand.ref` to resolve brand path:
|
|
40
|
+
- Set `BRAND_PATH` = `.design/branding/{brand}`
|
|
41
|
+
|
|
42
|
+
## Step 1: Load context
|
|
43
|
+
|
|
44
|
+
Read `{PROJECT_PATH}/config.json` to get `implementation_target`, `design_scope`, and `accessibility_level`.
|
|
45
|
+
|
|
46
|
+
### Load all prior chunks (chunk-first with fallbacks)
|
|
47
|
+
|
|
48
|
+
**BRIEF:** `{PROJECT_PATH}/BRIEF.md`
|
|
49
|
+
|
|
50
|
+
**Identity:** Read `{BRAND_PATH}/identity/INDEX.md` → load all chunks.
|
|
51
|
+
Fallback: `{BRAND_PATH}/identity/IDENTITY.md`.
|
|
52
|
+
|
|
53
|
+
**System:** Read `{BRAND_PATH}/system/INDEX.md` → load all chunks.
|
|
54
|
+
Fallback: `{BRAND_PATH}/system/SYSTEM.md`.
|
|
55
|
+
|
|
56
|
+
**Design:** Read `{PROJECT_PATH}/design/INDEX.md` → load all chunks.
|
|
57
|
+
Fallback: `{PROJECT_PATH}/design/SCREENS.md` or `{PROJECT_PATH}/screens/INDEX.md` (legacy).
|
|
58
|
+
|
|
59
|
+
**Brief:** Read `{PROJECT_PATH}/brief/INDEX.md` → load all chunks (if exists).
|
|
60
|
+
|
|
61
|
+
**Research:** Read `{PROJECT_PATH}/research/INDEX.md` → load `recommendations.md` (if exists).
|
|
62
|
+
|
|
63
|
+
## Step 1.5: Scope check
|
|
64
|
+
|
|
65
|
+
**If `design_scope` is `tokens`:**
|
|
66
|
+
1. Review system chunks only — token foundations, naming, scale consistency
|
|
67
|
+
2. Run accessibility audit on color contrast and token values only
|
|
68
|
+
3. Write results to `{PROJECT_PATH}/critique/accessibility-audit.md` and `accessibility-fixes.md`
|
|
69
|
+
4. Write `{PROJECT_PATH}/critique/INDEX.md`
|
|
70
|
+
5. Update STATE.md — set Phase 4 to `complete`
|
|
71
|
+
6. Route: "Run `/gsp:build`."
|
|
72
|
+
7. **Stop here**
|
|
73
|
+
|
|
74
|
+
**Otherwise:** If design chunks don't exist and scope is not `tokens`, tell the user to complete the design phase first.
|
|
75
|
+
|
|
76
|
+
## Step 2: Spawn critics (parallel)
|
|
77
|
+
|
|
78
|
+
**Agent 1: gsp-critic** — Design critique using Nielsen's 10 Heuristics reference + all design chunks.
|
|
79
|
+
Output path: `{PROJECT_PATH}/critique/`
|
|
80
|
+
|
|
81
|
+
**Agent 2: gsp-auditor** — WCAG 2.2 audit using WCAG checklist + all design chunks. Pass `accessibility_level` from config (defaults to "WCAG 2.2 AA") so the auditor adapts its criteria (AA vs AAA).
|
|
82
|
+
Output path: `{PROJECT_PATH}/critique/`
|
|
83
|
+
|
|
84
|
+
## Step 3: Write critique INDEX.md
|
|
85
|
+
|
|
86
|
+
After both agents complete, write `{PROJECT_PATH}/critique/INDEX.md`:
|
|
87
|
+
|
|
88
|
+
```markdown
|
|
89
|
+
# Critique
|
|
90
|
+
> Phase: critique | Project: {name} | Generated: {DATE}
|
|
91
|
+
|
|
92
|
+
## Critique
|
|
93
|
+
|
|
94
|
+
| Chunk | File | ~Lines |
|
|
95
|
+
|-------|------|--------|
|
|
96
|
+
| Critique | [critique.md](./critique.md) | ~{N} |
|
|
97
|
+
| Prioritized Fixes | [prioritized-fixes.md](./prioritized-fixes.md) | ~{N} |
|
|
98
|
+
| Alternative Directions | [alternative-directions.md](./alternative-directions.md) | ~{N} |
|
|
99
|
+
| Strengths | [strengths.md](./strengths.md) | ~{N} |
|
|
100
|
+
|
|
101
|
+
## Accessibility
|
|
102
|
+
|
|
103
|
+
| Chunk | File | ~Lines |
|
|
104
|
+
|-------|------|--------|
|
|
105
|
+
| Accessibility Audit | [accessibility-audit.md](./accessibility-audit.md) | ~{N} |
|
|
106
|
+
| Accessibility Fixes | [accessibility-fixes.md](./accessibility-fixes.md) | ~{N} |
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
Update `{PROJECT_PATH}/exports/INDEX.md`:
|
|
110
|
+
|
|
111
|
+
```markdown
|
|
112
|
+
<!-- BEGIN:critique -->
|
|
113
|
+
| Section | File |
|
|
114
|
+
|---------|------|
|
|
115
|
+
| Critique | [critique.md](../critique/critique.md) |
|
|
116
|
+
| Prioritized Fixes | [prioritized-fixes.md](../critique/prioritized-fixes.md) |
|
|
117
|
+
| Alternative Directions | [alternative-directions.md](../critique/alternative-directions.md) |
|
|
118
|
+
| Strengths | [strengths.md](../critique/strengths.md) |
|
|
119
|
+
| Accessibility Audit | [accessibility-audit.md](../critique/accessibility-audit.md) |
|
|
120
|
+
| Accessibility Fixes | [accessibility-fixes.md](../critique/accessibility-fixes.md) |
|
|
121
|
+
<!-- END:critique -->
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
## Step 4: Assess results
|
|
125
|
+
|
|
126
|
+
**If critical issues found:** Display issues, recommend looping back, update STATE.md review loops.
|
|
127
|
+
**If no critical issues:** Display positive summary, proceed.
|
|
128
|
+
|
|
129
|
+
## Step 5: Update state
|
|
130
|
+
|
|
131
|
+
Update `{PROJECT_PATH}/STATE.md`:
|
|
132
|
+
- Set Phase 4 (Critique) status to `complete` or `needs-revision`
|
|
133
|
+
- Record review loop count and completion date
|
|
134
|
+
|
|
135
|
+
## Step 6: Route next
|
|
136
|
+
|
|
137
|
+
If clean: "Run `/gsp:build` to translate designs to code."
|
|
138
|
+
If issues: "Address the critical issues above, then run `/gsp:critique` again."
|
|
139
|
+
</process>
|
|
140
|
+
</output>
|