get-shit-pretty 0.7.1 → 0.7.3
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/README.md +292 -100
- package/bin/install.js +1 -1
- package/gsp/hooks/hooks.json +37 -1
- package/gsp/skills/gsp-brand-identity/SKILL.md +7 -7
- package/gsp/skills/gsp-help/SKILL.md +10 -5
- package/gsp/skills/gsp-project-build/SKILL.md +201 -63
- package/gsp/skills/gsp-project-build/bento-grid.md +114 -0
- package/gsp/skills/gsp-project-build/methodology/gsp-project-builder.md +14 -0
- package/gsp/skills/gsp-project-critique/SKILL.md +8 -4
- package/gsp/skills/gsp-style/styles/INDEX.yml +7 -1
- package/gsp/skills/gsp-style/styles/nothing.md +445 -0
- package/gsp/skills/gsp-style/styles/nothing.yml +146 -0
- package/gsp/templates/branding/config.json +3 -2
- package/gsp/templates/phases/build.md +13 -4
- package/gsp/templates/projects/config.json +3 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -25,7 +25,7 @@ npx get-shit-pretty
|
|
|
25
25
|
|
|
26
26
|
<br>
|
|
27
27
|
|
|
28
|
-
[Why GSP Exists](#why-gsp-exists) · [How It Works](#how-it-works) · [
|
|
28
|
+
[Why GSP Exists](#why-gsp-exists) · [Quick Start](#quick-start) · [How It Works](#how-it-works) · [Style Presets](#style-presets) · [Expertise Skills](#expertise-skills) · [Skills](#skills) · [Agents](#agents) · [Architecture](#architecture) · [AI Tool Support](#ai-coding-tool-support) · [Contributing](#contributing)
|
|
29
29
|
|
|
30
30
|
</div>
|
|
31
31
|
|
|
@@ -35,21 +35,34 @@ npx get-shit-pretty
|
|
|
35
35
|
|
|
36
36
|
The gap between design and code is shrinking — but only from one direction.
|
|
37
37
|
|
|
38
|
-
Figma ships Code Connect, Dev Mode, MCP servers. Design tools are learning to speak code. That bridge is being built.
|
|
39
|
-
|
|
40
|
-
Coding tools aren't learning to speak design.
|
|
38
|
+
Figma ships Code Connect, Dev Mode, MCP servers. Design tools are learning to speak code. That bridge is being built. Coding tools aren't learning to speak design.
|
|
41
39
|
|
|
42
40
|
You can vibe-code an entire app in an afternoon. It works. It also looks like every other vibe-coded app — the same shadcn components, the same layouts, the same sea of sameness. No research, no brand thinking, no system, no critique. AI coding tools are powerful builders with zero design process.
|
|
43
41
|
|
|
44
|
-
AI didn't cause this. Skipping design thinking did.
|
|
45
|
-
|
|
46
42
|
GSP brings design fundamentals into the tools developers already use. Research. Brand. Design systems. UI patterns. Accessibility. Critique. The process that makes design consistent — running in your terminal.
|
|
47
43
|
|
|
48
44
|
For designers, it's the other direction. Code-first environments without giving up your process. Your design decisions become tokens, specs, and components — not a Figma file someone rebuilds from scratch.
|
|
49
45
|
|
|
50
|
-
Both disciplines. Same pipeline. Same environment.
|
|
46
|
+
Both disciplines. Same pipeline. Same environment. The missing half of the bridge.
|
|
47
|
+
|
|
48
|
+
---
|
|
49
|
+
|
|
50
|
+
## Quick Start
|
|
51
|
+
|
|
52
|
+
```bash
|
|
53
|
+
# 1. Install
|
|
54
|
+
npx get-shit-pretty
|
|
55
|
+
|
|
56
|
+
# 2. Define your brand — or skip with a style preset
|
|
57
|
+
/gsp-brand-brief # guided brand definition
|
|
58
|
+
/gsp-style cyberpunk # instant tokens from 35 presets
|
|
59
|
+
|
|
60
|
+
# 3. Build something
|
|
61
|
+
/gsp-project-brief # scope your project
|
|
62
|
+
/gsp-project-build # parallel agents build it
|
|
63
|
+
```
|
|
51
64
|
|
|
52
|
-
|
|
65
|
+
Or run `/gsp-start` — it detects your workspace state and routes you forward.
|
|
53
66
|
|
|
54
67
|
---
|
|
55
68
|
|
|
@@ -58,25 +71,72 @@ The missing half of the bridge.
|
|
|
58
71
|
GSP follows a **dual-diamond** architecture — two complete design cycles that take you from nothing to shipped.
|
|
59
72
|
|
|
60
73
|
```
|
|
61
|
-
/gsp
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
74
|
+
/gsp-start → picks up where you left off, routes you forward
|
|
75
|
+
|
|
76
|
+
◆ Diamond 1 — Branding ◆ Diamond 2 — Project
|
|
77
|
+
┌──────────────────────────────┐ ┌──────────────────────────────┐
|
|
78
|
+
│ brand-brief │ │ project-brief │
|
|
79
|
+
│ ↓ │ │ ↓ │
|
|
80
|
+
│ brand-research │ │ project-research │
|
|
81
|
+
│ ↓ │ │ ↓ │
|
|
82
|
+
│ brand-strategy │ │ project-design │
|
|
83
|
+
│ (includes voice │ │ ↓ │
|
|
84
|
+
│ and messaging) │ │ project-critique ←──┐ │
|
|
85
|
+
│ ↓ │ │ ↓ loop │ │
|
|
86
|
+
│ brand-identity │ │ project-build │ │
|
|
87
|
+
│ (4 expertise skills │ │ ↓ │ │
|
|
88
|
+
│ run in parallel) │ │ project-review ─────┘ │
|
|
89
|
+
│ ↓ │ └──────────────────────────────┘
|
|
90
|
+
│ brand-guidelines │
|
|
91
|
+
└──────────────────────────────┘
|
|
77
92
|
```
|
|
78
93
|
|
|
79
|
-
All artifacts live in `.design/` within your project directory.
|
|
94
|
+
All artifacts live in `.design/` within your project directory. State tracked in `STATE.md` with automatic session recovery.
|
|
95
|
+
|
|
96
|
+
---
|
|
97
|
+
|
|
98
|
+
## Style Presets
|
|
99
|
+
|
|
100
|
+
35 built-in design styles. Fuzzy-matched — describe what you want, get production-ready tokens.
|
|
101
|
+
|
|
102
|
+
```bash
|
|
103
|
+
/gsp-style cyberpunk # exact match
|
|
104
|
+
/gsp-style "something dark and techy" # fuzzy → cyberpunk, terminal, modern-dark
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
| Category | Presets |
|
|
108
|
+
|----------|---------|
|
|
109
|
+
| **Industrial** | nothing |
|
|
110
|
+
| **Minimal** | swiss-minimalist, flat-design, monochrome, minimal-dark |
|
|
111
|
+
| **Modern** | professional, saas, enterprise, fluent, material, modern-dark, glassmorphism, liquid-glass |
|
|
112
|
+
| **Creative** | neubrutalism, cyberpunk, maximalism, bold-typography, playful-geometric, sketch, kinetic |
|
|
113
|
+
| **Elegant** | luxury, art-deco, academia, humanist-literary |
|
|
114
|
+
| **Organic** | botanical, organic |
|
|
115
|
+
| **Editorial** | newsprint |
|
|
116
|
+
| **Nostalgic** | retro, vaporwave |
|
|
117
|
+
| **Tactile** | claymorphism, neumorphism, industrial |
|
|
118
|
+
| **Tech** | terminal, web3 |
|
|
119
|
+
| **Geometric** | bauhaus |
|
|
120
|
+
|
|
121
|
+
Each preset produces design tokens (W3C format), `STYLE.md`, and foundation chunks. Skip the full branding diamond when you just need a solid starting point.
|
|
122
|
+
|
|
123
|
+
---
|
|
124
|
+
|
|
125
|
+
## Expertise Skills
|
|
126
|
+
|
|
127
|
+
Seven standalone design tools that work independently or as part of the pipeline.
|
|
128
|
+
|
|
129
|
+
| Skill | What it does |
|
|
130
|
+
|-------|--------------|
|
|
131
|
+
| `/gsp-color` | Palettes, contrast, semantic mapping, dark mode (OKLCH) |
|
|
132
|
+
| `/gsp-typography` | Scale, pairing, fluid type, vertical rhythm |
|
|
133
|
+
| `/gsp-visuals` | Imagery, 3D, video, textures, surface treatments |
|
|
134
|
+
| `/gsp-icons` | Library selection, sizing, containers, custom SVG direction |
|
|
135
|
+
| `/gsp-logo` | Concepts, variations, usage rules, clear space |
|
|
136
|
+
| `/gsp-accessibility` | Quick contrast checks and token WCAG audits (inline) |
|
|
137
|
+
| `/gsp-style` | Apply a preset — tokens without the full branding diamond |
|
|
138
|
+
|
|
139
|
+
These are the knowledge owners in GSP's two-layer architecture. Pipeline skills invoke them during orchestration, but you can run any of them directly for standalone design decisions.
|
|
80
140
|
|
|
81
141
|
---
|
|
82
142
|
|
|
@@ -84,31 +144,37 @@ All artifacts live in `.design/` within your project directory.
|
|
|
84
144
|
|
|
85
145
|
Build your brand from research to design system. Each phase feeds the next.
|
|
86
146
|
|
|
87
|
-
> **Already have a brand?**
|
|
147
|
+
> **Already have a brand?** Run `/gsp-start` and choose "evolve existing brand" — it sets up the `.design/` structure, then routes you to `/gsp-brand-audit` to assess what you have before evolving it.
|
|
148
|
+
|
|
149
|
+
#### 1. `/gsp-brand-brief` — Define your brand
|
|
150
|
+
|
|
151
|
+
Guided Q&A — who it's for, why it exists, what it should feel like. The brief that feeds every downstream phase.
|
|
152
|
+
|
|
153
|
+
**Creates:** `.design/branding/{brand}/BRIEF.md`
|
|
88
154
|
|
|
89
|
-
####
|
|
155
|
+
#### 2. `/gsp-brand-research` — Market landscape
|
|
90
156
|
|
|
91
157
|
Research your audience, competitors, and market position. Understand the terrain before making decisions.
|
|
92
158
|
|
|
93
159
|
**Creates:** `.design/branding/{brand}/discover/`
|
|
94
160
|
|
|
95
|
-
####
|
|
161
|
+
#### 3. `/gsp-brand-strategy` — Who you are and how you sound
|
|
96
162
|
|
|
97
163
|
Define your archetype, positioning, and personality using the Kapferer Brand Identity Prism. Includes voice, tone spectrum, messaging framework, and naming conventions — verbal identity is part of strategy.
|
|
98
164
|
|
|
99
165
|
**Creates:** `.design/branding/{brand}/strategy/`
|
|
100
166
|
|
|
101
|
-
####
|
|
167
|
+
#### 4. `/gsp-brand-identity` — How you look
|
|
102
168
|
|
|
103
|
-
Create your visual identity — logo directions, color palette, typography system, imagery style.
|
|
169
|
+
Create your visual identity — logo directions, color palette, typography system, imagery style. Four expertise skills (logo, color, typography, visuals) run in parallel for speed.
|
|
104
170
|
|
|
105
171
|
**Creates:** `.design/branding/{brand}/identity/`
|
|
106
172
|
|
|
107
|
-
####
|
|
173
|
+
#### 5. `/gsp-brand-guidelines` — Your design system
|
|
108
174
|
|
|
109
|
-
|
|
175
|
+
Operationalize your brand — assemble tokens, `STYLE.md`, component mapping, and guidelines. Everything codified and ready to build with.
|
|
110
176
|
|
|
111
|
-
**Creates:** `.design/branding/{brand}/
|
|
177
|
+
**Creates:** `.design/branding/{brand}/system/`
|
|
112
178
|
|
|
113
179
|
---
|
|
114
180
|
|
|
@@ -116,92 +182,108 @@ Translate your brand into tokens, components, and a living design system. Everyt
|
|
|
116
182
|
|
|
117
183
|
Design and build a product using your brand. Critique loops catch issues before they ship.
|
|
118
184
|
|
|
119
|
-
#### 1. `/gsp
|
|
185
|
+
#### 1. `/gsp-project-brief` — Scope what you're building
|
|
120
186
|
|
|
121
187
|
Define your project through guided Q&A — what it does, who it's for, what screens it needs. The brief that guides everything downstream.
|
|
122
188
|
|
|
123
189
|
**Creates:** `.design/projects/{project}/BRIEF.md`
|
|
124
190
|
|
|
125
|
-
#### 2. `/gsp
|
|
191
|
+
#### 2. `/gsp-project-research` — Patterns and precedents
|
|
126
192
|
|
|
127
193
|
Deep research into UX patterns, competitor approaches, and technical considerations for your specific project.
|
|
128
194
|
|
|
129
195
|
**Creates:** `.design/projects/{project}/research/`
|
|
130
196
|
|
|
131
|
-
#### 3. `/gsp
|
|
197
|
+
#### 3. `/gsp-project-design` — Screens and flows
|
|
132
198
|
|
|
133
199
|
Design your UI screens and interaction flows following Apple HIG patterns. Layout, navigation, states, responsive behavior — documented to build from.
|
|
134
200
|
|
|
135
201
|
**Creates:** `.design/projects/{project}/design/`
|
|
136
202
|
|
|
137
|
-
#### 4. `/gsp
|
|
203
|
+
#### 4. `/gsp-project-critique` — Critique + accessibility
|
|
138
204
|
|
|
139
|
-
Two parallel audits: structured design critique
|
|
205
|
+
Two parallel audits: structured design critique (Nielsen's 10 heuristics + brand contract scoring) and WCAG 2.2 AA accessibility check. Mixed-model assignment — critic runs on your model while the accessibility auditor runs on Sonnet, eliminating rate-limit competition. Brand constraint violations auto-fail.
|
|
140
206
|
|
|
141
207
|
**Creates:** `.design/projects/{project}/critique/`
|
|
142
208
|
|
|
143
|
-
#### 5. `/gsp
|
|
209
|
+
#### 5. `/gsp-project-build` — Designs to code
|
|
144
210
|
|
|
145
|
-
|
|
211
|
+
Seven-phase parallel build pipeline: scaffold, foundations, review, components (parallel wave), screens (parallel wave), extraction review, finalize. Round-robin model assignment (Opus/Sonnet) distributes rate-limit pressure across agents. ~47% faster than sequential builds.
|
|
146
212
|
|
|
147
213
|
**Creates:** Components and styles in your codebase
|
|
148
214
|
|
|
149
|
-
#### 6. `/gsp
|
|
215
|
+
#### 6. `/gsp-project-review` — QA against designs
|
|
150
216
|
|
|
151
|
-
Validate what was built against the original design intent. Catches drift between design decisions and implementation.
|
|
217
|
+
Validate what was built against the original design intent. Catches drift between design decisions and implementation. Pass/Conditional/Fail verdict.
|
|
152
218
|
|
|
153
219
|
**Creates:** `.design/projects/{project}/review/`
|
|
154
220
|
|
|
155
221
|
---
|
|
156
222
|
|
|
157
|
-
##
|
|
223
|
+
## Skills
|
|
158
224
|
|
|
159
225
|
### Entry
|
|
160
226
|
|
|
161
|
-
|
|
|
162
|
-
|
|
163
|
-
| `/gsp
|
|
164
|
-
| `/gsp
|
|
165
|
-
| `/gsp
|
|
227
|
+
| Skill | What it does |
|
|
228
|
+
|-------|--------------|
|
|
229
|
+
| `/gsp-start` | Pick up where you left off — routes you forward |
|
|
230
|
+
| `/gsp-progress` | Check project status |
|
|
231
|
+
| `/gsp-help` | Show skill reference |
|
|
166
232
|
|
|
167
233
|
### Branding
|
|
168
234
|
|
|
169
|
-
|
|
|
170
|
-
|
|
171
|
-
| `/gsp
|
|
172
|
-
| `/gsp
|
|
173
|
-
| `/gsp
|
|
174
|
-
| `/gsp
|
|
175
|
-
| `/gsp
|
|
176
|
-
| `/gsp
|
|
235
|
+
| Skill | What it does |
|
|
236
|
+
|-------|--------------|
|
|
237
|
+
| `/gsp-brand-brief` | Define your brand through guided Q&A |
|
|
238
|
+
| `/gsp-brand-audit` | Audit an existing brand before evolving it |
|
|
239
|
+
| `/gsp-brand-research` | Research market, audience, competitors |
|
|
240
|
+
| `/gsp-brand-strategy` | Define archetype, positioning, personality, voice, messaging |
|
|
241
|
+
| `/gsp-brand-identity` | Create visual identity — logo, color, type |
|
|
242
|
+
| `/gsp-brand-guidelines` | Build design system — tokens, STYLE.md, components |
|
|
243
|
+
| `/gsp-brand-refine` | Surgical token and palette adjustments mid-project |
|
|
244
|
+
| `/gsp-brand-sync` | Sync brand to match a project's shipped state |
|
|
177
245
|
|
|
178
246
|
### Project
|
|
179
247
|
|
|
180
|
-
|
|
|
181
|
-
|
|
182
|
-
| `/gsp
|
|
183
|
-
| `/gsp
|
|
184
|
-
| `/gsp
|
|
185
|
-
| `/gsp
|
|
186
|
-
| `/gsp
|
|
187
|
-
| `/gsp
|
|
188
|
-
|
|
189
|
-
###
|
|
190
|
-
|
|
191
|
-
|
|
|
192
|
-
|
|
193
|
-
| `/gsp
|
|
194
|
-
| `/gsp
|
|
195
|
-
| `/gsp
|
|
196
|
-
| `/gsp
|
|
197
|
-
| `/gsp
|
|
198
|
-
| `/gsp
|
|
248
|
+
| Skill | What it does |
|
|
249
|
+
|-------|--------------|
|
|
250
|
+
| `/gsp-project-brief` | Scope through guided Q&A |
|
|
251
|
+
| `/gsp-project-research` | UX patterns, competitor analysis |
|
|
252
|
+
| `/gsp-project-design` | Design screens and interaction flows |
|
|
253
|
+
| `/gsp-project-critique` | Nielsen's heuristics + WCAG 2.2 AA audit |
|
|
254
|
+
| `/gsp-project-build` | Translate designs to production code |
|
|
255
|
+
| `/gsp-project-review` | QA validation against designs |
|
|
256
|
+
|
|
257
|
+
### Expertise
|
|
258
|
+
|
|
259
|
+
| Skill | What it does |
|
|
260
|
+
|-------|--------------|
|
|
261
|
+
| `/gsp-color` | Design color systems — palettes, contrast, dark mode |
|
|
262
|
+
| `/gsp-typography` | Design type systems — scale, pairing, fluid type |
|
|
263
|
+
| `/gsp-visuals` | Define visual direction — imagery, textures, 3D |
|
|
264
|
+
| `/gsp-icons` | Design icon systems — library, sizing, custom SVG |
|
|
265
|
+
| `/gsp-logo` | Design logo directions — concepts, variations, rules |
|
|
266
|
+
| `/gsp-accessibility` | Quick contrast checks and token WCAG audits |
|
|
267
|
+
| `/gsp-style` | Apply a style preset — tokens without the full diamond |
|
|
268
|
+
|
|
269
|
+
### Utilities
|
|
270
|
+
|
|
271
|
+
| Skill | What it does |
|
|
272
|
+
|-------|--------------|
|
|
273
|
+
| `/gsp-design-system` | Scan and document existing design system state |
|
|
274
|
+
| `/gsp-scaffold` | Deterministic stack setup — install deps, create configs, verify build |
|
|
275
|
+
| `/gsp-accessibility-audit` | Full WCAG 2.2 AA accessibility audit |
|
|
276
|
+
| `/gsp-add-reference` | Add reference material to a project |
|
|
277
|
+
| `/gsp-doctor` | Check project health |
|
|
278
|
+
| `/gsp-update` | Update GSP to latest version |
|
|
279
|
+
| `/gsp-art` | Craft ASCII art interactively |
|
|
280
|
+
| `/gsp-pretty` | Surprise ASCII art in the terminal |
|
|
199
281
|
|
|
200
282
|
---
|
|
201
283
|
|
|
202
284
|
## Agents
|
|
203
285
|
|
|
204
|
-
GSP ships
|
|
286
|
+
GSP ships 11 specialized agents, each modeled after a real design discipline:
|
|
205
287
|
|
|
206
288
|
| Agent | Role |
|
|
207
289
|
|-------|------|
|
|
@@ -217,7 +299,93 @@ GSP ships with 11 specialized agents, each modeled after a real design disciplin
|
|
|
217
299
|
| **Project Reviewer** | QA validation — implementation against design intent |
|
|
218
300
|
| **Accessibility Auditor** | WCAG 2.2 AA compliance auditing |
|
|
219
301
|
|
|
220
|
-
Agents are thin stubs (~12 lines) at session start — full methodology loads on-demand
|
|
302
|
+
Agents are thin stubs (~12 lines) at session start — full methodology loads on-demand when spawned. Each agent gets its own context window for focused work.
|
|
303
|
+
|
|
304
|
+
### Parallel execution
|
|
305
|
+
|
|
306
|
+
Build phases spawn agents in parallel waves with round-robin model assignment:
|
|
307
|
+
|
|
308
|
+
```
|
|
309
|
+
Orchestrator
|
|
310
|
+
│
|
|
311
|
+
├── Wave 1: Components (parallel)
|
|
312
|
+
│ ├── Agent A (Opus) → Button, Card, Input
|
|
313
|
+
│ ├── Agent B (Sonnet) → Nav, Footer, Sidebar
|
|
314
|
+
│ └── Agent C (Opus) → Hero, Modal, Toast
|
|
315
|
+
│ └── ✓ SubagentStop hooks verify each agent's output
|
|
316
|
+
│
|
|
317
|
+
└── Wave 2: Screens (parallel)
|
|
318
|
+
├── Agent D (Sonnet) → Home
|
|
319
|
+
├── Agent E (Opus) → Dashboard
|
|
320
|
+
└── Agent F (Sonnet) → Settings
|
|
321
|
+
└── ✓ SubagentStop hooks verify each agent's output
|
|
322
|
+
```
|
|
323
|
+
|
|
324
|
+
Components build first so screens can compose from them. Mixed-model assignment distributes rate-limit pressure — no single model gets overloaded.
|
|
325
|
+
|
|
326
|
+
---
|
|
327
|
+
|
|
328
|
+
## Architecture
|
|
329
|
+
|
|
330
|
+
### Two-layer skills
|
|
331
|
+
|
|
332
|
+
```
|
|
333
|
+
┌─────────────────────────────────────────────────┐
|
|
334
|
+
│ Pipeline Skills (orchestrators) │
|
|
335
|
+
│ brand-brief → research → strategy → │
|
|
336
|
+
│ identity → guidelines │
|
|
337
|
+
│ project-brief → research → design → │
|
|
338
|
+
│ critique → build → review │
|
|
339
|
+
│ │
|
|
340
|
+
│ ┌─────────────────────────────────────────┐ │
|
|
341
|
+
│ │ Expertise Skills (knowledge owners) │ │
|
|
342
|
+
│ │ color · typography · visuals · icons │ │
|
|
343
|
+
│ │ logo · accessibility · style │ │
|
|
344
|
+
│ │ ← invoked by pipeline OR standalone │ │
|
|
345
|
+
│ └─────────────────────────────────────────┘ │
|
|
346
|
+
│ │
|
|
347
|
+
│ Utilities │
|
|
348
|
+
│ start · progress · help · doctor · scaffold │
|
|
349
|
+
│ art · pretty · update │
|
|
350
|
+
└─────────────────────────────────────────────────┘
|
|
351
|
+
```
|
|
352
|
+
|
|
353
|
+
Pipeline skills own workflow — state management, phase gates, agent spawning. Expertise skills own domain knowledge — palettes, type scales, visual direction. Pipeline skills read from expertise skills, never the other way around. No domain knowledge is duplicated across skills.
|
|
354
|
+
|
|
355
|
+
### `.design/` artifacts
|
|
356
|
+
|
|
357
|
+
Every phase writes structured output to `.design/`:
|
|
358
|
+
|
|
359
|
+
```
|
|
360
|
+
.design/
|
|
361
|
+
├── branding/{brand}/
|
|
362
|
+
│ ├── BRIEF.md, STATE.md, config.json
|
|
363
|
+
│ ├── discover/ ← brand-research
|
|
364
|
+
│ ├── strategy/ ← brand-strategy (includes voice + messaging)
|
|
365
|
+
│ ├── identity/ ← brand-identity (color, type, logo, imagery)
|
|
366
|
+
│ └── system/ ← brand-guidelines (tokens, STYLE.md, components)
|
|
367
|
+
│
|
|
368
|
+
├── projects/{project}/
|
|
369
|
+
│ ├── BRIEF.md, STATE.md, config.json
|
|
370
|
+
│ ├── research/ ← project-research
|
|
371
|
+
│ ├── design/ ← project-design (screens, flows, preview.html)
|
|
372
|
+
│ ├── critique/ ← project-critique (Nielsen + WCAG scores)
|
|
373
|
+
│ ├── build/ ← project-build (logs, status, manifests)
|
|
374
|
+
│ └── review/ ← project-review (acceptance report, verdict)
|
|
375
|
+
│
|
|
376
|
+
└── CHANGELOG.md ← aggregated across all projects
|
|
377
|
+
```
|
|
378
|
+
|
|
379
|
+
### Hooks and integrations
|
|
380
|
+
|
|
381
|
+
- **SessionStart** — context recovery script re-injects active brand/project state on session resume
|
|
382
|
+
- **SubagentStop** — 10 verification hooks confirm deliverables after every agent completes
|
|
383
|
+
- **PostToolUse** — lint-check on builder agent edits
|
|
384
|
+
- **Statusline** — live display of model, phase, prettiness score, context usage (Claude Code)
|
|
385
|
+
- **Figma MCP** — read designs directly from Figma into your pipeline
|
|
386
|
+
- **GitHub MCP** — issues and PRs accessible from within the pipeline
|
|
387
|
+
|
|
388
|
+
Zero production dependencies. The installer and all scripts use pure Node.js builtins.
|
|
221
389
|
|
|
222
390
|
---
|
|
223
391
|
|
|
@@ -229,10 +397,10 @@ GSP works across all major AI coding tools. The installer converts Claude Code's
|
|
|
229
397
|
|---------|:-----------:|:--------:|:----------:|:---------:|
|
|
230
398
|
| Skills | 34 | 34 | 34 | 34 |
|
|
231
399
|
| Agents | 11 | 11 | 11 (experimental) | — |
|
|
232
|
-
| Slash syntax | `/gsp
|
|
233
|
-
|
|
|
234
|
-
| References | Yes | Yes | Yes | Yes |
|
|
400
|
+
| Slash syntax | `/gsp-command` | `/gsp-command` | `/gsp-command` | `$gsp-command` |
|
|
401
|
+
| MCP servers | Figma + GitHub | — | — | — |
|
|
235
402
|
| Statusline hooks | Yes | — | — | — |
|
|
403
|
+
| Prompts + templates | Yes | Yes | Yes | Yes |
|
|
236
404
|
|
|
237
405
|
### Runtime directories
|
|
238
406
|
|
|
@@ -243,7 +411,7 @@ GSP works across all major AI coding tools. The installer converts Claude Code's
|
|
|
243
411
|
| Gemini CLI | `~/.gemini/` | `~/.gemini/skills/` | `~/.gemini/agents/` |
|
|
244
412
|
| Codex CLI | `~/.codex/` | `~/.agents/skills/` | — |
|
|
245
413
|
|
|
246
|
-
> **Codex note:** Skills are discovered at `~/.agents/skills/`, not `~/.codex/skills/`.
|
|
414
|
+
> **Codex note:** Skills are discovered at `~/.agents/skills/`, not `~/.codex/skills/`. Codex does not support agent `.md` files.
|
|
247
415
|
|
|
248
416
|
---
|
|
249
417
|
|
|
@@ -293,14 +461,15 @@ npx get-shit-pretty --codex --global --uninstall
|
|
|
293
461
|
</details>
|
|
294
462
|
|
|
295
463
|
<details>
|
|
296
|
-
<summary><strong>
|
|
464
|
+
<summary><strong>Cherry-pick skills</strong></summary>
|
|
465
|
+
|
|
466
|
+
Don't need the full pack? Pick individual skills via [The Agent Skills Directory](https://skills.sh/):
|
|
297
467
|
|
|
298
468
|
```bash
|
|
299
|
-
|
|
300
|
-
node bin/install.js --claude --local
|
|
469
|
+
npx skills add jubscodes/get-shit-pretty
|
|
301
470
|
```
|
|
302
471
|
|
|
303
|
-
|
|
472
|
+
Select individual skills to install. Works with Claude Code, Cursor, Copilot, Gemini, and 20+ other agents.
|
|
304
473
|
|
|
305
474
|
</details>
|
|
306
475
|
|
|
@@ -312,38 +481,61 @@ Symlinks skills and agents to `.claude/` — edits to `gsp/` are reflected immed
|
|
|
312
481
|
get-shit-pretty/
|
|
313
482
|
├── bin/
|
|
314
483
|
│ └── install.js Multi-runtime installer
|
|
315
|
-
├── scripts/ Hook scripts
|
|
484
|
+
├── scripts/ Hook scripts (statusline, lint-check, context recovery)
|
|
316
485
|
├── gsp/ Source of truth for all content
|
|
317
|
-
│ ├── agents/ 11 subagents (gsp-*.md stubs)
|
|
318
|
-
│ ├── skills/ 34 skills (*/SKILL.md + methodology/
|
|
486
|
+
│ ├── agents/ 11 subagents (gsp-*.md stubs + methodology in skills)
|
|
487
|
+
│ ├── skills/ 34 skills (*/SKILL.md + domains/ + references/ + methodology/)
|
|
319
488
|
│ ├── hooks/ Hooks (hooks.json)
|
|
320
|
-
│
|
|
321
|
-
|
|
322
|
-
├──
|
|
323
|
-
│ ├──
|
|
324
|
-
│ └──
|
|
325
|
-
├── package.json npm package config
|
|
489
|
+
│ └── templates/ Config, state, brief, roadmap templates
|
|
490
|
+
├── dev/ Internal dev tools (not installed to runtimes)
|
|
491
|
+
│ ├── skills/ Dev skills (gspdev-audit, gspdev-benchmark, gspdev-publish, ...)
|
|
492
|
+
│ ├── scripts/ Test suite, token budget tools, benchmarking
|
|
493
|
+
│ └── benchmarks/ Token budget snapshots per release
|
|
494
|
+
├── package.json npm package config (zero production dependencies)
|
|
326
495
|
├── VERSION Single source for version string
|
|
327
496
|
└── CLAUDE.md AI agent instructions for this repo
|
|
328
497
|
```
|
|
329
498
|
|
|
330
|
-
The installer reads from `gsp/` and writes to each runtime's config directory.
|
|
331
|
-
|
|
332
499
|
---
|
|
333
500
|
|
|
334
501
|
## Contributing
|
|
335
502
|
|
|
336
|
-
|
|
503
|
+
GSP's architecture is designed to be approachable. Each skill is a self-contained directory with a `SKILL.md` and optional sibling files (`methodology/`, `domains/`, `references/`). No complex build step — edit source, see results.
|
|
504
|
+
|
|
505
|
+
### Where contributions are welcome
|
|
506
|
+
|
|
507
|
+
- **New style presets** — add a `.yml` + `.md` to `gsp/skills/gsp-style/styles/` and register in `INDEX.yml`
|
|
508
|
+
- **Expertise domain files** — expand design knowledge in `gsp/skills/gsp-color/domains/`, `gsp-typography/domains/`, etc.
|
|
509
|
+
- **Runtime support** — improve installer compatibility for OpenCode, Gemini, Codex, or add new runtimes
|
|
510
|
+
- **Test coverage** — the test suite has 65+ tests across 9 suites but always needs more
|
|
511
|
+
- **Documentation** — skill descriptions, examples, tutorials
|
|
512
|
+
|
|
513
|
+
### Local development
|
|
337
514
|
|
|
338
515
|
```bash
|
|
339
|
-
#
|
|
516
|
+
# Clone and install with symlinks (edits to gsp/ reflect immediately)
|
|
340
517
|
node bin/install.js --claude --local
|
|
341
518
|
|
|
342
|
-
# Run the integrity test suite
|
|
519
|
+
# Run the integrity test suite (9 suites: versions, contracts, installer, runtime, templates, prompts, unit, tokenbudget)
|
|
343
520
|
bash dev/scripts/audit-tests.sh
|
|
521
|
+
|
|
522
|
+
# Run a single suite
|
|
523
|
+
bash dev/scripts/audit-tests.sh contracts
|
|
344
524
|
```
|
|
345
525
|
|
|
346
|
-
|
|
526
|
+
### Dev tools
|
|
527
|
+
|
|
528
|
+
| Tool | Purpose |
|
|
529
|
+
|------|---------|
|
|
530
|
+
| `/gspdev-audit` | Pipeline integrity checker — contracts, installer, runtime compat |
|
|
531
|
+
| `/gspdev-benchmark` | Token budget benchmarking — snapshots, comparisons, trajectory |
|
|
532
|
+
| `/gspdev-housekeeping` | Drift catching — version mismatches, stale references |
|
|
533
|
+
| `/gspdev-prompt-audit` | Semantic analysis of skills and agents |
|
|
534
|
+
| `/gspdev-publish` | Release workflow — bump, changelog, audit, tag |
|
|
535
|
+
|
|
536
|
+
See [CLAUDE.md](CLAUDE.md) for editing rules, architecture details, and key files.
|
|
537
|
+
|
|
538
|
+
**Issues:** [github.com/jubscodes/get-shit-pretty/issues](https://github.com/jubscodes/get-shit-pretty/issues)
|
|
347
539
|
|
|
348
540
|
---
|
|
349
541
|
|
package/bin/install.js
CHANGED
|
@@ -1779,7 +1779,7 @@ function finishInstall(settingsPath, settings, statuslineCommand, shouldInstallS
|
|
|
1779
1779
|
|
|
1780
1780
|
${c.bold}Get started:${c.reset}
|
|
1781
1781
|
${c.accent}${newCmd}${c.reset} ${c.secondary}start here — brand, project, or both${c.reset}
|
|
1782
|
-
${c.accent}${helpCmd}${c.reset} ${c.secondary}all
|
|
1782
|
+
${c.accent}${helpCmd}${c.reset} ${c.secondary}all skills${c.reset}
|
|
1783
1783
|
`);
|
|
1784
1784
|
}
|
|
1785
1785
|
}
|
package/gsp/hooks/hooks.json
CHANGED
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
"hooks": [
|
|
54
54
|
{
|
|
55
55
|
"type": "prompt",
|
|
56
|
-
"prompt": "The gsp-project-builder agent just finished. Verify: (1)
|
|
56
|
+
"prompt": "The gsp-project-builder agent just finished. Verify: (1) a log file was written under build/logs/ (foundations.md, component-*.md, or screen-*.md depending on execution mode), (2) no files were left with TODO/FIXME placeholder code. Note: build/INDEX.md is written at finalize, not by individual agents — do not flag its absence. Report any missing deliverables to the user."
|
|
57
57
|
}
|
|
58
58
|
]
|
|
59
59
|
},
|
|
@@ -65,6 +65,42 @@
|
|
|
65
65
|
"prompt": "The gsp-project-reviewer agent just finished. Verify: (1) acceptance-report.md was written, (2) issues.md was written, (3) review/INDEX.md was written, (4) verdict is clearly stated as Pass, Conditional Pass, or Fail. Report any issues to the user."
|
|
66
66
|
}
|
|
67
67
|
]
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
"matcher": "gsp-accessibility-auditor",
|
|
71
|
+
"hooks": [
|
|
72
|
+
{
|
|
73
|
+
"type": "prompt",
|
|
74
|
+
"prompt": "The gsp-accessibility-auditor agent just finished. Verify: (1) accessibility-audit.md was written, (2) accessibility-fixes.md was written. Report any missing deliverables to the user."
|
|
75
|
+
}
|
|
76
|
+
]
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
"matcher": "gsp-brand-auditor",
|
|
80
|
+
"hooks": [
|
|
81
|
+
{
|
|
82
|
+
"type": "prompt",
|
|
83
|
+
"prompt": "The gsp-brand-auditor agent just finished. Verify: (1) audit/INDEX.md was written, (2) audit/brand-inventory.md exists, (3) audit/coherence-assessment.md exists, (4) audit/market-fit.md exists, (5) audit/equity-analysis.md exists, (6) audit/evolution-map.md exists. Report any missing deliverables to the user."
|
|
84
|
+
}
|
|
85
|
+
]
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
"matcher": "gsp-brand-researcher",
|
|
89
|
+
"hooks": [
|
|
90
|
+
{
|
|
91
|
+
"type": "prompt",
|
|
92
|
+
"prompt": "The gsp-brand-researcher agent just finished. Verify: (1) discover/INDEX.md was written, (2) discover/market-landscape.md exists, (3) discover/competitive-audit.md exists, (4) discover/trend-analysis.md exists, (5) discover/mood-board-direction.md exists. Report any missing deliverables to the user."
|
|
93
|
+
}
|
|
94
|
+
]
|
|
95
|
+
},
|
|
96
|
+
{
|
|
97
|
+
"matcher": "gsp-brand-strategist",
|
|
98
|
+
"hooks": [
|
|
99
|
+
{
|
|
100
|
+
"type": "prompt",
|
|
101
|
+
"prompt": "The gsp-brand-strategist agent just finished. Verify: (1) strategy/INDEX.md was written, (2) strategy/positioning.md exists, (3) strategy/archetype.md exists, (4) strategy/brand-platform.md exists, (5) strategy/voice-and-tone.md exists, (6) strategy/messaging.md exists. Report any missing deliverables to the user."
|
|
102
|
+
}
|
|
103
|
+
]
|
|
68
104
|
}
|
|
69
105
|
]
|
|
70
106
|
}
|
|
@@ -107,16 +107,16 @@ The agent writes 5 chunks + INDEX.md (creative decisions only — no technical e
|
|
|
107
107
|
5. `brand-applications.md`
|
|
108
108
|
6. `INDEX.md`
|
|
109
109
|
|
|
110
|
-
## Step 3.5: Enrich with domain skills
|
|
110
|
+
## Step 3.5: Enrich with domain skills (parallel)
|
|
111
111
|
|
|
112
|
-
After the creative-director finishes, invoke domain skills
|
|
112
|
+
After the creative-director finishes, invoke all 4 domain skills in parallel — they operate on separate chunks with zero dependencies:
|
|
113
113
|
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
114
|
+
- **`/gsp-logo --enrich`** — reads `logo-directions.md`, enriches with construction geometry, variation specs, clear space rules, minimum size calculations.
|
|
115
|
+
- **`/gsp-color --enrich`** — reads `color-system.md`, generates OKLCH palettes via tints.dev, calculates WCAG contrast, writes `palettes.json`, enriches with contrast ratios and semantic mapping.
|
|
116
|
+
- **`/gsp-typography --enrich`** — reads `typography.md`, generates mathematical type scale, adds fluid type formulas, enriches with font loading instructions.
|
|
117
|
+
- **`/gsp-visuals --imagery --enrich`** — reads `imagery-style.md`, adds icon library specifics, CSS texture/treatment recipes, enriches with technical implementation details.
|
|
118
118
|
|
|
119
|
-
Each skill loads its own domain references on-demand — no upfront context cost.
|
|
119
|
+
Invoke all 4 using the Skill tool simultaneously. Each skill loads its own domain references on-demand — no upfront context cost.
|
|
120
120
|
|
|
121
121
|
## Step 4: Perspective check
|
|
122
122
|
|