get-shit-pretty 0.5.2 → 0.6.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.
- package/.claude-plugin/plugin.json +1 -1
- package/README.md +3 -4
- package/bin/install.js +27 -1
- package/gsp/agents/gsp-builder.md +1 -1
- package/gsp/references/questioning.md +17 -9
- package/gsp/skills/gsp-accessibility/SKILL.md +52 -186
- package/gsp/skills/gsp-accessibility-audit/SKILL.md +219 -0
- package/gsp/skills/gsp-brand-audit/SKILL.md +7 -6
- package/gsp/skills/gsp-brand-identity/SKILL.md +7 -5
- package/gsp/skills/gsp-brand-patterns/SKILL.md +42 -35
- package/gsp/skills/gsp-brand-refine/SKILL.md +148 -0
- package/gsp/skills/gsp-brand-research/SKILL.md +2 -3
- package/gsp/skills/gsp-brand-strategy/SKILL.md +7 -5
- package/gsp/skills/gsp-brand-sync/SKILL.md +3 -4
- package/gsp/skills/gsp-doctor/SKILL.md +20 -1
- package/gsp/skills/gsp-help/SKILL.md +1 -0
- package/gsp/skills/gsp-launch/SKILL.md +3 -8
- package/gsp/skills/gsp-palette/SKILL.md +3 -0
- package/gsp/skills/gsp-project-brief/SKILL.md +3 -11
- package/gsp/skills/gsp-project-build/SKILL.md +2 -5
- package/gsp/skills/gsp-project-critique/SKILL.md +4 -8
- package/gsp/skills/gsp-project-design/SKILL.md +3 -9
- package/gsp/skills/gsp-project-research/SKILL.md +2 -5
- package/gsp/skills/gsp-project-review/SKILL.md +4 -6
- package/gsp/skills/gsp-start/SKILL.md +101 -180
- package/gsp/skills/gsp-style/SKILL.md +12 -174
- package/gsp/skills/gsp-typescale/SKILL.md +39 -161
- package/gsp/skills/gsp-update/SKILL.md +52 -23
- package/gsp/templates/branding/config.json +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,219 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: accessibility-audit
|
|
3
|
+
description: Full WCAG accessibility audit — design screens, codebase, or generate compliance statement
|
|
4
|
+
user-invocable: true
|
|
5
|
+
allowed-tools:
|
|
6
|
+
- Read
|
|
7
|
+
- Write
|
|
8
|
+
- Edit
|
|
9
|
+
- Bash
|
|
10
|
+
- Agent
|
|
11
|
+
- Glob
|
|
12
|
+
- Grep
|
|
13
|
+
- AskUserQuestion
|
|
14
|
+
---
|
|
15
|
+
<context>
|
|
16
|
+
Full accessibility audit skill that spawns the `gsp-accessibility-auditor` agent for deep WCAG analysis. Works two ways:
|
|
17
|
+
1. **Standalone** — user runs `/gsp:accessibility-audit` directly for design, code, or statement generation
|
|
18
|
+
2. **As a building block** — critique and review phases detect prior accessibility output and reuse it
|
|
19
|
+
|
|
20
|
+
For quick contrast checks or token audits, use `/gsp:accessibility` instead.
|
|
21
|
+
|
|
22
|
+
Follows the composable pattern: deterministic modes, predictable output paths, filesystem as integration layer.
|
|
23
|
+
</context>
|
|
24
|
+
|
|
25
|
+
<objective>
|
|
26
|
+
Run full accessibility audits — design screen reviews, codebase ARIA/keyboard/semantic checks, or compliance statement generation.
|
|
27
|
+
|
|
28
|
+
**Input:** Mode flag + optional arguments
|
|
29
|
+
**Output:** Audit chunks and fix lists in the appropriate project directory
|
|
30
|
+
**Agent:** `gsp-accessibility-auditor` (for design and code modes), inline for statement
|
|
31
|
+
</objective>
|
|
32
|
+
|
|
33
|
+
<execution_context>
|
|
34
|
+
@${CLAUDE_SKILL_DIR}/../../prompts/08-accessibility-auditor.md
|
|
35
|
+
@${CLAUDE_SKILL_DIR}/../../references/wcag-checklist.md
|
|
36
|
+
</execution_context>
|
|
37
|
+
|
|
38
|
+
<rules>
|
|
39
|
+
- Always use `AskUserQuestion` for user interaction — never prompt via plain text
|
|
40
|
+
- One decision per question — never batch multiple questions in a single message
|
|
41
|
+
- Statement mode reads prior audit results — fails gracefully if none exist
|
|
42
|
+
- Default conformance level is AA unless overridden by `--level AAA` or config
|
|
43
|
+
- Foundation chunks follow `references/chunk-format.md` format
|
|
44
|
+
</rules>
|
|
45
|
+
|
|
46
|
+
<process>
|
|
47
|
+
## Step 1: Parse invocation
|
|
48
|
+
|
|
49
|
+
Read `$ARGUMENTS` to determine the mode:
|
|
50
|
+
|
|
51
|
+
| Input | Mode | Agent? | Output |
|
|
52
|
+
|-------|------|--------|--------|
|
|
53
|
+
| (no args) | Design audit on `.design/` chunks | Yes (`gsp-accessibility-auditor`) | `critique/accessibility-audit.md` + `accessibility-fixes.md` |
|
|
54
|
+
| `--code` | Codebase audit: ARIA, keyboard, semantic HTML | Yes (`gsp-accessibility-auditor`) | `review/accessibility-audit.md` + `accessibility-fixes.md` |
|
|
55
|
+
| `--statement` | Generate accessibility statement from prior audits | No (inline) | `exports/accessibility-statement.md` |
|
|
56
|
+
|
|
57
|
+
Additional flag: `--level AAA` overrides conformance level (default: AA).
|
|
58
|
+
|
|
59
|
+
## Step 2: Resolve context
|
|
60
|
+
|
|
61
|
+
Resolve project from `.design/projects/` (one → use it, multiple → ask). Set `PROJECT_PATH`.
|
|
62
|
+
|
|
63
|
+
Read `{PROJECT_PATH}/config.json` to get:
|
|
64
|
+
- `accessibility_level` — override conformance level (if not set via `--level` flag)
|
|
65
|
+
- `implementation_target` — needed for code mode
|
|
66
|
+
|
|
67
|
+
Read `{PROJECT_PATH}/brand.ref` to resolve brand path:
|
|
68
|
+
- Set `BRAND_PATH` = `.design/branding/{brand}`
|
|
69
|
+
|
|
70
|
+
Determine final conformance level:
|
|
71
|
+
1. `--level` flag (highest priority)
|
|
72
|
+
2. `accessibility_level` from config.json
|
|
73
|
+
3. Default: "WCAG 2.2 AA"
|
|
74
|
+
|
|
75
|
+
## Step 3: Design audit mode (default, no flags)
|
|
76
|
+
|
|
77
|
+
Verify design chunks exist:
|
|
78
|
+
- Read `{PROJECT_PATH}/design/INDEX.md` to find screen chunks
|
|
79
|
+
- If no design chunks, tell user to complete design phase first and stop
|
|
80
|
+
|
|
81
|
+
### Spawn agent
|
|
82
|
+
|
|
83
|
+
Spawn `gsp-accessibility-auditor` with:
|
|
84
|
+
- All design chunks from `{PROJECT_PATH}/design/`
|
|
85
|
+
- Brand identity context (color system, typography)
|
|
86
|
+
- Brand system context (tokens, components)
|
|
87
|
+
- Conformance level
|
|
88
|
+
- WCAG checklist reference
|
|
89
|
+
- **Output path:** `{PROJECT_PATH}/critique/`
|
|
90
|
+
- **Instructions:** "Audit all design screens against {level}. Write `accessibility-audit.md` and `accessibility-fixes.md` to the output path."
|
|
91
|
+
|
|
92
|
+
### Completion
|
|
93
|
+
|
|
94
|
+
Display result:
|
|
95
|
+
|
|
96
|
+
```
|
|
97
|
+
/gsp:accessibility-audit — design audit complete
|
|
98
|
+
═══════════════════════════════════════
|
|
99
|
+
|
|
100
|
+
{PROJECT_PATH}/critique/
|
|
101
|
+
├── accessibility-audit.md
|
|
102
|
+
└── accessibility-fixes.md
|
|
103
|
+
|
|
104
|
+
─────────────────────────────────────
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
Use `AskUserQuestion`:
|
|
108
|
+
- **Run token audit** — "run `/gsp:accessibility --tokens` to check design token contrast pairs"
|
|
109
|
+
- **Continue to build** — "implement designs in the codebase"
|
|
110
|
+
- **View audit** — "read the accessibility report"
|
|
111
|
+
- **Done** — "that's all for now"
|
|
112
|
+
|
|
113
|
+
## Step 4: Code audit mode (`--code`)
|
|
114
|
+
|
|
115
|
+
Determine codebase scope:
|
|
116
|
+
- Read `{PROJECT_PATH}/config.json` for `implementation_target`
|
|
117
|
+
- If build phase completed, read `{PROJECT_PATH}/build/BUILD-LOG.md` for file paths
|
|
118
|
+
- Otherwise, use `implementation_target` to determine where to look
|
|
119
|
+
|
|
120
|
+
### Spawn agent
|
|
121
|
+
|
|
122
|
+
Spawn `gsp-accessibility-auditor` with:
|
|
123
|
+
- Codebase paths to audit
|
|
124
|
+
- Brand system tokens (for contrast verification against hardcoded values)
|
|
125
|
+
- Conformance level
|
|
126
|
+
- WCAG checklist reference
|
|
127
|
+
- **Output path:** `{PROJECT_PATH}/review/`
|
|
128
|
+
- **Instructions:** "Code audit mode. Use Grep and Glob to find accessibility issues in the codebase. Check ARIA, keyboard handlers, semantic HTML, heading hierarchy, alt text, lang attributes, skip-nav, focus management. Write `accessibility-audit.md` and `accessibility-fixes.md` to the output path with actual file paths and line numbers."
|
|
129
|
+
|
|
130
|
+
### Completion
|
|
131
|
+
|
|
132
|
+
Display result:
|
|
133
|
+
|
|
134
|
+
```
|
|
135
|
+
/gsp:accessibility-audit --code — code audit complete
|
|
136
|
+
═══════════════════════════════════════
|
|
137
|
+
|
|
138
|
+
{PROJECT_PATH}/review/
|
|
139
|
+
├── accessibility-audit.md
|
|
140
|
+
└── accessibility-fixes.md
|
|
141
|
+
|
|
142
|
+
─────────────────────────────────────
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
Use `AskUserQuestion`:
|
|
146
|
+
- **Fix issues** — "address the accessibility issues found"
|
|
147
|
+
- **Generate statement** — "create an accessibility statement"
|
|
148
|
+
- **View audit** — "read the code accessibility report"
|
|
149
|
+
- **Done** — "that's all for now"
|
|
150
|
+
|
|
151
|
+
## Step 5: Statement mode (`--statement`)
|
|
152
|
+
|
|
153
|
+
Read prior audit results:
|
|
154
|
+
- `{PROJECT_PATH}/critique/accessibility-audit.md`
|
|
155
|
+
- `{PROJECT_PATH}/critique/accessibility-token-audit.md`
|
|
156
|
+
- `{PROJECT_PATH}/review/accessibility-audit.md`
|
|
157
|
+
|
|
158
|
+
If none exist, tell the user to run an audit first and stop.
|
|
159
|
+
|
|
160
|
+
### Generate statement
|
|
161
|
+
|
|
162
|
+
Write `{PROJECT_PATH}/exports/accessibility-statement.md`:
|
|
163
|
+
|
|
164
|
+
```markdown
|
|
165
|
+
# Accessibility Statement
|
|
166
|
+
|
|
167
|
+
> Project: {name} | Generated: {DATE}
|
|
168
|
+
|
|
169
|
+
---
|
|
170
|
+
|
|
171
|
+
## Conformance Status
|
|
172
|
+
|
|
173
|
+
**Target:** {level}
|
|
174
|
+
**Status:** {Partially Conformant / Fully Conformant}
|
|
175
|
+
|
|
176
|
+
This {project description} has been evaluated against {level} standards.
|
|
177
|
+
|
|
178
|
+
## Scope
|
|
179
|
+
|
|
180
|
+
{Brief description of what was audited — design, code, or both}
|
|
181
|
+
|
|
182
|
+
## Known Limitations
|
|
183
|
+
|
|
184
|
+
{List from audit findings — critical/major issues not yet resolved}
|
|
185
|
+
|
|
186
|
+
- {Issue}: {brief description} — {planned resolution or workaround}
|
|
187
|
+
|
|
188
|
+
## Testing Methodology
|
|
189
|
+
|
|
190
|
+
- Design audit: WCAG 2.2 checklist review of all screens
|
|
191
|
+
- Token audit: Automated contrast ratio verification of all semantic color pairs
|
|
192
|
+
- Code audit: Manual and grep-based review of ARIA, keyboard, semantic HTML
|
|
193
|
+
- Tools used: {list from testing methodology}
|
|
194
|
+
|
|
195
|
+
## Feedback
|
|
196
|
+
|
|
197
|
+
If you encounter accessibility barriers, please contact:
|
|
198
|
+
|
|
199
|
+
- **Email:** [placeholder@example.com]
|
|
200
|
+
- **Response time:** [X business days]
|
|
201
|
+
|
|
202
|
+
## Assessment Date
|
|
203
|
+
|
|
204
|
+
Last reviewed: {DATE}
|
|
205
|
+
```
|
|
206
|
+
|
|
207
|
+
### Completion
|
|
208
|
+
|
|
209
|
+
Display result and use `AskUserQuestion`:
|
|
210
|
+
- **View statement** — "read the accessibility statement"
|
|
211
|
+
- **Done** — "that's all for now"
|
|
212
|
+
|
|
213
|
+
## Step 6: Update STATE.md
|
|
214
|
+
|
|
215
|
+
If within a project and files were written:
|
|
216
|
+
- Read `{PROJECT_PATH}/STATE.md`
|
|
217
|
+
- Note accessibility audit completion in the relevant phase section
|
|
218
|
+
- Do not change phase status — accessibility is a supplementary check
|
|
219
|
+
</process>
|
|
@@ -29,6 +29,7 @@ Audit an existing brand. Produce evolution map that guides research, strategy, a
|
|
|
29
29
|
|
|
30
30
|
<rules>
|
|
31
31
|
- Always use `AskUserQuestion` for user-facing questions — never raw text prompts
|
|
32
|
+
- One decision per question — never batch multiple questions in a single message
|
|
32
33
|
- Keep interactions concise — gather assets, confirm scope, spawn agent
|
|
33
34
|
- Artifacts must balance human readability with agent consumption for downstream phases
|
|
34
35
|
</rules>
|
|
@@ -36,22 +37,22 @@ Audit an existing brand. Produce evolution map that guides research, strategy, a
|
|
|
36
37
|
<process>
|
|
37
38
|
## Step 1: Resolve brand
|
|
38
39
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
Set `BRAND_PATH` = `.design/branding/{brand}`
|
|
40
|
+
Resolve brand from `.design/branding/` (one → use it, multiple → ask). Set `BRAND_PATH`.
|
|
42
41
|
|
|
43
42
|
Read `{BRAND_PATH}/BRIEF.md` for aspirational direction.
|
|
44
43
|
Read `{BRAND_PATH}/config.json` to confirm `brand_mode` is `evolve`.
|
|
45
44
|
|
|
46
45
|
If missing, tell user to run `/gsp:start` first.
|
|
47
46
|
|
|
48
|
-
## Step 2:
|
|
47
|
+
## Step 2: Load brand assets from brief
|
|
48
|
+
|
|
49
|
+
Read `{BRAND_PATH}/BRIEF.md` — brand assets were already gathered during `/gsp:start`. Extract any logos, colors, guidelines, URLs, or descriptions the user provided.
|
|
49
50
|
|
|
50
|
-
|
|
51
|
+
If the brief has no asset information (legacy or incomplete brief), use `AskUserQuestion`:
|
|
51
52
|
- **Share assets now** — "I have guidelines, colors, fonts, voice samples, or URLs to share"
|
|
52
53
|
- **Describe the brand** — "I'll describe it in my own words"
|
|
53
54
|
|
|
54
|
-
|
|
55
|
+
If URLs were provided (in brief or just now), use WebFetch. Don't re-ask for information already in the brief.
|
|
55
56
|
|
|
56
57
|
## Step 3: Spawn auditor
|
|
57
58
|
|
|
@@ -31,6 +31,8 @@ Build the brand's visual identity.
|
|
|
31
31
|
|
|
32
32
|
<rules>
|
|
33
33
|
- Always use `AskUserQuestion` for user-facing questions — never raw text prompts
|
|
34
|
+
- One decision per question — never batch multiple questions in a single message
|
|
35
|
+
- Never re-ask what the user already answered in a prior phase — read BRIEF.md and strategy chunks, build on them
|
|
34
36
|
- Every visual decision must trace to strategy — archetype, positioning, or voice
|
|
35
37
|
- Artifacts must balance human readability with agent consumption for downstream phases
|
|
36
38
|
</rules>
|
|
@@ -38,9 +40,7 @@ Build the brand's visual identity.
|
|
|
38
40
|
<process>
|
|
39
41
|
## Step 0: Resolve brand
|
|
40
42
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
Set `BRAND_PATH` = `.design/branding/{brand}`
|
|
43
|
+
Resolve brand from `.design/branding/` (one → use it, multiple → ask). Set `BRAND_PATH`.
|
|
44
44
|
If missing, tell user to run `/gsp:start` first.
|
|
45
45
|
|
|
46
46
|
## Step 1: Validate prerequisites
|
|
@@ -77,9 +77,11 @@ Use `AskUserQuestion` with 2-3 visual directions:
|
|
|
77
77
|
- **Description:** color palette direction, typography feel, overall aesthetic
|
|
78
78
|
- **Preview:** "Palette: {key colors}. Type: {typeface style}. Feel: {1-line vibe}."
|
|
79
79
|
|
|
80
|
-
|
|
80
|
+
## Step 2b: Constraints
|
|
81
|
+
|
|
82
|
+
After visual direction is confirmed, ask as a separate `AskUserQuestion`:
|
|
81
83
|
- **No constraints** — "Go ahead with this direction"
|
|
82
|
-
- **Add constraints** — "I have specific requirements"
|
|
84
|
+
- **Add constraints** — "I have specific requirements (colors to avoid, accessibility needs, existing assets to match)"
|
|
83
85
|
|
|
84
86
|
## Step 3: Spawn identity designer
|
|
85
87
|
|
|
@@ -30,13 +30,15 @@ Build the design system, generate brand guidelines, and complete the branding di
|
|
|
30
30
|
@${CLAUDE_SKILL_DIR}/../../references/design-tokens.md
|
|
31
31
|
</execution_context>
|
|
32
32
|
|
|
33
|
+
<rules>
|
|
34
|
+
- Always use `AskUserQuestion` for user-facing questions — never raw text prompts
|
|
35
|
+
- One decision per question — never batch multiple questions in a single message
|
|
36
|
+
</rules>
|
|
37
|
+
|
|
33
38
|
<process>
|
|
34
39
|
## Step 0: Resolve brand
|
|
35
40
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
Set `BRAND_PATH` = `.design/branding/{brand}`
|
|
39
|
-
|
|
41
|
+
Resolve brand from `.design/branding/` (one → use it, multiple → ask). Set `BRAND_PATH`.
|
|
40
42
|
If BRAND_PATH doesn't exist, tell the user to run `/gsp:start` first.
|
|
41
43
|
|
|
42
44
|
## Step 1: Load context
|
|
@@ -45,14 +47,11 @@ If BRAND_PATH doesn't exist, tell the user to run `/gsp:start` first.
|
|
|
45
47
|
|
|
46
48
|
Read `{BRAND_PATH}/identity/INDEX.md`. If it exists, load all identity chunks + `palettes.json`.
|
|
47
49
|
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
If neither exists, check if identity phase is complete in brand STATE.md. If not, tell the user to complete brand identity first (run `/gsp:brand-identity`).
|
|
50
|
+
If INDEX.md doesn't exist, check if identity phase is complete in brand STATE.md. If not, tell the user to complete brand identity first (run `/gsp:brand-identity`).
|
|
51
51
|
|
|
52
52
|
### Strategy (selective, chunk-first)
|
|
53
53
|
|
|
54
54
|
Read `{BRAND_PATH}/strategy/INDEX.md`. If it exists, load selective chunks (voice-and-tone.md, brand-platform.md).
|
|
55
|
-
Fallback: read `{BRAND_PATH}/strategy/STRATEGY.md`.
|
|
56
55
|
|
|
57
56
|
### Brand context
|
|
58
57
|
|
|
@@ -72,14 +71,20 @@ If `style_base` is empty or missing, load `${CLAUDE_SKILL_DIR}/../gsp-style/styl
|
|
|
72
71
|
|
|
73
72
|
**Always scan:** If `.design/system/` docs don't exist, invoke `/gsp:design-system` via Skill tool to scan the codebase. If they already exist, read them. Either way, load STACK.md, COMPONENTS.md, and TOKENS.md before continuing.
|
|
74
73
|
|
|
75
|
-
Then ask the user:
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
74
|
+
Then ask the user (each as its own `AskUserQuestion`):
|
|
75
|
+
|
|
76
|
+
1. Tech stack — if the scan detected a stack, use `AskUserQuestion`:
|
|
77
|
+
- **Yes, build on {framework} + {styling}** — "Use what's already here"
|
|
78
|
+
- **Different stack** — "I want to target a different tech stack"
|
|
79
|
+
If no stack detected, use open-ended `AskUserQuestion`: "What tech stack will this brand target?"
|
|
80
|
+
Store answer in `{BRAND_PATH}/config.json` → `system_config.tech_stack`
|
|
81
|
+
|
|
82
|
+
2. System strategy — only ask if scan found existing tokens/components. Use `AskUserQuestion`:
|
|
83
|
+
- **Evolve** — "Extend the existing design system"
|
|
84
|
+
- **Rethink** — "Redesign from scratch, informed by what exists"
|
|
85
|
+
- **Ignore** — "Start fresh, don't reference the existing system"
|
|
86
|
+
Store strategy in `{BRAND_PATH}/config.json` → `system_config.system_strategy`
|
|
87
|
+
If scan found no tokens/components (greenfield/boilerplate): default to `generate`, skip this question
|
|
83
88
|
|
|
84
89
|
## Step 2: Determine system strategy
|
|
85
90
|
|
|
@@ -109,7 +114,7 @@ Redesign the system from the ground up, informed by what exists.
|
|
|
109
114
|
## Step 3: Spawn pattern architect — Pass 1: Foundations
|
|
110
115
|
|
|
111
116
|
Spawn the `gsp-pattern-architect` agent with:
|
|
112
|
-
- All identity chunks
|
|
117
|
+
- All identity chunks + palettes.json
|
|
113
118
|
- The BRIEF.md content
|
|
114
119
|
- The Design System Architect prompt (01)
|
|
115
120
|
- The patterns output template
|
|
@@ -127,37 +132,37 @@ The agent writes foundations only:
|
|
|
127
132
|
|
|
128
133
|
## Step 3.5: Foundation review (interactive)
|
|
129
134
|
|
|
130
|
-
Read the foundation outputs and present:
|
|
135
|
+
Read the foundation outputs and present a compact summary:
|
|
131
136
|
|
|
132
|
-
"
|
|
137
|
+
"Design system foundations:
|
|
133
138
|
Color: {semantic mapping summary from foundations/color-system.md}
|
|
134
139
|
Typography: {type scale summary from foundations/typography.md}
|
|
135
140
|
Spacing: 8px base → {scale from foundations/spacing.md}
|
|
136
|
-
Design principles: {list from principles.md}
|
|
141
|
+
Design principles: {list from principles.md}"
|
|
137
142
|
|
|
138
|
-
|
|
143
|
+
Use `AskUserQuestion`:
|
|
144
|
+
- **Looks good** — "Build components on these foundations"
|
|
145
|
+
- **Adjust colors** — "I want to tweak the color system"
|
|
146
|
+
- **Adjust typography** — "I want to tweak the type scale"
|
|
147
|
+
- **Adjust other** — "I want to change spacing, principles, or other foundations"
|
|
139
148
|
|
|
140
|
-
|
|
149
|
+
If adjustments needed, update the relevant foundation chunks, then re-present.
|
|
141
150
|
|
|
142
151
|
## Step 3.75: Perspective check
|
|
143
152
|
|
|
144
153
|
Before building components, load persona profiles from `{BRAND_PATH}/BRIEF.md` and present stakeholder reactions:
|
|
145
154
|
|
|
146
|
-
"Before we build the component library
|
|
147
|
-
|
|
148
|
-
The Customer ({primary persona name from BRIEF.md}):
|
|
149
|
-
"{would a user recognize this as {brand}? Does the system feel like the brand?}"
|
|
155
|
+
"Before we build the component library:
|
|
150
156
|
|
|
151
|
-
|
|
152
|
-
|
|
157
|
+
{primary persona name}: {would they recognize this as {brand}? Does it feel right?}
|
|
158
|
+
Skeptic: {are the tokens flexible enough? Are the principles actionable?}
|
|
159
|
+
{top competitor}: {how does this compare to industry standards?}"
|
|
153
160
|
|
|
154
|
-
|
|
155
|
-
|
|
161
|
+
Use `AskUserQuestion`:
|
|
162
|
+
- **Build components** — "These foundations are solid, let's go"
|
|
163
|
+
- **Adjust** — "One of these concerns resonates — I want to change something"
|
|
156
164
|
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
If user wants changes → update foundations.
|
|
160
|
-
If confirmed → proceed to components pass.
|
|
165
|
+
If adjust → update foundations and re-present. If confirmed → proceed to components pass.
|
|
161
166
|
|
|
162
167
|
## Step 4: Spawn pattern architect — Pass 2: Components
|
|
163
168
|
|
|
@@ -214,7 +219,9 @@ Tell the user: "Brand kit saved to `guidelines.html` — open it in your browser
|
|
|
214
219
|
|
|
215
220
|
Render phase transition (see `references/phase-transitions.md`).
|
|
216
221
|
|
|
217
|
-
**
|
|
222
|
+
**E2E mode:** Read `{BRAND_PATH}/config.json`. If `e2e` is `true`, auto-invoke `/gsp:start` via Skill tool — it will detect the completed brand and route directly to project setup (Step 4). No need to ask the user.
|
|
223
|
+
|
|
224
|
+
**Non-E2E:** When the user chooses "Start a project", invoke `/gsp:start` via the Skill tool. Do NOT attempt to handle project setup inline — `/gsp:start` has the codebase scanning, questioning rounds, and brief-writing logic needed for a proper project setup. The branding agent's context is spent on brand work and lacks the project setup methodology.
|
|
218
225
|
|
|
219
226
|
Also display a brand summary after the standard transition — this is the final branding phase:
|
|
220
227
|
|
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: brand-refine
|
|
3
|
+
description: Targeted brand adjustments mid-project — tweak colors, typography, or spacing without re-running the full branding diamond
|
|
4
|
+
user-invocable: true
|
|
5
|
+
allowed-tools:
|
|
6
|
+
- Read
|
|
7
|
+
- Write
|
|
8
|
+
- Edit
|
|
9
|
+
- Glob
|
|
10
|
+
- Bash
|
|
11
|
+
- AskUserQuestion
|
|
12
|
+
- WebFetch
|
|
13
|
+
---
|
|
14
|
+
<context>
|
|
15
|
+
You are a GSP brand refinement skill. You take targeted feedback about brand visual issues and surgically update token values — no need to re-run strategy or identity.
|
|
16
|
+
|
|
17
|
+
This skill modifies **tokens.json** and **palettes.json** only. If the user's feedback is strategic ("make the tone more playful") or narrative ("the brand story feels off"), redirect to `/gsp:brand-strategy` or `/gsp:brand-identity`.
|
|
18
|
+
</context>
|
|
19
|
+
|
|
20
|
+
<objective>
|
|
21
|
+
Accept natural language feedback about brand visuals, identify which tokens are affected, apply targeted value changes, and log what changed.
|
|
22
|
+
|
|
23
|
+
**Input:** Natural language feedback (e.g., "accent is too muted", "heading weight too heavy")
|
|
24
|
+
**Output:** Updated `tokens.json` and/or `palettes.json` + `REFINE-LOG.md`
|
|
25
|
+
**Agent:** None — inline skill, surgical edits
|
|
26
|
+
</objective>
|
|
27
|
+
|
|
28
|
+
<execution_context>
|
|
29
|
+
@${CLAUDE_SKILL_DIR}/../../references/design-tokens.md
|
|
30
|
+
</execution_context>
|
|
31
|
+
|
|
32
|
+
<rules>
|
|
33
|
+
- Always use `AskUserQuestion` for user interaction — never prompt via plain text
|
|
34
|
+
- One decision per question — never batch multiple questions in a single message
|
|
35
|
+
- Never update artifacts without showing before/after and getting confirmation
|
|
36
|
+
- Only touch tokens directly affected by the feedback
|
|
37
|
+
- Preserve existing token structure — edit values in place, don't restructure
|
|
38
|
+
- When changing a color that cascades into semantic tokens, show the full cascade before applying
|
|
39
|
+
- When color changes affect text/background pairs, check WCAG AA contrast (4.5:1 normal text, 3:1 large text) and warn if a change would fail
|
|
40
|
+
</rules>
|
|
41
|
+
|
|
42
|
+
<process>
|
|
43
|
+
## Step 0: Locate brand and parse feedback
|
|
44
|
+
|
|
45
|
+
Extract feedback from the user's input (everything after `/gsp:brand-refine`).
|
|
46
|
+
|
|
47
|
+
If no feedback provided, use `AskUserQuestion`: "What would you like to adjust? (e.g., 'accent is too muted', 'heading font feels too heavy', 'spacing too tight')"
|
|
48
|
+
|
|
49
|
+
Resolve brand from `.design/branding/` (one → use it, multiple → ask). Set `BRAND_PATH`.
|
|
50
|
+
Check that `{BRAND_PATH}/patterns/tokens.json` exists. If not: "No tokens found. Run `/gsp:brand-patterns` first."
|
|
51
|
+
|
|
52
|
+
## Step 1: Read current state
|
|
53
|
+
|
|
54
|
+
Read `{BRAND_PATH}/patterns/tokens.json` once. Extract all sections relevant to the feedback:
|
|
55
|
+
|
|
56
|
+
| Feedback signals | Token section |
|
|
57
|
+
|-----------------|---------------|
|
|
58
|
+
| color, accent, muted, vibrant, contrast, tint, shade, hue | `color` |
|
|
59
|
+
| font, heading, body, weight, size, line-height | `typography` |
|
|
60
|
+
| spacing, padding, gap, tight, loose, dense | `spacing` |
|
|
61
|
+
| shadow, elevation, depth, flat | `shadow` |
|
|
62
|
+
| radius, rounded, sharp, corners | `borderRadius` |
|
|
63
|
+
|
|
64
|
+
Also read `{BRAND_PATH}/identity/palettes.json` if it exists and feedback involves colors.
|
|
65
|
+
|
|
66
|
+
## Step 2: Propose changes
|
|
67
|
+
|
|
68
|
+
Show a clear before/after for each affected token:
|
|
69
|
+
|
|
70
|
+
```
|
|
71
|
+
/gsp:brand-refine
|
|
72
|
+
═══════════════════════════════════════
|
|
73
|
+
|
|
74
|
+
Feedback: "the accent is too muted"
|
|
75
|
+
|
|
76
|
+
─── Proposed Changes ─────────────────
|
|
77
|
+
|
|
78
|
+
color.brand.accent
|
|
79
|
+
before: #B8860B
|
|
80
|
+
after: #E8A317
|
|
81
|
+
change: increased chroma
|
|
82
|
+
|
|
83
|
+
Cascade:
|
|
84
|
+
color.semantic.link → #E8A317
|
|
85
|
+
color.semantic.focus-ring → #E8A317
|
|
86
|
+
|
|
87
|
+
Contrast: accent on white 3.2:1 → 2.8:1 ⚠️ below AA
|
|
88
|
+
accent on dark 8.4:1 → 9.2:1 ✓
|
|
89
|
+
|
|
90
|
+
─────────────────────────────────────
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
### Color changes involving palette scales
|
|
94
|
+
|
|
95
|
+
If the change affects a source color that feeds an 11-stop palette, use `AskUserQuestion`:
|
|
96
|
+
- **Regenerate scale** — regenerate the full 11-stop OKLCH palette from the new color
|
|
97
|
+
- **Just update tokens** — only change the specific token values
|
|
98
|
+
|
|
99
|
+
If regenerating, call the tints.dev API:
|
|
100
|
+
```
|
|
101
|
+
WebFetch: https://www.tints.dev/api/{colorName}/{hexWithoutHash}
|
|
102
|
+
```
|
|
103
|
+
Parse the response for the 11-stop OKLCH scale (50–950) and update `palettes.json`.
|
|
104
|
+
|
|
105
|
+
### Typography changes involving scale ratio
|
|
106
|
+
|
|
107
|
+
For individual token tweaks (weight, letter-spacing), propose direct value changes. If the user wants a different ratio or base size that would affect the entire scale, recalculate using the existing scale's mathematical relationship.
|
|
108
|
+
|
|
109
|
+
## Step 3: Confirm and apply
|
|
110
|
+
|
|
111
|
+
Use `AskUserQuestion`:
|
|
112
|
+
- **Apply all** — "apply all proposed changes"
|
|
113
|
+
- **Adjust first** — "I want to tweak some values"
|
|
114
|
+
- **Cancel** — "keep current values"
|
|
115
|
+
|
|
116
|
+
Apply confirmed changes:
|
|
117
|
+
1. **tokens.json** — edit values in place with `Edit`. Preserve structure.
|
|
118
|
+
2. **palettes.json** — update if palette was regenerated.
|
|
119
|
+
|
|
120
|
+
## Step 4: Log and finish
|
|
121
|
+
|
|
122
|
+
Append to `{BRAND_PATH}/REFINE-LOG.md`:
|
|
123
|
+
|
|
124
|
+
```markdown
|
|
125
|
+
## {DATE} — "{feedback}"
|
|
126
|
+
|
|
127
|
+
| Token | Before | After |
|
|
128
|
+
|-------|--------|-------|
|
|
129
|
+
| color.brand.accent | #B8860B | #E8A317 |
|
|
130
|
+
| color.semantic.link | #B8860B | #E8A317 |
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
Display summary:
|
|
134
|
+
|
|
135
|
+
```
|
|
136
|
+
/gsp:brand-refine — {n} tokens updated
|
|
137
|
+
═══════════════════════════════════════
|
|
138
|
+
|
|
139
|
+
Updated: {list of tokens}
|
|
140
|
+
Log: {BRAND_PATH}/REFINE-LOG.md
|
|
141
|
+
|
|
142
|
+
─────────────────────────────────────
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
Use `AskUserQuestion`:
|
|
146
|
+
- **More refinements** — loop back to Step 0
|
|
147
|
+
- **Done** — "that's all"
|
|
148
|
+
</process>
|
|
@@ -31,6 +31,7 @@ Research market context that will inform brand strategy.
|
|
|
31
31
|
|
|
32
32
|
<rules>
|
|
33
33
|
- Always use `AskUserQuestion` for user-facing questions — never raw text prompts
|
|
34
|
+
- One decision per question — never batch multiple questions in a single message
|
|
34
35
|
- Keep interactions concise — 1-2 exchanges max before spawning the agent
|
|
35
36
|
- Artifacts must balance human readability with agent consumption for downstream phases
|
|
36
37
|
</rules>
|
|
@@ -38,9 +39,7 @@ Research market context that will inform brand strategy.
|
|
|
38
39
|
<process>
|
|
39
40
|
## Step 1: Resolve brand
|
|
40
41
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
Set `BRAND_PATH` = `.design/branding/{brand}`
|
|
42
|
+
Resolve brand from `.design/branding/` (one → use it, multiple → ask). Set `BRAND_PATH`.
|
|
44
43
|
|
|
45
44
|
Read `{BRAND_PATH}/BRIEF.md`. If missing, tell user to run `/gsp:start` first.
|
|
46
45
|
Read `{BRAND_PATH}/config.json` for `brand_mode`.
|
|
@@ -32,6 +32,8 @@ Define brand strategy and voice through interactive creative direction, then pro
|
|
|
32
32
|
|
|
33
33
|
<rules>
|
|
34
34
|
- Always use `AskUserQuestion` for user-facing questions — never raw text prompts
|
|
35
|
+
- One decision per question — never batch multiple questions in a single message
|
|
36
|
+
- Never re-ask what the user already answered in a prior phase — read BRIEF.md and build on it
|
|
35
37
|
- Push opinionated recommendations but let the user decide
|
|
36
38
|
- Quality gate: if you could swap in a competitor's name and it still works, it's too generic
|
|
37
39
|
- Artifacts must balance human readability with agent consumption for downstream phases
|
|
@@ -40,9 +42,7 @@ Define brand strategy and voice through interactive creative direction, then pro
|
|
|
40
42
|
<process>
|
|
41
43
|
## Step 0: Resolve brand
|
|
42
44
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
Set `BRAND_PATH` = `.design/branding/{brand}`
|
|
45
|
+
Resolve brand from `.design/branding/` (one → use it, multiple → ask). Set `BRAND_PATH`.
|
|
46
46
|
If missing, tell user to run `/gsp:start` first.
|
|
47
47
|
|
|
48
48
|
## Step 1: Load context
|
|
@@ -63,9 +63,11 @@ Frame as: "Here's where this brand can win." Keep it to 4-6 lines.
|
|
|
63
63
|
|
|
64
64
|
## Step 3: Archetype selection
|
|
65
65
|
|
|
66
|
-
|
|
66
|
+
Read the personality direction from BRIEF.md (gathered during `/gsp:start`). Use it as the starting point — don't re-ask for personality. Deepen it into a structural archetype.
|
|
67
|
+
|
|
68
|
+
Use `AskUserQuestion` with 2-3 archetype candidates that align with the chosen personality direction. Each option:
|
|
67
69
|
- **Label:** archetype name
|
|
68
|
-
- **Description:** strategic reasoning — why it fits the personas and gaps
|
|
70
|
+
- **Description:** strategic reasoning — why it fits the personas and gaps, and how it builds on the personality direction from the brief
|
|
69
71
|
- **Preview:** example sentence in that archetype's voice
|
|
70
72
|
|
|
71
73
|
Push a recommendation. Let user choose, adjust, or blend.
|
|
@@ -37,6 +37,7 @@ Compare a project's shipped state against its source brand across all dimensions
|
|
|
37
37
|
|
|
38
38
|
<rules>
|
|
39
39
|
- Always use `AskUserQuestion` for user interaction — never prompt via plain text
|
|
40
|
+
- One decision per question — never batch multiple questions in a single message
|
|
40
41
|
- Never update the brand without explicit user confirmation
|
|
41
42
|
- Show before/after for every change — no silent updates
|
|
42
43
|
- Only update dimensions that actually diverged — don't regenerate the entire brand
|
|
@@ -45,10 +46,7 @@ Compare a project's shipped state against its source brand across all dimensions
|
|
|
45
46
|
<process>
|
|
46
47
|
## Step 0: Resolve brand and project
|
|
47
48
|
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
Set `BRAND_PATH` = `.design/branding/{brand}`
|
|
51
|
-
|
|
49
|
+
Resolve brand from `.design/branding/` (one → use it, multiple → ask). Set `BRAND_PATH`.
|
|
52
50
|
Check that the brand has at least one of: `patterns/tokens.json`, `strategy/`, `identity/`. If none exist, tell the user: "No brand system found. Run `/gsp:brand-patterns` first."
|
|
53
51
|
|
|
54
52
|
Verify the project codebase has shipped output — source files with components, copy, or styles.
|
|
@@ -74,6 +72,7 @@ Read `{BRAND_PATH}/sync/SYNC-REPORT.md`. Present a compact summary per dimension
|
|
|
74
72
|
- **Tokens only** — just sync the quantitative token changes
|
|
75
73
|
- **Pick by dimension** — choose which dimensions to sync
|
|
76
74
|
- **Review each** — walk through every divergence individually
|
|
75
|
+
- **Refine manually** — run `/gsp:brand-refine` to make targeted token adjustments instead
|
|
77
76
|
- **Skip** — don't update the brand
|
|
78
77
|
|
|
79
78
|
If "Pick by dimension", ask per dimension. If "Review each", walk through the Update Map from the report.
|