get-shit-pretty 0.1.0

package/commands/gsp/brand.md

@@ -0,0 +1,68 @@
+---
+name: gsp:brand
+description: Create brand identity — strategy, logo directions, color, typography
+allowed-tools:
+  - Read
+  - Write
+  - Bash
+  - Task
+  - WebSearch
+  - WebFetch
+---
+<context>
+Phase 2 of the GSP design pipeline. Uses the Brand Identity Creator prompt to develop a complete brand identity from strategy to visual applications.
+</context>
+
+<objective>
+Create a complete brand identity for the project.
+
+**Input:** `.design/BRIEF.md` + `.design/research/TRENDS.md`
+**Output:** `.design/brand/IDENTITY.md`
+**Agent:** `gsp-brand-strategist`
+</objective>
+
+<execution_context>
+@/Users/jubs/.claude/get-shit-pretty/prompts/02-brand-identity-creator.md
+@/Users/jubs/.claude/get-shit-pretty/templates/phases/brand.md
+</execution_context>
+
+<process>
+## Step 1: Load context
+
+Read:
+- `.design/BRIEF.md` — project context, audience, personality
+- `.design/research/TRENDS.md` — trend insights (if available; proceed without if not)
+
+If BRIEF.md doesn't exist, tell the user to run `/gsp:new-project` first.
+
+## Step 2: Spawn brand strategist
+
+Spawn the `gsp-brand-strategist` agent with:
+- The full BRIEF.md and TRENDS.md content
+- The Brand Identity Creator prompt (02)
+- The brand output template
+
+The agent should deliver:
+1. Brand strategy (story, archetype, voice matrix, messaging hierarchy)
+2. 3 logo directions with variations and usage rules
+3. Complete color system (Hex, RGB, Pantone, CMYK + rationale)
+4. Typography system
+5. Imagery and photography style guide
+6. Brand applications
+7. Brand book structure
+
+## Step 3: Write output
+
+Write the completed identity to `.design/brand/IDENTITY.md`.
+
+## Step 4: Update state
+
+Update `.design/STATE.md`:
+- Set Phase 2 (Brand) status to `complete`
+- Record completion date
+
+## Step 5: Route next
+
+Display brand identity summary and end with:
+"Run `/gsp:system` to build the design system from this identity."
+</process>

package/commands/gsp/build.md

@@ -0,0 +1,75 @@
+---
+name: gsp:build
+description: Translate designs to production-ready frontend code
+allowed-tools:
+  - Read
+  - Write
+  - Bash
+  - Task
+---
+<context>
+Phase 7 of the GSP design pipeline. Uses the Design-to-Code Translator prompt to convert Figma specs and design system into production-ready frontend components.
+</context>
+
+<objective>
+Translate designs into production-ready frontend code.
+
+**Input:** `.design/specs/FIGMA-SPECS.md` + `.design/system/SYSTEM.md`
+**Output:** `.design/build/CODE.md` + `.design/build/components/`
+**Agent:** `gsp-design-engineer`
+</objective>
+
+<execution_context>
+@/Users/jubs/.claude/get-shit-pretty/prompts/09-design-to-code-translator.md
+@/Users/jubs/.claude/get-shit-pretty/templates/phases/build.md
+</execution_context>
+
+<process>
+## Step 1: Load context
+
+Read:
+- `.design/specs/FIGMA-SPECS.md` — component specs
+- `.design/system/SYSTEM.md` — design system
+- `.design/system/tokens.json` — design tokens
+- `.design/BRIEF.md` — tech stack preference
+- `.design/review/CRITIQUE.md` — any fixes to incorporate
+
+If FIGMA-SPECS.md doesn't exist, tell the user to run `/gsp:spec` first.
+
+Determine tech stack from BRIEF.md config (default: React + Tailwind).
+
+## Step 2: Spawn design engineer
+
+Spawn the `gsp-design-engineer` agent with:
+- All specs, system, and token files
+- The Design-to-Code Translator prompt (09)
+- The build output template
+- The target tech stack
+
+The agent should deliver:
+1. Component hierarchy with props, state, data flow
+2. Production-ready code for each component
+3. Responsive layout implementation
+4. ARIA and accessibility implementation
+5. Error, loading, and empty states
+6. Animations and transitions
+7. Styling with design tokens (dark mode, breakpoints)
+8. Performance optimization notes
+9. Testing strategy
+
+## Step 3: Write output
+
+1. Write implementation guide to `.design/build/CODE.md`
+2. Write individual components to `.design/build/components/`
+
+## Step 4: Update state
+
+Update `.design/STATE.md`:
+- Set Phase 7 (Build) status to `complete`
+- Record completion date
+
+## Step 5: Route next
+
+Display component summary and end with:
+"Run `/gsp:launch` to create marketing campaign assets."
+</process>

