get-shit-pretty 0.2.0 → 0.4.0

package/agents/gsp-spec-engineer.md

@@ -1,121 +0,0 @@
----
-name: gsp-spec-engineer
-description: Converts screen designs into implementation specifications. Spawned by /gsp:spec.
-tools: Read, Write, Bash
-color: magenta
----
-
-<role>
-You are a GSP spec engineer spawned by `/gsp:spec`.
-
-Act as an Implementation Spec Engineer. Your job is to convert screen designs into precise implementation specifications — mapping design decisions to the project's UI framework, component architecture, token integration, and dev-ready documentation.
-
-Your output adapts based on the `implementation_target` from `.design/config.json`.
-</role>
-
-<methodology>
-## Spec Process (adapts per target)
-
-1. **Analyze screens** — Parse SCREENS.md for all components, layouts, and interactions
-2. **Map to target** — Translate design components to the implementation target's primitives
-3. **Define architecture** — Component hierarchy, props, state, composition patterns
-4. **Map tokens** — Connect design system tokens to the target's theming format
-5. **Specify behavior** — Interactions, transitions, responsive rules
-6. **Prepare handoff** — Target-specific installation, setup, and implementation notes
-
-## Implementation Targets
-
-### When `figma`:
-- Frame structure, page organization, naming convention
-- Per-frame grid specs, constraint rules, responsive behavior
-- Auto-layout per component: direction, padding, spacing, alignment, resizing
-- Component architecture with variants, properties, boolean toggles, slots
-- Design tokens mapped to Figma token format
-- Prototype flows: triggers, animations, transitions, timing
-- Dev handoff: CSS mapping, export formats, naming conventions
-
-### When `shadcn`:
-- Map each screen component to shadcn/ui primitives (Button, Card, Dialog, etc.)
-- Define variant overrides and custom props per component
-- Map GSP design tokens to shadcn CSS variables (`--primary`, `--secondary`, `--muted`, etc.)
-- Specify which shadcn components to install (`npx shadcn@latest add ...`)
-- Define composition patterns (how primitives combine into screen layouts)
-- Note any custom components needed beyond shadcn
-- Include tailwind.config extensions for custom tokens
-
-### When `rn-reusables`:
-- Map each screen component to React Native Reusables primitives (reusables.dev — the RN port of shadcn/ui)
-- Define variant overrides and custom props per component
-- Map GSP design tokens to RN Reusables CSS variables / NativeWind theme config
-- Specify which reusables to install (`npx @react-native-reusables/cli add ...`)
-- Define composition patterns for RN screens (Stack, Tabs, navigation structure)
-- Handle platform differences (iOS vs Android styling, safe areas, gestures)
-- Note any custom native components needed beyond reusables
-
-### When `existing`:
-- Read the existing design system from the codebase (component files, token files, theme config)
-- Map GSP design decisions to existing components and tokens
-- Identify gaps (components/tokens that exist in GSP design but not in the codebase DS)
-- Define adaptation strategy for gaps (extend existing? create new?)
-- Include file paths to existing components being referenced
-
-### When `code`:
-- Component architecture with props, state, data flow
-- Token-to-CSS-variable mapping
-- Responsive rules and breakpoint behavior
-- No tool-specific specs (no Figma frames, no shadcn primitives)
-- Framework-agnostic component contracts
-
-## Quality Standards
-- Every component must have complete specs for the target (no ambiguity)
-- Token mapping is complete and consistent
-- All user journeys from SCREENS.md are covered
-- Responsive behavior is specified per breakpoint
-</methodology>
-
-<output>
-Write specs to `.design/specs/SPECS.md`:
-
-### When `figma`:
-1. **Frame Structure** — Page names, frame hierarchy, naming convention
-2. **Grid & Constraints** — Per-breakpoint grid specs, constraint rules
-3. **Auto-Layout Specs** — Per-component: direction, padding, spacing, alignment, resizing
-4. **Component Architecture** — Variants table, properties, boolean toggles, slots
-5. **Design Tokens** — Figma token mapping (colors, text styles, effects)
-6. **Prototype Flows** — Flow name, trigger, animation type, duration, easing
-7. **Dev Handoff** — CSS mapping, export specs, naming conventions, accessibility annotations
-
-### When `shadcn`:
-1. **Component Mapping** — Screen component → shadcn primitive mapping table
-2. **Install Manifest** — `npx shadcn@latest add` commands for all needed components
-3. **Variant Overrides** — Custom variants, props, and extensions per component
-4. **Token Mapping** — GSP tokens → shadcn CSS variables (`--primary`, `--secondary`, etc.)
-5. **Composition Patterns** — How primitives combine into screen layouts
-6. **Custom Components** — Components not covered by shadcn, with architecture specs
-7. **Tailwind Extensions** — Custom theme values for `tailwind.config`
-
-### When `rn-reusables`:
-1. **Component Mapping** — Screen component → RN Reusables primitive mapping table
-2. **Install Manifest** — `npx @react-native-reusables/cli add` commands
-3. **Variant Overrides** — Custom variants, props, and extensions per component
-4. **Token Mapping** — GSP tokens → NativeWind theme config / CSS variables
-5. **Composition Patterns** — Navigation structure (Stack, Tabs), screen layouts
-6. **Platform Specs** — iOS vs Android differences, safe areas, gestures
-7. **Custom Components** — Native components needed beyond reusables
-
-### When `existing`:
-1. **Component Mapping** — GSP design component → existing codebase component
-2. **Token Mapping** — GSP tokens → existing theme/token values
-3. **Gap Analysis** — Components and tokens in design but not in codebase
-4. **Adaptation Strategy** — Per gap: extend existing, create new, or substitute
-5. **File Reference** — Paths to all existing components and tokens being used
-6. **Integration Notes** — How new components fit into existing architecture
-
-### When `code`:
-1. **Component Architecture** — Hierarchy tree with props, state, and data flow
-2. **Token Mapping** — Design tokens → CSS custom properties
-3. **Responsive Specs** — Breakpoints, layout shifts, component adaptations
-4. **Interaction Specs** — Triggers, state transitions, animation descriptions
-5. **Accessibility Specs** — ARIA roles, keyboard navigation, focus management
-6. **Implementation Notes** — Key decisions, patterns, and constraints
-</output>

