@torka/claude-workflows 0.9.0 → 0.11.0

package/commands/dev-story-fullstack.md

@@ -41,11 +41,14 @@ Execute fullstack stories using a **hybrid approach** - applying design-first me
 
 ### 2.2 Optional MCPs (graceful degradation)
 
-| MCP | Purpose | Fallback |
-|-----|---------|----------|
+| MCP/Skill | Purpose | Fallback |
+|-----------|---------|----------|
 | Context7 | Library docs | Web search |
 | MagicPatterns | Design code fetch | Manual implementation |
+| Stitch | Design screen conversion | Manual implementation |
 | Serena | Codebase analysis | Manual Glob/Grep |
+| react-best-practices (skill) | React/Next.js performance | Standard implementation |
+| Stitch react-components (skill) | Converting Stitch designs to React code | Standard implementation |
 
 ### 2.3 Probe Execution
 
@@ -181,6 +184,7 @@ IF task type is UI:
 
 1. Design Analysis:
    - Check for MagicPatterns link
+   - Check for Stitch screen reference
    - Check for shadcn component mentions
    - Identify visual requirements
 
@@ -188,22 +192,32 @@ IF task type is UI:
    IF MagicPatterns link:
      - Fetch code via MCP
      - Adapt for project structure
+   IF Stitch screen :
+     * IF component already exists → Log: "using existing" → SKIP Stitch
+     * IF component NOT exists →
+         - Fetch via Stitch MCP
+         - Convert to React components using Stitch react-components skill
+         - Run validation scripts
    IF shadcn components:
      - ALWAYS call get_item_examples_from_registries FIRST
      - Review demo output
      - Implement with correct patterns
 
-3. Visual Validation:
+3. Apply Performance Patterns:
+   IF react-best-practices skill available:
+     - Apply skill guidance during implementation
+
+4. Visual Validation:
    - Navigate to affected page via Playwright
    - Take screenshot
    - Check console for errors
    - Fix and retry if issues (max 3 iterations)
 
-4. Add Tests (after visual validation):
+5. Add Tests (after visual validation):
    - E2E tests for user flows
    - Unit tests for component logic
 
-5. Run test suite and verify all pass
+6. Run test suite and verify all pass
 ```
 
 ### 6.3 Backend Task Execution (TDD)

package/commands/dev-story-ui.md

@@ -48,10 +48,13 @@ Scan story content (tasks, dev notes, acceptance criteria) for:
 
 ### 2.3 Optional MCPs (graceful degradation)
 
-| MCP | Purpose | Fallback |
-|-----|---------|----------|
+| MCP/Skill | Purpose | Fallback |
+|-----------|---------|----------|
 | Context7 | Library docs | Web search |
 | MagicPatterns | Design code fetch | Manual implementation from design |
+| Stitch | Design screen conversion | Manual implementation |
+| react-best-practices (skill) | React/Next.js performance | Standard implementation |
+| Stitch react-components (skill) | Converting Stitch designs to React code | Standard implementation |
 
 ### 2.4 Probe Execution
 
@@ -154,6 +157,7 @@ Dev Agent Record update:
 ```
 1. Extract design references from story:
    - MagicPatterns links
+   - Stitch screen references
    - Figma links
    - Screenshot paths
    - Component specifications in Dev Notes
@@ -162,16 +166,31 @@ Dev Agent Record update:
    - CRITICAL: Fetch code via MCP (NEVER build from scratch)
    - Adapt for project structure
 
-3. IF shadcn components needed:
+2. IF Stitch screen reference (stitch.new or stitch: prefix):
+   - Extract target component name from reference
+   - CHECK IF COMPONENT EXISTS:
+     * Look for: .stitch/{ComponentName}.tsx  
+     * Look for: src/components/{ComponentName}.tsx
+     * Look for: src/app/**/components/{ComponentName}.tsx
+   - IF component exists:
+     * Log: "Component {name} already exists - using existing"
+     * SKIP Stitch fetch
+   - IF component NOT exists AND Stitch MCP available:
+     * Fetch via Stitch MCP
+     * Run validation: npm run validate <file_path>
+   - IF Stitch MCP unavailable:
+     * Log: "Stitch MCP not configured - manual implementation"
+
+4. IF shadcn components needed:
    - Call mcp__shadcn__search_items_in_registries for relevant components
    - Note component names for implementation
 
-4. Document design decisions:
+5. Document design decisions:
    - Components to use
    - Styling approach
    - Layout patterns
 
