@torka/claude-workflows 0.6.2 → 0.6.3

package/package.json

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

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

@@ -134,6 +134,66 @@ Ready to create dev handover artifacts.
 
 ---
 
+### 5.5 Validate All Designs (Before Step 4)
+
+**When scope has multiple items**, validate coverage before proceeding to artifacts:
+
+```
+DESIGN VALIDATION
+
+Checking scope coverage:
+{foreach scope_item}
+[✓/✗] {item_name}: {url_or_missing}
+{/foreach}
+
+─────────────────────────────────────
+Coverage: {completed_count} of {total_count} scope items
+```
+
+**If any items missing:**
+```
+Some designs are incomplete.
+
+Missing:
+{foreach missing_item}
+- {item_name}
+{/foreach}
+
+Options:
+[C] Create missing - Generate remaining designs now
+[S] Skip - Proceed with partial coverage (will note gaps in artifacts)
+[R] Revise scope - Remove items that don't need designs
+```
+
+**If C (Create missing):**
+- Return to step 2 for each missing item
+- Update design registry after each creation
+- Return to validation after all created
+
+**If S (Skip):**
+- Mark skipped items in design state
+- Add "NOT DESIGNED" note to artifact generation
+- Proceed to step 4 with partial coverage
+
+**If R (Revise scope):**
+- Show current scope items
+- Allow removal of items
+- Recalculate coverage
+- Return to validation
+
+**If all items covered:**
+```
+VALIDATION PASSED ✓
+
+All {total_count} scope items have approved designs.
+Ready for artifact generation.
+
+[C] Continue to artifacts
+[R] Review designs before continuing
+```
+
+---
+
 ## COLLABORATION MENU
 
 ```

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

@@ -114,6 +114,22 @@ Populate placeholders:
 - `{inspiration_sources}` → References used
 - `{date}` → Current date
 
+**Tool-specific 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."
+  - **Wireframe:** "Structure reference only. Build components from scratch."
+  - **Direct:** "Component mapping provided. No visual prototype created."
+
+- `{implementation_source_section}` → When MagicPatterns used:
+  ```markdown
+  | Component | Source URL | Files to Extract |
+  |-----------|------------|------------------|
+  | {component_name} | [{design_name}]({url}) | {file_list} |
+  ```
+  For other tools: "See Component Strategy for implementation details."
+
 **Save to:** `{planning_artifacts}/ux-design/{prefix}design-brief.md`
 
 ---
@@ -132,6 +148,42 @@ Populate placeholders:
 - `{implementation_notes}` → Any special considerations
 - `{date}` → Current date
 
+**MagicPatterns-specific placeholders (when `design.tool_used` = magicpatterns):**
+
+- `{magicpatterns_extraction_warning}` → Include this warning block:
+  ```markdown
+  > **CRITICAL: EXTRACT CODE, DO NOT REBUILD**
+  >
+  > MagicPatterns designs contain **production-ready React/TypeScript**.
+  > Use `mcp__magic-patterns__read_files` to extract code directly.
+  > Only adapt for project patterns (Supabase auth, react-hook-form, etc.)
+  ```
+
+- `{extraction_table}` → Generate extraction guide from design registry:
+  ```markdown
+  | Design | MagicPatterns URL | Primary File | Key Elements |
+  |--------|-------------------|--------------|--------------|
+  | Sign In | [View](url) | SignInForm.tsx | Form, validation, social buttons |
+  | Sign Up | [View](url) | SignUpForm.tsx | Multi-step form, password strength |
+  ```
+
+- `{what_not_to_do_section}` → Include this section:
+  ```markdown
+  ## What NOT to Do
+
+  | Don't | Instead |
+  |-------|---------|
+  | Build layouts from scratch | Extract from MagicPatterns designs |
+  | Create custom form components | Extract existing form patterns |
+  | Write CSS for auth cards | Extract Tailwind classes from designs |
+  | Guess component structure | Read files with `read_files` tool first |
+  ```
+
+**For non-MagicPatterns tools:**
+- `{magicpatterns_extraction_warning}` → Empty string
+- `{extraction_table}` → Empty string or "N/A - Design created with {tool_used}"
+- `{what_not_to_do_section}` → Empty string
+
 **Save to:** `{planning_artifacts}/ux-design/{prefix}component-strategy.md`
 
 ---
@@ -153,6 +205,20 @@ Populate placeholders:
 - `{responsive_summary_rows}` → Table of element behavior
 - `{date}` → Current date
 
+**Implementation note placeholder:**
+
+- `{layout_implementation_note}` → When MagicPatterns used:
+  ```markdown
+  > **NOTE: Layouts Already Implemented**
+  >
+  > These layouts are reference documentation. The actual responsive layouts
+  > are already built into the MagicPatterns designs. Extract the Tailwind
+  > responsive classes directly from the design files rather than rebuilding.
+  >
+  > **Source:** Extract from [{design_name}]({url}) using `read_files` tool.
+  ```
+  For other tools: Empty string or omit placeholder
+
 **Save to:** `{planning_artifacts}/ux-design/{prefix}layouts.md`
 
 ---
@@ -175,6 +241,18 @@ Populate placeholders:
 - `{error_states}` → Error handling
 - `{date}` → Current date
 
+**Implementation source placeholder:**
+
+- `{journey_implementation_sources}` → Link each journey step to its design source:
+  ```markdown
+  | Step | Design Source | Primary File | Key Feature |
+  |------|---------------|--------------|-------------|
+  | 1. Enter email | [Sign In]({url}) | SignInForm.tsx | Email input with validation |
+  | 2. Enter password | [Sign In]({url}) | SignInForm.tsx | Password field with show/hide |
+  | 3. Submit | [Sign In]({url}) | SignInForm.tsx | Loading state, error handling |
+  ```
+  For non-MagicPatterns: "Reference {tool_used} prototype at {output_location}"
+
 **Save to:** `{planning_artifacts}/ux-design/{prefix}user-journeys.md`
 
 ---

package/skills/designer-founder/templates/component-strategy.md

@@ -1,13 +1,19 @@
 # {feature_name} Component Strategy
 
+{magicpatterns_extraction_warning}
+
 ## Quick Reference
 
-### Installation Command
+### 1. Install shadcn Components
 
 ```bash
 npx shadcn@latest add {shadcn_components}
 ```
 
+### 2. Extract Code from MagicPatterns
+
+{extraction_table}
+
 ## Component Mapping
 
 | UI Element | Source | Component | Variant/Props | Notes |
@@ -26,6 +32,8 @@ npx shadcn@latest add {shadcn_components}
 
 {magicpatterns_section}
 
+{what_not_to_do_section}
+
 ## Implementation Notes
 
 {implementation_notes}

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

@@ -11,7 +11,9 @@
 ## Prototype Location
 
 - **Tool:** {tool_used}
-- **File:** {output_location}
+- **Location:** {output_location}
+
+{tool_specific_notes}
 
 ## Visual Direction
 
@@ -21,6 +23,10 @@
 
 {inspiration_sources}
 
+## Implementation Source
+
+{implementation_source_section}
+
 ---
 
 *Generated by designer-founder workflow on {date}*

package/skills/designer-founder/templates/layouts.md

@@ -1,5 +1,7 @@
 # {feature_name} Layouts
 
+{layout_implementation_note}
+
 ## Desktop (lg: 1024px+)
 
 ```