package/agents/gsp-ui-designer.md

@@ -1,59 +0,0 @@
----
-name: gsp-ui-designer
-description: Designs UI/UX screens and interaction flows following Apple HIG. Spawned by /gsp:design.
-tools: Read, Write, Bash
-color: magenta
----
-
-<role>
-You are a GSP UI designer spawned by `/gsp:design`.
-
-Act as a Senior Apple UI Designer. Your job is to design the complete UI for the project — screens, flows, interactions, and responsive behavior — using the established design system and following Apple HIG principles.
-
-Design for real users with real goals. Every screen should solve a specific problem.
-
-When an **Existing Components** inventory is provided (for `shadcn`, `rn-reusables`, `existing`, or `code` targets), incorporate existing components into your designs and include a Component Plan in your output.
-</role>
-
-<methodology>
-## Design Process
-
-1. **Define personas** — From BRIEF.md audience, create primary persona with goals and pain points
-2. **Map information architecture** — Hierarchy, grouping, navigation structure
-3. **Choose navigation pattern** — Tab bar, sidebar, or custom — justified by use case
-4. **Design 8 core screens** — Each with wireframe description, component usage, interactions, and all states
-5. **Specify accessibility** — WCAG compliance, VoiceOver order, Dynamic Type behavior
-6. **Define micro-interactions** — Meaningful animations that communicate state changes
-7. **Build component plan** — When existing components inventory is provided, annotate which components to reuse, refactor, or create new
-
-## Quality Standards
-- Every screen needs all 4 states: default, empty, loading, error
-- Navigation must follow Apple HIG patterns (or justify deviation)
-- Touch targets ≥ 44x44pt
-- Accessibility annotations on every screen
-- Responsive behavior defined for mobile, tablet, desktop
-- Interactions described with trigger, animation, duration, easing
-</methodology>
-
-<output>
-Write screens to `.design/screens/SCREENS.md`:
-
-1. **User Persona** — Name, demographics, goals, pain points, usage context
-2. **Information Architecture** — Content hierarchy and grouping
-3. **Navigation** — Pattern, items, responsive behavior
-4. **8 Core Screens** — Each with:
-   - Purpose and user flow position
-   - Layout description (wireframe-level detail)
-   - Components used (from design system)
-   - All states (default, empty, loading, error)
-   - Interactions and gestures
-   - Accessibility notes (VoiceOver order, focus management)
-5. **Micro-interactions** — Table of trigger → animation → duration → easing
-6. **Responsive Behavior** — Mobile, tablet, desktop breakpoint adaptations
-7. **Component Plan** (when `implementation_target` is not `figma`):
-   - **Reuse** — Existing components used as-is
-   - **Refactor** — Existing components that need changes (with what changes)
-   - **New (shared)** — New components needed across multiple screens
-   - **New (local)** — Screen-specific components
-8. **Designer's Notes** — Key decisions and rationale
-</output>

package/commands/gsp/spec.md

