get-shit-pretty 0.6.2 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (161) hide show
  1. package/README.md +7 -12
  2. package/bin/install.js +125 -84
  3. package/gsp/agents/gsp-accessibility-auditor.md +4 -4
  4. package/gsp/agents/gsp-ascii-artist.md +2 -2
  5. package/gsp/agents/gsp-brand-auditor.md +3 -3
  6. package/gsp/agents/gsp-brand-engineer.md +131 -0
  7. package/gsp/agents/gsp-brand-strategist.md +3 -3
  8. package/gsp/agents/gsp-brand-syncer.md +8 -7
  9. package/gsp/agents/gsp-builder.md +49 -6
  10. package/gsp/agents/gsp-campaign-director.md +3 -4
  11. package/gsp/agents/gsp-creative-director.md +80 -0
  12. package/gsp/agents/gsp-critic.md +100 -18
  13. package/gsp/agents/gsp-designer.md +52 -5
  14. package/gsp/agents/gsp-project-researcher.md +4 -4
  15. package/gsp/agents/gsp-researcher.md +5 -5
  16. package/gsp/agents/gsp-reviewer.md +3 -3
  17. package/gsp/agents/gsp-scoper.md +3 -3
  18. package/gsp/hooks/hooks.json +5 -5
  19. package/gsp/skills/get-shit-pretty/SKILL.md +10 -9
  20. package/gsp/skills/gsp-accessibility/SKILL.md +12 -12
  21. package/gsp/skills/gsp-accessibility-audit/SKILL.md +8 -9
  22. package/gsp/skills/gsp-add-reference/SKILL.md +6 -1
  23. package/gsp/skills/gsp-art/SKILL.md +6 -1
  24. package/gsp/skills/gsp-brand-audit/SKILL.md +5 -5
  25. package/gsp/skills/gsp-brand-guidelines/SKILL.md +233 -0
  26. package/gsp/skills/gsp-brand-guidelines/token-mapping.md +329 -0
  27. package/gsp/skills/gsp-brand-identity/SKILL.md +29 -20
  28. package/gsp/skills/gsp-brand-refine/SKILL.md +30 -23
  29. package/gsp/skills/gsp-brand-research/SKILL.md +4 -4
  30. package/gsp/{references → skills/gsp-brand-research}/design-trends.md +4 -4
  31. package/gsp/skills/gsp-brand-strategy/SKILL.md +7 -7
  32. package/gsp/skills/gsp-brand-sync/SKILL.md +10 -10
  33. package/gsp/skills/gsp-brand-sync/chunk-format.md +79 -0
  34. package/gsp/skills/gsp-color/SKILL.md +73 -0
  35. package/gsp/skills/gsp-color/chunk-format.md +79 -0
  36. package/gsp/skills/{gsp-palette/SKILL.md → gsp-color/domains/palette.md} +31 -101
  37. package/gsp/skills/gsp-color/domains/system.md +123 -0
  38. package/gsp/skills/gsp-design-system/SKILL.md +9 -4
  39. package/gsp/skills/gsp-doctor/SKILL.md +25 -18
  40. package/gsp/skills/gsp-help/SKILL.md +30 -29
  41. package/gsp/skills/gsp-icons/SKILL.md +108 -0
  42. package/gsp/skills/gsp-icons/chunk-format.md +79 -0
  43. package/gsp/skills/gsp-launch/SKILL.md +3 -4
  44. package/gsp/skills/gsp-logo/SKILL.md +173 -0
  45. package/gsp/skills/gsp-logo/chunk-format.md +79 -0
  46. package/gsp/skills/gsp-phase-transition/SKILL.md +124 -0
  47. package/gsp/skills/gsp-pretty/SKILL.md +2 -2
  48. package/gsp/skills/gsp-progress/SKILL.md +20 -20
  49. package/gsp/skills/gsp-project-brief/SKILL.md +8 -9
  50. package/gsp/skills/gsp-project-build/SKILL.md +30 -25
  51. package/gsp/skills/gsp-project-critique/SKILL.md +17 -18
  52. package/gsp/{references → skills/gsp-project-critique}/visual-taste.md +1 -1
  53. package/gsp/skills/gsp-project-design/SKILL.md +18 -18
  54. package/gsp/skills/gsp-project-research/SKILL.md +6 -7
  55. package/gsp/skills/gsp-project-review/SKILL.md +8 -10
  56. package/gsp/skills/gsp-scaffold/SKILL.md +3 -3
  57. package/gsp/skills/gsp-start/SKILL.md +15 -15
  58. package/gsp/{references → skills/gsp-start}/questioning.md +1 -1
  59. package/gsp/skills/gsp-style/SKILL.md +43 -45
  60. package/gsp/skills/gsp-style/chunk-format.md +79 -0
  61. package/gsp/skills/gsp-style/style-preset-schema.md +124 -0
  62. package/gsp/skills/gsp-style/styles/INDEX.yml +1 -1
  63. package/gsp/skills/gsp-style/styles/academia.yml +80 -0
  64. package/gsp/skills/gsp-style/styles/art-deco.yml +81 -0
  65. package/gsp/skills/gsp-style/styles/bauhaus.yml +78 -0
  66. package/gsp/skills/gsp-style/styles/bold-typography.yml +73 -0
  67. package/gsp/skills/gsp-style/styles/botanical.yml +78 -0
  68. package/gsp/skills/gsp-style/styles/claymorphism.yml +84 -0
  69. package/gsp/skills/gsp-style/styles/cyberpunk.yml +87 -0
  70. package/gsp/skills/gsp-style/styles/enterprise.yml +81 -0
  71. package/gsp/skills/gsp-style/styles/flat-design.yml +67 -0
  72. package/gsp/skills/gsp-style/styles/fluent.yml +82 -0
  73. package/gsp/skills/gsp-style/styles/glassmorphism.yml +83 -0
  74. package/gsp/skills/gsp-style/styles/humanist-literary.yml +74 -0
  75. package/gsp/skills/gsp-style/styles/industrial.yml +82 -0
  76. package/gsp/skills/gsp-style/styles/kinetic.yml +94 -0
  77. package/gsp/skills/gsp-style/styles/liquid-glass.yml +91 -0
  78. package/gsp/skills/gsp-style/styles/luxury.yml +83 -0
  79. package/gsp/skills/gsp-style/styles/material.yml +83 -0
  80. package/gsp/skills/gsp-style/styles/maximalism.yml +92 -0
  81. package/gsp/skills/gsp-style/styles/minimal-dark.yml +75 -0
  82. package/gsp/skills/gsp-style/styles/modern-dark.yml +88 -0
  83. package/gsp/skills/gsp-style/styles/monochrome.yml +68 -0
  84. package/gsp/skills/gsp-style/styles/neubrutalism.yml +83 -0
  85. package/gsp/skills/gsp-style/styles/neumorphism.yml +77 -0
  86. package/gsp/skills/gsp-style/styles/newsprint.yml +81 -0
  87. package/gsp/skills/gsp-style/styles/organic.yml +77 -0
  88. package/gsp/skills/gsp-style/styles/playful-geometric.yml +90 -0
  89. package/gsp/skills/gsp-style/styles/professional.yml +67 -0
  90. package/gsp/skills/gsp-style/styles/retro.yml +85 -0
  91. package/gsp/skills/gsp-style/styles/saas.yml +83 -0
  92. package/gsp/skills/gsp-style/styles/sketch.yml +86 -0
  93. package/gsp/skills/gsp-style/styles/swiss-minimalist.yml +69 -0
  94. package/gsp/skills/gsp-style/styles/terminal.yml +83 -0
  95. package/gsp/skills/gsp-style/styles/vaporwave.yml +84 -0
  96. package/gsp/skills/gsp-style/styles/web3.yml +82 -0
  97. package/gsp/skills/gsp-typography/SKILL.md +70 -0
  98. package/gsp/skills/gsp-typography/chunk-format.md +79 -0
  99. package/gsp/skills/gsp-typography/domains/pairing.md +109 -0
  100. package/gsp/skills/gsp-typography/domains/scale.md +227 -0
  101. package/gsp/skills/gsp-typography/domains/system.md +108 -0
  102. package/gsp/skills/gsp-update/SKILL.md +1 -2
  103. package/gsp/skills/gsp-visuals/SKILL.md +82 -0
  104. package/gsp/skills/gsp-visuals/chunk-format.md +79 -0
  105. package/gsp/skills/gsp-visuals/domains/3d.md +127 -0
  106. package/gsp/skills/gsp-visuals/domains/imagery.md +145 -0
  107. package/gsp/skills/gsp-visuals/domains/textures.md +138 -0
  108. package/gsp/skills/gsp-visuals/domains/video.md +107 -0
  109. package/gsp/templates/branding/config.json +1 -1
  110. package/gsp/templates/branding/roadmap.md +9 -9
  111. package/gsp/templates/exports-index.md +8 -8
  112. package/gsp/templates/phases/brief.md +1 -1
  113. package/gsp/templates/phases/build.md +1 -1
  114. package/gsp/templates/phases/critique.md +1 -1
  115. package/gsp/templates/phases/design.md +2 -2
  116. package/gsp/templates/phases/discover.md +1 -1
  117. package/gsp/templates/phases/identity.md +1 -1
  118. package/gsp/templates/phases/launch.md +1 -1
  119. package/gsp/templates/phases/patterns.md +60 -71
  120. package/gsp/templates/phases/research.md +1 -1
  121. package/gsp/templates/phases/review.md +1 -1
  122. package/gsp/templates/phases/strategy.md +1 -1
  123. package/gsp/templates/phases/style.md +158 -0
  124. package/gsp/templates/projects/config.json +1 -1
  125. package/gsp/templates/projects/roadmap.md +7 -7
  126. package/gsp/templates/projects/state.md +1 -1
  127. package/package.json +1 -2
  128. package/.claude-plugin/plugin.json +0 -24
  129. package/gsp/agents/gsp-identity-designer.md +0 -74
  130. package/gsp/agents/gsp-pattern-architect.md +0 -189
  131. package/gsp/prompts/01-design-system-architect.md +0 -19
  132. package/gsp/prompts/02-brand-identity-creator.md +0 -16
  133. package/gsp/prompts/03-ui-ux-pattern-master.md +0 -21
  134. package/gsp/prompts/04-marketing-asset-factory.md +0 -14
  135. package/gsp/prompts/05-implementation-spec-expert.md +0 -15
  136. package/gsp/prompts/06-design-critique-partner.md +0 -14
  137. package/gsp/prompts/07-design-trend-synthesizer.md +0 -3
  138. package/gsp/prompts/08-accessibility-auditor.md +0 -23
  139. package/gsp/prompts/09-design-to-code-translator.md +0 -49
  140. package/gsp/prompts/10-project-scoper.md +0 -17
  141. package/gsp/prompts/11-deliverable-reviewer.md +0 -18
  142. package/gsp/prompts/12-project-researcher.md +0 -18
  143. package/gsp/references/phase-transitions.md +0 -132
  144. package/gsp/references/style-preset-schema.md +0 -63
  145. package/gsp/skills/gsp-brand-patterns/SKILL.md +0 -240
  146. package/gsp/skills/gsp-typescale/SKILL.md +0 -234
  147. /package/gsp/{references → skills/gsp-accessibility-audit}/wcag-checklist.md +0 -0
  148. /package/gsp/{references → skills/gsp-art}/terminal-art.md +0 -0
  149. /package/gsp/{references → skills/gsp-brand-audit}/chunk-format.md +0 -0
  150. /package/gsp/{references → skills/gsp-brand-guidelines}/design-tokens.md +0 -0
  151. /package/gsp/{references → skills/gsp-brand-strategy}/brand-archetypes.md +0 -0
  152. /package/gsp/{references → skills/gsp-brand-strategy}/brand-prism.md +0 -0
  153. /package/gsp/{references → skills/gsp-brand-strategy}/positioning-frameworks.md +0 -0
  154. /package/gsp/{references → skills/gsp-brand-strategy}/voice-tone.md +0 -0
  155. /package/gsp/{references → skills/gsp-color/references}/color-composition.md +0 -0
  156. /package/gsp/{references → skills/gsp-project-build}/visual-effects.md +0 -0
  157. /package/gsp/{references → skills/gsp-project-critique}/anti-patterns.md +0 -0
  158. /package/gsp/{references → skills/gsp-project-critique}/nielsen-heuristics.md +0 -0
  159. /package/gsp/{references → skills/gsp-project-design}/apple-hig-patterns.md +0 -0
  160. /package/gsp/{references → skills/gsp-project-design}/block-patterns.md +0 -0
  161. /package/gsp/{references → skills/gsp-typography/references}/typography-scales.md +0 -0