package/commands/gsp/design.md

@@ -0,0 +1,71 @@
+---
+name: gsp:design
+description: Design UI/UX screens, flows, and interaction patterns
+allowed-tools:
+  - Read
+  - Write
+  - Bash
+  - Task
+---
+<context>
+Phase 4 of the GSP design pipeline. Uses the UI/UX Pattern Master prompt to design core screens following Apple HIG and the project's design system.
+</context>
+
+<objective>
+Design core UI/UX screens and interaction flows.
+
+**Input:** `.design/system/SYSTEM.md` + `.design/BRIEF.md`
+**Output:** `.design/screens/SCREENS.md`
+**Agent:** `gsp-ui-designer`
+</objective>
+
+<execution_context>
+@/Users/jubs/.claude/get-shit-pretty/prompts/03-ui-ux-pattern-master.md
+@/Users/jubs/.claude/get-shit-pretty/templates/phases/design.md
+@/Users/jubs/.claude/get-shit-pretty/references/apple-hig-patterns.md
+</execution_context>
+
+<process>
+## Step 1: Load context
+
+Read:
+- `.design/BRIEF.md` — app type, audience, goals
+- `.design/system/SYSTEM.md` — design system to use
+- `.design/brand/IDENTITY.md` — brand personality
+
+If SYSTEM.md doesn't exist, tell the user to run `/gsp:system` first.
+
+## Step 2: Spawn UI designer
+
+Spawn the `gsp-ui-designer` agent with:
+- All prior artifacts
+- The UI/UX Pattern Master prompt (03)
+- The design output template
+- The Apple HIG patterns reference
+
+The agent should deliver:
+1. User personas with goals and pain points
+2. Information architecture
+3. Navigation pattern and gesture definitions
+4. 8 core screens with wireframes, components, interactions
+5. All states: empty, error, loading
+6. Accessibility specs (WCAG, VoiceOver, Dynamic Type)
+7. Micro-interactions and animations
+8. Responsive behavior across breakpoints
+9. Designer's notes
+
+## Step 3: Write output
+
+Write screens to `.design/screens/SCREENS.md`.
+
+## Step 4: Update state
+
+Update `.design/STATE.md`:
+- Set Phase 4 (Design) status to `complete`
+- Record completion date
+
+## Step 5: Route next
+
+Display screen summary (screen count, key flows) and end with:
+"Run `/gsp:spec` to generate Figma-ready specifications."
+</process>

package/commands/gsp/help.md

