get-shit-pretty 0.7.0 → 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 +301 -124
- package/bin/install.js +1 -1
- package/gsp/agents/gsp-accessibility-auditor.md +1 -60
- package/gsp/agents/gsp-brand-auditor.md +1 -61
- package/gsp/agents/gsp-brand-creative-director.md +10 -0
- package/gsp/agents/gsp-brand-engineer.md +1 -122
- package/gsp/agents/gsp-brand-researcher.md +11 -0
- package/gsp/agents/gsp-brand-strategist.md +1 -65
- package/gsp/agents/gsp-project-builder.md +17 -0
- package/gsp/agents/gsp-project-critic.md +11 -0
- package/gsp/agents/gsp-project-designer.md +11 -0
- package/gsp/agents/gsp-project-researcher.md +1 -74
- package/gsp/agents/gsp-project-reviewer.md +12 -0
- package/gsp/hooks/hooks.json +32 -14
- package/gsp/skills/get-shit-pretty/SKILL.md +2 -5
- package/gsp/skills/gsp-accessibility/SKILL.md +0 -1
- package/gsp/skills/gsp-accessibility-audit/SKILL.md +9 -8
- package/gsp/skills/gsp-accessibility-audit/methodology/gsp-accessibility-auditor.md +59 -0
- package/gsp/skills/gsp-add-reference/SKILL.md +0 -1
- package/gsp/skills/gsp-art/SKILL.md +13 -10
- package/gsp/skills/gsp-brand-audit/SKILL.md +4 -2
- package/gsp/skills/gsp-brand-audit/methodology/gsp-brand-auditor.md +61 -0
- package/gsp/skills/gsp-brand-brief/SKILL.md +129 -0
- package/gsp/skills/gsp-brand-guidelines/SKILL.md +13 -11
- package/gsp/skills/gsp-brand-guidelines/methodology/gsp-brand-engineer.md +122 -0
- package/gsp/skills/gsp-brand-identity/SKILL.md +19 -18
- package/gsp/{agents/gsp-creative-director.md → skills/gsp-brand-identity/methodology/gsp-brand-creative-director.md} +0 -9
- package/gsp/skills/gsp-brand-refine/SKILL.md +0 -1
- package/gsp/skills/gsp-brand-research/SKILL.md +13 -13
- package/gsp/{agents/gsp-researcher.md → skills/gsp-brand-research/methodology/gsp-brand-researcher.md} +0 -10
- package/gsp/skills/gsp-brand-strategy/SKILL.md +14 -14
- package/gsp/skills/gsp-brand-strategy/methodology/gsp-brand-strategist.md +65 -0
- package/gsp/skills/gsp-brand-sync/SKILL.md +60 -10
- package/gsp/skills/gsp-color/SKILL.md +0 -1
- package/gsp/skills/gsp-design-system/SKILL.md +0 -1
- package/gsp/skills/gsp-doctor/SKILL.md +0 -1
- package/gsp/skills/gsp-help/SKILL.md +10 -7
- package/gsp/skills/gsp-icons/SKILL.md +0 -1
- package/gsp/skills/gsp-logo/SKILL.md +0 -1
- package/gsp/skills/gsp-phase-transition/SKILL.md +0 -3
- package/gsp/skills/gsp-pretty/SKILL.md +25 -24
- package/gsp/skills/gsp-progress/SKILL.md +0 -1
- package/gsp/skills/gsp-project-brief/SKILL.md +51 -22
- package/gsp/skills/gsp-project-build/SKILL.md +216 -74
- package/gsp/skills/gsp-project-build/bento-grid.md +114 -0
- package/gsp/{agents/gsp-builder.md → skills/gsp-project-build/methodology/gsp-project-builder.md} +14 -16
- package/gsp/skills/gsp-project-critique/SKILL.md +21 -17
- package/gsp/{agents/gsp-critic.md → skills/gsp-project-critique/methodology/gsp-project-critic.md} +0 -11
- package/gsp/skills/gsp-project-design/SKILL.md +9 -6
- package/gsp/{agents/gsp-designer.md → skills/gsp-project-design/methodology/gsp-project-designer.md} +0 -11
- package/gsp/skills/gsp-project-research/SKILL.md +4 -2
- package/gsp/skills/gsp-project-research/methodology/gsp-project-researcher.md +73 -0
- package/gsp/skills/gsp-project-review/SKILL.md +8 -5
- package/gsp/{agents/gsp-reviewer.md → skills/gsp-project-review/methodology/gsp-project-reviewer.md} +0 -12
- package/gsp/skills/gsp-scaffold/SKILL.md +0 -1
- package/gsp/skills/gsp-start/SKILL.md +59 -210
- package/gsp/skills/gsp-style/SKILL.md +1 -2
- package/gsp/skills/gsp-style/styles/INDEX.yml +7 -1
- package/gsp/skills/gsp-style/styles/academia.md +751 -787
- package/gsp/skills/gsp-style/styles/art-deco.md +316 -352
- package/gsp/skills/gsp-style/styles/bauhaus.md +189 -225
- package/gsp/skills/gsp-style/styles/bold-typography.md +433 -469
- package/gsp/skills/gsp-style/styles/botanical.md +141 -177
- package/gsp/skills/gsp-style/styles/claymorphism.md +377 -413
- package/gsp/skills/gsp-style/styles/cyberpunk.md +419 -455
- package/gsp/skills/gsp-style/styles/enterprise.md +224 -260
- package/gsp/skills/gsp-style/styles/flat-design.md +119 -155
- package/gsp/skills/gsp-style/styles/fluent.md +0 -31
- package/gsp/skills/gsp-style/styles/glassmorphism.md +0 -36
- package/gsp/skills/gsp-style/styles/humanist-literary.md +0 -28
- package/gsp/skills/gsp-style/styles/industrial.md +406 -438
- package/gsp/skills/gsp-style/styles/kinetic.md +531 -563
- package/gsp/skills/gsp-style/styles/liquid-glass.md +0 -36
- package/gsp/skills/gsp-style/styles/luxury.md +402 -438
- package/gsp/skills/gsp-style/styles/material.md +555 -591
- package/gsp/skills/gsp-style/styles/maximalism.md +875 -911
- package/gsp/skills/gsp-style/styles/minimal-dark.md +442 -478
- package/gsp/skills/gsp-style/styles/modern-dark.md +390 -426
- package/gsp/skills/gsp-style/styles/monochrome.md +472 -504
- package/gsp/skills/gsp-style/styles/neubrutalism.md +354 -390
- package/gsp/skills/gsp-style/styles/neumorphism.md +195 -231
- package/gsp/skills/gsp-style/styles/newsprint.md +529 -565
- package/gsp/skills/gsp-style/styles/nothing.md +445 -0
- package/gsp/skills/gsp-style/styles/nothing.yml +146 -0
- package/gsp/skills/gsp-style/styles/organic.md +177 -213
- package/gsp/skills/gsp-style/styles/playful-geometric.md +211 -247
- package/gsp/skills/gsp-style/styles/professional.md +503 -539
- package/gsp/skills/gsp-style/styles/retro.md +664 -700
- package/gsp/skills/gsp-style/styles/saas.md +490 -526
- package/gsp/skills/gsp-style/styles/sketch.md +189 -225
- package/gsp/skills/gsp-style/styles/swiss-minimalist.md +195 -227
- package/gsp/skills/gsp-style/styles/terminal.md +99 -135
- package/gsp/skills/gsp-style/styles/vaporwave.md +356 -392
- package/gsp/skills/gsp-style/styles/web3.md +337 -373
- package/gsp/skills/gsp-typography/SKILL.md +0 -1
- package/gsp/skills/gsp-update/SKILL.md +0 -1
- package/gsp/skills/gsp-visuals/SKILL.md +0 -1
- package/gsp/templates/branding/config.json +3 -2
- package/gsp/templates/exports-index.md +0 -7
- package/gsp/templates/phases/build.md +13 -4
- package/gsp/templates/projects/config.json +3 -2
- package/gsp/templates/projects/roadmap.md +0 -7
- package/gsp/templates/projects/state.md +0 -4
- package/package.json +1 -1
- package/scripts/lint-check.sh +1 -1
- package/gsp/agents/gsp-ascii-artist.md +0 -66
- package/gsp/agents/gsp-brand-syncer.md +0 -126
- package/gsp/agents/gsp-campaign-director.md +0 -79
- package/gsp/agents/gsp-scoper.md +0 -85
- package/gsp/skills/gsp-launch/SKILL.md +0 -97
- package/gsp/skills/gsp-start/questioning.md +0 -87
- package/gsp/templates/phases/launch.md +0 -55
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.
|
|
51
47
|
|
|
52
|
-
|
|
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
|
+
```
|
|
64
|
+
|
|
65
|
+
Or run `/gsp-start` — it detects your workspace state and routes you forward.
|
|
53
66
|
|
|
54
67
|
---
|
|
55
68
|
|
|
@@ -58,27 +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
|
-
|
|
77
|
-
|
|
78
|
-
|
|
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
|
+
└──────────────────────────────┘
|
|
92
|
+
```
|
|
93
|
+
|
|
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
|
|
79
105
|
```
|
|
80
106
|
|
|
81
|
-
|
|
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.
|
|
82
140
|
|
|
83
141
|
---
|
|
84
142
|
|
|
@@ -86,31 +144,37 @@ All artifacts live in `.design/` within your project directory.
|
|
|
86
144
|
|
|
87
145
|
Build your brand from research to design system. Each phase feeds the next.
|
|
88
146
|
|
|
89
|
-
> **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
|
|
90
150
|
|
|
91
|
-
|
|
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`
|
|
154
|
+
|
|
155
|
+
#### 2. `/gsp-brand-research` — Market landscape
|
|
92
156
|
|
|
93
157
|
Research your audience, competitors, and market position. Understand the terrain before making decisions.
|
|
94
158
|
|
|
95
159
|
**Creates:** `.design/branding/{brand}/discover/`
|
|
96
160
|
|
|
97
|
-
####
|
|
161
|
+
#### 3. `/gsp-brand-strategy` — Who you are and how you sound
|
|
98
162
|
|
|
99
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.
|
|
100
164
|
|
|
101
165
|
**Creates:** `.design/branding/{brand}/strategy/`
|
|
102
166
|
|
|
103
|
-
####
|
|
167
|
+
#### 4. `/gsp-brand-identity` — How you look
|
|
104
168
|
|
|
105
|
-
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.
|
|
106
170
|
|
|
107
171
|
**Creates:** `.design/branding/{brand}/identity/`
|
|
108
172
|
|
|
109
|
-
####
|
|
173
|
+
#### 5. `/gsp-brand-guidelines` — Your design system
|
|
110
174
|
|
|
111
|
-
|
|
175
|
+
Operationalize your brand — assemble tokens, `STYLE.md`, component mapping, and guidelines. Everything codified and ready to build with.
|
|
112
176
|
|
|
113
|
-
**Creates:** `.design/branding/{brand}/
|
|
177
|
+
**Creates:** `.design/branding/{brand}/system/`
|
|
114
178
|
|
|
115
179
|
---
|
|
116
180
|
|
|
@@ -118,121 +182,210 @@ Translate your brand into tokens, components, and a living design system. Everyt
|
|
|
118
182
|
|
|
119
183
|
Design and build a product using your brand. Critique loops catch issues before they ship.
|
|
120
184
|
|
|
121
|
-
#### 1. `/gsp
|
|
185
|
+
#### 1. `/gsp-project-brief` — Scope what you're building
|
|
122
186
|
|
|
123
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.
|
|
124
188
|
|
|
125
189
|
**Creates:** `.design/projects/{project}/BRIEF.md`
|
|
126
190
|
|
|
127
|
-
#### 2. `/gsp
|
|
191
|
+
#### 2. `/gsp-project-research` — Patterns and precedents
|
|
128
192
|
|
|
129
193
|
Deep research into UX patterns, competitor approaches, and technical considerations for your specific project.
|
|
130
194
|
|
|
131
195
|
**Creates:** `.design/projects/{project}/research/`
|
|
132
196
|
|
|
133
|
-
#### 3. `/gsp
|
|
197
|
+
#### 3. `/gsp-project-design` — Screens and flows
|
|
134
198
|
|
|
135
199
|
Design your UI screens and interaction flows following Apple HIG patterns. Layout, navigation, states, responsive behavior — documented to build from.
|
|
136
200
|
|
|
137
201
|
**Creates:** `.design/projects/{project}/design/`
|
|
138
202
|
|
|
139
|
-
#### 4. `/gsp
|
|
203
|
+
#### 4. `/gsp-project-critique` — Critique + accessibility
|
|
140
204
|
|
|
141
|
-
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.
|
|
142
206
|
|
|
143
207
|
**Creates:** `.design/projects/{project}/critique/`
|
|
144
208
|
|
|
145
|
-
#### 5. `/gsp
|
|
209
|
+
#### 5. `/gsp-project-build` — Designs to code
|
|
146
210
|
|
|
147
|
-
|
|
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.
|
|
148
212
|
|
|
149
213
|
**Creates:** Components and styles in your codebase
|
|
150
214
|
|
|
151
|
-
#### 6. `/gsp
|
|
215
|
+
#### 6. `/gsp-project-review` — QA against designs
|
|
152
216
|
|
|
153
|
-
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.
|
|
154
218
|
|
|
155
219
|
**Creates:** `.design/projects/{project}/review/`
|
|
156
220
|
|
|
157
221
|
---
|
|
158
222
|
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
Create marketing campaign assets — landing page copy, social media content, launch materials. Your product ships with a story, not just code.
|
|
162
|
-
|
|
163
|
-
**Creates:** `.design/projects/{project}/launch/`
|
|
164
|
-
|
|
165
|
-
---
|
|
166
|
-
|
|
167
|
-
## Commands
|
|
223
|
+
## Skills
|
|
168
224
|
|
|
169
225
|
### Entry
|
|
170
226
|
|
|
171
|
-
|
|
|
172
|
-
|
|
173
|
-
| `/gsp
|
|
174
|
-
| `/gsp
|
|
175
|
-
| `/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 |
|
|
176
232
|
|
|
177
233
|
### Branding
|
|
178
234
|
|
|
179
|
-
|
|
|
180
|
-
|
|
181
|
-
| `/gsp
|
|
182
|
-
| `/gsp
|
|
183
|
-
| `/gsp
|
|
184
|
-
| `/gsp
|
|
185
|
-
| `/gsp
|
|
186
|
-
| `/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 |
|
|
187
245
|
|
|
188
246
|
### Project
|
|
189
247
|
|
|
190
|
-
|
|
|
191
|
-
|
|
192
|
-
| `/gsp
|
|
193
|
-
| `/gsp
|
|
194
|
-
| `/gsp
|
|
195
|
-
| `/gsp
|
|
196
|
-
| `/gsp
|
|
197
|
-
| `/gsp
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
| `/gsp
|
|
205
|
-
| `/gsp
|
|
206
|
-
| `/gsp
|
|
207
|
-
| `/gsp
|
|
208
|
-
| `/gsp
|
|
209
|
-
| `/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 |
|
|
210
281
|
|
|
211
282
|
---
|
|
212
283
|
|
|
213
284
|
## Agents
|
|
214
285
|
|
|
215
|
-
GSP ships
|
|
286
|
+
GSP ships 11 specialized agents, each modeled after a real design discipline:
|
|
216
287
|
|
|
217
288
|
| Agent | Role |
|
|
218
289
|
|-------|------|
|
|
219
290
|
| **Brand Strategist** | Brand strategy using Kapferer Prism, archetypes, positioning, voice, and messaging |
|
|
220
|
-
| **
|
|
221
|
-
| **
|
|
291
|
+
| **Brand Creative Director** | Visual identity — logo, color palettes, typography systems |
|
|
292
|
+
| **Brand Engineer** | Design systems — tokens, components, foundations, guidelines |
|
|
222
293
|
| **Brand Auditor** | Brand coherence assessment and evolution mapping |
|
|
223
|
-
| **
|
|
294
|
+
| **Brand Researcher** | Market landscape, competitor analysis, emerging patterns |
|
|
224
295
|
| **Project Researcher** | Deep UX patterns, competitor UX, technical approaches |
|
|
225
|
-
| **Project
|
|
226
|
-
| **
|
|
227
|
-
| **
|
|
296
|
+
| **Project Designer** | Screen design and interaction flows following Apple HIG |
|
|
297
|
+
| **Project Critic** | Structured critiques using Nielsen's 10 heuristics |
|
|
298
|
+
| **Project Builder** | Designs to production-ready frontend code |
|
|
299
|
+
| **Project Reviewer** | QA validation — implementation against design intent |
|
|
228
300
|
| **Accessibility Auditor** | WCAG 2.2 AA compliance auditing |
|
|
229
|
-
| **Design-to-Code Builder** | Designs to production-ready frontend code |
|
|
230
|
-
| **Deliverable Reviewer** | QA validation — implementation against design intent |
|
|
231
|
-
| **Campaign Director** | Marketing campaign asset libraries |
|
|
232
|
-
| **Codebase Scanner** | Tech stack detection and existing pattern inventory |
|
|
233
|
-
| **ASCII Artist** | Terminal ASCII art — context-aware art generation |
|
|
234
301
|
|
|
235
|
-
|
|
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.
|
|
236
389
|
|
|
237
390
|
---
|
|
238
391
|
|
|
@@ -242,12 +395,12 @@ GSP works across all major AI coding tools. The installer converts Claude Code's
|
|
|
242
395
|
|
|
243
396
|
| Feature | Claude Code | OpenCode | Gemini CLI | Codex CLI |
|
|
244
397
|
|---------|:-----------:|:--------:|:----------:|:---------:|
|
|
245
|
-
| Skills |
|
|
246
|
-
| Agents |
|
|
247
|
-
| Slash syntax | `/gsp
|
|
248
|
-
|
|
|
249
|
-
| References | Yes | Yes | Yes | Yes |
|
|
398
|
+
| Skills | 34 | 34 | 34 | 34 |
|
|
399
|
+
| Agents | 11 | 11 | 11 (experimental) | — |
|
|
400
|
+
| Slash syntax | `/gsp-command` | `/gsp-command` | `/gsp-command` | `$gsp-command` |
|
|
401
|
+
| MCP servers | Figma + GitHub | — | — | — |
|
|
250
402
|
| Statusline hooks | Yes | — | — | — |
|
|
403
|
+
| Prompts + templates | Yes | Yes | Yes | Yes |
|
|
251
404
|
|
|
252
405
|
### Runtime directories
|
|
253
406
|
|
|
@@ -258,7 +411,7 @@ GSP works across all major AI coding tools. The installer converts Claude Code's
|
|
|
258
411
|
| Gemini CLI | `~/.gemini/` | `~/.gemini/skills/` | `~/.gemini/agents/` |
|
|
259
412
|
| Codex CLI | `~/.codex/` | `~/.agents/skills/` | — |
|
|
260
413
|
|
|
261
|
-
> **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.
|
|
262
415
|
|
|
263
416
|
---
|
|
264
417
|
|
|
@@ -308,14 +461,15 @@ npx get-shit-pretty --codex --global --uninstall
|
|
|
308
461
|
</details>
|
|
309
462
|
|
|
310
463
|
<details>
|
|
311
|
-
<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/):
|
|
312
467
|
|
|
313
468
|
```bash
|
|
314
|
-
|
|
315
|
-
node bin/install.js --claude --local
|
|
469
|
+
npx skills add jubscodes/get-shit-pretty
|
|
316
470
|
```
|
|
317
471
|
|
|
318
|
-
|
|
472
|
+
Select individual skills to install. Works with Claude Code, Cursor, Copilot, Gemini, and 20+ other agents.
|
|
319
473
|
|
|
320
474
|
</details>
|
|
321
475
|
|
|
@@ -327,38 +481,61 @@ Symlinks skills and agents to `.claude/` — edits to `gsp/` are reflected immed
|
|
|
327
481
|
get-shit-pretty/
|
|
328
482
|
├── bin/
|
|
329
483
|
│ └── install.js Multi-runtime installer
|
|
330
|
-
├── scripts/ Hook scripts
|
|
484
|
+
├── scripts/ Hook scripts (statusline, lint-check, context recovery)
|
|
331
485
|
├── gsp/ Source of truth for all content
|
|
332
|
-
│ ├── agents/
|
|
333
|
-
│ ├── skills/
|
|
486
|
+
│ ├── agents/ 11 subagents (gsp-*.md stubs + methodology in skills)
|
|
487
|
+
│ ├── skills/ 34 skills (*/SKILL.md + domains/ + references/ + methodology/)
|
|
334
488
|
│ ├── hooks/ Hooks (hooks.json)
|
|
335
|
-
│
|
|
336
|
-
|
|
337
|
-
├──
|
|
338
|
-
│ ├──
|
|
339
|
-
│ └──
|
|
340
|
-
├── 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)
|
|
341
495
|
├── VERSION Single source for version string
|
|
342
496
|
└── CLAUDE.md AI agent instructions for this repo
|
|
343
497
|
```
|
|
344
498
|
|
|
345
|
-
The installer reads from `gsp/` and writes to each runtime's config directory.
|
|
346
|
-
|
|
347
499
|
---
|
|
348
500
|
|
|
349
501
|
## Contributing
|
|
350
502
|
|
|
351
|
-
|
|
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
|
|
352
514
|
|
|
353
515
|
```bash
|
|
354
|
-
#
|
|
516
|
+
# Clone and install with symlinks (edits to gsp/ reflect immediately)
|
|
355
517
|
node bin/install.js --claude --local
|
|
356
518
|
|
|
357
|
-
# Run the integrity test suite
|
|
519
|
+
# Run the integrity test suite (9 suites: versions, contracts, installer, runtime, templates, prompts, unit, tokenbudget)
|
|
358
520
|
bash dev/scripts/audit-tests.sh
|
|
521
|
+
|
|
522
|
+
# Run a single suite
|
|
523
|
+
bash dev/scripts/audit-tests.sh contracts
|
|
359
524
|
```
|
|
360
525
|
|
|
361
|
-
|
|
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)
|
|
362
539
|
|
|
363
540
|
---
|
|
364
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
|
}
|