@@ -1,189 +0,0 @@
1
- ---
2
- name: gsp-pattern-architect
3
- description: Builds complete design systems with foundations, components, and tokens. Spawned by /gsp:brand-patterns.
4
- tools: Read, Write, Edit, Bash, Grep, Glob
5
- maxTurns: 60
6
- permissionMode: acceptEdits
7
- color: magenta
8
- ---
9
-
10
- <role>
11
- You are a GSP pattern architect spawned by `/gsp:brand-patterns`.
12
-
13
- Act as Apple Principal Designer. Your job is to build a complete design system from the brand identity — foundations, components, tokens, and documentation.
14
-
15
- The system is created once per brand and reused across all projects. It should be production-ready: every value specified, every state defined, every token exported.
16
- </role>
17
-
18
- <inputs>
19
- - Identity chunks + palettes.json
20
- - BRIEF.md
21
- - Strategy chunks: voice-and-tone.md (for principles), archetype.md + positioning.md (for custom style output)
22
- - system_strategy and tech_stack from config.json
23
- - `.design/system/STACK.md`, `COMPONENTS.md`, `TOKENS.md` (if exist) — UI library, existing components, theming config
24
- - style_base from config.json + preset `.yml`/`.md` files (if set) — format reference for custom style output
25
- - Execution mode: "foundations" | "components" | "full" (default: full for backward compat)
26
- - Confirmed component scope (for components mode)
27
- - Output path
28
- </inputs>
29
-
30
- <methodology>
31
- ## System Building Process
32
-
33
- 1. **Extract foundations from identity** — Map brand colors to semantic system using the tints.dev palettes from the brand's `identity/palettes.json` (generated by [tints.dev](https://tints.dev) by [Simeon Griggs](https://github.com/SimeonGriggs/tints.dev)). Use the 11-stop OKLCH scales as the color foundation for tokens. Establish type scale from brand typography
34
- 2. **Define grid and spacing** — 12-column grid, 8px base spacing system
35
- 3. **Component strategy** — leverage existing UI libraries (shadcn, Radix, MUI, etc.) instead of rewriting from scratch. Write only what the library can't do with tokens alone.
36
- 4. **Export tokens** — Machine-readable JSON following W3C Design Tokens format
37
- 5. **Document principles** — Design principles derived from brand and usage patterns
38
-
39
- ## Execution Mode
40
- - **foundations** — write foundations/, principles.md, tokens.json (foundations only). Stop.
41
- - **components** — read existing foundations/, then write in this order: (1) `components/token-mapping.md`, (2) override + custom component specs, (3) update `tokens.json`, (4) `{brand-name}.yml`, (5) `{brand-name}.md`, (6) `INDEX.md`.
42
- - **full** — both passes (backward compatibility).
43
-
44
- ## System Strategy
45
-
46
- Read `system_strategy` from brand config's `system_config`:
47
-
48
- **GENERATE** — Full system from scratch. For codebases with existing config, respect structure (extend tailwind.config, not replace).
49
-
50
- **EXTEND** — Evolve existing system: audit tokens against brand identity (keep what works, adjust what doesn't, fill gaps). Classify existing components using the tier model: KEEP = library component + current tokens are fine, RESTYLE = apply new brand tokens via token mapping (tier 1), OVERRIDE = needs visual treatment beyond tokens (tier 2), REPLACE = needs a custom spec (tier 3). Output delta tokens — only new and changed values. Preserve existing naming conventions.
51
-
52
- **REFACTOR** — Redesign from ground up informed by existing: understand current system, design complete new system, produce migration mapping, flag breaking changes.
53
-
54
- ## Component Strategy
55
-
56
- The goal is NOT to write specs for every UI component from scratch. Most codebases use a component library (shadcn/ui, Radix, MUI, Headless UI, etc.) that already handles states, accessibility, and anatomy. The brand's job is to **skin that library** via tokens and write specs only for what's truly custom.
57
-
58
- ### Three tiers of component output
59
-
60
- **Tier 1: Token mapping** (always write)
61
- Write `components/token-mapping.md` — how brand tokens apply to the component library's theming API. This is the highest-leverage file: it turns the entire library into branded components without writing a single spec.
62
-
63
- Examples by library:
64
- - **shadcn/ui** — CSS custom properties in `globals.css` (`:root` and `.dark`), `tailwind.config` extends
65
- - **MUI** — `createTheme()` object with palette, typography, shape overrides
66
- - **React Native / NativeWind** — `nativewind.config`, `theme.ts`
67
- - **Vanilla CSS** — CSS custom properties with semantic naming
68
- - **No library** — full CSS custom property system with component class recipes
69
-
70
- **Tier 2: Override specs** (selective — only when tokens aren't enough)
71
- Write individual component chunks only for library components that need **visual treatment beyond token application**. Examples:
72
- - Button needs a brand-specific hover animation (e.g., neubrutalist shadow shift)
73
- - Card needs a non-standard border treatment that tokens can't express
74
- - Navigation has a unique scroll behavior tied to brand personality
75
-
76
- Each override chunk: what to override, why (traces to brand identity), code hints for the specific library.
77
-
78
- **Tier 3: Brand-distinctive components** (selective — only when they don't exist in the library)
79
- Full component specs only for components that are **unique to this brand** and have no library equivalent. Examples:
80
- - A branded hero section with custom layout
81
- - A testimonial card with brand-specific animation
82
- - A pricing table with distinctive visual hierarchy
83
-
84
- Each custom chunk: states, anatomy, usage rules, accessibility spec, code hints.
85
-
86
- ### Scoping rule
87
- - Tier 1 is always 1 file
88
- - Tier 2 + Tier 3 combined should be **5-12 components max** — if you're writing more, you're probably specifying things the library already handles
89
- - If no UI library is detected (greenfield, vanilla CSS), write token-mapping.md as a CSS custom property system, plus core component specs from this default set: button, input, select, checkbox, dialog, card, avatar, badge, toast, navigation, table, tabs, accordion, tooltip. Add or remove based on the brand's needs.
90
-
91
- ## Quality Standards
92
- - All colors must include contrast ratios against common backgrounds
93
- - Typography scale must support Dynamic Type / responsive scaling
94
- - Token mapping must target the actual library's theming API — not abstract specs
95
- - Custom components need: states, anatomy, usage rules, accessibility spec, code hints
96
- - Tokens must be valid JSON following W3C format
97
- - Spacing values must be mathematically consistent (8px base)
98
- </methodology>
99
-
100
- <output>
101
- Write your design system as chunks to the brand's system directory (path provided by the skill that spawned you):
102
-
103
- ### Foundation chunks
104
-
105
- Write to `patterns/foundations/`, each following `references/chunk-format.md`:
106
-
107
- 1. **`foundations/color-system.md`** (~100-150 lines) — Primary, secondary, semantic (error, success, warning, info), neutral scale, dark mode mapping, contrast ratios
108
- 2. **`foundations/typography.md`** — 9 levels (Display → Overline) with size, weight, line height, letter spacing, usage
109
- 3. **`foundations/spacing.md`** — 8px base: 4, 8, 12, 16, 24, 32, 48, 64, 96
110
- 4. **`foundations/grid.md`** — 12-column with gutters, margins, breakpoints
111
- 5. **`foundations/elevation.md`** — 5 shadow levels with use cases and values
112
- 6. **`foundations/border-radius.md`** — Token scale (none, sm, md, lg, xl, full)
113
-
114
- ### Component chunks
115
-
116
- Write to `patterns/components/`:
117
-
118
- 1. **`token-mapping.md`** (always) — how brand tokens map to the detected component library's theming API. Include complete, copy-paste-ready token config for the library. Cross-reference every foundation chunk. Reference values from `tokens.json` — do not duplicate token definitions.
119
-
120
- 2. **Override specs** (selective) — one file per library component that needs treatment beyond tokens. Naming: singular, kebab-case (`button.md`, `card.md`). Each includes: what to override, why (links to brand identity), code hints for the specific library.
121
-
122
- 3. **Custom component specs** (selective) — one file per brand-distinctive component that has no library equivalent. Each includes: states, anatomy, usage rules, accessibility spec, code hints.
123
-
124
- **Naming:** singular, kebab-case, lowercase. "Date Picker" → `date-picker.md`
125
-
126
- Component chunks cross-reference the foundations they use (e.g., `../foundations/color-system.md`).
127
-
128
- ### Other files
129
-
130
- - **`principles.md`** — 3-5 design principles + do's and don'ts
131
- - **`tokens.json`** — Complete W3C Design Tokens format JSON (color, typography, spacing, shadow, border-radius, breakpoint tokens)
132
- - **`{brand-name}.yml`** — Custom style preset capturing the brand's final aesthetic as a portable, reusable style. Follow the schema in `references/style-preset-schema.md`. Derive all values from the foundations you built — do not invent new values.
133
-
134
- - **`{brand-name}.md`** — Custom style prompt in designprompts.dev format. A self-contained AI prompt that reproduces this brand's aesthetic in any codebase. Use the preset `.md` file (provided as format reference) as the structural template. Must include:
135
-
136
- 1. `<role>` block — expert frontend/design role description (reuse from reference)
137
- 2. `<design-system>` block with these sections:
138
- - **Design Philosophy** — core DNA, 5-7 numbered principles derived from brand strategy (archetype, positioning, voice)
139
- - **The Vibe** — emotional tone, cultural references
140
- - **Design Token System** — complete token tables: colors (with semantic mapping), typography (scale, weights, tracking), radius, borders, shadows, textures
141
- - **Component Stylings** — buttons, cards, inputs, icons with state specs and code hints
142
- - **Non-genericness** — 3-5 "bold bets" that make this brand visually distinct
143
- - **Layout Strategy** — container, grid, spacing, z-index
144
- - **Effects & Animation** — motion tokens, interaction patterns
145
- - **Responsive Strategy** — breakpoints, mobile adaptations
146
- - **Accessibility** — contrast ratios, focus indicators, motion preferences
147
- - **Implementation Constraints** — do's and don'ts, anti-patterns
148
-
149
- Target: 400-600 lines. Every value must trace to a foundation chunk.
150
-
151
- ### `INDEX.md`
152
-
153
- After writing all chunks and tokens.json, write `INDEX.md` in the system directory:
154
-
155
- ```markdown
156
- # System
157
- > Phase: system | Brand: {name} | Generated: {DATE}
158
-
159
- ## Foundations
160
-
161
- | Chunk | File | ~Lines |
162
- |-------|------|--------|
163
- | Color System | [color-system.md](./foundations/color-system.md) | ~{N} |
164
- | Typography | [typography.md](./foundations/typography.md) | ~{N} |
165
- | Spacing | [spacing.md](./foundations/spacing.md) | ~{N} |
166
- | Grid | [grid.md](./foundations/grid.md) | ~{N} |
167
- | Elevation | [elevation.md](./foundations/elevation.md) | ~{N} |
168
- | Border Radius | [border-radius.md](./foundations/border-radius.md) | ~{N} |
169
-
170
- ## Components
171
-
172
- | File | Type | Description |
173
- |------|------|-------------|
174
- | [token-mapping.md](./components/token-mapping.md) | mapping | Brand tokens → {library} theming API |
175
- | [button.md](./components/button.md) | override | {why this needs more than tokens} |
176
- | [hero.md](./components/hero.md) | custom | {brand-distinctive, no library equivalent} |
177
- | ... | ... | ... |
178
-
179
- ## Other
180
-
181
- | File | Description |
182
- |------|-------------|
183
- | [principles.md](./principles.md) | Design principles and do's/don'ts |
184
- | [tokens.json](./tokens.json) | W3C Design Tokens |
185
- | [{brand-name}.yml](./{brand-name}.yml) | Custom style preset (portable) |
186
- | [{brand-name}.md](./{brand-name}.md) | Custom style prompt (AI-ready) |
187
- ```
188
- </output>
189
- </output>
@@ -1,19 +0,0 @@
1
- # The Design System Architect
2
-
3
- **Category:** Design Systems
4
- **Use when:** Building a complete design system from scratch, extending an existing one, or redesigning with migration mapping
5
-
6
- ---
7
-
8
- ## Prompt
9
-
10
- Act as Apple Principal Designer. Build a design system for [BRAND].
11
-
12
- ## Variables
13
-
14
- - `[BRAND]` — The brand/product name to build the system for
15
- - `[SYSTEM_STRATEGY]` — GENERATE | EXTEND | REFACTOR
16
- - `[STACK]` — Contents of `.design/system/STACK.md` (empty when greenfield)
17
- - `[COMPONENTS]` — Contents of `.design/system/COMPONENTS.md` (empty when greenfield)
18
- - `[TOKENS]` — Contents of `.design/system/TOKENS.md` (empty when greenfield)
19
- - `[DESIGN_SCOPE]` — full | partial | tokens
@@ -1,16 +0,0 @@
1
- # The Brand Identity Creator
2
-
3
- **Category:** Branding
4
- **Use when:** Creating a complete brand identity from strategy to applications
5
-
6
- ---
7
-
8
- ## Prompt
9
-
10
- Act as Creative Director at Pentagram. Build a complete brand identity for [COMPANY], a [INDUSTRY] brand targeting [AUDIENCE]. Explain strategy behind every decision.
11
-
12
- ## Variables
13
-
14
- - `[COMPANY]` — Company/brand name
15
- - `[INDUSTRY]` — Industry or sector
16
- - `[AUDIENCE]` — Target audience
@@ -1,21 +0,0 @@
1
- # The UI/UX Pattern Master
2
-
3
- **Category:** UI/UX Design
4
- **Use when:** Designing a full app UI following Apple HIG principles
5
-
6
- ---
7
-
8
- ## Prompt
9
-
10
- Act as a Senior Apple UI Designer. Design a full UI for [APP TYPE] based on [PERSONA], goals, and pain points. Follow Apple HIG. Define hierarchy, layout patterns, navigation, gestures, and platform rules.
11
-
12
- **When [COMPONENTS] is provided (existing codebase):**
13
- Reference existing components and patterns from [COMPONENTS]. Use existing component names in wireframes where applicable. When redesigning existing screens, note what changes vs what stays.
14
-
15
- ## Variables
16
-
17
- - `[APP TYPE]` — Type of application (e.g., fitness tracker, finance app)
18
- - `[PERSONA]` — Target user persona
19
- - `[SCREEN_COUNT]` — Number of screens (default 8)
20
- - `[TARGET_SCREENS]` — Specific screens when partial scope
21
- - `[COMPONENTS]` — `.design/system/COMPONENTS.md` contents (empty when greenfield)
@@ -1,14 +0,0 @@
1
- # The Marketing Asset Factory
2
-
3
- **Category:** Marketing & Campaign Design
4
- **Use when:** Building a full campaign asset library across channels
5
-
6
- ---
7
-
8
- ## Prompt
9
-
10
- Act as Creative Director at a top agency. Build a full campaign asset library for [PRODUCT]. Maintain consistent messaging, tone, and hierarchy across all assets.
11
-
12
- ## Variables
13
-
14
- - `[PRODUCT]` — Product or service name
@@ -1,15 +0,0 @@
1
- # The Implementation Spec Expert
2
-
3
- **Category:** Design-to-Code Bridge
4
- **Use when:** Mapping design decisions to a specific implementation target (UI kit, existing DS, Figma, or raw code specs)
5
-
6
- ---
7
-
8
- ## Prompt
9
-
10
- Act as an Implementation Spec Engineer. Convert [DESIGN DESCRIPTION] into implementation-ready specifications for the [IMPLEMENTATION_TARGET] target.
11
-
12
- ## Variables
13
-
14
- - `[DESIGN DESCRIPTION]` — Description of the design to convert to implementation specs
15
- - `[IMPLEMENTATION_TARGET]` — One of: `figma`, `shadcn`, `rn-reusables`, `existing`, `code`
@@ -1,14 +0,0 @@
1
- # The Design Critique Partner
2
-
3
- **Category:** Design Review & Feedback
4
- **Use when:** Getting a structured critique of an existing design
5
-
6
- ---
7
-
8
- ## Prompt
9
-
10
- Act as an Apple Design Director. Critique [DESIGN]. Tone: constructive, actionable, educational.
11
-
12
- ## Variables
13
-
14
- - `[DESIGN]` — Description or screenshot of the design to critique
@@ -1,3 +0,0 @@
1
- # Design Trend Synthesizer
2
-
3
- > This prompt is deprecated. Trend synthesis is handled inline by skills that need it (brand-research, project-research). This file is retained for reference only.
@@ -1,23 +0,0 @@
1
- # The Accessibility Auditor
2
-
3
- **Category:** Accessibility
4
- **Use when:** Auditing a design or codebase for WCAG 2.2 compliance
5
-
6
- ---
7
-
8
- ## Prompt
9
-
10
- Act as Apple Accessibility Specialist. Audit [DESIGN_OR_CODE] against WCAG 2.2 AA.
11
-
12
- ## Code Audit Mode
13
-
14
- When spawned by `/gsp:accessibility --code`, shift focus to codebase analysis:
15
- - Use Grep/Glob to find accessibility issues in actual source files
16
- - Check for missing ARIA attributes, alt text, keyboard handlers, lang attributes
17
- - Verify skip-nav, heading hierarchy, semantic HTML, focus management
18
- - Report issues with actual file paths and line numbers
19
- - Prioritize issues by severity (Critical > Major > Minor)
20
-
21
- ## Variables
22
-
23
- - `[DESIGN_OR_CODE]` — Design chunks to audit, or codebase paths for code audit mode
@@ -1,49 +0,0 @@
1
- # The Design-to-Code Translator
2
-
3
- **Category:** Design Engineering
4
- **Use when:** Converting a design into production-ready frontend code
5
-
6
- ---
7
-
8
- ## Prompt
9
-
10
- Act as a Vercel Design Engineer. Convert [DESIGN] into production-ready frontend code using [TECH STACK].
11
-
12
- ## Visual Quality
13
-
14
- Every screen must pass these visual craft checks before marking complete:
15
-
16
- 1. **Background treatment** — never plain white/dark. Subtle gradient, texture, or decorative element.
17
- 2. **Shadow depth** — interactive elements need shadow transitions on hover. Tint shadows to background hue.
18
- 3. **Entrance motion** — content animates in on load (staggered fade-up, spring physics). Respect `prefers-reduced-motion`.
19
- 4. **Typography hierarchy** — at least 3 distinct levels per screen with weight, tracking, and color variation.
20
- 5. **State polish** — hover/focus/active/pressed feel deliberate (shadow shifts, subtle scale, translateY) not just color swaps.
21
- 6. **Content authenticity** — no Lorem Ipsum, no "John Doe", no fake round numbers. Real draft copy.
22
- 7. **Spacing intention** — consistent use of spacing scale (4/8px base). Visual grouping through proximity, not just borders.
23
- 8. **Color coherence** — one accent, consistent gray temperature, no stray saturated colors.
24
- 9. **Component personality** — components customized to brand, not library defaults. Adjusted radius, shadows, colors.
25
- 10. **Surface variety** — not all cards. Use spacing, borders, background shifts for hierarchy.
26
- 11. **Icon consistency** — one icon family, one stroke weight throughout.
27
- 12. **Image direction** — imagery style (photo/illustration/CSS-only) matches brand character.
28
- 13. **Responsive craft** — mobile is a designed experience, not just "it fits."
29
- 14. **Motion coherence** — spring physics for interactive, fade-up for content, all consistent energy.
30
-
31
- When `{brand-name}.md` is provided, it is your primary style guide. Implement its signature effects and bold bets.
32
-
33
- ## Working Mode
34
-
35
- You work directly in the codebase — not in `.design/build/`:
36
- - Use Edit to modify existing source files
37
- - Use Write to create new source files in the correct codebase locations
38
- - Use Bash to install dependencies and verify compilation
39
- - Follow `.design/system/CONVENTIONS.md` for file placement, naming, and patterns
40
- - Leave all changes unstaged for the user to review and commit
41
- - After implementation, write BUILD-LOG.md to `.design/projects/{project}/build/` as a record of what was done
42
-
43
- ## Variables
44
-
45
- - `[DESIGN]` — Description or screenshot of the design to implement
46
- - `[TECH STACK]` — Frontend stack (e.g., React + Tailwind, Next.js, Vue, SwiftUI)
47
- - `[STACK]` — `.design/system/STACK.md` contents (empty when greenfield)
48
- - `[COMPONENTS]` — `.design/system/COMPONENTS.md` contents (empty when greenfield)
49
- - `[CONVENTIONS]` — `.design/system/CONVENTIONS.md` contents (empty when greenfield)
@@ -1,17 +0,0 @@
1
- # The Project Scoper
2
-
3
- **Category:** Project Scoping
4
- **Use when:** Scoping a design project — determining screens, component adaptations, and implementation gaps
5
-
6
- ---
7
-
8
- ## Prompt
9
-
10
- Act as a Senior Design Project Lead. Scope [PROJECT] using the brand's design system from [BRAND]. Encourage treating projects as bounded issues and PRs.
11
-
12
- ## Variables
13
-
14
- - `[PROJECT]` — The project being scoped (from BRIEF.md)
15
- - `[BRAND]` — The brand whose design system is being used
16
- - `[IMPLEMENTATION_TARGET]` — One of: `shadcn`, `rn-reusables`, `existing`, `code`, `figma`
17
- - `[INVENTORY]` — Existing codebase inventory (when available)
@@ -1,18 +0,0 @@
1
- # The Deliverable Reviewer
2
-
3
- **Category:** Quality Assurance
4
- **Use when:** QA validating actual codebase implementation against design intent
5
-
6
- ---
7
-
8
- ## Prompt
9
-
10
- Act as a Senior QA Design Engineer. Review the actual codebase implementation for [PROJECT] against the design intent from [BRAND]'s design system.
11
-
12
- You review actual source code, not `.design/build/` specs. Use Grep/Glob to find issues in the codebase. Reference actual file paths and line numbers in all issues.
13
-
14
- ## Variables
15
-
16
- - `[PROJECT]` — The project being reviewed
17
- - `[BRAND]` — The brand whose design system was used
18
- - `[CRITIQUE_FIXES]` — Prioritized fixes from the critique phase (if available)
@@ -1,18 +0,0 @@
1
- # The Project Researcher
2
-
3
- **Category:** Project Research
4
- **Use when:** Deep research into UX patterns, competitor experiences, technical approaches, accessibility strategies, and reference specs for a specific project
5
-
6
- ---
7
-
8
- ## Prompt
9
-
10
- Act as a Senior UX Researcher and Technical Analyst. Research [PROJECT_TYPE] deeply — UX patterns, competitor experiences, technical approaches, accessibility strategies, and reference specs for execution.
11
-
12
- ## Variables
13
-
14
- - `[PROJECT_TYPE]` — What's being built (dashboard, e-commerce, social app, SaaS, etc.)
15
- - `[TECH_STACK]` — Implementation technology (React + Tailwind, React Native, etc.)
16
- - `[PLATFORM]` — Target platforms (web, iOS, Android)
17
- - `[BRAND_DISCOVERY]` — Brand-level competitive audit and trends (to build on, not duplicate)
18
- - `[SCOPE]` — Project scope from brief/scope.md
@@ -1,132 +0,0 @@
1
- # Phase Transition Screen
2
-
3
- Rendered at the end of every phase skill. Confirms what was accomplished, shows output artifacts, and routes the user forward.
4
-
5
- ## When to render
6
-
7
- Every skill that completes a phase must render a transition. The skill itself just says:
8
-
9
- ```
10
- Render phase transition (see `references/phase-transitions.md`).
11
- ```
12
-
13
- This reference handles all the logic — skills should NOT hardcode pipeline layouts.
14
-
15
- ## Styling
16
-
17
- Output as plain text using Unicode characters for visual hierarchy:
18
-
19
- - `◆` for completed phases
20
- - `◈` for next phase (the one the user is about to enter)
21
- - `◇` for pending phases
22
- - `───` connecting phases in the pipeline line
23
- - `──────` divider between sections
24
- - Tree connectors `├──`, `└──`, `│` for file listings
25
-
26
- ## Rendering logic
27
-
28
- Read the brand or project STATE.md to determine context.
29
-
30
- ### Step 1: Pipeline progress line (conditional)
31
-
32
- Show the pipeline line **only when 2+ phases are complete** (i.e., the user is clearly in a flow). If this is the first phase completed, skip the pipeline line — the user may have invoked the skill standalone.
33
-
34
- ```
35
- {brand-or-project-name}
36
- ◆ discover ─── ◆ strategy ─── ◈ identity ─── ◇ system
37
- ```
38
-
39
- #### Branding phases
40
-
41
- `discover ─── strategy ─── identity ─── patterns`
42
-
43
- If audit phase exists (evolve mode), prepend: `audit ─── `
44
-
45
- #### Project phases
46
-
47
- `brief ─── research ─── design ─── critique ─── build ─── review`
48
-
49
- If launch is in scope, append: ` ─── launch`
50
-
51
- ### Step 2: Phase completion + file tree (always)
52
-
53
- Always show what was accomplished and what was produced:
54
-
55
- ```
56
- ◆ {phase} complete — {completion_message}
57
-
58
- {phase_dir}/
59
- ├── {file1}.md
60
- ├── {file2}.md
61
- └── INDEX.md
62
-
63
- ──────────────────────────────
64
- ```
65
-
66
- ### Step 3: Routing options (adaptive)
67
-
68
- Use `AskUserQuestion` with options adapted to context:
69
-
70
- **When in a pipeline flow** (previous phase was completed in this or a recent session):
71
- 1. **Continue to {next}** — "{description of next phase}"
72
- 2. **View progress** — "see the full dashboard"
73
- 3. **Done for now** — "pick up later with /gsp:start"
74
-
75
- **When standalone** (user invoked the skill directly, no clear pipeline context):
76
- 1. **View output** — "review what was generated"
77
- 2. **Done** — "that's all I needed"
78
-
79
- Use judgment — if the user explicitly asked for one skill, don't push them into the next phase. If they're clearly flowing through the pipeline, offer the next step.
80
-
81
- ## Completion Messages
82
-
83
- ### Branding Phases
84
-
85
- | Phase | Completion Message | Next Phase |
86
- |-------|-------------------|------------|
87
- | audit | brand assessed | discover — `/gsp:brand-research` |
88
- | discover | market landscape mapped | strategy — `/gsp:brand-strategy` |
89
- | strategy | brand platform defined | identity — `/gsp:brand-identity` |
90
- | identity | visual system designed | patterns — `/gsp:brand-patterns` |
91
- | patterns | design system built | project setup — `/gsp:start` (scans codebase, gathers brief, creates project) |
92
-
93
- ### Project Phases
94
-
95
- | Phase | Completion Message | Next Phase |
96
- |-------|-------------------|------------|
97
- | brief | project scoped | research — `/gsp:project-research` |
98
- | research | patterns and approaches researched | design — `/gsp:project-design` |
99
- | design | screens designed | critique — `/gsp:project-critique` |
100
- | critique | designs critiqued | build — `/gsp:project-build` |
101
- | build | code implemented | review — `/gsp:project-review` |
102
- | review | implementation validated | launch — `/gsp:launch` (or done) |
103
- | launch | campaign assets created | done |
104
-
105
- ### Special cases
106
-
107
- **Critique with critical issues:**
108
- ```
109
- ◈ critique — critical issues found, revising designs
110
-
111
- ──────────────────────────────
112
- ```
113
- Options: Revise designs / Override and continue / View issues
114
-
115
- **Review with QA failures:**
116
- ```
117
- ◈ review — QA found issues, needs revision
118
-
119
- ──────────────────────────────
120
- ```
121
- Options: Fix and rebuild / View issues / Done for now
122
-
123
- **Final phase (all complete):**
124
- Add ` fully pretty.` after the divider.
125
-
126
- ## File Tree Rules
127
-
128
- - Root is the phase directory name followed by `/`
129
- - Files sorted alphabetically, directories first
130
- - INDEX.md always listed last
131
- - Use `├──` for all items except the last, which uses `└──`
132
- - Subdirectories show their contents with `│` continuation
@@ -1,63 +0,0 @@
1
- # Style Preset YAML Schema
2
-
3
- Template for brand-derived style preset files (`{brand-name}.yml`). All values must trace to foundation chunks.
4
-
5
- ```yaml
6
- name: {brand-slug}
7
- description: {one-line brand aesthetic summary}
8
- tags: [5-8 fuzzy-match tags for style discovery]
9
- source: brand # marks this as brand-derived, not a GSP preset
10
-
11
- tokens:
12
- color:
13
- primary: "{hex}" # from foundations/color-system.md
14
- secondary: "{hex}"
15
- accent: "{hex}"
16
- background: "{hex}"
17
- surface: "{hex}"
18
- on-primary: "{hex}"
19
- on-background: "{hex}"
20
- error: "{hex}"
21
- success: "{hex}"
22
- warning: "{hex}"
23
- info: "{hex}"
24
-
25
- typography:
26
- font-family-primary: "{font stack}" # from foundations/typography.md
27
- font-family-mono: "{font stack}"
28
- font-weight-heading: {number}
29
- font-weight-body: {number}
30
- font-size-base: "{px}"
31
- line-height-base: {number}
32
-
33
- shape:
34
- border-radius-sm: "{px}" # from foundations/border-radius.md
35
- border-radius-md: "{px}"
36
- border-radius-lg: "{px}"
37
- border-width: "{px}"
38
- border-color: "{hex}"
39
-
40
- elevation:
41
- shadow-sm: "{value}" # from foundations/elevation.md
42
- shadow-md: "{value}"
43
- shadow-lg: "{value}"
44
- shadow-xl: "{value}"
45
-
46
- spacing:
47
- base: {number} # from foundations/spacing.md
48
- scale: [{values}]
49
-
50
- motion:
51
- duration-fast: "{ms}"
52
- duration-normal: "{ms}"
53
- easing: "{value}"
54
-
55
- dark_mode:
56
- color:
57
- background: "{hex}"
58
- surface: "{hex}"
59
- on-background: "{hex}"
60
-
61
- compatibility: [] # leave empty for brand styles
62
- clashes: []
63
- ```