-5. Log design analysis in Dev Agent Record
+6. Log design analysis in Dev Agent Record
 ```
 
 ---
@@ -214,6 +233,10 @@ IF using shadcn components:
 3. Use semantic HTML
 4. Apply consistent styling (Tailwind classes)
 5. Ensure accessibility basics (alt text, labels, ARIA)
+
+IF react-best-practices skill available:
+  - Apply skill guidance during implementation
+  - The skill provides built-in priority and "when to use" guidance
 ```
 
 ---

package/install.js

@@ -85,6 +85,32 @@ function getTargetBase() {
   return path.join(process.env.INIT_CWD || process.cwd(), '.claude');
 }
 
+/**
+ * Ensure entries exist in a .gitignore file (append if missing)
+ */
+function ensureGitignoreEntries(gitignorePath, entries, header) {
+  let existingContent = '';
+  if (fs.existsSync(gitignorePath)) {
+    existingContent = fs.readFileSync(gitignorePath, 'utf8');
+  }
+
+  const existingLines = new Set(
+    existingContent.split('\n').map(line => line.trim()).filter(Boolean)
+  );
+
+  const missingEntries = entries.filter(entry => !existingLines.has(entry));
+
+  if (missingEntries.length > 0) {
+    const newContent = existingContent.trimEnd() +
+      (existingContent ? '\n\n' : '') +
+      `# ${header}\n` +
+      missingEntries.join('\n') + '\n';
+    fs.writeFileSync(gitignorePath, newContent);
+    return missingEntries.length;
+  }
+  return 0;
+}
+
 /**
  * Recursively copy directory contents
  * - New files: copied
@@ -157,6 +183,32 @@ function install() {
     fs.mkdirSync(targetBase, { recursive: true });
   }
 
+  // Ensure gitignore entries for package-installed files
+  const gitignorePath = path.join(targetBase, '.gitignore');
+  const gitignoreEntries = [
+    'commands/implement-epic-with-subagents.md',
+    'commands/plan-parallelization.md',
+    'commands/git-local-cleanup-push-pr.md',
+    'commands/github-pr-resolve.md',
+    'commands/dev-story-backend.md',
+    'commands/dev-story-fullstack.md',
+    'commands/dev-story-ui.md',
+    'agents/principal-code-reviewer.md',
+    'agents/story-prep-master.md',
+    'agents/desk-check-gate.md',
+    'skills/agent-creator/',
+    'skills/designer-founder/',
+    '*.backup',
+  ];
+  const addedCount = ensureGitignoreEntries(
+    gitignorePath,
+    gitignoreEntries,
+    'Installed by @torka/claude-workflows'
+  );
+  if (addedCount > 0) {
+    log(`   Updated .claude/.gitignore (added ${addedCount} entries)`, 'green');
+  }
+
   const stats = {
     copied: [],
     updated: [],
@@ -189,6 +241,41 @@ function install() {
     }
   }
 
+  // Ensure gitignore entries for BMAD workflow
+  const bmadDir = path.join(targetBase, '../_bmad');
+  if (fs.existsSync(bmadDir)) {
+    const bmadGitignorePath = path.join(bmadDir, '.gitignore');
+    const bmadEntries = [
+      'bmm/workflows/4-implementation/implement-epic-with-subagents/',
+    ];
+    const bmadAdded = ensureGitignoreEntries(
+      bmadGitignorePath,
+      bmadEntries,
+      'Installed by @torka/claude-workflows'
+    );
+    if (bmadAdded > 0) {
+      log(`   Updated _bmad/.gitignore (added ${bmadAdded} entries)`, 'green');
+    }
+  }
+
+  // Ensure gitignore entries for BMAD output
+  const bmadOutputDir = path.join(targetBase, '../_bmad-output');
+  if (fs.existsSync(bmadOutputDir)) {
+    const bmadOutputGitignorePath = path.join(bmadOutputDir, '.gitignore');
+    const bmadOutputEntries = [
+      'epic-executions/',
+      'screenshots/',
+    ];
+    const outputAdded = ensureGitignoreEntries(
+      bmadOutputGitignorePath,
+      bmadOutputEntries,
+      'Runtime output from @torka/claude-workflows'
+    );
+    if (outputAdded > 0) {
+      log(`   Updated _bmad-output/.gitignore (added ${outputAdded} entries)`, 'green');
+    }
+  }
+
   // Summary
   log('\n' + colors.bold + '📊 Installation Summary' + colors.reset);
   log(`   Files copied (new): ${stats.copied.length}`, 'green');
@@ -218,9 +305,108 @@ function install() {
   log('   ✓ desk-check-gate agent\n');
 }
 
+/**
+ * Auto-install Vercel react-best-practices skill for performance optimization
+ * Provides 57 React/Next.js performance rules with built-in guidance
+ */
+async function installReactBestPractices(isGlobal) {
+  const { execSync } = require('child_process');
+
+  log('\n' + colors.bold + '════════════════════════════════════════════════════════════' + colors.reset);
+  log(colors.bold + '  REACT BEST PRACTICES SETUP' + colors.reset);
+  log(colors.bold + '════════════════════════════════════════════════════════════' + colors.reset);
+  log('\nInstalling Vercel react-best-practices skill (57 performance rules)...\n');
+
+  const globalFlag = isGlobal ? ' -g' : '';
+  const execOptions = {
+    stdio: 'inherit',
+    timeout: 90000,
+    cwd: isGlobal ? undefined : (process.env.INIT_CWD || process.cwd()),
+  };
+
+  try {
+    execSync(`npx skills add vercel-labs/agent-skills --skill react-best-practices${globalFlag} -a claude-code -y`, execOptions);
+
+    log('\n' + colors.bold + '════════════════════════════════════════════════════════════' + colors.reset);
+    log(colors.green + colors.bold + '  ✓ REACT BEST PRACTICES INSTALLED' + colors.reset);
+    log('');
+    log('  The skill provides guidance for:');
+    log('  - Eliminating waterfalls (CRITICAL)');
+    log('  - Bundle size optimization (CRITICAL)');
+    log('  - Server-side performance (HIGH)');
+    log('  - Re-render optimization (MEDIUM)');
+    log('');
+    log('  To update: npx skills update');
+    log(colors.bold + '════════════════════════════════════════════════════════════' + colors.reset + '\n');
+
+  } catch (error) {
+    log('\n' + colors.bold + '════════════════════════════════════════════════════════════' + colors.reset);
+    log(colors.yellow + colors.bold + '  ⚠ REACT BEST PRACTICES INSTALLATION SKIPPED' + colors.reset);
+    log('');
+    log('  To install manually:');
+    log('  npx skills add vercel-labs/agent-skills --skill react-best-practices -g -a claude-code');
+    log(colors.bold + '════════════════════════════════════════════════════════════' + colors.reset + '\n');
+  }
+}
+
+/**
+ * Auto-install Google's stitch-skills for Stitch integration
+ * These skills enhance the designer-founder workflow with Stitch support
+ */
+async function installStitchSkills(isGlobal) {
+  const { execSync } = require('child_process');
+
+  log('\n' + colors.bold + '════════════════════════════════════════════════════════════' + colors.reset);
+  log(colors.bold + '  STITCH INTEGRATION SETUP' + colors.reset);
+  log(colors.bold + '════════════════════════════════════════════════════════════' + colors.reset);
+  log('\nInstalling Google stitch-skills for Stitch design tool...\n');
+
+  const globalFlag = isGlobal ? ' -g' : '';
+  const execOptions = {
+    stdio: 'inherit',
+    timeout: 60000,
+    cwd: isGlobal ? undefined : (process.env.INIT_CWD || process.cwd()),
+  };
+
+  try {
+    // Install design-md skill (required for Stitch)
+    execSync(`npx skills add google-labs-code/stitch-skills --skill design-md${globalFlag} -a claude-code -y`, execOptions);
+
+    // Install react-components skill (for HTML→React conversion)
+    execSync(`npx skills add google-labs-code/stitch-skills --skill react-components${globalFlag} -a claude-code -y`, execOptions);
+
+    log('\n' + colors.bold + '════════════════════════════════════════════════════════════' + colors.reset);
+    log(colors.green + colors.bold + '  ✓ STITCH SKILLS INSTALLED SUCCESSFULLY' + colors.reset);
+    log('');
+    log('  To use Stitch in designer-founder workflow:');
+    log('  1. Configure Stitch MCP server');
+    log('  2. Run /designer-founder and select [T] Stitch');
+    log('');
+    log('  To update skills later: npx skills update');
+    log(colors.bold + '════════════════════════════════════════════════════════════' + colors.reset + '\n');
+
+  } catch (error) {
+    log('\n' + colors.bold + '════════════════════════════════════════════════════════════' + colors.reset);
+    log(colors.yellow + colors.bold + '  ⚠ STITCH SKILLS INSTALLATION SKIPPED' + colors.reset);
+    log('');
+    log('  Could not auto-install stitch-skills.');
+    log('  This may be due to network issues or missing dependencies.');
+    log('');
+    log('  To install manually later:');
+    log('  npx skills add google-labs-code/stitch-skills -g -a claude-code');
+    log('');
+    log('  You can still use other design tools (SuperDesign, MagicPatterns).');
+    log(colors.bold + '════════════════════════════════════════════════════════════' + colors.reset + '\n');
+  }
+}
+
 // Run installation
 try {
+  const isGlobal = process.env.npm_config_global === 'true';
   install();
+  // Attempt to install external skills (non-blocking)
+  installReactBestPractices(isGlobal);
+  installStitchSkills(isGlobal);
 } catch (error) {
   logError(`Installation failed: ${error.message}`);
   // Don't exit with error code - allow npm install to complete

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@torka/claude-workflows",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "description": "Claude Code workflow helpers: epic automation, git cleanup, agents, and design workflows",
   "keywords": [
     "claude-code",

package/skills/designer-founder/SKILL.md

@@ -73,6 +73,8 @@ MagicPatterns MCP: [check if mcp__magicpatterns tools available]
 shadcn MCP: [check if mcp__shadcn tools available]
 Playwright MCP: [check if mcp__playwright tools available]
 SuperDesign: [check if .superdesign/ folder and instructions exist]
+Stitch MCP: [check if mcp__stitch* or stitch* tools available]
+Stitch Skills: [check if design-md skill installed via `npx skills list`]
 ```
 
 Adjust tool menus based on availability. Tools marked as unavailable should show "(not configured)" in menus.

package/skills/designer-founder/steps/step-03-design.md

@@ -41,6 +41,11 @@ Choose your design approach:
     → Quick HTML/CSS prototypes via VS Code
     → Best for: Rapid visual exploration, custom styling
 
+[T] Stitch (Google AI Design) {show availability status}
+    → AI-generated complete page designs
+    → Best for: Full page layouts, design system consistency
+    → Requires: Stitch MCP + Google's stitch-skills installed
+
 [M] MagicPatterns {show availability status}
     → AI-generated React components
     → Best for: Direct React code, component variations
@@ -53,7 +58,7 @@ Choose your design approach:
     → Skip visuals, map directly to shadcn
     → Best for: Standard patterns, known layouts
 
-Which approach? [S/M/W/D]
+Which approach? [S/T/M/W/D]
 ```
 
 ---
@@ -65,6 +70,7 @@ Based on user selection, load the corresponding tool file:
 | Selection | Tool File |
 |-----------|-----------|
 | S | `{installed_path}/tools/superdesign.md` |
+| T | `{installed_path}/tools/stitch.md` |
 | M | `{installed_path}/tools/magicpatterns.md` |
 | W | `{installed_path}/tools/wireframe.md` |
 | D | `{installed_path}/tools/direct-mapping.md` |

package/skills/designer-founder/steps/step-04-artifacts.md

@@ -30,7 +30,7 @@ Convert design output to dev-ready artifacts and save to `{planning_artifacts}/u
 
 ### 1. Conversion (if needed)
 
-**If `design.needs_conversion` = true (SuperDesign or Wireframe):**
+**If `design.needs_conversion` = true (SuperDesign, Stitch, or Wireframe):**
 
 Load and execute: `{installed_path}/tools/conversion.md`
 
@@ -119,6 +119,8 @@ Populate placeholders:
 - `{tool_specific_notes}` → Generate based on tool used:
   - **MagicPatterns:** "React/TypeScript code ready for extraction. Use `read_files` MCP tool to access."
   - **SuperDesign:** "HTML/CSS prototype. Requires conversion to React components."
+  - **Stitch (with react-components):** "React/TypeScript components generated via Google's react-components skill. AST-validated, includes hooks extraction and data decoupling."
+  - **Stitch (quick mapping):** "HTML/CSS prototype converted via shadcn component mapping."
   - **Wireframe:** "Structure reference only. Build components from scratch."
   - **Direct:** "Component mapping provided. No visual prototype created."
 

package/skills/designer-founder/templates/design-system.md

@@ -0,0 +1,180 @@
+# Design System: {project_name}
+
+**Stitch Project ID:** {stitch_project_id}
+**Generated:** {date}
+**Last Updated:** {date}
+
+---
+
+## 1. Visual Theme & Atmosphere
+
+### Overall Feel
+{describe the overall visual feel - e.g., "Modern and minimalist with soft edges and subtle depth"}
+
+### Design Principles
+- {principle_1}
+- {principle_2}
+- {principle_3}
+
+---
+
+## 2. Color Palette & Roles
+
+### Primary Colors
+| Name | Value | Usage |
+|------|-------|-------|
+| Primary | `{color}` | Main CTAs, active states |
+| Primary Hover | `{color}` | Hover state for primary |
+| Primary Foreground | `{color}` | Text on primary backgrounds |
+
+### Secondary Colors
+| Name | Value | Usage |
+|------|-------|-------|
+| Secondary | `{color}` | Secondary actions |
+| Secondary Hover | `{color}` | Hover state for secondary |
+| Secondary Foreground | `{color}` | Text on secondary backgrounds |
+
+### Neutral Colors
+| Name | Value | Usage |
+|------|-------|-------|
+| Background | `{color}` | Page background |
+| Foreground | `{color}` | Primary text |
+| Muted | `{color}` | Subtle backgrounds |
+| Muted Foreground | `{color}` | Secondary text |
+| Border | `{color}` | Borders and dividers |
+
+### Semantic Colors
+| Name | Value | Usage |
+|------|-------|-------|
+| Destructive | `{color}` | Errors, delete actions |
+| Success | `{color}` | Success states |
+| Warning | `{color}` | Warning states |
+
+### Dark Mode Variants
+{if dark_mode_supported}
+| Light Mode | Dark Mode | Usage |
+|------------|-----------|-------|
+| `{light}` | `{dark}` | Background |
+| `{light}` | `{dark}` | Foreground |
+{/if}
+
+---
+
+## 3. Typography Rules
+
+### Font Family
+- **Sans:** `{font_family}` (e.g., Inter, system-ui)
+- **Mono:** `{mono_family}` (e.g., JetBrains Mono, monospace)
+
+### Scale
+| Name | Size | Weight | Line Height | Usage |
+|------|------|--------|-------------|-------|
+| H1 | `{size}` | `{weight}` | `{lh}` | Page titles |
+| H2 | `{size}` | `{weight}` | `{lh}` | Section headers |
+| H3 | `{size}` | `{weight}` | `{lh}` | Subsections |
+| Body | `{size}` | `{weight}` | `{lh}` | Default text |
+| Small | `{size}` | `{weight}` | `{lh}` | Captions, labels |
+
+### Text Colors
+- Primary: `foreground`
+- Secondary: `muted-foreground`
+- Links: `primary`
+- Disabled: `muted-foreground` with 50% opacity
+
+---
+
+## 4. Component Stylings
+
+### Buttons
+| Variant | Background | Text | Border | Hover |
+|---------|------------|------|--------|-------|
+| Default | `primary` | `primary-foreground` | none | `primary/90` |
+| Secondary | `secondary` | `secondary-foreground` | none | `secondary/80` |
+| Outline | transparent | `foreground` | `border` | `muted` |
+| Ghost | transparent | `foreground` | none | `muted` |
+| Destructive | `destructive` | `destructive-foreground` | none | `destructive/90` |
+
+### Border Radius
+| Element | Radius |
+|---------|--------|
+| Buttons | `{radius}` |
+| Cards | `{radius}` |
+| Inputs | `{radius}` |
+| Modals | `{radius}` |
+
+### Shadows
+| Name | Value | Usage |
+|------|-------|-------|
+| sm | `{shadow}` | Subtle elevation |
+| md | `{shadow}` | Cards, dropdowns |
+| lg | `{shadow}` | Modals, popovers |
+
+### Spacing Scale
+Base unit: `{base}` (e.g., 4px)
+
+| Name | Value | Usage |
+|------|-------|-------|
+| xs | `{value}` | Tight spacing |
+| sm | `{value}` | Compact elements |
+| md | `{value}` | Default spacing |
+| lg | `{value}` | Section spacing |
+| xl | `{value}` | Large gaps |
+
+---
+
+## 5. Layout Principles
+
+### Grid System
+- **Container max-width:** `{width}` (e.g., 1280px)
+- **Columns:** {columns} (e.g., 12)
+- **Gutter:** `{gutter}` (e.g., 24px)
+
+### Breakpoints
+| Name | Width | Notes |
+|------|-------|-------|
+| sm | `{width}` | Mobile landscape |
+| md | `{width}` | Tablet |
+| lg | `{width}` | Desktop |
+| xl | `{width}` | Large desktop |
+
+### Content Widths
+- **Prose:** max-width `{width}` for readable text
+- **Forms:** max-width `{width}` for form containers
+- **Full:** 100% width containers
+
+---
+
+## 6. Animation & Motion
+
+### Transitions
+| Property | Duration | Easing |
+|----------|----------|--------|
+| Colors | `{duration}` | `{easing}` |
+| Transform | `{duration}` | `{easing}` |
+| Opacity | `{duration}` | `{easing}` |
+
+### Micro-interactions
+- **Hover:** {describe hover behavior}
+- **Focus:** {describe focus behavior}
+- **Active:** {describe active state}
+
+---
+
+## Notes for Stitch
+
+When generating screens with Stitch, reference this document to maintain consistency:
+
+1. **Include design system context** in prompts
+2. **Reference color names** (e.g., "primary", "muted") not hex values
+3. **Use typography scale names** for consistent sizing
+4. **Apply spacing scale** for consistent rhythm
+
+### Example Stitch Prompt Addition
+
+```
+Use the design system:
+- Primary color for CTAs
+- Border radius: {radius}
+- Font: {font_family}
+- Spacing: 4px base unit
+```

package/skills/designer-founder/tools/conversion.md

@@ -2,7 +2,7 @@
 
 ## Overview
 
-Convert SuperDesign HTML/CSS output to React components. Used when `design.tool_used` = `superdesign`.
+Convert HTML/CSS output to React components. Used when `design.tool_used` = `superdesign`, `stitch`, or `wireframe`.
 
 ---
 
@@ -26,6 +26,21 @@ Map standard elements to shadcn, use MagicPatterns for custom components.
 
 **Best for:** Mix of standard and custom elements
 
+### Strategy G: Google's react-components (Stitch only)
+
+Use Google's react-components skill for full modular React architecture.
+
+**Best for:** Production-quality components, enforced architecture patterns
+**Available:** Only when `design.tool_used` = `stitch`
+
+Features:
+- Modular file structure (Atomic/Composite patterns)
+- Logic extraction to `src/hooks/`
+- Data decoupling to `src/data/mockData.ts`
+- TypeScript interfaces with `Readonly<T>`
+- AST-based validation (no hardcoded hex values)
+- Dark mode support validation
+
 ---
 
 ## Execution Flow
@@ -35,7 +50,7 @@ Map standard elements to shadcn, use MagicPatterns for custom components.
 ```
 CONVERSION STRATEGY
 
-Your SuperDesign prototype is HTML/CSS. Let's convert to React components.
+Your {tool_name} prototype is HTML/CSS. Let's convert to React components.
 
 Prototype location: {design.output_location}
 
@@ -46,6 +61,13 @@ Choose your approach:
     → You install via CLI, minimal custom code
     → Best for: Standard UI patterns
 
+{if design.tool_used = stitch}
+[G] Google's react-components
+    → Full modular React architecture
+    → AST validation, data decoupling, hooks extraction
+    → Best for: Production-quality Stitch conversions
+{/if}
+
 [M] MagicPatterns Conversion {if available, else "(not configured)"}
     → Generate React code from the design
     → Direct component code output
@@ -56,7 +78,7 @@ Choose your approach:
     → Use MagicPatterns for custom components
     → Best for: Mix of standard and custom
 
-Which approach? [C/M/H]
+Which approach? [C/{if stitch}G/{/if}M/H]
 ```
 
 ---
@@ -212,6 +234,81 @@ Starting analysis...
 
 ---
 
+### 2G. Google react-components Execution (Stitch only)
+
+**Prerequisites:** This strategy is only available when `design.tool_used` = `stitch`.
+
+Check if react-components skill is installed. If not:
+
+```
+REACT-COMPONENTS SKILL NOT FOUND
+
+The react-components skill is required for this conversion strategy.
+
+This should have been auto-installed. Install manually with:
+npx skills add google-labs-code/stitch-skills --skill react-components -g -a claude-code -y
+
+Then restart Claude Code and try again.
+
+[B] Back to strategy selection
+```
+
+If installed, invoke the skill:
+
+```
+REACT-COMPONENTS CONVERSION
+
+Invoking Google's react-components skill...
+
+This will:
+1. Fetch HTML from Stitch design
+2. Create modular React components
+3. Extract logic to hooks
+4. Decouple data to mockData.ts
+5. Validate with AST parser
+```
+
+The skill handles:
+- Downloads HTML from Stitch using built-in scripts
+- Creates components from template patterns
+- Validates against architecture checklist
+- Ensures no hardcoded hex values (uses CSS variables)
+- Checks dark mode support
+
+After completion:
+
+```
+REACT COMPONENTS CREATED
+
+Files generated:
+- src/components/{ComponentName}.tsx
+- src/hooks/use{ComponentName}.ts (if logic extracted)
+- src/data/mockData.ts
+
+Validation: {PASSED | FAILED}
+
+shadcn components identified for installation:
+{list from our component mapping}
+
+[R] Review generated files
+[V] Validate again
+[C] Continue to artifacts
+```
+
+**If validation fails:**
+```
+VALIDATION ISSUES
+
+{list of issues}
+
+Options:
+[F] Fix issues - Adjust generated code
+[I] Ignore - Proceed with warnings
+[B] Back - Choose different strategy
+```
+
+---
+
 ### 3. Generate Installation Command
 
 After any conversion strategy:

package/skills/designer-founder/tools/stitch.md

@@ -0,0 +1,347 @@
+# Stitch Tool Execution
+
+## Overview
+
+Stitch is Google's AI design tool that generates web UI screens from text prompts.
+This tool requires both Stitch MCP and Google's stitch-skills to be installed.
+
+**Output Location:** `.stitch/screens/`
+**Output Format:** HTML + CSS files + screenshots
+**MCP Tools Used:** `generate_screen_from_text`, `get_screen`, `list_projects`, `create_project`
+**Dependencies:** Google's stitch-skills (design-md skill at minimum)
+
+---
+
+## Prerequisites
+
+Check availability before proceeding:
+
+```
+Stitch MCP: [check if mcp__stitch* or stitch* tools available]
+Stitch Skills: [check if design-md skill installed]
+```
+
+### If Stitch MCP not available:
+
+```
+STITCH MCP NOT CONFIGURED
+
+Stitch MCP is required for this design tool.
+
+To use Stitch:
+1. Configure Stitch MCP server (see stitch.withgoogle.com/docs/mcp/guide/)
+2. Restart Claude Code
+
+Alternative options:
+[S] SuperDesign - HTML/CSS prototype
+[M] MagicPatterns - AI-generated React components
+[B] Back to tool selection
+```
+
+### If Stitch Skills not installed:
+
+```
+STITCH SKILLS REQUIRED
+
+Google's stitch-skills are required for Stitch integration.
+
+Install with:
+npx skills add google-labs-code/stitch-skills --skill design-md -g -a claude-code -y
+npx skills add google-labs-code/stitch-skills --skill react-components -g -a claude-code -y
+
+Then restart Claude Code and try again.
+
+[B] Back to tool selection
+```
+
+---
+
+## Execution Flow
+
+### 1. Check for DESIGN.md
+
+```
+STITCH PROJECT SETUP
+
+Checking for design system documentation...
+```
+
+**If DESIGN.md exists in project root:**
+
+```
+Found: DESIGN.md
+Design system will be used for prompt consistency.
+
+[C] Continue with existing design system
+[U] Update design system first (uses design-md skill)
+```
+
+**If DESIGN.md doesn't exist:**
+
+```
+No DESIGN.md found.
+
+DESIGN.md helps Stitch generate consistent designs by documenting
+your color palette, typography, and component styles.
+
+Options:
+[G] Generate DESIGN.md (Recommended)
+    → Uses design-md skill to create semantic design documentation
+    → Best for: New projects, establishing design consistency
+
+[S] Skip - proceed without design system
+    → Stitch will use default styling
+    → Fine for: Quick prototypes, one-off designs
+```
+
+**If G (Generate):**
+- Invoke the design-md skill: `/design-md`
+- Wait for user to complete the skill workflow
+- Continue to design generation after DESIGN.md is created
+
+---
+
+### 2. Prepare Design Prompt
+
+Frame the design request from context:
+
+```
+DESIGN REQUEST FOR STITCH
+
+Feature: {user_intent}
+
+Context:
+- {scope_summary}
+- {inspiration_references}
+
+Requirements:
+- Responsive design (desktop-first)
+- Tailwind CSS classes
+- {additional_context_from_scope}
+
+{if DESIGN.md exists}
+DESIGN SYSTEM:
+[Include relevant sections from DESIGN.md - colors, typography, component styles]
+{/if}
+
+Style Direction:
+- {visual_direction_notes}
+- {inspiration_sources}
+```
+
+---
+
+### 3. Create or Select Project
+
+**If `stitch.json` exists in project root with projectId:**
+
+```
+EXISTING STITCH PROJECT FOUND
+
+Project: {project_title}
+Project ID: {projectId}
+
+[C] Continue with this project
+[N] Create new project
+```
+
+**If no existing project or user selects [N]:**
+
+```
+Creating new Stitch project...
+```
+
+```
+Tool: create_project
+Parameters:
+  title: "{feature_name} Design"
+  description: "{user_intent summary}"
+```
+
+Save projectId to `stitch.json` for future sessions:
+
+```json
+{
+  "projectId": "{created_project_id}",
+  "projectTitle": "{project_title}",
+  "createdAt": "{timestamp}"
+}
+```
+
+---
+
+### 4. Generate Screen
+
+```
+GENERATING DESIGN
+
+Feature: {user_intent}
+Project: {project_name}
+
+Please wait while Stitch generates your design...
+```
+
+```
+Tool: generate_screen_from_text
+Parameters:
+  projectId: "{projectId}"
+  prompt: "{constructed_prompt}"
+  deviceType: "DESKTOP"
+```
+
+---
+
+### 5. Retrieve and Save Assets
+
+After generation completes:
+
+```
+Tool: get_screen
+Parameters:
+  projectId: "{projectId}"
+  screenId: "{screenId}"
+```
+
+Create output directory if needed:
+```
+mkdir -p .stitch/screens/
+```
+
+Download and save assets:
+- **HTML:** `htmlCode.downloadUrl` → save to `.stitch/screens/{page}.html`
+- **Screenshot:** `screenshot.downloadUrl` → save to `.stitch/screens/{page}.png`
+
+---
+
+### 6. Present Result
+
+```
+DESIGN CREATED
+
+Project: {project_name}
+Screen: {screen_title}
+
+Files saved:
+- HTML: .stitch/screens/{page}.html
+- Preview: .stitch/screens/{page}.png
+
+Options:
+[V] View - Display screenshot
+[P] Playwright - Capture live rendering (desktop + mobile)
+[U] Update - Request changes via Stitch
+[C] Continue - Design approved, proceed to next step
+```
+
+### Handle User Selection
+
+**If V (View):**
+- Display the screenshot image from `.stitch/screens/{page}.png`
+- Return to options
+
+**If P (Playwright) and Playwright available:**
+- Navigate to `file://{absolute_path}/.stitch/screens/{page}.html`
+- Capture desktop screenshot (1280px width)
+- Resize viewport (375px width) and capture mobile screenshot
+- Present both screenshots for comparison
+- Return to options
+
+**If U (Update):**
+```
+What changes would you like to make?
+
+Describe the changes and I'll generate an updated design.
+```
+- Append change request to prompt
+- Generate new screen with updated prompt
+- Return to step 5
+
+**If C (Continue):**
+- Store design state
+- Return control to parent step (step-03-design.md)
+
+---
+
+## Output State
+
+After completion, set:
+
+```yaml
+design:
+  tool_used: stitch
+  output_location: ".stitch/screens/{page}.html"
+  output_format: html
+  needs_conversion: true  # HTML needs React conversion in Step 4
+  screenshot: ".stitch/screens/{page}.png"
+  stitch_project_id: "{projectId}"
+  stitch_screen_id: "{screenId}"
+  design_md_used: true/false
+```
+
+---
+
+## Design Registry Pattern
+
+When creating multiple screens (scope has multiple items), track progress:
+
+```yaml
+designs:
+  - name: "{scope_item_name}"
+    screen_id: "{id_or_pending}"
+    status: [pending | created | approved]
+    html_path: ".stitch/screens/{name}.html"
+    screenshot_path: ".stitch/screens/{name}.png"
+```
+
+### Batch Generation Flow
+
+If scope has multiple items:
+
+```
+SCOPE ITEMS TO DESIGN
+
+You have {count} items to design:
+{foreach scope_item}
+[ ] {item_name}
+{/foreach}
+
+Options:
+[A] All at once - Generate all designs in sequence
+[O] One by one - Generate and approve each individually
+
+Which approach? [A/O]
+```
+
+**If A (All at once):**
+- Generate each design in sequence
+- Track status in design registry
+- Present all for review at end
+
+**If O (One by one):**
+- Generate first design
+- Present for approval
+- On approval, move to next
+- Repeat until all complete
+
+---
+
+## Conversion Notes
+
+Stitch outputs HTML/CSS with Tailwind classes. The conversion step (Step 4) offers two paths:
+
+1. **Quick shadcn mapping** - Our standard `conversion.md` flow
+2. **Google's react-components** - Full modular React architecture with AST validation
+
+Both are presented in Step 4 when `design.tool_used` = `stitch`.
+
+---
+
+## Reference: Stitch MCP Tools
+
+| Tool | Purpose |
+|------|---------|
+| `list_projects` | Get all Stitch projects |
+| `get_project` | Get project details |
+| `create_project` | Create new project |
+| `list_screens` | Get all screens in project |
+| `get_screen` | Get screen details + download URLs |
+| `generate_screen_from_text` | Generate new screen from prompt |

package/uninstall.js

@@ -38,7 +38,8 @@ const INSTALLED_FILES = {
   commands: [
     'implement-epic-with-subagents.md',
     'plan-parallelization.md',
-    'git-cleanup-and-merge.md',
+    'git-local-cleanup-push-pr.md',
+    'github-pr-resolve.md',
     'dev-story-backend.md',
     'dev-story-fullstack.md',
     'dev-story-ui.md',