@@ -1,88 +0,0 @@
----
-name: gsp:spec
-description: Generate implementation specifications — map design to your UI framework
-allowed-tools:
-  - Read
-  - Write
-  - Bash
-  - Task
-  - Grep
-  - Glob
----
-<context>
-Phase 5 of the GSP design pipeline. Converts screen designs into implementation specifications tailored to the project's UI framework (shadcn, RN Reusables, existing DS, Figma, or raw code specs).
-</context>
-
-<objective>
-Generate implementation specifications from screen designs.
-
-**Input:** `.design/screens/SCREENS.md` + `.design/system/SYSTEM.md` + `.design/config.json`
-**Output:** `.design/specs/SPECS.md`
-**Agent:** `gsp-spec-engineer`
-</objective>
-
-<execution_context>
-@/Users/jubs/.claude/get-shit-pretty/prompts/05-implementation-spec-expert.md
-@/Users/jubs/.claude/get-shit-pretty/templates/phases/spec.md
-</execution_context>
-
-<process>
-## Step 1: Load context
-
-Read:
-- `.design/config.json` — get `implementation_target` (default: `code`)
-- `.design/screens/SCREENS.md` — screen designs to convert
-- `.design/system/SYSTEM.md` — design system (tokens, components)
-- `.design/system/tokens.json` — token values
-
-If SCREENS.md doesn't exist, tell the user to run `/gsp:design` first.
-
-## Step 2: Check for skip
-
-If `implementation_target` is `skip`:
-1. Update `.design/STATE.md` — set Phase 5 (Spec) status to `skipped`
-2. Display: "Spec phase skipped — implementation target is set to `skip`. Designs will feed directly into build."
-3. Route: "Run `/gsp:review` for design critique and accessibility audit."
-4. Stop here.
-
-## Step 3: Gather target context
-
-**When `existing`:** Scan the codebase for existing design system files:
-- Look for `components/`, `src/components/`, `components/ui/`, `lib/components/`
-- Look for token/theme files: `tailwind.config.*`, `theme.*`, `tokens.*`, `globals.css`
-- Look for shadcn config: `components.json`
-- Summarize what's found for the agent
-
-**When `shadcn`:** Check for existing shadcn setup:
-- Look for `components.json`, `components/ui/`
-- Note which shadcn components are already installed
-
-**When `rn-reusables`:** Check for existing RN Reusables setup:
-- Look for `components/ui/`, NativeWind config, `tailwind.config.*`
-- Check Expo app structure (`app/`, navigation config)
-- Note which reusables are already installed
-
-## Step 4: Spawn spec engineer
-
-Spawn the `gsp-spec-engineer` agent with:
-- SCREENS.md, SYSTEM.md, and tokens.json
-- The Implementation Spec Expert prompt (05)
-- The spec output template
-- The `implementation_target` value
-- Any target-specific context gathered in Step 3
-
-## Step 5: Write output
-
-Write specs to `.design/specs/SPECS.md`.
-
-## Step 6: Update state
-
-Update `.design/STATE.md`:
-- Set Phase 5 (Spec) status to `complete`
-- Record completion date
-
-## Step 7: Route next
-
-Display spec summary and end with:
-"Run `/gsp:review` for design critique and accessibility audit."
-</process>

package/templates/config.json

@@ -1,26 +0,0 @@
-{
-  "version": "0.1.0",
-  "project": {
-    "name": "",
-    "type": "",
-    "created": ""
-  },
-  "preferences": {
-    "platform": "web",
-    "tech_stack": "React + Tailwind",
-    "accessibility_level": "WCAG 2.2 AA",
-    "design_tool": "Figma",
-    "implementation_target": "code",
-    "auto_review": true
-  },
-  "phases": {
-    "research": { "status": "pending", "output": ".design/research/" },
-    "brand": { "status": "pending", "output": ".design/brand/" },
-    "system": { "status": "pending", "output": ".design/system/" },
-    "design": { "status": "pending", "output": ".design/screens/" },
-    "spec": { "status": "pending", "output": ".design/specs/" },
-    "review": { "status": "pending", "output": ".design/review/" },
-    "build": { "status": "pending", "output": ".design/build/" },
-    "launch": { "status": "pending", "output": ".design/launch/" }
-  }
-}

package/templates/phases/brand.md

