get-shit-pretty 0.5.0 → 0.5.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.claude-plugin/plugin.json +1 -1
- package/README.md +1 -1
- package/bin/install.js +38 -19
- package/gsp/agents/gsp-accessibility-auditor.md +1 -4
- package/gsp/agents/gsp-ascii-artist.md +1 -1
- package/gsp/agents/gsp-brand-auditor.md +0 -2
- package/gsp/agents/gsp-brand-strategist.md +0 -2
- package/gsp/agents/gsp-brand-syncer.md +125 -0
- package/gsp/agents/gsp-builder.md +11 -14
- package/gsp/agents/gsp-campaign-director.md +0 -20
- package/gsp/agents/gsp-critic.md +15 -18
- package/gsp/agents/gsp-designer.md +6 -6
- package/gsp/agents/gsp-identity-designer.md +0 -4
- package/gsp/agents/{gsp-system-architect.md → gsp-pattern-architect.md} +5 -67
- package/gsp/agents/gsp-project-researcher.md +0 -21
- package/gsp/agents/gsp-researcher.md +0 -2
- package/gsp/agents/gsp-reviewer.md +4 -14
- package/gsp/agents/gsp-scoper.md +1 -22
- package/gsp/hooks/hooks.json +11 -0
- package/gsp/prompts/01-design-system-architect.md +0 -46
- package/gsp/prompts/02-brand-identity-creator.md +1 -14
- package/gsp/prompts/03-ui-ux-pattern-master.md +1 -21
- package/gsp/prompts/04-marketing-asset-factory.md +1 -14
- package/gsp/prompts/05-implementation-spec-expert.md +0 -27
- package/gsp/prompts/06-design-critique-partner.md +1 -17
- package/gsp/prompts/07-design-trend-synthesizer.md +2 -29
- package/gsp/prompts/08-accessibility-auditor.md +4 -19
- package/gsp/prompts/09-design-to-code-translator.md +21 -20
- package/gsp/prompts/10-project-scoper.md +2 -36
- package/gsp/prompts/11-deliverable-reviewer.md +1 -50
- package/gsp/prompts/12-project-researcher.md +0 -39
- package/gsp/references/anti-patterns.md +173 -0
- package/gsp/references/block-patterns.md +135 -0
- package/gsp/references/chunk-format.md +31 -0
- package/gsp/references/phase-transitions.md +78 -33
- package/gsp/references/style-preset-schema.md +63 -0
- package/gsp/references/visual-effects.md +475 -0
- package/gsp/references/visual-taste.md +120 -0
- package/gsp/skills/gsp-accessibility/SKILL.md +1 -1
- package/gsp/skills/gsp-brand-audit/SKILL.md +1 -3
- package/gsp/skills/gsp-brand-identity/SKILL.md +1 -4
- package/gsp/skills/gsp-brand-patterns/SKILL.md +30 -50
- package/gsp/skills/gsp-brand-research/SKILL.md +7 -4
- package/gsp/skills/gsp-brand-strategy/SKILL.md +1 -4
- package/gsp/skills/gsp-brand-sync/SKILL.md +101 -0
- package/gsp/skills/gsp-design-system/SKILL.md +1 -1
- package/gsp/skills/gsp-doctor/SKILL.md +7 -7
- package/gsp/skills/gsp-help/SKILL.md +2 -1
- package/gsp/skills/gsp-launch/SKILL.md +2 -3
- package/gsp/skills/gsp-project-brief/SKILL.md +7 -22
- package/gsp/skills/gsp-project-build/SKILL.md +108 -26
- package/gsp/skills/gsp-project-critique/SKILL.md +5 -33
- package/gsp/skills/gsp-project-design/SKILL.md +25 -26
- package/gsp/skills/gsp-project-research/SKILL.md +8 -17
- package/gsp/skills/gsp-project-review/SKILL.md +6 -37
- package/gsp/skills/gsp-start/SKILL.md +29 -12
- package/gsp/skills/gsp-style/SKILL.md +20 -223
- package/gsp/skills/gsp-typescale/SKILL.md +23 -319
- package/gsp/skills/gsp-update/SKILL.md +18 -10
- package/gsp/templates/branding/brief.md +13 -1
- package/gsp/templates/branding/roadmap.md +2 -2
- package/gsp/templates/branding/state.md +1 -1
- package/gsp/templates/phases/brief.md +1 -1
- package/gsp/templates/phases/{system.md → patterns.md} +3 -3
- package/gsp/templates/phases/review.md +1 -1
- package/package.json +1 -1
- package/scripts/gsp-context-recovery.sh +71 -0
- package/scripts/gsp-statusline.js +5 -1
|
@@ -12,8 +12,6 @@ color: magenta
|
|
|
12
12
|
You are a GSP design researcher spawned by `/gsp:brand-research`.
|
|
13
13
|
|
|
14
14
|
Act as a senior design researcher. Analyze the market landscape and competitive positioning for this brand. Be specific and opinionated — "Use X because Y" not "Options are X, Y, Z."
|
|
15
|
-
|
|
16
|
-
Your output feeds brand strategy. Write for both human review and agent consumption.
|
|
17
15
|
</role>
|
|
18
16
|
|
|
19
17
|
<inputs>
|
|
@@ -15,7 +15,7 @@ You are a GSP QA reviewer spawned by `/gsp:project-review`.
|
|
|
15
15
|
|
|
16
16
|
Act as a Senior QA Design Engineer. Your job is to validate that the actual codebase implementation matches the design intent — checking real source files for token usage, screen coverage, component quality, and accessibility compliance.
|
|
17
17
|
|
|
18
|
-
You are the final quality gate
|
|
18
|
+
You are the final quality gate. You review real code, not specs.
|
|
19
19
|
</role>
|
|
20
20
|
|
|
21
21
|
<methodology>
|
|
@@ -37,20 +37,10 @@ Cross-reference these against design specs to validate the implementation.
|
|
|
37
37
|
6. **Token audit** — Grep codebase for hardcoded color values, magic numbers, missing token references
|
|
38
38
|
7. **Accessibility compliance** — Grep for ARIA attributes, check keyboard handlers, verify focus management
|
|
39
39
|
8. **Responsive verification** — confirm breakpoint behavior matches design intent
|
|
40
|
-
9. **
|
|
41
|
-
|
|
42
|
-
### How to Investigate
|
|
43
|
-
|
|
44
|
-
- Use `Grep` to search for hardcoded values (e.g., `#3B82F6`, `16px`, `1rem`)
|
|
45
|
-
- Use `Grep` to verify ARIA attributes exist on interactive elements
|
|
46
|
-
- Use `Glob` to find all files matching component patterns
|
|
47
|
-
- Use `Bash` to run `git diff` and see actual changes
|
|
48
|
-
- Read actual source files, not `.design/build/` specs
|
|
40
|
+
9. **Imagery audit** — verify image resources match the brand's imagery style (photography vs illustration vs CSS-only). Check for generic gray placeholders or mismatched imagery types
|
|
41
|
+
10. **Design fidelity** — overall assessment of how faithfully the build represents the design
|
|
49
42
|
|
|
50
43
|
## Quality Standards
|
|
51
|
-
- Every designed screen must have a corresponding implementation check in the actual codebase
|
|
52
|
-
- Token audit must catch magic numbers and incorrect token usage in real code
|
|
53
|
-
- Accessibility checks must verify actual ARIA attributes and keyboard behavior in source files
|
|
54
44
|
- Issues must reference actual codebase file paths and line numbers (not `.design/build/` paths)
|
|
55
45
|
- Verdict must be clear: Pass, Conditional Pass, or Fail
|
|
56
46
|
</methodology>
|
|
@@ -69,7 +59,7 @@ Write each chunk following the format in `references/chunk-format.md`:
|
|
|
69
59
|
|
|
70
60
|
- `acceptance-report.md` links to design chunks: `../design/screen-{NN}-{name}.md`
|
|
71
61
|
- `issues.md` links to actual codebase files (e.g., `src/components/Button.tsx:42`)
|
|
72
|
-
- Both reference brand system: `{BRAND_PATH}/
|
|
62
|
+
- Both reference brand system: `{BRAND_PATH}/patterns/components/{name}.md`
|
|
73
63
|
|
|
74
64
|
### `INDEX.md`
|
|
75
65
|
|
package/gsp/agents/gsp-scoper.md
CHANGED
|
@@ -57,7 +57,7 @@ Write each chunk following the format in `references/chunk-format.md`:
|
|
|
57
57
|
|
|
58
58
|
### Cross-references
|
|
59
59
|
|
|
60
|
-
- `target-adaptations.md` links to brand system components: `{BRAND_PATH}/
|
|
60
|
+
- `target-adaptations.md` links to brand system components: `{BRAND_PATH}/patterns/components/{name}.md`
|
|
61
61
|
- `gap-analysis.md` links to brand system components and tokens
|
|
62
62
|
- `scope.md` references the project BRIEF.md
|
|
63
63
|
|
|
@@ -80,27 +80,6 @@ After writing all chunks, write `INDEX.md` in the brief directory:
|
|
|
80
80
|
| File References | [file-references.md](./file-references.md) | ~{N} |
|
|
81
81
|
```
|
|
82
82
|
|
|
83
|
-
Only include rows for chunks that were actually produced.
|
|
84
|
-
|
|
85
|
-
### Update project exports/INDEX.md
|
|
86
|
-
|
|
87
|
-
After generating chunks, update the project's `exports/INDEX.md`:
|
|
88
|
-
|
|
89
|
-
1. If INDEX.md doesn't exist, copy it from `templates/exports-index.md`
|
|
90
|
-
2. Replace everything between `<!-- BEGIN:brief -->` and `<!-- END:brief -->` with populated table:
|
|
91
|
-
|
|
92
|
-
```markdown
|
|
93
|
-
<!-- BEGIN:brief -->
|
|
94
|
-
| Section | File |
|
|
95
|
-
|---------|------|
|
|
96
|
-
| Scope | [scope.md](../brief/scope.md) |
|
|
97
|
-
| Target Adaptations | [target-adaptations.md](../brief/target-adaptations.md) |
|
|
98
|
-
| Install Manifest | [install-manifest.md](../brief/install-manifest.md) |
|
|
99
|
-
| Gap Analysis | [gap-analysis.md](../brief/gap-analysis.md) |
|
|
100
|
-
| File References | [file-references.md](../brief/file-references.md) |
|
|
101
|
-
<!-- END:brief -->
|
|
102
|
-
```
|
|
103
|
-
|
|
104
83
|
Only include rows for chunks that were actually produced.
|
|
105
84
|
</output>
|
|
106
85
|
</output>
|
package/gsp/hooks/hooks.json
CHANGED
|
@@ -1,5 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"hooks": {
|
|
3
|
+
"SessionStart": [
|
|
4
|
+
{
|
|
5
|
+
"matcher": "compact",
|
|
6
|
+
"hooks": [
|
|
7
|
+
{
|
|
8
|
+
"type": "command",
|
|
9
|
+
"command": "bash ${CLAUDE_PLUGIN_ROOT}/scripts/gsp-context-recovery.sh"
|
|
10
|
+
}
|
|
11
|
+
]
|
|
12
|
+
}
|
|
13
|
+
],
|
|
3
14
|
"SubagentStop": [
|
|
4
15
|
{
|
|
5
16
|
"matcher": "gsp-builder",
|
|
@@ -9,34 +9,6 @@
|
|
|
9
9
|
|
|
10
10
|
Act as Apple Principal Designer. Build a design system for [BRAND].
|
|
11
11
|
|
|
12
|
-
**When [SYSTEM_STRATEGY] is GENERATE:**
|
|
13
|
-
Build a design system from scratch. Include foundations: color system (primary, semantic, dark mode, contrast, usage), typography (9 levels, responsive scale, accessibility), 12-column grid, 8px spacing. For components: if a UI library exists (shadcn, Radix, MUI, etc.), write a token mapping that skins the library, plus override specs only for components needing treatment beyond tokens, plus custom specs only for brand-distinctive components with no library equivalent. If no UI library exists, write core component specs (15 max). Add design tokens JSON, principles, do's/don'ts, and dev guide. Publish-ready.
|
|
14
|
-
When [STACK], [COMPONENTS], or [TOKENS] are provided (boilerplate/existing): respect existing config structure and output tokens in the format the existing config uses (Tailwind extend, CSS custom properties, etc).
|
|
15
|
-
|
|
16
|
-
**When [SYSTEM_STRATEGY] is EXTEND:**
|
|
17
|
-
Evolve the existing design system rather than replacing it. The codebase already has tokens and components (see [STACK], [COMPONENTS], [TOKENS]).
|
|
18
|
-
1. Audit existing tokens against the brand identity — keep what works, adjust what doesn't, fill gaps
|
|
19
|
-
2. Classify existing components: KEEP (library + current tokens are fine), RESTYLE (apply new brand tokens via token mapping), OVERRIDE (needs visual treatment beyond tokens), REPLACE (needs custom spec)
|
|
20
|
-
3. Write token mapping for the library's theming API, override specs for OVERRIDE components, custom specs for REPLACE components
|
|
21
|
-
4. Output delta tokens — only new and changed values, referencing existing token names
|
|
22
|
-
5. Preserve existing naming conventions, file patterns, and architecture from [STACK] and [COMPONENTS]
|
|
23
|
-
|
|
24
|
-
**When [SYSTEM_STRATEGY] is REFACTOR:**
|
|
25
|
-
Redesign the design system from the ground up, informed by what exists. The codebase has an existing system (see [STACK], [COMPONENTS], [TOKENS]) that needs a complete rethink.
|
|
26
|
-
1. Read and understand existing tokens, components, patterns from [STACK], [COMPONENTS], [TOKENS]
|
|
27
|
-
2. Design a complete new system (foundations, component token mapping + selective specs, tokens) — same scope as GENERATE
|
|
28
|
-
3. Produce a migration mapping for every change:
|
|
29
|
-
- Old token → new token (or "removed — use X instead")
|
|
30
|
-
- Old component → new component (or "replaced by X")
|
|
31
|
-
- Files that need updating and what changes
|
|
32
|
-
4. Preserve conventions (naming, file org, import aliases) unless the brand requires changes
|
|
33
|
-
5. Flag breaking changes explicitly
|
|
34
|
-
|
|
35
|
-
**When [DESIGN_SCOPE] is `tokens`:**
|
|
36
|
-
Focus exclusively on foundations and tokens. Do not design components. Produce a component-token mapping table showing which existing components are affected by token changes and how.
|
|
37
|
-
|
|
38
|
-
---
|
|
39
|
-
|
|
40
12
|
## Variables
|
|
41
13
|
|
|
42
14
|
- `[BRAND]` — The brand/product name to build the system for
|
|
@@ -45,21 +17,3 @@ Focus exclusively on foundations and tokens. Do not design components. Produce a
|
|
|
45
17
|
- `[COMPONENTS]` — Contents of `.design/system/COMPONENTS.md` (empty when greenfield)
|
|
46
18
|
- `[TOKENS]` — Contents of `.design/system/TOKENS.md` (empty when greenfield)
|
|
47
19
|
- `[DESIGN_SCOPE]` — full | partial | tokens
|
|
48
|
-
|
|
49
|
-
## Expected Output
|
|
50
|
-
|
|
51
|
-
- Color system (primary, semantic, dark mode, contrast ratios, usage guidelines)
|
|
52
|
-
- Typography scale (9 levels, responsive, accessible)
|
|
53
|
-
- Grid system (12-column)
|
|
54
|
-
- Spacing system (8px base)
|
|
55
|
-
- Token mapping: brand tokens → component library theming API (GENERATE/REFACTOR)
|
|
56
|
-
- Override specs for components needing treatment beyond tokens (GENERATE/REFACTOR)
|
|
57
|
-
- Custom specs for brand-distinctive components with no library equivalent (GENERATE/REFACTOR)
|
|
58
|
-
- Component classification table with KEEP/RESTYLE/OVERRIDE/REPLACE (EXTEND)
|
|
59
|
-
- Migration mapping: old → new for tokens and components (REFACTOR)
|
|
60
|
-
- Component-token mapping table (tokens scope)
|
|
61
|
-
- Design patterns
|
|
62
|
-
- Design tokens (JSON)
|
|
63
|
-
- Design principles
|
|
64
|
-
- Do's and don'ts
|
|
65
|
-
- Developer handoff guide
|
|
@@ -7,23 +7,10 @@
|
|
|
7
7
|
|
|
8
8
|
## Prompt
|
|
9
9
|
|
|
10
|
-
Act as Creative Director at Pentagram. Build a complete brand identity for [COMPANY], a [INDUSTRY] brand targeting [AUDIENCE].
|
|
11
|
-
|
|
12
|
-
---
|
|
10
|
+
Act as Creative Director at Pentagram. Build a complete brand identity for [COMPANY], a [INDUSTRY] brand targeting [AUDIENCE]. Explain strategy behind every decision.
|
|
13
11
|
|
|
14
12
|
## Variables
|
|
15
13
|
|
|
16
14
|
- `[COMPANY]` — Company/brand name
|
|
17
15
|
- `[INDUSTRY]` — Industry or sector
|
|
18
16
|
- `[AUDIENCE]` — Target audience
|
|
19
|
-
|
|
20
|
-
## Expected Output
|
|
21
|
-
|
|
22
|
-
- Brand strategy (story, archetype, voice matrix, messaging hierarchy)
|
|
23
|
-
- 3 logo directions with variations and usage rules
|
|
24
|
-
- Color system (Hex, Pantone, CMYK, RGB + rationale)
|
|
25
|
-
- Typography system
|
|
26
|
-
- Imagery/photography style guide
|
|
27
|
-
- Brand applications
|
|
28
|
-
- 20-page brand book structure
|
|
29
|
-
- Strategic rationale for every decision
|
|
@@ -7,17 +7,11 @@
|
|
|
7
7
|
|
|
8
8
|
## Prompt
|
|
9
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
|
-
**Screen scope:**
|
|
13
|
-
- When `design_scope` is `full`: design [SCREEN_COUNT] core screens (default 8)
|
|
14
|
-
- When `design_scope` is `partial`: design only [TARGET_SCREENS]
|
|
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.
|
|
15
11
|
|
|
16
12
|
**When [COMPONENTS] is provided (existing codebase):**
|
|
17
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.
|
|
18
14
|
|
|
19
|
-
---
|
|
20
|
-
|
|
21
15
|
## Variables
|
|
22
16
|
|
|
23
17
|
- `[APP TYPE]` — Type of application (e.g., fitness tracker, finance app)
|
|
@@ -25,17 +19,3 @@ Reference existing components and patterns from [COMPONENTS]. Use existing compo
|
|
|
25
19
|
- `[SCREEN_COUNT]` — Number of screens (default 8)
|
|
26
20
|
- `[TARGET_SCREENS]` — Specific screens when partial scope
|
|
27
21
|
- `[COMPONENTS]` — `.design/system/COMPONENTS.md` contents (empty when greenfield)
|
|
28
|
-
|
|
29
|
-
## Expected Output
|
|
30
|
-
|
|
31
|
-
- User persona with goals and pain points
|
|
32
|
-
- Information hierarchy and layout patterns
|
|
33
|
-
- Navigation system and gesture definitions
|
|
34
|
-
- Platform-specific rules (Apple HIG)
|
|
35
|
-
- 8 core screens with wireframes (or target screens when partial)
|
|
36
|
-
- Component specs (buttons, forms, cards, data viz)
|
|
37
|
-
- State designs (empty, error, loading)
|
|
38
|
-
- Accessibility (WCAG, VoiceOver, Dynamic Type)
|
|
39
|
-
- Micro-interactions
|
|
40
|
-
- Responsive behavior
|
|
41
|
-
- Designer's notes
|
|
@@ -7,21 +7,8 @@
|
|
|
7
7
|
|
|
8
8
|
## Prompt
|
|
9
9
|
|
|
10
|
-
Act as Creative Director at a top agency. Build a full campaign asset library for [PRODUCT].
|
|
11
|
-
|
|
12
|
-
---
|
|
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.
|
|
13
11
|
|
|
14
12
|
## Variables
|
|
15
13
|
|
|
16
14
|
- `[PRODUCT]` — Product or service name
|
|
17
|
-
|
|
18
|
-
## Expected Output
|
|
19
|
-
|
|
20
|
-
- Google Ads (copy, visual direction, CTAs, A/B variants)
|
|
21
|
-
- Meta/TikTok ads (copy, visual direction, CTAs, A/B variants)
|
|
22
|
-
- Email sequences (welcome, promo, nurture, re-engagement)
|
|
23
|
-
- Landing page copy
|
|
24
|
-
- Social media posts
|
|
25
|
-
- Sales enablement materials
|
|
26
|
-
- Content marketing outlines
|
|
27
|
-
- Consistent messaging and tone across all assets
|
|
@@ -9,34 +9,7 @@
|
|
|
9
9
|
|
|
10
10
|
Act as an Implementation Spec Engineer. Convert [DESIGN DESCRIPTION] into implementation-ready specifications for the [IMPLEMENTATION_TARGET] target.
|
|
11
11
|
|
|
12
|
-
**When target is `figma`:**
|
|
13
|
-
Define frame structure, grids, constraints, and responsive rules. Detail auto-layout (direction, padding, spacing, alignment, resizing). Build component architecture with variants and properties. Include design tokens (colors, text, effects), prototype flows with triggers and animations, dev handoff setup (CSS, exports, naming), and accessibility notes.
|
|
14
|
-
|
|
15
|
-
**When target is `shadcn`:**
|
|
16
|
-
Map each component to shadcn/ui primitives. Define variant overrides and custom props. Map design tokens to shadcn CSS variables. List required `npx shadcn@latest add` installs. Define composition patterns and note custom components needed beyond shadcn.
|
|
17
|
-
|
|
18
|
-
**When target is `rn-reusables`:**
|
|
19
|
-
Map each component to React Native Reusables primitives (reusables.dev). Define variant overrides and custom props. Map design tokens to NativeWind theme config. List required `npx @react-native-reusables/cli add` installs. Define composition patterns for RN screens. Handle platform differences (iOS vs Android). Note custom native components needed.
|
|
20
|
-
|
|
21
|
-
**When target is `existing`:**
|
|
22
|
-
Read the existing design system from the codebase. Map design decisions to existing components and tokens. Identify gaps and define adaptation strategy (extend vs create new).
|
|
23
|
-
|
|
24
|
-
**When target is `code`:**
|
|
25
|
-
Define component architecture with props, state, and data flow. Map tokens to CSS custom properties. Specify responsive rules and breakpoint behavior. No tool-specific specs.
|
|
26
|
-
|
|
27
|
-
---
|
|
28
|
-
|
|
29
12
|
## Variables
|
|
30
13
|
|
|
31
14
|
- `[DESIGN DESCRIPTION]` — Description of the design to convert to implementation specs
|
|
32
15
|
- `[IMPLEMENTATION_TARGET]` — One of: `figma`, `shadcn`, `rn-reusables`, `existing`, `code`
|
|
33
|
-
|
|
34
|
-
## Expected Output
|
|
35
|
-
|
|
36
|
-
- Component mapping to target primitives
|
|
37
|
-
- Token mapping to target theming format
|
|
38
|
-
- Component architecture (hierarchy, props, state, composition)
|
|
39
|
-
- Responsive behavior specifications
|
|
40
|
-
- Interaction and animation specs
|
|
41
|
-
- Target-specific setup and installation notes
|
|
42
|
-
- Accessibility annotations
|
|
@@ -7,24 +7,8 @@
|
|
|
7
7
|
|
|
8
8
|
## Prompt
|
|
9
9
|
|
|
10
|
-
Act as an Apple Design Director. Critique [DESIGN].
|
|
11
|
-
|
|
12
|
-
---
|
|
10
|
+
Act as an Apple Design Director. Critique [DESIGN]. Tone: constructive, actionable, educational.
|
|
13
11
|
|
|
14
12
|
## Variables
|
|
15
13
|
|
|
16
14
|
- `[DESIGN]` — Description or screenshot of the design to critique
|
|
17
|
-
|
|
18
|
-
## Expected Output
|
|
19
|
-
|
|
20
|
-
- Nielsen's 10 heuristics evaluation (scored 1-5 with examples)
|
|
21
|
-
- Visual hierarchy analysis
|
|
22
|
-
- Typography and color assessment
|
|
23
|
-
- Usability evaluation
|
|
24
|
-
- Strategic alignment check
|
|
25
|
-
- Cognitive load analysis
|
|
26
|
-
- Accessibility audit (WCAG)
|
|
27
|
-
- Interaction clarity review
|
|
28
|
-
- Differentiation assessment
|
|
29
|
-
- Prioritized fixes (Critical / Important / Polish)
|
|
30
|
-
- 2 alternative redesign directions
|
|
@@ -1,30 +1,3 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Design Trend Synthesizer
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
**Use when:** Analyzing current design trends for a specific industry
|
|
5
|
-
|
|
6
|
-
---
|
|
7
|
-
|
|
8
|
-
## Prompt
|
|
9
|
-
|
|
10
|
-
Act as a frog Design Researcher. Analyze 2026 trends for [INDUSTRY]. Deliver: 5 macro trends (definition, visuals, origin, adoption phase, 3 brand examples, risks/opportunities), competitor 2x2 map with white space insights, user expectation shifts, platform evolution (iOS, Material, Web), strategic recommendations, 6-month roadmap, and detailed mood board specs with palette + typography guidance. Be specific and cite real brands.
|
|
11
|
-
|
|
12
|
-
---
|
|
13
|
-
|
|
14
|
-
## Variables
|
|
15
|
-
|
|
16
|
-
- `[INDUSTRY]` — Industry or sector to analyze
|
|
17
|
-
|
|
18
|
-
## Expected Output
|
|
19
|
-
|
|
20
|
-
- 5 macro trends with:
|
|
21
|
-
- Definition and visual language
|
|
22
|
-
- Origin and adoption phase
|
|
23
|
-
- 3 real brand examples
|
|
24
|
-
- Risks and opportunities
|
|
25
|
-
- Competitor 2x2 positioning map with white space insights
|
|
26
|
-
- User expectation shifts
|
|
27
|
-
- Platform evolution analysis (iOS, Material Design, Web)
|
|
28
|
-
- Strategic recommendations
|
|
29
|
-
- 6-month design roadmap
|
|
30
|
-
- Mood board specs with palette and typography guidance
|
|
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.
|
|
@@ -7,13 +7,7 @@
|
|
|
7
7
|
|
|
8
8
|
## Prompt
|
|
9
9
|
|
|
10
|
-
Act as Apple Accessibility Specialist. Audit [DESIGN_OR_CODE] against WCAG 2.2 AA.
|
|
11
|
-
|
|
12
|
-
---
|
|
13
|
-
|
|
14
|
-
## Variables
|
|
15
|
-
|
|
16
|
-
- `[DESIGN_OR_CODE]` — Design chunks to audit, or codebase paths for code audit mode
|
|
10
|
+
Act as Apple Accessibility Specialist. Audit [DESIGN_OR_CODE] against WCAG 2.2 AA.
|
|
17
11
|
|
|
18
12
|
## Code Audit Mode
|
|
19
13
|
|
|
@@ -24,15 +18,6 @@ When spawned by `/gsp:accessibility --code`, shift focus to codebase analysis:
|
|
|
24
18
|
- Report issues with actual file paths and line numbers
|
|
25
19
|
- Prioritize issues by severity (Critical > Major > Minor)
|
|
26
20
|
|
|
27
|
-
##
|
|
28
|
-
|
|
29
|
-
-
|
|
30
|
-
- Operable audit (keyboard, focus, navigation, motion)
|
|
31
|
-
- Understandable audit (language, errors, help)
|
|
32
|
-
- Robust audit (markup, ARIA)
|
|
33
|
-
- Mobile accessibility (orientation, input, reach zones)
|
|
34
|
-
- Cognitive accessibility (reading level, consistency, flashing, time limits)
|
|
35
|
-
- Pass/fail checklist
|
|
36
|
-
- Violations list
|
|
37
|
-
- Remediation steps
|
|
38
|
-
- Accessibility statement
|
|
21
|
+
## Variables
|
|
22
|
+
|
|
23
|
+
- `[DESIGN_OR_CODE]` — Design chunks to audit, or codebase paths for code audit mode
|
|
@@ -7,15 +7,28 @@
|
|
|
7
7
|
|
|
8
8
|
## Prompt
|
|
9
9
|
|
|
10
|
-
Act as a Vercel Design Engineer. Convert [DESIGN] into production-ready frontend code using [TECH STACK].
|
|
10
|
+
Act as a Vercel Design Engineer. Convert [DESIGN] into production-ready frontend code using [TECH STACK].
|
|
11
11
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
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.
|
|
19
32
|
|
|
20
33
|
## Working Mode
|
|
21
34
|
|
|
@@ -27,8 +40,6 @@ You work directly in the codebase — not in `.design/build/`:
|
|
|
27
40
|
- Leave all changes unstaged for the user to review and commit
|
|
28
41
|
- After implementation, write BUILD-LOG.md to `.design/projects/{project}/build/` as a record of what was done
|
|
29
42
|
|
|
30
|
-
---
|
|
31
|
-
|
|
32
43
|
## Variables
|
|
33
44
|
|
|
34
45
|
- `[DESIGN]` — Description or screenshot of the design to implement
|
|
@@ -36,13 +47,3 @@ You work directly in the codebase — not in `.design/build/`:
|
|
|
36
47
|
- `[STACK]` — `.design/system/STACK.md` contents (empty when greenfield)
|
|
37
48
|
- `[COMPONENTS]` — `.design/system/COMPONENTS.md` contents (empty when greenfield)
|
|
38
49
|
- `[CONVENTIONS]` — `.design/system/CONVENTIONS.md` contents (empty when greenfield)
|
|
39
|
-
|
|
40
|
-
## Expected Output
|
|
41
|
-
|
|
42
|
-
- Components implemented directly in the codebase
|
|
43
|
-
- Responsive layout implementation
|
|
44
|
-
- ARIA and accessibility implementation
|
|
45
|
-
- Error, loading, and empty states
|
|
46
|
-
- Animations and transitions
|
|
47
|
-
- Styling (CSS/Tailwind with design tokens, dark mode, breakpoints)
|
|
48
|
-
- BUILD-LOG.md documenting what was done
|
|
@@ -1,37 +1,13 @@
|
|
|
1
1
|
# The Project Scoper
|
|
2
2
|
|
|
3
3
|
**Category:** Project Scoping
|
|
4
|
-
**Use when:** Scoping a design project — determining screens, component adaptations, and implementation gaps
|
|
4
|
+
**Use when:** Scoping a design project — determining screens, component adaptations, and implementation gaps
|
|
5
5
|
|
|
6
6
|
---
|
|
7
7
|
|
|
8
8
|
## Prompt
|
|
9
9
|
|
|
10
|
-
Act as a Senior Design Project Lead. Scope [PROJECT] using the brand's design system from [BRAND].
|
|
11
|
-
|
|
12
|
-
**Screen scoping:**
|
|
13
|
-
Analyze the project brief to determine the complete list of screens needed. Prioritize by user flow criticality (primary flows first, edge cases last). Each screen should map to a clear user goal. Consider the platform (web, mobile, both) and design scope (full, partial, tokens).
|
|
14
|
-
|
|
15
|
-
**Component adaptations:**
|
|
16
|
-
Review the brand's design system components and determine what this specific project needs:
|
|
17
|
-
- Which brand components to use as-is
|
|
18
|
-
- Which need project-specific variants or overrides
|
|
19
|
-
- Any net-new components unique to this project
|
|
20
|
-
Map design components to the implementation target's primitives (shadcn, rn-reusables, existing, code).
|
|
21
|
-
|
|
22
|
-
**When [IMPLEMENTATION_TARGET] is `shadcn`:**
|
|
23
|
-
Map components to shadcn/ui primitives. List required `npx shadcn@latest add` installs. Define token mapping to shadcn CSS variables.
|
|
24
|
-
|
|
25
|
-
**When [IMPLEMENTATION_TARGET] is `rn-reusables`:**
|
|
26
|
-
Map components to React Native Reusables primitives. List required installs. Handle platform differences.
|
|
27
|
-
|
|
28
|
-
**When [IMPLEMENTATION_TARGET] is `existing`:**
|
|
29
|
-
Read the codebase inventory. Map design to existing components and tokens. Identify gaps (design components/tokens not in codebase). Include file paths to existing components.
|
|
30
|
-
|
|
31
|
-
**When [IMPLEMENTATION_TARGET] is `code`:**
|
|
32
|
-
Define component architecture. Map tokens to CSS custom properties. No tool-specific specs.
|
|
33
|
-
|
|
34
|
-
---
|
|
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.
|
|
35
11
|
|
|
36
12
|
## Variables
|
|
37
13
|
|
|
@@ -39,13 +15,3 @@ Define component architecture. Map tokens to CSS custom properties. No tool-spec
|
|
|
39
15
|
- `[BRAND]` — The brand whose design system is being used
|
|
40
16
|
- `[IMPLEMENTATION_TARGET]` — One of: `shadcn`, `rn-reusables`, `existing`, `code`, `figma`
|
|
41
17
|
- `[INVENTORY]` — Existing codebase inventory (when available)
|
|
42
|
-
|
|
43
|
-
## Expected Output
|
|
44
|
-
|
|
45
|
-
- Prioritized screen list with purpose and user flow position
|
|
46
|
-
- Component scope (brand components used, adaptations needed)
|
|
47
|
-
- Project boundaries (in scope / out of scope)
|
|
48
|
-
- Implementation target mapping (design → target primitives)
|
|
49
|
-
- Install manifest (shadcn/rn-reusables only)
|
|
50
|
-
- Gap analysis (existing codebases only)
|
|
51
|
-
- File references (existing codebases only)
|
|
@@ -9,59 +9,10 @@
|
|
|
9
9
|
|
|
10
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
11
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
You review actual source code, not `.design/build/` specs:
|
|
15
|
-
- Read BUILD-LOG.md to understand what was built and which files were touched
|
|
16
|
-
- Use Grep to search the codebase for hardcoded values, missing tokens, missing ARIA attributes
|
|
17
|
-
- Use Glob to find component files and verify file structure
|
|
18
|
-
- Use `git diff` to see what actually changed and cross-reference against BUILD-LOG.md
|
|
19
|
-
- Reference actual codebase file paths and line numbers in all issues
|
|
20
|
-
|
|
21
|
-
**Screen coverage:**
|
|
22
|
-
Compare every designed screen against the codebase implementation. For each screen, check:
|
|
23
|
-
- Is it implemented? (complete, partial, missing)
|
|
24
|
-
- Does the layout match the design?
|
|
25
|
-
- Are all states handled? (default, empty, loading, error)
|
|
26
|
-
- Are interactions implemented as specified?
|
|
27
|
-
|
|
28
|
-
**Token compliance:**
|
|
29
|
-
Audit the actual source code for design token usage:
|
|
30
|
-
- Are design tokens used instead of magic numbers?
|
|
31
|
-
- Are the correct tokens referenced? (e.g., `--color-primary` not hardcoded `#3B82F6`)
|
|
32
|
-
- Are spacing, typography, and color tokens consistent with the brand system?
|
|
33
|
-
- Grep for hardcoded hex values, pixel values, and other magic numbers
|
|
34
|
-
|
|
35
|
-
**Component fidelity:**
|
|
36
|
-
For each implemented component in the codebase:
|
|
37
|
-
- Does it match the design system spec? (states, anatomy, variants)
|
|
38
|
-
- Are accessibility attributes present? (ARIA roles, keyboard support, focus management)
|
|
39
|
-
- Does responsive behavior match design intent?
|
|
40
|
-
|
|
41
|
-
**Accessibility verification:**
|
|
42
|
-
Check actual source code for WCAG 2.2 AA compliance:
|
|
43
|
-
- Color contrast (4.5:1 text, 3:1 large text, 3:1 UI components)
|
|
44
|
-
- Keyboard navigation and focus indicators
|
|
45
|
-
- ARIA labels and roles
|
|
46
|
-
- Screen reader compatibility
|
|
47
|
-
- Touch targets (≥ 44x44pt recommended)
|
|
48
|
-
|
|
49
|
-
**Critique resolution:**
|
|
50
|
-
If critique fixes were provided, verify they were addressed in the actual implementation.
|
|
51
|
-
|
|
52
|
-
---
|
|
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.
|
|
53
13
|
|
|
54
14
|
## Variables
|
|
55
15
|
|
|
56
16
|
- `[PROJECT]` — The project being reviewed
|
|
57
17
|
- `[BRAND]` — The brand whose design system was used
|
|
58
18
|
- `[CRITIQUE_FIXES]` — Prioritized fixes from the critique phase (if available)
|
|
59
|
-
|
|
60
|
-
## Expected Output
|
|
61
|
-
|
|
62
|
-
- Overall verdict: Pass / Conditional Pass / Fail
|
|
63
|
-
- Per-screen implementation checklist with codebase file paths
|
|
64
|
-
- Token audit summary (compliant / violations found with file:line references)
|
|
65
|
-
- Component coverage report with codebase file paths
|
|
66
|
-
- Accessibility compliance summary
|
|
67
|
-
- Issues list with severity, codebase file path, line number, and remediation
|
|
@@ -9,35 +9,6 @@
|
|
|
9
9
|
|
|
10
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
11
|
|
|
12
|
-
**UX patterns research:**
|
|
13
|
-
Find established UX patterns for [PROJECT_TYPE] products. Search for current best practices, case studies, and pattern libraries. Cover navigation, interaction, information architecture, onboarding, and empty state patterns. Every pattern must have a source.
|
|
14
|
-
|
|
15
|
-
**Competitor UX analysis:**
|
|
16
|
-
Identify 3-5 competitor or adjacent products solving similar problems. Analyze their UX deeply — not features lists, but specific interactions, flows, and design decisions. What works, what doesn't, what's unique. Find opportunity gaps.
|
|
17
|
-
|
|
18
|
-
**Technical research:**
|
|
19
|
-
Investigate [TECH_STACK]-specific patterns for building [PROJECT_TYPE]. Component composition, state management, performance optimization, animation approaches. Focus on patterns proven in production, not theoretical.
|
|
20
|
-
|
|
21
|
-
**Accessibility research:**
|
|
22
|
-
Research accessibility patterns specific to [PROJECT_TYPE]. Keyboard navigation maps, screen reader flows, focus management for complex interactions (modals, drawers, dynamic content). Find WCAG criteria most relevant to this product type.
|
|
23
|
-
|
|
24
|
-
**Content strategy:**
|
|
25
|
-
Study microcopy conventions for [PROJECT_TYPE] — button labels, error messages, empty states, tooltips. Research information density and terminology conventions.
|
|
26
|
-
|
|
27
|
-
**Reference specs collection:**
|
|
28
|
-
Find and collect specs that execution phases will need:
|
|
29
|
-
- API documentation for integrations
|
|
30
|
-
- Component library API references ([TECH_STACK]-specific)
|
|
31
|
-
- Platform guidelines relevant to this product
|
|
32
|
-
- Accessibility implementation guides
|
|
33
|
-
- Third-party service documentation
|
|
34
|
-
For each: include source URL, key takeaways, and how it applies to this project.
|
|
35
|
-
|
|
36
|
-
**Synthesis:**
|
|
37
|
-
Distill all research into adopt/adapt/avoid recommendations tied to specific findings.
|
|
38
|
-
|
|
39
|
-
---
|
|
40
|
-
|
|
41
12
|
## Variables
|
|
42
13
|
|
|
43
14
|
- `[PROJECT_TYPE]` — What's being built (dashboard, e-commerce, social app, SaaS, etc.)
|
|
@@ -45,13 +16,3 @@ Distill all research into adopt/adapt/avoid recommendations tied to specific fin
|
|
|
45
16
|
- `[PLATFORM]` — Target platforms (web, iOS, Android)
|
|
46
17
|
- `[BRAND_DISCOVERY]` — Brand-level competitive audit and trends (to build on, not duplicate)
|
|
47
18
|
- `[SCOPE]` — Project scope from brief/scope.md
|
|
48
|
-
|
|
49
|
-
## Expected Output
|
|
50
|
-
|
|
51
|
-
- UX patterns with sources and applicability assessment
|
|
52
|
-
- Competitor UX deep-dives with specific interaction analysis
|
|
53
|
-
- Stack-specific technical patterns and architecture recommendations
|
|
54
|
-
- Accessibility patterns with implementation guidance
|
|
55
|
-
- Content strategy conventions
|
|
56
|
-
- Reference specs with URLs and key takeaways
|
|
57
|
-
- Synthesized adopt/adapt/avoid recommendations
|