@torka/claude-workflows 0.11.0 → 0.13.1

package/skills/designer-founder/steps/step-01-context.md

@@ -2,10 +2,10 @@
 
 ## MANDATORY EXECUTION RULES (READ FIRST)
 
-- 🛑 NEVER assume project state without checking
-- 📖 CRITICAL: Read complete step file before taking action
-- ✅ ALWAYS treat this as collaborative discovery
-- 🎯 Goal: Understand where we are and what mode to use
+- NEVER assume project state without checking
+- CRITICAL: Read complete step file before taking action
+- ALWAYS treat this as collaborative discovery
+- Goal: Understand where we are and what mode to use
 
 ---
 
@@ -17,6 +17,34 @@ Establish context and select the appropriate workflow mode based on project stat
 
 ## TASK SEQUENCE
 
+### 0. Check for Returning Session
+
+Before greeting, check for a previous session state file:
+
+**Look for:** `{planning_artifacts}/ux-design/.designer-state.yaml`
+
+**If found:**
+```
+Welcome back, {user_name}! I see a previous design session:
+
+Previous session:
+- Tool: {tool_used}
+- Theme: {theme_path_or_none}
+- Mode: {mode}
+
+[Y] Same settings - Jump to Step 2 (Scope)
+[R] Review - Show full state, let me modify
+[N] Start fresh - Run full setup
+```
+
+- **Y**: Load previous state into working memory, skip to Step 2 (Scope)
+- **R**: Show all saved state fields, let user confirm/modify each, then proceed
+- **N**: Continue with normal Step 1 below
+
+**If not found:** Continue with normal Step 1 below.
+
+---
+
 ### 1. Greet and Understand Intent
 
 Start with a brief greeting using `{user_name}` and ask what they'd like to design:
@@ -41,8 +69,8 @@ After user describes their intent, quickly assess:
 - Epic/story files related to user's intent?
 
 **Determine project phase:**