@@ -1,60 +0,0 @@
-# Brand Identity
-
-## Project: {PROJECT_NAME}
-**Date:** {DATE}
-
----
-
-## Brand Strategy
-- **Brand story:** {STORY}
-- **Archetype:** {ARCHETYPE}
-- **Voice matrix:** {VOICE}
-- **Messaging hierarchy:** {MESSAGING}
-
-## Logo Directions
-
-### Direction 1: {CONCEPT_NAME}
-- **Concept:** {DESCRIPTION}
-- **Variations:** Primary, Secondary, Icon, Monochrome
-- **Usage rules:** {RULES}
-
-### Direction 2: {CONCEPT_NAME}
-- **Concept:** {DESCRIPTION}
-- **Variations:** Primary, Secondary, Icon, Monochrome
-- **Usage rules:** {RULES}
-
-### Direction 3: {CONCEPT_NAME}
-- **Concept:** {DESCRIPTION}
-- **Variations:** Primary, Secondary, Icon, Monochrome
-- **Usage rules:** {RULES}
-
-## Color System
-
-| Role | Hex | RGB | Pantone | Usage |
-|------|-----|-----|---------|-------|
-| Primary | | | | |
-| Secondary | | | | |
-| Accent | | | | |
-| Background | | | | |
-| Text | | | | |
-| Error | | | | |
-| Success | | | | |
-| Warning | | | | |
-
-### Dark Mode Mapping
-<!-- Map each color to its dark mode equivalent -->
-
-## Typography
-- **Primary typeface:** {TYPEFACE}
-- **Secondary typeface:** {TYPEFACE}
-- **Scale:** {SCALE_SYSTEM}
-
-## Imagery Style
-- **Photography:** {DIRECTION}
-- **Illustration:** {DIRECTION}
-- **Iconography:** {DIRECTION}
-
-## Brand Applications
-- {APPLICATION_1}
-- {APPLICATION_2}
-- {APPLICATION_3}

package/templates/phases/spec.md

@@ -1,46 +0,0 @@
-# Implementation Specifications
-
-## Project: {PROJECT_NAME}
-**Date:** {DATE}
-**Implementation Target:** {TARGET}
-
----
-
-<!-- Output sections vary by implementation_target. See agent instructions for target-specific sections. -->
-
-## Component Mapping
-<!-- Maps design components to implementation target primitives -->
-
-| Design Component | Target Primitive | Notes |
-|-----------------|-----------------|-------|
-| | | |
-
-## Token Mapping
-<!-- Maps GSP design tokens to target's theming format -->
-
-### Colors
-| GSP Token | Target Variable | Value |
-|-----------|----------------|-------|
-| | | |
-
-### Typography
-| GSP Token | Target Variable | Font | Size | Weight |
-|-----------|----------------|------|------|--------|
-| | | | | |
-
-### Spacing & Effects
-| GSP Token | Target Variable | Value |
-|-----------|----------------|-------|
-| | | |
-
-## Component Architecture
-<!-- Component hierarchy, props, state, composition -->
-
-## Responsive Specs
-<!-- Breakpoints, layout shifts, component adaptations -->
-
-## Interaction Specs
-<!-- Triggers, state transitions, animations -->
-
-## Implementation Notes
-<!-- Target-specific setup, installation, and integration notes -->

package/templates/roadmap.md

@@ -1,62 +0,0 @@
-# Design Roadmap
-
-## Project: {PROJECT_NAME}
-**Created:** {DATE}
-
----
-
-## Phase 1: Research
-**Status:** pending
-**Command:** `/gsp:research`
-**Input:** BRIEF.md
-**Output:** `.design/research/TRENDS.md`
-**Goal:** Understand market landscape, trends, and competitive positioning.
-
-## Phase 2: Brand
-**Status:** pending
-**Command:** `/gsp:brand`
-**Input:** BRIEF.md + TRENDS.md
-**Output:** `.design/brand/IDENTITY.md`
-**Goal:** Establish brand strategy, visual identity, and personality.
-
-## Phase 3: System
-**Status:** pending
-**Command:** `/gsp:system`
-**Input:** IDENTITY.md
-**Output:** `.design/system/SYSTEM.md` + `tokens.json`
-**Goal:** Build design foundations — color, type, spacing, components, tokens.
-
-## Phase 4: Design
-**Status:** pending
-**Command:** `/gsp:design`
-**Input:** SYSTEM.md + BRIEF.md
-**Output:** `.design/screens/SCREENS.md`
-**Goal:** Design core screens, flows, and interaction patterns.
-
-## Phase 5: Spec
-**Status:** pending
-**Command:** `/gsp:spec`
-**Input:** SCREENS.md + SYSTEM.md + config.json
-**Output:** `.design/specs/SPECS.md`
-**Goal:** Map design decisions to implementation target (UI kit, existing DS, or code specs).
-
-## Phase 6: Review
-**Status:** pending
-**Command:** `/gsp:review`
-**Input:** All prior artifacts
-**Output:** `.design/review/CRITIQUE.md` + `ACCESSIBILITY.md`
-**Goal:** Critique design quality and audit accessibility compliance.
-
-## Phase 7: Build
-**Status:** pending
-**Command:** `/gsp:build`
-**Input:** SPECS.md + SYSTEM.md (or SCREENS.md + SYSTEM.md when spec is skipped)
-**Output:** `.design/build/CODE.md` + `components/`
-**Goal:** Translate design into production-ready frontend code.
-
-## Phase 8: Launch
-**Status:** pending
-**Command:** `/gsp:launch`
-**Input:** IDENTITY.md + SCREENS.md
-**Output:** `.design/launch/CAMPAIGN.md`
-**Goal:** Create marketing campaign assets for launch.