@@ -0,0 +1,68 @@
+---
+name: gsp:help
+description: Show GSP command reference
+---
+<objective>
+Display the complete GSP command reference.
+
+Output ONLY the reference content below. Do NOT add:
+- Project-specific analysis
+- File context or git status
+- Next-step suggestions
+- Any commentary beyond the reference
+</objective>
+
+<process>
+Output the following reference exactly:
+
+```
+🎨 GSP — Get Shit Pretty
+Command Reference
+═══════════════════════════════════════
+
+PROJECT SETUP
+  /gsp:new-project     Initialize design brief through guided Q&A
+  /gsp:help            Show this command reference
+  /gsp:progress        Check project status — "How pretty are we?"
+
+DESIGN PIPELINE (run in order)
+  /gsp:research        Phase 1 — Trend analysis & competitive landscape
+  /gsp:brand           Phase 2 — Brand identity (strategy, logo, color, type)
+  /gsp:system          Phase 3 — Design system foundations + tokens
+  /gsp:design          Phase 4 — UI/UX screens & interaction flows
+  /gsp:spec            Phase 5 — Figma-ready specifications
+  /gsp:review          Phase 6 — Design critique + accessibility audit
+  /gsp:build           Phase 7 — Design-to-code translation
+  /gsp:launch          Phase 8 — Marketing campaign assets
+
+PIPELINE FLOW
+  new-project → research → brand → system → design → spec → review → build → launch
+                                                        ↑                |
+                                                        └── loop back ───┘
+                                                       (if critical issues)
+
+PROJECT STRUCTURE
+  .design/
+  ├── BRIEF.md                    Design brief
+  ├── ROADMAP.md                  Phase plan
+  ├── STATE.md                    Progress tracking
+  ├── config.json                 Preferences
+  ├── research/TRENDS.md          Trend analysis
+  ├── brand/IDENTITY.md           Brand identity
+  ├── system/SYSTEM.md            Design system
+  ├── system/tokens.json          Design tokens
+  ├── screens/SCREENS.md          UI/UX screens
+  ├── specs/FIGMA-SPECS.md        Figma specifications
+  ├── review/CRITIQUE.md          Design critique
+  ├── review/ACCESSIBILITY.md     WCAG audit
+  ├── build/CODE.md               Implementation guide
+  ├── build/components/           Code components
+  └── launch/CAMPAIGN.md          Marketing assets
+
+TIPS
+  • Run phases in order — each builds on the previous
+  • /gsp:review loops back if critical issues are found
+  • /gsp:progress shows your prettiness meter
+  • You can skip phases if you already have the artifacts
+```
+</process>

package/commands/gsp/launch.md

@@ -0,0 +1,75 @@
+---
+name: gsp:launch
+description: Create marketing campaign assets for launch
+allowed-tools:
+  - Read
+  - Write
+  - Bash
+  - Task
+  - WebSearch
+---
+<context>
+Phase 8 of the GSP design pipeline. Uses the Marketing Asset Factory prompt to create a full campaign asset library across channels.
+</context>
+
+<objective>
+Create marketing campaign assets for product launch.
+
+**Input:** `.design/brand/IDENTITY.md` + `.design/screens/SCREENS.md`
+**Output:** `.design/launch/CAMPAIGN.md`
+**Agent:** `gsp-campaign-director`
+</objective>
+
+<execution_context>
+@/Users/jubs/.claude/get-shit-pretty/prompts/04-marketing-asset-factory.md
+@/Users/jubs/.claude/get-shit-pretty/templates/phases/launch.md
+</execution_context>
+
+<process>
+## Step 1: Load context
+
+Read:
+- `.design/brand/IDENTITY.md` — brand voice, visual identity
+- `.design/screens/SCREENS.md` — product screens for showcase
+- `.design/BRIEF.md` — audience, goals, messaging
+- `.design/system/SYSTEM.md` — design system for consistency
+
+If IDENTITY.md doesn't exist, tell the user to run `/gsp:brand` first.
+
+## Step 2: Spawn campaign director
+
+Spawn the `gsp-campaign-director` agent with:
+- Brand identity, screens, and brief
+- The Marketing Asset Factory prompt (04)
+- The launch output template
+
+The agent should deliver:
+1. Campaign strategy (objective, audience, key message, tone)
+2. Google Ads (copy, visual direction, CTAs, A/B variants)
+3. Meta/Instagram and TikTok ads
+4. Email sequences (welcome, promo, nurture, re-engagement)
+5. Landing page copy and structure
+6. Social media posts
+7. Sales enablement materials
+8. Content marketing outlines
+
+## Step 3: Write output
+
+Write campaign to `.design/launch/CAMPAIGN.md`.
+
+## Step 4: Update state
+
+Update `.design/STATE.md`:
+- Set Phase 8 (Launch) status to `complete`
+- Record completion date
+- Set Prettiness Level to 100%
+
+## Step 5: Celebrate
+
+Display campaign summary and:
+```
+🎨 Project is fully pretty! All 8 phases complete.
+
+Run /gsp:progress to see the full journey.
+```
+</process>