package/skills/designer-founder/templates/user-journeys.md

@@ -15,6 +15,10 @@
 
 {journey_steps}
 
+### Implementation Sources
+
+{journey_implementation_sources}
+
 ## Alternative Flows
 
 {alternative_flows}

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

@@ -63,6 +63,36 @@ Parameters:
   imageUrls: [{inspiration_image_urls}]  // optional
 ```
 
+### 2.5 Handle Empty Response
+
+If `create_design` returns no URL or empty response:
+
+```
+DESIGN CREATION ISSUE
+
+The design may have been created but the URL wasn't returned.
+
+Options:
+[P] Paste URL - I'll provide the URL from MagicPatterns browser
+[R] Retry - Try creating the design again
+[S] Switch - Use a different design tool
+```
+
+**If P (Paste URL):**
+- Accept URL from user
+- Validate format (must contain `magicpatterns.com/c/` or `magicpatterns.app`)
+- Call `get_design` to verify design exists
+- If valid, continue to step 3
+- If invalid, show error and return to options
+
+**If R (Retry):**
+- Re-execute step 2 with same parameters
+- If fails again, suggest P or S options
+
+**If S (Switch):**
+- Return to tool selection in step-03-design.md
+- Mark current design attempt as abandoned
+
 ### 3. Present Result
 
 ```
@@ -191,3 +221,83 @@ Parameters:
 ```
 
 This is useful in the conversion step when the user chooses MagicPatterns for HTML→React conversion.
+
+---
+
+## Design Registry Pattern
+
+When creating multiple designs (e.g., auth flows with 6 screens), maintain a registry to track progress:
+
+### Registry Structure
+
+```yaml
+designs:
+  - name: "{scope_item_name}"
+    url: "{url_or_pending}"
+    status: [pending | created | approved]
+    files: [list from get_design]
+```
+
+### Progress Display
+
+After each design is created or approved, show progress:
+
+```
+DESIGN PROGRESS: {completed} of {total} complete
+
+{foreach design in designs}
+{if status = approved}✓{/if}{if status = created}◐{/if}{if status = pending}○{/if} {name} - {status}{if url} ({url}){/if}
+{/foreach}
+
+Options:
+[N] Next - Create next pending design
+[R] Review - Review a specific design
+[C] Continue - Proceed to artifacts (if all approved)
+```
+
+### Batch Creation Flow
+
+When scope has multiple items:
+
+1. **Show scope overview:**
+   ```
+   DESIGNS TO CREATE ({count} items)
+
+   {foreach scope_item}
+   ○ {item_name}
+   {/foreach}
+
+   Options:
+   [O] One-by-one - Create and approve each design individually
+   [B] Batch - Create all designs, then review together
+   ```
+
+2. **If One-by-one:** Execute steps 1-4 for each item, updating registry after each
+
+3. **If Batch:**
+   - Create all designs (steps 1-3) without waiting for approval
+   - Present all designs for bulk review
+   - Allow individual updates before final approval
+
+### Registry State
+
+Store in workflow context:
+
+```yaml
+design_registry:
+  total_items: {count}
+  completed: {approved_count}
+  designs:
+    - name: "Sign In"
+      url: "https://magicpatterns.com/c/abc123"
+      status: approved
+      files: ["SignInForm.tsx", "styles.css"]
+    - name: "Sign Up"
+      url: "https://magicpatterns.com/c/def456"
+      status: created
+      files: ["SignUpForm.tsx"]
+    - name: "Forgot Password"
+      url: null
+      status: pending
+      files: []
+```