-- **Greenfield**: No relevant specs found → Need to establish design direction
-- **Mid-project**: Specs exist → Pull context, focus on specific scope
+- **Greenfield**: No relevant specs found -> Need to establish design direction
+- **Mid-project**: Specs exist -> Pull context, focus on specific scope
 
 **Report findings concisely:**
 ```
@@ -54,23 +82,58 @@ Project Context:
 
 ---
 
-### 3. Check Available Tools
+### 3. Detect Theme
+
+Search for theme files in the project. Themes follow a two-file convention:
+- `{name}.prompt.md` -- Human-readable design rules (vibe, typography, components, animation)
+- `{name}.tokens.json` -- Machine-readable HSL values for shadcn CSS variables
+
+**Detection:** Search for `**/themes/*.prompt.md` or `**/themes/*.tokens.json` in:
+1. Project root
+2. One level up (`../`)
+
+**If theme files found:**
+```
+Theme detected: {theme_name}
+- Prompt: {path to .prompt.md}
+- Tokens: {path to .tokens.json}
+
+Should I use these for design consistency? (Recommended)
+[Y] Yes - Use this theme
+[N] No - Continue without theme
+```
+
+**If theme files NOT found:**
+```
+No theme files detected in the project.
+
+[P] Provide theme - Point me to your theme files
+[S] Skip - Continue without a theme (tool defaults will be used)
+```
+
+**If theme is from outside the project** (e.g., `../vt-design-studio/themes/`):
+- Copy theme files to `{planning_artifacts}/themes/`
+- Reference the local copy in all subsequent steps
+
+---
+
+### 4. Check Available Tools
 
 Detect and report tool availability:
 
 ```
 Available Tools:
-✓ SuperDesign - HTML/CSS prototyping
-[✓/✗] MagicPatterns MCP - React component generation
-[✓/✗] shadcn MCP - Component search & install
-[✓/✗] Playwright MCP - Screenshot verification
+[check] SuperDesign - HTML/CSS prototyping
+[check] MagicPatterns MCP - React component generation
+[check] Stitch MCP - Google AI design tool
+[check] shadcn MCP - Component search & install
 ```
 
 Note: shadcn CLI (`npx shadcn@latest add`) is always available as fallback.
 
 ---
 
-### 4. Present Mode Selection
+### 5. Present Mode Selection
 
 Based on context, recommend a mode and let user choose:
 
@@ -80,27 +143,27 @@ WORKFLOW MODE
 Based on your request, I recommend: [Quick Prototype / Production Flow]
 
 [Q] Quick Prototype
-    → Fast visual exploration
-    → Output: HTML prototype or wireframe
-    → Best for: Testing ideas, exploring directions
+    -> Fast visual exploration
+    -> Output: HTML prototype or wireframe
+    -> Best for: Testing ideas, exploring directions
 
 [P] Production Flow
-    → Full dev-ready artifacts
-    → Output: Component strategy, layouts, user journeys
-    → Best for: Features going into the product
+    -> Full dev-ready artifacts
+    -> Output: Component strategy, layouts, user journeys
+    -> Best for: Features going into the product
 
 Which mode? [Q/P]
 ```
 
 **Recommendation logic:**
-- User says "explore", "try", "prototype", "quick" → Recommend Quick
-- User mentions specific epic/story, "build", "implement" → Recommend Production
-- Greenfield project, first design → Recommend Production (establish foundation)
-- Uncertain → Ask user
+- User says "explore", "try", "prototype", "quick" -> Recommend Quick
+- User mentions specific epic/story, "build", "implement" -> Recommend Production
+- Greenfield project, first design -> Recommend Production (establish foundation)
+- Uncertain -> Ask user
 
 ---
 
-### 5. Confirm and Route
+### 6. Confirm and Route
 
 Once user selects mode, confirm and route:
 
@@ -111,7 +174,7 @@ Quick Prototype mode selected.
 We'll skip detailed specs and focus on rapid visualization.
 Ready to move to design tool selection.
 ```
-→ Proceed to Step 3 (skip Step 2)
+-> Proceed to Step 3 (skip Step 2)
 
 **If Production Flow:**
 ```
@@ -124,24 +187,7 @@ We'll create dev-ready artifacts including:
 
 Let's define the scope first.
 ```
-→ Proceed to Step 2
-
----
-
-## COLLABORATION MENU
-
-After confirming mode, present:
-
-```
-[A] Advanced - Deep dive into project context
-[P] Party Mode - Get multiple agent perspectives
-[C] Continue - Proceed to next step
-```
-
-**Menu Handlers:**
-- **A**: Load `{project-root}/_bmad/core/workflows/advanced-elicitation/workflow.xml` for deeper discovery
-- **P**: Load `{project-root}/_bmad/core/workflows/party-mode/workflow.md` for multi-perspective input
-- **C**: Proceed to next step based on mode selection
+-> Proceed to Step 2
 
 ---
 
@@ -157,8 +203,13 @@ related_artifacts: [list of relevant files found]
 tools_available:
   superdesign: true
   magicpatterns: [true/false]
+  stitch: [true/false]
   shadcn_mcp: [true/false]
-  playwright: [true/false]
+theme:
+  name: "{theme_name}"
+  prompt_file: "{path to .prompt.md}"
+  tokens_file: "{path to .tokens.json}"
+  is_local: true/false  # whether files are in the project
 ```
 
 ---
@@ -167,5 +218,3 @@ tools_available:
 
 - If mode = `quick_prototype`: Load `./step-03-design.md`
 - If mode = `production`: Load `./step-02-scope.md`
-
-Remember: Do NOT proceed until user explicitly selects [C]

package/skills/designer-founder/steps/step-02-scope.md

@@ -2,10 +2,10 @@
 
 ## MANDATORY EXECUTION RULES (READ FIRST)
 
-- 🛑 NEVER proceed without clear scope confirmation
-- 📖 CRITICAL: Pull relevant context from existing artifacts
-- ✅ ALWAYS confirm scope before design phase
-- 🎯 Goal: Define exactly what to design and gather visual references
+- NEVER proceed without clear scope confirmation
+- CRITICAL: Pull relevant context from existing artifacts
+- ALWAYS confirm scope before design phase
+- Goal: Define exactly what to design and gather visual references
 
 ---
 
@@ -16,6 +16,7 @@ You should have:
 - `user_intent`: What user wants to design
 - `project_state`: greenfield or existing
 - `related_artifacts`: List of relevant files
+- `theme`: Theme info (if detected in Step 1)
 
 ---
 
@@ -126,7 +127,6 @@ Would you like to gather visual references before designing?
 
 **If U (user has URLs):**
 - Accept user's reference URLs
-- If Playwright available, offer to screenshot them
 - Note key elements to incorporate
 
 **If N:**
@@ -155,21 +155,6 @@ Ready to proceed to design phase.
 
 ---
 
-## COLLABORATION MENU
-
-```
-[A] Advanced - Deeper exploration of requirements
-[P] Party Mode - Get perspectives from PM, Dev, UX agents
-[C] Continue - Proceed to design phase
-```
-
-**Menu Handlers:**
-- **A**: Explore requirements more deeply, ask clarifying questions
-- **P**: Load party mode for multi-agent input on design direction
-- **C**: Proceed to Step 3
-
----
-
 ## STATE TO CARRY FORWARD
 
 Add to working memory:
@@ -193,6 +178,4 @@ design_direction: "[summary of approach]"
 
 ## NEXT STEP
 
-When user selects [C], load `./step-03-design.md`
-
-Remember: Do NOT proceed until user explicitly selects [C]
+Proceed to `./step-03-design.md`

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

@@ -2,10 +2,10 @@
 
 ## MANDATORY EXECUTION RULES (READ FIRST)
 
-- 🛑 NEVER proceed without user confirmation at each design iteration
-- 📖 CRITICAL: Load the appropriate tool file for detailed execution
-- ✅ ALWAYS show design results for review before moving on
-- 🎯 Goal: Create visual prototype using user's preferred tool
+- NEVER proceed without user confirmation at each design iteration
+- CRITICAL: Load the appropriate tool file for detailed execution
+- ALWAYS show design results for review before moving on
+- Goal: Create visual prototype using user's preferred tool
 
 ---
 
@@ -17,6 +17,7 @@ You should have:
 - `scope`: Specific items to design (if production mode)
 - `inspiration`: Visual references (if gathered)
 - `tools_available`: Which tools are configured
+- `theme`: Theme info (if detected in Step 1)
 
 ---
 
@@ -38,25 +39,25 @@ DESIGN TOOL SELECTION
 Choose your design approach:
 
 [S] SuperDesign
-    → Quick HTML/CSS prototypes via VS Code
-    → Best for: Rapid visual exploration, custom styling
+    -> 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
+    -> AI-generated complete page designs
+    -> Best for: Full page layouts, design system consistency
+    -> Requires: Stitch MCP configured
 
 [M] MagicPatterns {show availability status}
-    → AI-generated React components
-    → Best for: Direct React code, component variations
+    -> AI-generated React components
+    -> Best for: Direct React code, component variations
 
 [W] Wireframe Only
-    → ASCII or Excalidraw sketch
-    → Best for: Structure-first, discussing layout
+    -> ASCII or Excalidraw sketch
+    -> Best for: Structure-first, discussing layout
 
 [D] Direct to Components
-    → Skip visuals, map directly to shadcn
-    → Best for: Standard patterns, known layouts
+    -> Skip visuals, map directly to shadcn
+    -> Best for: Standard patterns, known layouts
 
 Which approach? [S/T/M/W/D]
 ```
@@ -81,6 +82,7 @@ Pass context to tool execution:
 - `user_intent`
 - `scope` (if available)
 - `inspiration` (if gathered)
+- `theme` (if detected in Step 1)
 
 ---
 
@@ -93,28 +95,7 @@ Execute the loaded tool file completely:
 
 ---
 
-### 4. Offer Playwright Verification (Optional)
-
-If Playwright MCP is available AND user created a visual prototype (SuperDesign or MagicPatterns):
-
-```
-VISUAL VERIFICATION (Optional)
-
-Would you like me to capture screenshots of your design?
-
-[Y] Yes - Take screenshots (desktop + mobile)
-[N] No - Skip verification
-```
-
-If Y:
-- Use Playwright to navigate to design
-- Capture desktop screenshot
-- Resize viewport (375px width) and capture mobile screenshot
-- Present screenshots for review
-
----
-
-### 5. Confirm Design Completion
+### 4. Confirm Design Completion
 
 After tool execution completes:
 
@@ -125,6 +106,12 @@ Tool used: {design.tool_used}
 Output: {design.output_location}
 ```
 
+Direct user to review designs on the tool's platform:
+- **MagicPatterns:** Review at the MagicPatterns URL
+- **Stitch:** Review on the Stitch platform
+- **SuperDesign:** Review in VS Code / browser
+- **Wireframe/Direct:** Review inline
+
 **If Quick Prototype mode:**
 ```
 Prototype complete! Would you like to:
@@ -140,7 +127,7 @@ Ready to create dev handover artifacts.
 
 ---
 
-### 5.5 Validate All Designs (Before Step 4)
+### 5. Validate All Designs (Before Step 4)
 
 **When scope has multiple items**, validate coverage before proceeding to artifacts:
 
@@ -149,10 +136,9 @@ DESIGN VALIDATION
 
 Checking scope coverage:
 {foreach scope_item}
-[✓/✗] {item_name}: {url_or_missing}
+[done/missing] {item_name}: {url_or_missing}
 {/foreach}
 
-─────────────────────────────────────
 Coverage: {completed_count} of {total_count} scope items
 ```
 
@@ -189,23 +175,10 @@ Options:
 
 **If all items covered:**
 ```
-VALIDATION PASSED ✓
+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
-
-```
-[A] Advanced - Explore design alternatives
-[P] Party Mode - Get feedback from multiple perspectives
-[C] Continue - Proceed to next step
 ```
 
 ---
@@ -216,7 +189,7 @@ Should have from tool execution:
 
 ```yaml
 design:
-  tool_used: [superdesign | magicpatterns | wireframe | direct]
+  tool_used: [superdesign | stitch | magicpatterns | wireframe | direct]
   output_location: "{path or URL}"
   output_format: [html | react | ascii | mapping]
   needs_conversion: [true | false]
@@ -229,6 +202,4 @@ design:
 
 - If `mode` = `quick_prototype` AND user selects [D]: End workflow
 - If `mode` = `quick_prototype` AND user selects [P]: Load `./step-04-artifacts.md`
-- If `mode` = `production` AND user selects [C]: Load `./step-04-artifacts.md`
-
-Remember: Do NOT proceed until user explicitly confirms.
+- If `mode` = `production`: Load `./step-04-artifacts.md`