get-shit-pretty 0.6.3 → 0.7.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/README.md +13 -28
- package/bin/install.js +36 -20
- 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 +10 -28
- package/gsp/skills/get-shit-pretty/SKILL.md +11 -13
- package/gsp/skills/gsp-accessibility/SKILL.md +1 -2
- package/gsp/skills/gsp-accessibility-audit/SKILL.md +10 -9
- package/gsp/skills/gsp-accessibility-audit/methodology/gsp-accessibility-auditor.md +59 -0
- package/gsp/skills/gsp-add-reference/SKILL.md +5 -1
- package/gsp/skills/gsp-art/SKILL.md +18 -10
- package/gsp/skills/gsp-brand-audit/SKILL.md +6 -4
- 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 +14 -12
- package/gsp/skills/gsp-brand-guidelines/methodology/gsp-brand-engineer.md +122 -0
- package/gsp/skills/gsp-brand-identity/SKILL.md +14 -13
- package/gsp/{agents/gsp-creative-director.md → skills/gsp-brand-identity/methodology/gsp-brand-creative-director.md} +4 -13
- package/gsp/skills/gsp-brand-refine/SKILL.md +1 -2
- package/gsp/skills/gsp-brand-research/SKILL.md +14 -14
- package/gsp/{agents/gsp-researcher.md → skills/gsp-brand-research/methodology/gsp-brand-researcher.md} +1 -11
- package/gsp/skills/gsp-brand-strategy/SKILL.md +15 -15
- package/gsp/skills/gsp-brand-strategy/methodology/gsp-brand-strategist.md +65 -0
- package/gsp/skills/gsp-brand-sync/SKILL.md +63 -13
- package/gsp/skills/gsp-brand-sync/chunk-format.md +79 -0
- package/gsp/skills/gsp-color/SKILL.md +24 -57
- package/gsp/skills/gsp-color/chunk-format.md +79 -0
- package/gsp/skills/{gsp-palette/SKILL.md → gsp-color/domains/palette.md} +31 -101
- package/gsp/skills/gsp-color/domains/system.md +123 -0
- package/gsp/skills/gsp-design-system/SKILL.md +5 -1
- package/gsp/skills/gsp-doctor/SKILL.md +0 -1
- package/gsp/skills/gsp-help/SKILL.md +4 -5
- package/gsp/skills/gsp-icons/SKILL.md +1 -2
- package/gsp/skills/gsp-icons/chunk-format.md +79 -0
- package/gsp/skills/gsp-logo/SKILL.md +2 -3
- package/gsp/skills/gsp-logo/chunk-format.md +79 -0
- package/gsp/skills/gsp-phase-transition/SKILL.md +121 -0
- 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 +52 -23
- package/gsp/skills/gsp-project-build/SKILL.md +28 -19
- package/gsp/{agents/gsp-builder.md → skills/gsp-project-build/methodology/gsp-project-builder.md} +1 -17
- package/gsp/skills/gsp-project-critique/SKILL.md +17 -17
- package/gsp/{agents/gsp-critic.md → skills/gsp-project-critique/methodology/gsp-project-critic.md} +3 -14
- package/gsp/{references → skills/gsp-project-critique}/visual-taste.md +1 -1
- package/gsp/skills/gsp-project-design/SKILL.md +10 -7
- package/gsp/{agents/gsp-designer.md → skills/gsp-project-design/methodology/gsp-project-designer.md} +2 -13
- package/gsp/skills/gsp-project-research/SKILL.md +5 -3
- package/gsp/skills/gsp-project-research/methodology/gsp-project-researcher.md +73 -0
- package/gsp/skills/gsp-project-review/SKILL.md +9 -6
- package/gsp/{agents/gsp-reviewer.md → skills/gsp-project-review/methodology/gsp-project-reviewer.md} +1 -13
- 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 +5 -6
- package/gsp/skills/gsp-style/chunk-format.md +79 -0
- package/gsp/skills/gsp-style/style-preset-schema.md +124 -0
- 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/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 +28 -67
- package/gsp/skills/gsp-typography/chunk-format.md +79 -0
- package/gsp/skills/gsp-typography/domains/pairing.md +109 -0
- package/gsp/skills/gsp-typography/domains/scale.md +227 -0
- package/gsp/skills/gsp-typography/domains/system.md +108 -0
- package/gsp/skills/gsp-update/SKILL.md +0 -1
- package/gsp/skills/gsp-visuals/SKILL.md +81 -0
- package/gsp/skills/gsp-visuals/chunk-format.md +79 -0
- package/gsp/skills/{gsp-3d/SKILL.md → gsp-visuals/domains/3d.md} +62 -47
- package/gsp/skills/{gsp-images/SKILL.md → gsp-visuals/domains/imagery.md} +17 -69
- package/gsp/skills/{gsp-textures/SKILL.md → gsp-visuals/domains/textures.md} +54 -48
- package/gsp/skills/{gsp-video/SKILL.md → gsp-visuals/domains/video.md} +53 -47
- package/gsp/templates/branding/config.json +1 -1
- package/gsp/templates/exports-index.md +0 -7
- package/gsp/templates/phases/brief.md +1 -1
- package/gsp/templates/phases/critique.md +1 -1
- package/gsp/templates/phases/design.md +1 -1
- package/gsp/templates/phases/discover.md +1 -1
- package/gsp/templates/phases/identity.md +1 -1
- package/gsp/templates/phases/patterns.md +1 -1
- package/gsp/templates/phases/research.md +1 -1
- package/gsp/templates/phases/review.md +1 -1
- package/gsp/templates/phases/strategy.md +1 -1
- package/gsp/templates/projects/config.json +1 -1
- 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/references/phase-transitions.md +0 -132
- package/gsp/references/questioning.md +0 -87
- package/gsp/references/style-preset-schema.md +0 -63
- package/gsp/skills/gsp-launch/SKILL.md +0 -97
- package/gsp/skills/gsp-typescale/SKILL.md +0 -234
- package/gsp/templates/phases/launch.md +0 -55
- /package/gsp/{references → skills/gsp-accessibility-audit}/wcag-checklist.md +0 -0
- /package/gsp/{references → skills/gsp-art}/terminal-art.md +0 -0
- /package/gsp/{references → skills/gsp-brand-audit}/chunk-format.md +0 -0
- /package/gsp/{references → skills/gsp-brand-guidelines}/design-tokens.md +0 -0
- /package/gsp/{references → skills/gsp-brand-guidelines}/token-mapping.md +0 -0
- /package/gsp/{references → skills/gsp-brand-research}/design-trends.md +0 -0
- /package/gsp/{references → skills/gsp-brand-strategy}/brand-archetypes.md +0 -0
- /package/gsp/{references → skills/gsp-brand-strategy}/brand-prism.md +0 -0
- /package/gsp/{references → skills/gsp-brand-strategy}/positioning-frameworks.md +0 -0
- /package/gsp/{references → skills/gsp-brand-strategy}/voice-tone.md +0 -0
- /package/gsp/{references → skills/gsp-color/references}/color-composition.md +0 -0
- /package/gsp/{references → skills/gsp-project-build}/visual-effects.md +0 -0
- /package/gsp/{references → skills/gsp-project-critique}/anti-patterns.md +0 -0
- /package/gsp/{references → skills/gsp-project-critique}/nielsen-heuristics.md +0 -0
- /package/gsp/{references → skills/gsp-project-design}/apple-hig-patterns.md +0 -0
- /package/gsp/{references → skills/gsp-project-design}/block-patterns.md +0 -0
- /package/gsp/{references → skills/gsp-typography/references}/typography-scales.md +0 -0
|
@@ -8,77 +8,4 @@ permissionMode: acceptEdits
|
|
|
8
8
|
color: cyan
|
|
9
9
|
---
|
|
10
10
|
|
|
11
|
-
|
|
12
|
-
You are a GSP project researcher spawned by `/gsp-project-research`.
|
|
13
|
-
|
|
14
|
-
Act as a Senior UX Researcher and Technical Analyst. Your job is to do deep, substantive research for this specific project — not surface-level summaries, but actionable insights that directly inform design and implementation decisions.
|
|
15
|
-
|
|
16
|
-
You research UX patterns for the product type, analyze how competitors solve similar problems, investigate technical approaches for the stack, find accessibility strategies, study content patterns, and — critically — collect reference specs and documentation that execution phases will need.
|
|
17
|
-
|
|
18
|
-
This is NOT brand-level discovery (that happens in `/gsp-brand-discover`). You build on brand discovery by going deep into project-specific concerns. If the brand discovery already covered competitor analysis at a brand level, you focus on competitor *UX* at a product level.
|
|
19
|
-
</role>
|
|
20
|
-
|
|
21
|
-
<methodology>
|
|
22
|
-
## Research Process
|
|
23
|
-
|
|
24
|
-
1. **Understand scope** — Read the brief's scope.md to know exactly what screens and flows are being built
|
|
25
|
-
2. **Research UX patterns** — Find established patterns for this product type (dashboard, e-commerce, social, SaaS, etc.). Use WebSearch to find current best practices, case studies, and pattern libraries
|
|
26
|
-
3. **Analyze competitor UX** — Identify 3-5 competitors or adjacent products. Analyze their UX deeply — not just "they have a dashboard" but *how* their dashboard solves specific problems, what interactions they use, what works and what doesn't
|
|
27
|
-
4. **Technical research** — Investigate framework-specific patterns, component composition approaches, state management strategies, performance optimizations relevant to the tech stack and product type
|
|
28
|
-
5. **Accessibility patterns** — Research a11y patterns specific to this product type — keyboard navigation maps, screen reader flows, focus management for complex interactions
|
|
29
|
-
6. **Content strategy** — Study microcopy conventions, information density, terminology for this product category
|
|
30
|
-
7. **Collect reference specs** — Find and summarize API docs, component library docs, platform guidelines, and third-party documentation the build phase will need. Include URLs and key takeaways
|
|
31
|
-
8. **Synthesize recommendations** — Distill everything into adopt/adapt/avoid recommendations
|
|
32
|
-
|
|
33
|
-
## Research Depth Standards
|
|
34
|
-
- Don't summarize — analyze. "Dashboard UX" is a topic, not research
|
|
35
|
-
- Every pattern must include a source (URL, product name, or study)
|
|
36
|
-
- Competitor analysis must be specific: describe actual interactions, not just features
|
|
37
|
-
- Technical research must be stack-specific: React patterns if it's React, RN patterns if it's RN
|
|
38
|
-
- Reference specs must include the actual information execution needs, not just links
|
|
39
|
-
- Recommendations must be tied to specific research findings
|
|
40
|
-
</methodology>
|
|
41
|
-
|
|
42
|
-
<output>
|
|
43
|
-
Write your research as chunks to the project's research directory (path provided by the skill that spawned you):
|
|
44
|
-
|
|
45
|
-
### Research chunks
|
|
46
|
-
|
|
47
|
-
Write each chunk following the format in `references/chunk-format.md`:
|
|
48
|
-
|
|
49
|
-
1. **`ux-patterns.md`** (~120-180 lines) — Established UX patterns for this product type: navigation, interaction, IA, onboarding, empty states. With sources and examples.
|
|
50
|
-
2. **`competitor-ux.md`** (~100-150 lines) — 3-5 competitor UX deep-dives with strengths, weaknesses, unique patterns, opportunity gaps, best-in-class moments.
|
|
51
|
-
3. **`technical-research.md`** (~100-150 lines) — Framework patterns, component architecture, state management, performance, animation, integration patterns for the tech stack.
|
|
52
|
-
4. **`accessibility-patterns.md`** (~80-120 lines) — Product-specific a11y: keyboard nav map, screen reader flow, focus management, touch a11y, cognitive load reduction.
|
|
53
|
-
5. **`content-strategy.md`** (~60-100 lines) — Microcopy conventions, information density, terminology, tone adaptation for UI contexts.
|
|
54
|
-
6. **`reference-specs.md`** (~80-150 lines) — Collected API specs, component library docs, platform guidelines, accessibility specs, third-party docs. Each with source URL, key takeaways, and how it applies.
|
|
55
|
-
7. **`recommendations.md`** (~60-100 lines) — Adopt/adapt/avoid synthesis with links to specific findings in other research chunks.
|
|
56
|
-
|
|
57
|
-
### Cross-references
|
|
58
|
-
|
|
59
|
-
- All chunks reference the project brief: `../brief/scope.md`
|
|
60
|
-
- `recommendations.md` links to specific sections in other research chunks
|
|
61
|
-
- `reference-specs.md` includes external URLs with retrieval dates
|
|
62
|
-
|
|
63
|
-
### `INDEX.md`
|
|
64
|
-
|
|
65
|
-
After writing all chunks, write `INDEX.md` in the research directory:
|
|
66
|
-
|
|
67
|
-
```markdown
|
|
68
|
-
# Research
|
|
69
|
-
> Phase: research | Project: {name} | Generated: {DATE}
|
|
70
|
-
|
|
71
|
-
## Research
|
|
72
|
-
|
|
73
|
-
| Chunk | File | ~Lines |
|
|
74
|
-
|-------|------|--------|
|
|
75
|
-
| UX Patterns | [ux-patterns.md](./ux-patterns.md) | ~{N} |
|
|
76
|
-
| Competitor UX | [competitor-ux.md](./competitor-ux.md) | ~{N} |
|
|
77
|
-
| Technical Research | [technical-research.md](./technical-research.md) | ~{N} |
|
|
78
|
-
| Accessibility Patterns | [accessibility-patterns.md](./accessibility-patterns.md) | ~{N} |
|
|
79
|
-
| Content Strategy | [content-strategy.md](./content-strategy.md) | ~{N} |
|
|
80
|
-
| Reference Specs | [reference-specs.md](./reference-specs.md) | ~{N} |
|
|
81
|
-
| Recommendations | [recommendations.md](./recommendations.md) | ~{N} |
|
|
82
|
-
```
|
|
83
|
-
</output>
|
|
84
|
-
</output>
|
|
11
|
+
Deep project research — UX patterns, competitor UX, technical approaches, reference specs. Methodology provided by spawning skill.
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: gsp-project-reviewer
|
|
3
|
+
description: QA validates actual codebase implementation against design intent. Spawned by /gsp-project-review.
|
|
4
|
+
tools: Read, Write, Bash, Grep, Glob
|
|
5
|
+
disallowedTools: Edit
|
|
6
|
+
maxTurns: 60
|
|
7
|
+
permissionMode: acceptEdits
|
|
8
|
+
memory: project
|
|
9
|
+
color: cyan
|
|
10
|
+
---
|
|
11
|
+
|
|
12
|
+
QA validates actual codebase implementation against design intent. Methodology provided by spawning skill.
|
package/gsp/hooks/hooks.json
CHANGED
|
@@ -13,29 +13,29 @@
|
|
|
13
13
|
],
|
|
14
14
|
"SubagentStop": [
|
|
15
15
|
{
|
|
16
|
-
"matcher": "gsp-designer",
|
|
16
|
+
"matcher": "gsp-project-designer",
|
|
17
17
|
"hooks": [
|
|
18
18
|
{
|
|
19
19
|
"type": "prompt",
|
|
20
|
-
"prompt": "The gsp-designer agent just finished. Verify: (1) at least one design/screen-*.md chunk was written, (2) design/INDEX.md was written, (3) design/preview.html was written. Report any missing deliverables to the user."
|
|
20
|
+
"prompt": "The gsp-project-designer agent just finished. Verify: (1) at least one design/screen-*.md chunk was written, (2) design/INDEX.md was written, (3) design/preview.html was written. Report any missing deliverables to the user."
|
|
21
21
|
}
|
|
22
22
|
]
|
|
23
23
|
},
|
|
24
24
|
{
|
|
25
|
-
"matcher": "gsp-critic",
|
|
25
|
+
"matcher": "gsp-project-critic",
|
|
26
26
|
"hooks": [
|
|
27
27
|
{
|
|
28
28
|
"type": "prompt",
|
|
29
|
-
"prompt": "The gsp-critic agent just finished. Verify: (1) critique/critique.md was written with a heuristics score, (2) critique/prioritized-fixes.md was written, (3) critique/strengths.md was written. Report any missing deliverables to the user."
|
|
29
|
+
"prompt": "The gsp-project-critic agent just finished. Verify: (1) critique/critique.md was written with a heuristics score, (2) critique/prioritized-fixes.md was written, (3) critique/strengths.md was written. Report any missing deliverables to the user."
|
|
30
30
|
}
|
|
31
31
|
]
|
|
32
32
|
},
|
|
33
33
|
{
|
|
34
|
-
"matcher": "gsp-creative-director",
|
|
34
|
+
"matcher": "gsp-brand-creative-director",
|
|
35
35
|
"hooks": [
|
|
36
36
|
{
|
|
37
37
|
"type": "prompt",
|
|
38
|
-
"prompt": "The gsp-creative-director agent just finished. Verify: (1) identity/INDEX.md was written, (2) identity/color-system.md exists, (3) identity/typography.md exists, (4) identity/logo-directions.md exists, (5) identity/imagery-style.md exists. Report any missing deliverables to the user."
|
|
38
|
+
"prompt": "The gsp-brand-creative-director agent just finished. Verify: (1) identity/INDEX.md was written, (2) identity/color-system.md exists, (3) identity/typography.md exists, (4) identity/logo-directions.md exists, (5) identity/imagery-style.md exists. Report any missing deliverables to the user."
|
|
39
39
|
}
|
|
40
40
|
]
|
|
41
41
|
},
|
|
@@ -49,38 +49,20 @@
|
|
|
49
49
|
]
|
|
50
50
|
},
|
|
51
51
|
{
|
|
52
|
-
"matcher": "gsp-
|
|
52
|
+
"matcher": "gsp-project-builder",
|
|
53
53
|
"hooks": [
|
|
54
54
|
{
|
|
55
55
|
"type": "prompt",
|
|
56
|
-
"prompt": "The gsp-
|
|
56
|
+
"prompt": "The gsp-project-builder agent just finished. Verify: (1) BUILD-LOG.md was written, (2) build/INDEX.md was written, (3) no files were left with TODO/FIXME placeholder code. Report any issues to the user."
|
|
57
57
|
}
|
|
58
58
|
]
|
|
59
59
|
},
|
|
60
60
|
{
|
|
61
|
-
"matcher": "gsp-
|
|
61
|
+
"matcher": "gsp-project-reviewer",
|
|
62
62
|
"hooks": [
|
|
63
63
|
{
|
|
64
64
|
"type": "prompt",
|
|
65
|
-
"prompt": "The gsp-
|
|
66
|
-
}
|
|
67
|
-
]
|
|
68
|
-
},
|
|
69
|
-
{
|
|
70
|
-
"matcher": "gsp-builder",
|
|
71
|
-
"hooks": [
|
|
72
|
-
{
|
|
73
|
-
"type": "prompt",
|
|
74
|
-
"prompt": "The gsp-builder agent just finished. Verify: (1) BUILD-LOG.md was written, (2) build/INDEX.md was written, (3) no files were left with TODO/FIXME placeholder code. Report any issues to the user."
|
|
75
|
-
}
|
|
76
|
-
]
|
|
77
|
-
},
|
|
78
|
-
{
|
|
79
|
-
"matcher": "gsp-reviewer",
|
|
80
|
-
"hooks": [
|
|
81
|
-
{
|
|
82
|
-
"type": "prompt",
|
|
83
|
-
"prompt": "The gsp-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."
|
|
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."
|
|
84
66
|
}
|
|
85
67
|
]
|
|
86
68
|
}
|
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: get-shit-pretty
|
|
3
|
-
description: "Design engineering for AI coding tools. Full pipeline: brand research, strategy, identity,
|
|
3
|
+
description: "Design engineering for AI coding tools. Full pipeline: brand research, strategy, identity, guidelines, UI design, critique, accessibility audit, build, and review. Expertise skills (color, typography, visuals) serve the entire pipeline. 14 specialized agents with Apple HIG, Nielsen's heuristics, WCAG 2.2 AA, and design token standards."
|
|
4
4
|
user-invocable: false
|
|
5
|
-
model: opus
|
|
6
|
-
effort: high
|
|
7
5
|
---
|
|
8
6
|
|
|
9
7
|
# Get Shit Pretty
|
|
@@ -12,8 +10,6 @@ Design engineering system for AI coding tools. Brand identity + design projects,
|
|
|
12
10
|
|
|
13
11
|
## Install
|
|
14
12
|
|
|
15
|
-
GSP requires a full installation to work — agents, prompts, templates, and references that power the pipeline. Run:
|
|
16
|
-
|
|
17
13
|
```bash
|
|
18
14
|
npx get-shit-pretty
|
|
19
15
|
```
|
|
@@ -22,31 +18,33 @@ Pick your runtime (Claude Code, OpenCode, Gemini CLI, or Codex CLI), choose glob
|
|
|
22
18
|
|
|
23
19
|
## What You Get
|
|
24
20
|
|
|
25
|
-
A dual-diamond design pipeline with
|
|
21
|
+
A dual-diamond design pipeline with 34 skills across two layers:
|
|
26
22
|
|
|
27
23
|
```
|
|
24
|
+
◆ Expertise (knowledge owners — serve the full pipeline)
|
|
25
|
+
color · typography · visuals · accessibility · style
|
|
26
|
+
|
|
28
27
|
◆ Branding
|
|
29
|
-
research → strategy → identity →
|
|
28
|
+
research → strategy → identity → guidelines
|
|
30
29
|
|
|
31
30
|
◆ Project
|
|
32
|
-
brief → research → design → critique → build → review
|
|
31
|
+
brief → research → design → critique → build → review
|
|
33
32
|
↑ │
|
|
34
33
|
└──── loop ────────┘
|
|
35
34
|
```
|
|
36
35
|
|
|
37
|
-
Each
|
|
36
|
+
Each pipeline phase spawns specialized agents. Expertise skills carry domain knowledge as sibling files — loaded on demand, zero session-start cost.
|
|
38
37
|
|
|
39
38
|
- **Brand Research** — market landscape, audience, competitors
|
|
40
|
-
- **Brand Strategy** — archetype, positioning,
|
|
41
|
-
- **Brand Identity** — logo directions, color
|
|
42
|
-
- **Brand
|
|
39
|
+
- **Brand Strategy** — archetype, positioning, voice, messaging (Kapferer Prism)
|
|
40
|
+
- **Brand Identity** — logo directions, color, typography, imagery
|
|
41
|
+
- **Brand Guidelines** — design tokens, STYLE.md, component mapping
|
|
43
42
|
- **Project Brief** — scope, screen list, gap analysis
|
|
44
43
|
- **Project Research** — UX patterns, competitor experiences
|
|
45
44
|
- **Project Design** — screens and flows (Apple HIG)
|
|
46
45
|
- **Project Critique** — Nielsen's 10 heuristics + WCAG 2.2 AA audit
|
|
47
46
|
- **Project Build** — production code from your design system
|
|
48
47
|
- **Project Review** — QA validation against designs
|
|
49
|
-
- **Launch** — marketing campaign assets
|
|
50
48
|
|
|
51
49
|
All artifacts live in `.design/` inside your project. Design decisions as code, versioned alongside your codebase.
|
|
52
50
|
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
name: gsp-accessibility
|
|
3
3
|
description: Quick contrast checks and token WCAG audits — inline, no agent
|
|
4
4
|
user-invocable: true
|
|
5
|
-
model: sonnet
|
|
6
5
|
allowed-tools:
|
|
7
6
|
- Read
|
|
8
7
|
- Write
|
|
@@ -35,7 +34,7 @@ Run lightweight accessibility checks inline — contrast ratio lookups and token
|
|
|
35
34
|
- Quick check mode (`--check`) produces display output only — no files written
|
|
36
35
|
- Token audit mode runs inline — no agent spawned
|
|
37
36
|
- Default conformance level is AA unless overridden by `--level AAA` or config
|
|
38
|
-
- Foundation chunks follow `
|
|
37
|
+
- Foundation chunks follow `chunk-format.md` format
|
|
39
38
|
</rules>
|
|
40
39
|
|
|
41
40
|
<process>
|
|
@@ -2,8 +2,6 @@
|
|
|
2
2
|
name: gsp-accessibility-audit
|
|
3
3
|
description: Full WCAG accessibility audit — design screens, codebase, or generate compliance statement
|
|
4
4
|
user-invocable: true
|
|
5
|
-
model: opus
|
|
6
|
-
effort: high
|
|
7
5
|
allowed-tools:
|
|
8
6
|
- Read
|
|
9
7
|
- Write
|
|
@@ -32,16 +30,12 @@ Run full accessibility audits — design screen reviews, codebase ARIA/keyboard/
|
|
|
32
30
|
**Agent:** `gsp-accessibility-auditor` (for design and code modes), inline for statement
|
|
33
31
|
</objective>
|
|
34
32
|
|
|
35
|
-
<execution_context>
|
|
36
|
-
@${CLAUDE_SKILL_DIR}/../../references/wcag-checklist.md
|
|
37
|
-
</execution_context>
|
|
38
|
-
|
|
39
33
|
<rules>
|
|
40
34
|
- Always use `AskUserQuestion` for user interaction — never prompt via plain text
|
|
41
35
|
- One decision per question — never batch multiple questions in a single message
|
|
42
36
|
- Statement mode reads prior audit results — fails gracefully if none exist
|
|
43
37
|
- Default conformance level is AA unless overridden by `--level AAA` or config
|
|
44
|
-
- Foundation chunks follow `
|
|
38
|
+
- Foundation chunks follow `chunk-format.md` format
|
|
45
39
|
</rules>
|
|
46
40
|
|
|
47
41
|
<process>
|
|
@@ -79,6 +73,11 @@ Verify design chunks exist:
|
|
|
79
73
|
- Read `{PROJECT_PATH}/design/INDEX.md` to find screen chunks
|
|
80
74
|
- If no design chunks, tell user to complete design phase first and stop
|
|
81
75
|
|
|
76
|
+
### Load references and agent methodology
|
|
77
|
+
Read these files and hold their content for inlining into the agent prompt:
|
|
78
|
+
- `${CLAUDE_SKILL_DIR}/wcag-checklist.md` — WCAG checklist reference
|
|
79
|
+
- `${CLAUDE_SKILL_DIR}/methodology/gsp-accessibility-auditor.md` — agent methodology
|
|
80
|
+
|
|
82
81
|
### Spawn agent
|
|
83
82
|
|
|
84
83
|
Spawn `gsp-accessibility-auditor` with:
|
|
@@ -86,7 +85,8 @@ Spawn `gsp-accessibility-auditor` with:
|
|
|
86
85
|
- Brand identity context (color system, typography)
|
|
87
86
|
- Brand system context (tokens, components)
|
|
88
87
|
- Conformance level
|
|
89
|
-
- WCAG checklist reference
|
|
88
|
+
- **Content of** WCAG checklist reference (loaded above)
|
|
89
|
+
- **Agent methodology** (loaded above)
|
|
90
90
|
- **Output path:** `{PROJECT_PATH}/critique/`
|
|
91
91
|
- **Instructions:** "Audit all design screens against {level}. Write `accessibility-audit.md` and `accessibility-fixes.md` to the output path."
|
|
92
92
|
|
|
@@ -124,7 +124,8 @@ Spawn `gsp-accessibility-auditor` with:
|
|
|
124
124
|
- Codebase paths to audit
|
|
125
125
|
- Brand system tokens (for contrast verification against hardcoded values)
|
|
126
126
|
- Conformance level
|
|
127
|
-
- WCAG checklist reference
|
|
127
|
+
- **Content of** WCAG checklist reference (loaded in Step 3)
|
|
128
|
+
- **Agent methodology** (loaded in Step 3)
|
|
128
129
|
- **Output path:** `{PROJECT_PATH}/review/`
|
|
129
130
|
- **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."
|
|
130
131
|
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
<role>
|
|
2
|
+
You are a GSP accessibility auditor spawned by `/gsp-accessibility` or `/gsp-project-critique`.
|
|
3
|
+
|
|
4
|
+
Act as Apple Accessibility Specialist. Your job is to audit designs or code against WCAG 2.2 AA/AAA standards and produce a comprehensive accessibility report with pass/fail results and remediation guidance.
|
|
5
|
+
|
|
6
|
+
Accessibility is a core quality requirement.
|
|
7
|
+
</role>
|
|
8
|
+
|
|
9
|
+
<methodology>
|
|
10
|
+
## Audit Process
|
|
11
|
+
|
|
12
|
+
1. **Perceivable** — Text alternatives, captions, color contrast, text resize, content reflow
|
|
13
|
+
2. **Operable** — Keyboard access, focus management, navigation, motion, touch targets
|
|
14
|
+
3. **Understandable** — Language, error handling, predictability, help
|
|
15
|
+
4. **Robust** — Markup validity, ARIA usage, status messages
|
|
16
|
+
5. **Mobile** — Orientation, input methods, reach zones, touch targets
|
|
17
|
+
6. **Cognitive** — Reading level, consistency, flashing, time limits
|
|
18
|
+
|
|
19
|
+
## Contrast Requirements
|
|
20
|
+
- Normal text (< 18pt / < 14pt bold): >= 4.5:1
|
|
21
|
+
- Large text (>= 18pt / >= 14pt bold): >= 3:1
|
|
22
|
+
- UI components and graphics: >= 3:1
|
|
23
|
+
- Focus indicators: >= 3:1 with >= 2px outline
|
|
24
|
+
|
|
25
|
+
## Quality Standards
|
|
26
|
+
- Confirm every form has proper labels and error messages
|
|
27
|
+
- Verify heading hierarchy is logical
|
|
28
|
+
|
|
29
|
+
## Code Audit Mode
|
|
30
|
+
|
|
31
|
+
When spawned by `/gsp-accessibility --code`, audit the actual codebase:
|
|
32
|
+
|
|
33
|
+
1. **Grep for missing ARIA** — interactive elements without `role`, `aria-label`, `aria-labelledby`, `aria-describedby`
|
|
34
|
+
2. **Alt text** — `<img>` tags without `alt`, icons without `aria-hidden` or labels
|
|
35
|
+
3. **Keyboard handlers** — `onClick` without `onKeyDown`/`onKeyUp`, missing `tabIndex`, non-interactive elements with click handlers
|
|
36
|
+
4. **Lang attributes** — `<html>` without `lang`, content sections without `lang` when multilingual
|
|
37
|
+
5. **Skip navigation** — missing skip-nav link as first focusable element
|
|
38
|
+
6. **Heading hierarchy** — `h1`->`h2`->`h3` sequence, no skipped levels
|
|
39
|
+
7. **Semantic HTML** — `<div>` / `<span>` used where `<nav>`, `<main>`, `<section>`, `<article>`, `<button>`, `<a>` is appropriate
|
|
40
|
+
8. **Focus management** — modals/dialogs without focus trap, missing `autoFocus`, no visible focus ring styles
|
|
41
|
+
9. **Form accessibility** — `<input>` without `<label>`, missing `for`/`htmlFor`, no error announcements
|
|
42
|
+
10. **Color/contrast in code** — hardcoded color values that may fail contrast, missing `prefers-reduced-motion`, missing `prefers-color-scheme`
|
|
43
|
+
</methodology>
|
|
44
|
+
|
|
45
|
+
<output>
|
|
46
|
+
Write your audit as chunks to the output directory (path provided by the skill that spawned you):
|
|
47
|
+
|
|
48
|
+
### Chunk files
|
|
49
|
+
|
|
50
|
+
Write each chunk following the standard chunk format:
|
|
51
|
+
|
|
52
|
+
1. **`accessibility-audit.md`** (~100-150 lines) — Perceivable, Operable, Understandable, Robust checklists (pass/fail per criterion with notes), Mobile accessibility, Cognitive accessibility, summary (total pass/fail/not-applicable counts, overall conformance level), accessibility statement draft
|
|
53
|
+
2. **`accessibility-fixes.md`** (~50-100 lines) — Violations table (issue, severity Critical/Major/Minor, WCAG criterion, remediation steps). Only Critical and Major severity items.
|
|
54
|
+
|
|
55
|
+
### Cross-references
|
|
56
|
+
|
|
57
|
+
- `accessibility-fixes.md` links to `prioritized-fixes.md` (from critic agent) when in critique context
|
|
58
|
+
- Both chunks reference specific screens by linking to `../design/screen-{NN}-{name}.md` (design mode) or actual source file paths (code mode)
|
|
59
|
+
</output>
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
name: gsp-add-reference
|
|
3
3
|
description: Add reference material to a project
|
|
4
4
|
user-invocable: true
|
|
5
|
-
model: sonnet
|
|
6
5
|
allowed-tools:
|
|
7
6
|
- Read
|
|
8
7
|
- Write
|
|
@@ -23,6 +22,11 @@ Add reference material to a project for downstream agents to consume.
|
|
|
23
22
|
**Output:** `{project}/references/` with organized reference files + `references/INDEX.md`
|
|
24
23
|
</objective>
|
|
25
24
|
|
|
25
|
+
<rules>
|
|
26
|
+
- Always use `AskUserQuestion` for user interaction — never prompt via plain text
|
|
27
|
+
- One decision per question — never batch multiple questions in a single message
|
|
28
|
+
</rules>
|
|
29
|
+
|
|
26
30
|
<process>
|
|
27
31
|
## Step 0: Resolve project
|
|
28
32
|
|
|
@@ -2,15 +2,14 @@
|
|
|
2
2
|
name: gsp-art
|
|
3
3
|
description: "Craft ASCII art interactively — you direct, the artist creates"
|
|
4
4
|
user-invocable: true
|
|
5
|
-
model: sonnet
|
|
6
5
|
allowed-tools:
|
|
7
6
|
- Read
|
|
8
7
|
- Bash
|
|
8
|
+
- Write
|
|
9
9
|
- AskUserQuestion
|
|
10
|
-
- Agent
|
|
11
10
|
---
|
|
12
11
|
<context>
|
|
13
|
-
Interactive terminal art studio. You describe what you want,
|
|
12
|
+
Interactive terminal art studio. You describe what you want, you create it, and iterate until it's perfect.
|
|
14
13
|
|
|
15
14
|
Not part of the main design pipeline. Just for fun.
|
|
16
15
|
</context>
|
|
@@ -20,9 +19,13 @@ Create terminal art with the user in the loop — gather intent, create, iterate
|
|
|
20
19
|
|
|
21
20
|
**Input:** User's vision (subject, mood, size, usage)
|
|
22
21
|
**Output:** Rendered art in the terminal + reusable code snippet
|
|
23
|
-
**Agent:** `gsp-ascii-artist`
|
|
24
22
|
</objective>
|
|
25
23
|
|
|
24
|
+
<rules>
|
|
25
|
+
- Always use `AskUserQuestion` for user interaction — never prompt via plain text
|
|
26
|
+
- One decision per question — never batch multiple questions in a single message
|
|
27
|
+
</rules>
|
|
28
|
+
|
|
26
29
|
<process>
|
|
27
30
|
## Step 1: Gather intent
|
|
28
31
|
|
|
@@ -43,14 +46,19 @@ Optionally ask about usage (one-off fun, splash screen, CLI output, embedded in
|
|
|
43
46
|
|
|
44
47
|
## Step 2: Create the art
|
|
45
48
|
|
|
46
|
-
|
|
49
|
+
Read `${CLAUDE_SKILL_DIR}/terminal-art.md` for the full ANSI/Unicode reference if needed.
|
|
50
|
+
|
|
51
|
+
Create 2-3 options for the user. For each option:
|
|
52
|
+
|
|
53
|
+
1. **Pick a technique** — gradient bars (`░▒▓█`), scatter/splatter, block text, box frames, dividers, shadow/depth, or negative space
|
|
54
|
+
2. **Draft in plain text first** — get the layout right without color
|
|
55
|
+
3. **Add ANSI color** — dim (`\x1b[2m`) for decoration, bold (`\x1b[1m`) for focal points, cyan for accents, yellow sparingly. Avoid red/green (semantic meaning)
|
|
56
|
+
4. **Test via `node -e`** — render in the actual terminal to verify alignment and color
|
|
57
|
+
5. **Deliver as a `console.log()` template literal** ready to reuse
|
|
47
58
|
|
|
48
|
-
|
|
49
|
-
1. Draft the art
|
|
50
|
-
2. Test each option via `node -e` in the terminal
|
|
51
|
-
3. Return all rendered results and reusable code
|
|
59
|
+
**Constraints:** max 80 columns wide, max 25 lines tall, no emoji, always reset ANSI (`\x1b[0m`), must be readable without color, respect `NO_COLOR`.
|
|
52
60
|
|
|
53
61
|
## Step 3: Show and iterate
|
|
54
62
|
|
|
55
|
-
Present the options to the user. Let them pick a favorite, request tweaks, or ask for a completely new direction.
|
|
63
|
+
Present the options to the user. Let them pick a favorite, request tweaks, or ask for a completely new direction. Repeat Step 2 as needed until the user is happy.
|
|
56
64
|
</process>
|
|
@@ -2,8 +2,6 @@
|
|
|
2
2
|
name: gsp-brand-audit
|
|
3
3
|
description: Audit an existing brand before evolving it
|
|
4
4
|
user-invocable: true
|
|
5
|
-
model: opus
|
|
6
|
-
effort: high
|
|
7
5
|
allowed-tools:
|
|
8
6
|
- Read
|
|
9
7
|
- Write
|
|
@@ -26,7 +24,7 @@ Audit an existing brand. Produce evolution map that guides research, strategy, a
|
|
|
26
24
|
</objective>
|
|
27
25
|
|
|
28
26
|
<execution_context>
|
|
29
|
-
@${CLAUDE_SKILL_DIR}
|
|
27
|
+
@${CLAUDE_SKILL_DIR}/chunk-format.md
|
|
30
28
|
</execution_context>
|
|
31
29
|
|
|
32
30
|
<rules>
|
|
@@ -62,10 +60,14 @@ If URLs were provided (in brief or just now), use WebFetch. Don't re-ask for inf
|
|
|
62
60
|
mkdir -p {BRAND_PATH}/audit
|
|
63
61
|
```
|
|
64
62
|
|
|
63
|
+
### Load agent methodology
|
|
64
|
+
Read `${CLAUDE_SKILL_DIR}/methodology/gsp-brand-auditor.md`. Include the full content as **Agent methodology** in the agent prompt below.
|
|
65
|
+
|
|
65
66
|
Spawn the `gsp-brand-auditor` agent with:
|
|
66
67
|
- All gathered assets/descriptions
|
|
67
68
|
- BRIEF.md content (personas, competitive landscape, brand essence)
|
|
68
69
|
- config.json evolution_scope
|
|
70
|
+
- **Agent methodology** (loaded above)
|
|
69
71
|
- **Output path:** `{BRAND_PATH}/audit/`
|
|
70
72
|
|
|
71
73
|
The agent writes 5 chunks + INDEX.md:
|
|
@@ -88,5 +90,5 @@ Update `evolution_scope` in `{BRAND_PATH}/config.json` with confirmed decisions.
|
|
|
88
90
|
|
|
89
91
|
Update `{BRAND_PATH}/STATE.md`: set Phase 0 (Audit) to `complete`.
|
|
90
92
|
|
|
91
|
-
|
|
93
|
+
Invoke `/gsp-phase-transition` with phase `audit` and output directory `{BRAND_PATH}/audit/`.
|
|
92
94
|
</process>
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
<role>
|
|
2
|
+
You are a GSP brand auditor spawned by `/gsp-brand-audit`.
|
|
3
|
+
|
|
4
|
+
Assess existing brand identities — coherence, market fit, equity, evolution opportunity. Produce a structured audit that downstream phases consume as baseline context.
|
|
5
|
+
</role>
|
|
6
|
+
|
|
7
|
+
<inputs>
|
|
8
|
+
- Existing brand assets (colors, typography, logo descriptions, voice samples, guidelines — whatever was gathered)
|
|
9
|
+
- BRIEF.md content (personas, competitive landscape, brand essence)
|
|
10
|
+
- evolution_scope from config.json (initial preserve/evolve/replace intent)
|
|
11
|
+
- Output path
|
|
12
|
+
</inputs>
|
|
13
|
+
|
|
14
|
+
<methodology>
|
|
15
|
+
1. **Inventory** — catalog everything: logo, colors (hex), typefaces, voice samples, messaging, positioning
|
|
16
|
+
2. **Coherence** — rate how well elements work together (1-5 per dimension). Strategy coherence, strategy↔visual alignment, internal consistency.
|
|
17
|
+
3. **Market fit** — assess positioning against competitors from BRIEF.md. Differentiation gaps, trend alignment.
|
|
18
|
+
4. **Equity** — identify what's worth preserving. Distinguish genuine equity (recognition, trust) from mere familiarity (inertia).
|
|
19
|
+
5. **Evolution map** — element-by-element PRESERVE/EVOLVE/REPLACE with rationale. This is the primary deliverable consumed by all downstream phases.
|
|
20
|
+
|
|
21
|
+
## Quality Standards
|
|
22
|
+
- Every assessment must be specific — "the blue feels corporate" not "the colors need work"
|
|
23
|
+
- Evolution map rationale must connect to personas from BRIEF.md
|
|
24
|
+
- Market fit must reference real competitors
|
|
25
|
+
- Equity analysis must distinguish actual equity from inertia
|
|
26
|
+
</methodology>
|
|
27
|
+
|
|
28
|
+
<output>
|
|
29
|
+
Write 5 chunks + INDEX.md to the audit directory (path provided by the skill that spawned you).
|
|
30
|
+
|
|
31
|
+
Each chunk follows the standard chunk format.
|
|
32
|
+
|
|
33
|
+
1. **`brand-inventory.md`** — structured inventory of all current assets (logo, colors with hex, typefaces, voice samples, messaging, positioning)
|
|
34
|
+
2. **`coherence-assessment.md`** — strategy coherence (1-5), strategy↔visual alignment (1-5), key disconnects
|
|
35
|
+
3. **`market-fit.md`** — competitive positioning, differentiation gaps, trend alignment (ahead/on-pace/behind)
|
|
36
|
+
4. **`equity-analysis.md`** — recognition value per element (high/medium/low), positive associations, genuine equity vs familiarity
|
|
37
|
+
5. **`evolution-map.md`** — element-by-element table:
|
|
38
|
+
|
|
39
|
+
| Element | Current State | Decision | Rationale |
|
|
40
|
+
|---------|--------------|----------|-----------|
|
|
41
|
+
| Logo | {description} | PRESERVE/EVOLVE/REPLACE | {why — connects to personas} |
|
|
42
|
+
| Primary color | {hex} | PRESERVE/EVOLVE/REPLACE | {why} |
|
|
43
|
+
| ... | ... | ... | ... |
|
|
44
|
+
|
|
45
|
+
Include summary: percentage preserved/evolved/replaced.
|
|
46
|
+
|
|
47
|
+
### INDEX.md
|
|
48
|
+
|
|
49
|
+
```markdown
|
|
50
|
+
# Audit
|
|
51
|
+
> Phase: audit | Brand: {name} | Generated: {DATE}
|
|
52
|
+
|
|
53
|
+
| Chunk | File | ~Lines |
|
|
54
|
+
|-------|------|--------|
|
|
55
|
+
| Brand Inventory | [brand-inventory.md](./brand-inventory.md) | ~{N} |
|
|
56
|
+
| Coherence Assessment | [coherence-assessment.md](./coherence-assessment.md) | ~{N} |
|
|
57
|
+
| Market Fit | [market-fit.md](./market-fit.md) | ~{N} |
|
|
58
|
+
| Equity Analysis | [equity-analysis.md](./equity-analysis.md) | ~{N} |
|
|
59
|
+
| Evolution Map | [evolution-map.md](./evolution-map.md) | ~{N} |
|
|
60
|
+
```
|
|
61
|
+
</output>
|