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.
Files changed (68) hide show
  1. package/.claude-plugin/plugin.json +1 -1
  2. package/README.md +1 -1
  3. package/bin/install.js +38 -19
  4. package/gsp/agents/gsp-accessibility-auditor.md +1 -4
  5. package/gsp/agents/gsp-ascii-artist.md +1 -1
  6. package/gsp/agents/gsp-brand-auditor.md +0 -2
  7. package/gsp/agents/gsp-brand-strategist.md +0 -2
  8. package/gsp/agents/gsp-brand-syncer.md +125 -0
  9. package/gsp/agents/gsp-builder.md +11 -14
  10. package/gsp/agents/gsp-campaign-director.md +0 -20
  11. package/gsp/agents/gsp-critic.md +15 -18
  12. package/gsp/agents/gsp-designer.md +6 -6
  13. package/gsp/agents/gsp-identity-designer.md +0 -4
  14. package/gsp/agents/{gsp-system-architect.md → gsp-pattern-architect.md} +5 -67
  15. package/gsp/agents/gsp-project-researcher.md +0 -21
  16. package/gsp/agents/gsp-researcher.md +0 -2
  17. package/gsp/agents/gsp-reviewer.md +4 -14
  18. package/gsp/agents/gsp-scoper.md +1 -22
  19. package/gsp/hooks/hooks.json +11 -0
  20. package/gsp/prompts/01-design-system-architect.md +0 -46
  21. package/gsp/prompts/02-brand-identity-creator.md +1 -14
  22. package/gsp/prompts/03-ui-ux-pattern-master.md +1 -21
  23. package/gsp/prompts/04-marketing-asset-factory.md +1 -14
  24. package/gsp/prompts/05-implementation-spec-expert.md +0 -27
  25. package/gsp/prompts/06-design-critique-partner.md +1 -17
  26. package/gsp/prompts/07-design-trend-synthesizer.md +2 -29
  27. package/gsp/prompts/08-accessibility-auditor.md +4 -19
  28. package/gsp/prompts/09-design-to-code-translator.md +21 -20
  29. package/gsp/prompts/10-project-scoper.md +2 -36
  30. package/gsp/prompts/11-deliverable-reviewer.md +1 -50
  31. package/gsp/prompts/12-project-researcher.md +0 -39
  32. package/gsp/references/anti-patterns.md +173 -0
  33. package/gsp/references/block-patterns.md +135 -0
  34. package/gsp/references/chunk-format.md +31 -0
  35. package/gsp/references/phase-transitions.md +78 -33
  36. package/gsp/references/style-preset-schema.md +63 -0
  37. package/gsp/references/visual-effects.md +475 -0
  38. package/gsp/references/visual-taste.md +120 -0
  39. package/gsp/skills/gsp-accessibility/SKILL.md +1 -1
  40. package/gsp/skills/gsp-brand-audit/SKILL.md +1 -3
  41. package/gsp/skills/gsp-brand-identity/SKILL.md +1 -4
  42. package/gsp/skills/gsp-brand-patterns/SKILL.md +30 -50
  43. package/gsp/skills/gsp-brand-research/SKILL.md +7 -4
  44. package/gsp/skills/gsp-brand-strategy/SKILL.md +1 -4
  45. package/gsp/skills/gsp-brand-sync/SKILL.md +101 -0
  46. package/gsp/skills/gsp-design-system/SKILL.md +1 -1
  47. package/gsp/skills/gsp-doctor/SKILL.md +7 -7
  48. package/gsp/skills/gsp-help/SKILL.md +2 -1
  49. package/gsp/skills/gsp-launch/SKILL.md +2 -3
  50. package/gsp/skills/gsp-project-brief/SKILL.md +7 -22
  51. package/gsp/skills/gsp-project-build/SKILL.md +108 -26
  52. package/gsp/skills/gsp-project-critique/SKILL.md +5 -33
  53. package/gsp/skills/gsp-project-design/SKILL.md +25 -26
  54. package/gsp/skills/gsp-project-research/SKILL.md +8 -17
  55. package/gsp/skills/gsp-project-review/SKILL.md +6 -37
  56. package/gsp/skills/gsp-start/SKILL.md +29 -12
  57. package/gsp/skills/gsp-style/SKILL.md +20 -223
  58. package/gsp/skills/gsp-typescale/SKILL.md +23 -319
  59. package/gsp/skills/gsp-update/SKILL.md +18 -10
  60. package/gsp/templates/branding/brief.md +13 -1
  61. package/gsp/templates/branding/roadmap.md +2 -2
  62. package/gsp/templates/branding/state.md +1 -1
  63. package/gsp/templates/phases/brief.md +1 -1
  64. package/gsp/templates/phases/{system.md → patterns.md} +3 -3
  65. package/gsp/templates/phases/review.md +1 -1
  66. package/package.json +1 -1
  67. package/scripts/gsp-context-recovery.sh +71 -0
  68. 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 before a project ships. You review real code, not specs. Be thorough but fair.
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. **Design fidelity** — overall assessment of how faithfully the build represents the design
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}/system/components/{name}.md`
62
+ - Both reference brand system: `{BRAND_PATH}/patterns/components/{name}.md`
73
63
 
74
64
  ### `INDEX.md`
75
65
 
@@ -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}/system/components/{name}.md`
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>
@@ -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]. Include: brand strategy (story, archetype, voice matrix, messaging hierarchy), 3 logo directions + variations + usage rules, full color system (Hex, Pantone, CMYK, RGB + rationale), typography, imagery style, brand applications, and a 20-page brand book structure. Explain strategy behind every decision.
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. Detail 8 core screens with wireframes, components, interactions, empty/error/loading states. Specify buttons, forms, cards, data viz, accessibility (WCAG, VoiceOver, Dynamic Type), micro-interactions, and responsive behavior. Include Designer's Notes.
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]. Include: Google Ads, Meta/TikTok ads, email sequences (welcome, promo, nurture, re-engagement), landing page copy, social posts, sales enablement materials, and content marketing outlines. Provide exact copy, visual direction, CTA, and A/B tests for each. Maintain consistent messaging, tone, and hierarchy across all assets.
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]. Evaluate via Nielsen's 10 heuristics (score 1-5 with examples), visual hierarchy, typography, color, usability, and strategic alignment. Identify cognitive load, accessibility (WCAG), interaction clarity, and differentiation. Provide prioritized fixes (Critical, Important, Polish). Propose 2 alternative redesign directions described clearly. Tone: constructive, actionable, educational.
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
- # The Design Trend Synthesizer
1
+ # Design Trend Synthesizer
2
2
 