package/commands/gsp/new-project.md

@@ -0,0 +1,91 @@
+---
+name: gsp:new-project
+description: Initialize a new design project with a design brief, roadmap, and state tracking
+allowed-tools:
+  - Read
+  - Write
+  - Bash
+  - AskUserQuestion
+---
+<context>
+You are the GSP (Get Shit Pretty) project initializer. Your job is to gather design requirements through conversational Q&A and produce a complete design brief.
+</context>
+
+<objective>
+Initialize a new design project through guided questioning → brief → roadmap → state.
+
+**Creates:**
+- `.design/BRIEF.md` — design brief (brand, audience, goals, constraints)
+- `.design/ROADMAP.md` — phase plan (8 phases)
+- `.design/STATE.md` — progress tracking
+- `.design/config.json` — project preferences
+
+**After this command:** Run `/gsp:research` to begin the design pipeline.
+</objective>
+
+<execution_context>
+@/Users/jubs/.claude/get-shit-pretty/references/questioning.md
+@/Users/jubs/.claude/get-shit-pretty/templates/project.md
+@/Users/jubs/.claude/get-shit-pretty/templates/roadmap.md
+@/Users/jubs/.claude/get-shit-pretty/templates/state.md
+@/Users/jubs/.claude/get-shit-pretty/templates/config.json
+</execution_context>
+
+<process>
+## Step 1: Greet and orient
+
+Display:
+```
+🎨 GSP — Get Shit Pretty
+Starting new design project...
+```
+
+## Step 2: Gather the brief
+
+Use the questioning techniques from the reference. Ask in 3 conversational rounds:
+
+**Round 1 — Context & Brand:**
+- What is this project? (app, website, rebrand, campaign)
+- Who is it for? (audience)
+- Why does it exist? (business goal, user need)
+- Existing brand? Brand personality?
+- Brands admired / styles to avoid?
+
+**Round 2 — Scope & Constraints:**
+- Platforms (web, iOS, Android)?
+- Tech stack preferences?
+- Key screens/pages needed?
+- Accessibility level (default: WCAG 2.2 AA)?
+- Timeline and constraints?
+
+**Round 3 — Success & Gaps:**
+- What does success look like?
+- Any remaining questions based on gaps in rounds 1-2
+
+Use inference over interrogation — state assumptions and let them correct. Offer concrete options when answers are vague.
+
+## Step 3: Create project structure
+
+```bash
+mkdir -p .design/{research,brand,system,screens,specs,review,build,launch}
+```
+
+## Step 4: Write artifacts
+
+Using the templates, fill in the gathered information:
+1. Write `.design/BRIEF.md` from the project template with all gathered info
+2. Write `.design/ROADMAP.md` from the roadmap template with project name and date
+3. Write `.design/STATE.md` from the state template
+4. Write `.design/config.json` from the config template with preferences
+
+## Step 5: Confirm and route
+
+Display a summary of the brief and confirm with the user. Show:
+- Project name and type
+- Brand personality
+- Target audience
+- Key deliverables
+- Phase roadmap overview
+
+End with: "Run `/gsp:research` to begin trend analysis, or `/gsp:brand` to jump straight to brand identity."
+</process>

