Dev

.claude/commands/pm/epic-sync.md

@@ -41,12 +41,12 @@ if [[ "$remote_url" == *"automazeio/ccpm"* ]] || [[ "$remote_url" == *"automazei
   echo "To fix this:"
   echo "1. Fork this repository to your own GitHub account"
   echo "2. Update your remote origin:"
-  echo "   git remote set-url origin https://github.com/YOUR_USERNAME/YOUR_REPO.git"
+  echo "   git remote set-url origin https://github.com/kvnloo/evolve.git"
   echo ""
   echo "Or if this is a new project:"
   echo "1. Create a new repository on GitHub"
   echo "2. Update your remote origin:"
-  echo "   git remote set-url origin https://github.com/YOUR_USERNAME/YOUR_REPO.git"
+  echo "   git remote set-url origin https://github.com/kvnloo/evolve.git"
   echo ""
   echo "Current remote: $remote_url"
   exit 1

.claude/commands/pm/issue-sync.md

@@ -27,7 +27,7 @@ Do not bother the user with preflight checks progress ("I'm not going to ...").
    remote_url=$(git remote get-url origin 2>/dev/null || echo "")
    if [[ "$remote_url" == *"automazeio/ccpm"* ]]; then
      echo "❌ ERROR: Cannot sync to CCPM template repository!"
-     echo "Update your remote: git remote set-url origin https://github.com/YOUR_USERNAME/YOUR_REPO.git"
+     echo "Update your remote: git remote set-url origin https://github.com/kvnloo/evolve.git"
      exit 1
    fi
    ```

.claude/commands/ui/design.md

@@ -1,3 +1,93 @@
+# UI Design - Pixel-Perfect Recreation Workflow
+
+## Orchestration Mode
+When recreating UI from screenshots, use SuperClaude orchestration:
+- Enable flags: `--orchestrate --delegate auto --concurrency 7 --think-hard`
+- These flags activate parallel agent execution and intelligent coordination
+- Memory coordination via hooks for cross-agent communication
+
+## Workflow Execution
+
+### Phase 1: Parallel Analysis (Execute in Single Message)
+Spawn 7 agents concurrently using Claude Code's Task tool:
+
+**Agent 1: Structural Analyzer** (code-analyzer)
+- Run `/ui/uied-analysis` on the provided image
+- Extract component positions, dimensions, and canvas size
+- Generate ASCII layout representation showing spatial organization
+- Store findings in memory with key: `structural-analysis`
+
+**Agent 2: Color Analyst** (analyst)
+- Analyze the image to extract complete color palette
+- Identify: backgrounds, text colors, accents, borders, hover states
+- Organize into primary, secondary, neutral, accent categories
+- Map to Tailwind color classes
+- Store in memory with key: `color-palette`
+
+**Agent 3: Typography Analyst** (analyst)
+- Examine all text elements in the image
+- Document font families, sizes, weights, line heights, tracking
+- Identify heading hierarchy (h1-h6) and body text styles
+- Note any special typography patterns
+- Store in memory with key: `typography-system`
+
+**Agent 4: Spacing Analyst** (analyst)
+- Analyze padding, margins, gaps throughout the UI
+- Identify spacing scale (4px, 8px, 16px, 24px, etc.)
+- Document grid patterns, alignment, and layout structure
+- Store in memory with key: `spacing-system`
+
+**Agent 5: Shadow Analyst** (analyst)
+- Extract shadow and elevation patterns from the image
+- Document shadow levels (subtle, medium, high)
+- Map to Tailwind shadow classes (shadow-sm, shadow-md, etc.)
+- Store in memory with key: `shadow-patterns`
+
+**Agent 6: Border Analyst** (analyst)
+- Identify border radius values and patterns
+- Document border styles, widths, and colors
+- Store in memory with key: `border-patterns`
+
+**Agent 7: Component Classifier** (analyst)
+- Catalog component types (buttons, cards, inputs, navigation, icons)
+- Identify interaction states (hover, active, disabled, focus)
+- Document component patterns and variants
+- Store in memory with key: `component-catalog`
+
+### Phase 2: Sequential Synthesis (After Phase 1 Completes)
+
+**Style Guide Synthesizer** (technical-writer)
+- Retrieve all Phase 1 memory outputs
+- Consolidate into unified design system using `/ui/style-guide` structure
+- Create comprehensive style guide document
+- Store in memory with key: `style-guide`
+
+**Layout Architect** (system-architect)
+- Retrieve `structural-analysis` and `component-catalog` from memory
+- Plan component hierarchy and spatial relationships
+- Map UIED positions to semantic HTML structure
+- Store in memory with key: `layout-architecture`
+
+### Phase 2.5: ASCII Layout Output (Checkpoint Before Code Generation)
+
+**IMPORTANT: Output the ASCII layout representation to the user**
+- Retrieve `structural-analysis` from memory
+- Display the ASCII layout showing component spatial organization
+- Include major sections, component boundaries, and hierarchy
+- This serves as a visual checkpoint before HTML generation
+- Wait for confirmation or feedback before proceeding to Phase 3
+
+### Phase 3: Final Generation
+
+**HTML/Tailwind Coder** (sparc-coder)
+- Retrieve all memory outputs from Phase 1 and Phase 2
+- Use UIED positions for precise component placement
+- Apply style guide for consistent design implementation
+- Follow layout architecture for proper HTML structure
+- Generate pixel-perfect HTML/Tailwind code in single file
+
+## HTML/Tailwind Output Rules
+
 Only code in HTML/Tailwind in a single code block.
 Any CSS styles should be in the style attribute. Start with a response, then code and finish with a response.
 Don't mention about tokens, Tailwind or HTML.
@@ -22,3 +112,10 @@ Use 1.5 strokewidth for lucide icons and avoid gradient containers for icons.
 Use subtle contrast.
 For logos, use letters only with tight tracking.
 Avoid a bottom right floating DOWNLOAD button.
+
+## Performance Expectations
+- Phase 1 (parallel): ~30-45 seconds
+- Phase 2 (synthesis): ~15-20 seconds
+- Phase 2.5 (ASCII output): ~5 seconds
+- Phase 3 (generation): ~20-30 seconds
+- Total: ~70-100 seconds (2.8-3.6x faster than sequential execution)