3
- **Category:** Design Research & Strategy
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. Check perceivable (alt text, captions, color contrast, text resize), operable (keyboard, focus, navigation, motion), understandable (language, errors, help), robust (markup, ARIA), mobile (orientation, input, reach), and cognitive accessibility (reading level, consistency, flashing, time limits). Deliver pass/fail checklist, violations, remediation steps, and accessibility.
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
- ## Expected Output
28
-
29
- - Perceivable audit (alt text, captions, color contrast, text resize)
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]. Deliver component hierarchy, props, state, data flow, copy-paste code, responsive layout, ARIA/accessibility, error/loading states, animations, styling (CSS/Tailwind with design tokens, dark mode, breakpoints, states), asset optimization, performance tips, testing strategy, and documentation.
10
+ Act as a Vercel Design Engineer. Convert [DESIGN] into production-ready frontend code using [TECH STACK].
11
11
 
12
- **When [STACK], [COMPONENTS], and [CONVENTIONS] are provided (existing codebase):**
13
- You are working in an existing codebase. Follow conventions from the design system docs:
14
- - Use the project's naming conventions, import aliases, and export patterns (from [CONVENTIONS])
15
- - Follow the project's component style (forwardRef, compound components, etc.) (from [STACK])
16
- - Place new files according to the project's file organization (from [CONVENTIONS])
17
- - Use the project's styling approach (cn() utility, className patterns, etc.) (from [CONVENTIONS])
18
- - When modifying existing components, show the diff rather than full rewrite
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. Encourages treating projects as bounded issues and PRs.
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
- **Working mode:**
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