package/commands/gsp/progress.md

@@ -0,0 +1,61 @@
+---
+name: gsp:progress
+description: Check design project progress — "How pretty are we?"
+allowed-tools:
+  - Read
+  - Glob
+---
+<context>
+Status check for GSP design projects. Reads STATE.md and shows phase progress with a prettiness meter.
+</context>
+
+<objective>
+Display current project progress and route to next action.
+</objective>
+
+<process>
+## Step 1: Find project
+
+Check for `.design/STATE.md` in the current directory.
+
+If not found, display:
+```
+No GSP project found. Run /gsp:new-project to start one.
+```
+
+## Step 2: Read state
+
+Read `.design/STATE.md` and `.design/BRIEF.md`.
+
+## Step 3: Calculate prettiness
+
+Count completed phases out of 8. Calculate percentage.
+
+## Step 4: Display progress
+
+```
+🎨 GSP — How Pretty Are We?
+
+Project: {PROJECT_NAME}
+Prettiness: ██████░░░░░░░░░░ 37.5% (3/8 phases)
+
+Phase Progress:
+  ✅ 1. Research    — complete
+  ✅ 2. Brand       — complete
+  ✅ 3. System      — complete
+  ⬜ 4. Design      — pending        ← you are here
+  ⬜ 5. Spec        — pending
+  ⬜ 6. Review      — pending
+  ⬜ 7. Build       — pending
+  ⬜ 8. Launch      — pending
+
+Review Loops: {COUNT}
+```
+
+Use ✅ for complete, 🔄 for in-progress/needs-revision, ⬜ for pending.
+
+## Step 5: Route next
+
+Identify the next pending phase and suggest the command:
+"Next up: Run `/gsp:{next_phase}` to continue."
+</process>

package/commands/gsp/research.md

@@ -0,0 +1,71 @@
+---
+name: gsp:research
+description: Analyze design trends and competitive landscape for the project
+allowed-tools:
+  - Read
+  - Write
+  - Bash
+  - Task
+  - WebSearch
+  - WebFetch
+---
+<context>
+Phase 1 of the GSP design pipeline. Uses the Design Trend Synthesizer prompt to analyze industry trends, competitor positioning, and user expectation shifts.
+</context>
+
+<objective>
+Research design trends for the project's industry and produce a comprehensive trends report.
+
+**Input:** `.design/BRIEF.md`
+**Output:** `.design/research/TRENDS.md`
+**Agent:** `gsp-researcher`
+</objective>
+
+<execution_context>
+@/Users/jubs/.claude/get-shit-pretty/prompts/07-design-trend-synthesizer.md
+@/Users/jubs/.claude/get-shit-pretty/templates/phases/research.md
+</execution_context>
+
+<process>
+## Step 1: Load context
+
+Read `.design/BRIEF.md` to understand:
+- Industry / sector
+- Target audience
+- Brand personality and positioning
+- Competitive landscape (if mentioned)
+
+If BRIEF.md doesn't exist, tell the user to run `/gsp:new-project` first.
+
+## Step 2: Spawn researcher
+
+Spawn the `gsp-researcher` agent with:
+- The full BRIEF.md content
+- The Design Trend Synthesizer prompt (07)
+- The research output template
+- Instruction to focus on the project's specific industry
+
+The agent should:
+1. Research current design trends for the industry
+2. Identify 5 macro trends with real brand examples
+3. Map competitor positioning (2x2)
+4. Analyze user expectation shifts
+5. Assess platform evolution (iOS, Material, Web)
+6. Provide strategic recommendations
+7. Define mood board direction
+
+## Step 3: Write output
+
+Write the completed research to `.design/research/TRENDS.md`.
+
+## Step 4: Update state
+
+Update `.design/STATE.md`:
+- Set Phase 1 (Research) status to `complete`
+- Record completion date
+
+## Step 5: Route next
+
+Display a summary of key findings and end with:
+"Run `/gsp:brand` to create brand identity based on these insights."
+</process>

package/commands/gsp/review.md

@@ -0,0 +1,99 @@
+---
+name: gsp:review
+description: Design critique (Nielsen's heuristics) + WCAG accessibility audit
+allowed-tools:
+  - Read
+  - Write
+  - Bash
+  - Task
+---
+<context>
+Phase 6 of the GSP design pipeline. Runs two agents in parallel: the Design Critique Partner (Nielsen's 10 heuristics) and the Accessibility Auditor (WCAG 2.2 AA). If critical issues are found, loops back to design/spec phases.
+</context>
+
+<objective>
+Critique design quality and audit accessibility compliance.
+
+**Input:** All prior artifacts
+**Output:** `.design/review/CRITIQUE.md` + `.design/review/ACCESSIBILITY.md`
+**Agents:** `gsp-critic` + `gsp-accessibility-auditor`
+</objective>
+
+<execution_context>
+@/Users/jubs/.claude/get-shit-pretty/prompts/06-design-critique-partner.md
+@/Users/jubs/.claude/get-shit-pretty/prompts/08-accessibility-auditor.md
+@/Users/jubs/.claude/get-shit-pretty/templates/phases/review.md
+@/Users/jubs/.claude/get-shit-pretty/references/nielsen-heuristics.md
+@/Users/jubs/.claude/get-shit-pretty/references/wcag-checklist.md
+</execution_context>
+
+<process>
+## Step 1: Load context
+
+Read all prior artifacts:
+- `.design/BRIEF.md`
+- `.design/brand/IDENTITY.md`
+- `.design/system/SYSTEM.md`
+- `.design/screens/SCREENS.md`
+- `.design/specs/FIGMA-SPECS.md`
+
+If SCREENS.md or FIGMA-SPECS.md don't exist, tell the user to complete design and spec phases first.
+
+## Step 2: Spawn critics (parallel)
+
+**Agent 1: gsp-critic** — Design critique using:
+- The Design Critique Partner prompt (06)
+- Nielsen's 10 Heuristics reference
+- All design artifacts
+
+Should deliver:
+1. Nielsen's 10 heuristics scored 1-5 with specific examples
+2. Visual hierarchy analysis
+3. Typography and color assessment
+4. Usability evaluation
+5. Cognitive load analysis
+6. Prioritized fixes (Critical / Important / Polish)
+7. 2 alternative redesign directions
+
+**Agent 2: gsp-accessibility-auditor** — WCAG audit using:
+- The Accessibility Auditor prompt (08)
+- WCAG 2.2 AA checklist
+- All design artifacts
+
+Should deliver:
+1. Perceivable, Operable, Understandable, Robust checklists
+2. Mobile and cognitive accessibility checks
+3. Violations list with severity and WCAG criteria
+4. Remediation steps
+5. Accessibility statement
+
+## Step 3: Write output
+
+1. Write critique to `.design/review/CRITIQUE.md`
+2. Write audit to `.design/review/ACCESSIBILITY.md`
+
+## Step 4: Assess results
+
+Count critical and important issues across both reports.
+
+**If critical issues found:**
+- Display issues clearly
+- Recommend looping back: "Run `/gsp:design` or `/gsp:spec` to address critical issues, then `/gsp:review` again."
+- Update STATE.md review loop tracking
+
+**If no critical issues:**
+- Display positive summary with any polish items
+- Proceed to build
+
+## Step 5: Update state
+
+Update `.design/STATE.md`:
+- Set Phase 6 (Review) status to `complete` (or `needs-revision` if critical issues)
+- Record review loop count
+- Record completion date
+
+## Step 6: Route next
+
+If clean: "Run `/gsp:build` to translate designs to code."
+If issues: "Address the critical issues above, then run `/gsp:review` again."
+</process>