@torka/claude-workflows 0.1.0 → 0.2.0

package/README.md

@@ -9,8 +9,7 @@ Claude Code workflow helpers for epic automation, git management, and developer
 | **Git Cleanup & Merge** | Intelligent branch management, PR creation, CI monitoring | Yes |
 | **Parallelization Analysis** | Identify which epics can run in parallel with Git worktrees | Yes |
 | **Agent Creator** | Design and deploy custom Claude Code agents | Yes |
-| **Auto-Approve Hook** | Safe command auto-approval for solo dev workflows | Yes |
-| **Context Monitor** | Real-time context usage status line | Yes |
+| **Designer-Founder** | Transform ideas into dev-ready frontend artifacts | Yes |
 | **Epic Orchestration** | Automate multi-story epic execution with sub-agents | Requires BMAD |
 | **Code Review Agent** | Principal-level code review automation | Requires BMM |
 | **Story Prep Agent** | Convert requirements to developer-ready specs | Requires BMM |
@@ -35,45 +34,14 @@ The installer automatically copies files to your `.claude/` directory:
 
 ## Post-Installation Setup
 
-### 1. Configure Hooks (recommended)
-
-Copy the hooks configuration from `examples/settings.local.example.json` to your `.claude/settings.local.json`.
-
-**Auto-approve hook** (auto-approves safe commands):
-
-```json
-{
-  "hooks": {
-    "PreToolUse": [
-      {
-        "matcher": "Bash|Read|Grep|Glob|Write|Edit|MultiEdit",
-        "hooks": [
-          {
-            "type": "command",
-            "command": "python3 .claude/scripts/auto_approve_safe.py"
-          }
-        ]
-      }
-    ]
-  }
-}
-```
-
-### 2. Configure Status Line (optional)
+After installation, try running one of the commands to test:
 
-Add to your `.claude/settings.local.json`:
-
-```json
-{
-  "statusLine": {
-    "type": "command",
-    "command": "python3 .claude/scripts/context-monitor.py"
-  }
-}
+```bash
+/git-cleanup-and-merge
+/plan-parallelization
+/designer-founder
 ```
 
-This shows a real-time context usage bar with percentage and warnings.
-
 ## Usage
 
 ### Commands
@@ -150,44 +118,22 @@ Design and deploy custom Claude Code agents:
 /agent-creator
 ```
 
-### Hooks
-
-#### `auto_approve_safe.py`
-
-PreToolUse hook that auto-approves safe commands:
-- **Allowed**: Read-only commands, tests, linting, git status/diff/log
-- **Denied**: Dangerous commands (sudo, rm -rf, etc.)
-- **Prompted**: Everything else defers to normal permissions
-
-Customize rules in `.claude/scripts/auto_approve_safe.rules.json`:
-
-```json
-{
-  "allow_patterns": [
-    "^npm test",
-    "^git status"
-  ],
-  "deny_patterns": [
-    "^sudo",
-    "rm.*-rf"
-  ],
-  "sensitive_paths": [
-    "\\.env$",
-    "credentials"
-  ]
-}
-```
+#### `/designer-founder`
 
-### Scripts
+Transform design ideas into production-ready frontend artifacts:
+- UI/UX design workflow optimized for solo developers
+- Component-first approach using shadcn/ui + Tailwind CSS
+- Multiple design tools: wireframes, MagicPatterns, SuperDesign
+- Dev-ready output: component strategies, layouts, user journeys
 
-#### `context-monitor.py`
+**Philosophy:**
+- Library-first: Start from "what existing component can I use?"
+- Decision-focused: Capture choices, not specifications
+- Speed over perfection: Working prototype beats perfect mockup
 
-Status line script showing:
-- Current model name
-- Working directory
-- Git branch
-- Context usage bar with percentage
-- Warnings at 75%, 90%, 95% usage
+```
+/designer-founder
+```
 
 ## Dependencies
 
@@ -203,8 +149,7 @@ Some components require the [BMAD Method](https://github.com/bmad-method) workfl
 - `/git-cleanup-and-merge`
 - `/plan-parallelization`
 - `/agent-creator` skill
-- `auto_approve_safe` hook
-- `context-monitor` status line
+- `/designer-founder` skill
 
 ## File Structure
 
@@ -219,17 +164,18 @@ After installation, files are placed in:
 ├── agents/
 │   ├── principal-code-reviewer.md
 │   └── story-prep-master.md
-├── skills/
-│   └── agent-creator/
-│       ├── SKILL.md
-│       ├── REGISTRY.yaml
-│       ├── STORY-AGENT-TEMPLATE.md
-│       ├── NON-STORY-AGENT-TEMPLATE.md
-│       └── COMMUNITY-REPOS.md
-└── scripts/
-    ├── auto_approve_safe.py
-    ├── auto_approve_safe.rules.json
-    └── context-monitor.py
+└── skills/
+    ├── agent-creator/
+    │   ├── SKILL.md
+    │   ├── REGISTRY.yaml
+    │   ├── STORY-AGENT-TEMPLATE.md
+    │   ├── NON-STORY-AGENT-TEMPLATE.md
+    │   └── COMMUNITY-REPOS.md
+    └── designer-founder/
+        ├── workflow.md
+        ├── steps/
+        ├── templates/
+        └── tools/
 ```
 
 ## Uninstallation
@@ -248,27 +194,11 @@ rm -rf .claude/commands/implement-epic-with-subagents.md \
        .claude/agents/principal-code-reviewer.md \
        .claude/agents/story-prep-master.md \
        .claude/skills/agent-creator \
-       .claude/scripts/auto_approve_safe.py \
-       .claude/scripts/auto_approve_safe.rules.json \
-       .claude/scripts/context-monitor.py
+       .claude/skills/designer-founder
 ```
 
-**Note**: Your `settings.local.json` is not modified—you may want to manually remove hook/statusLine configurations.
-
 ## Customization
 
-### Extending Auto-Approve Rules
-
-Edit `.claude/scripts/auto_approve_safe.rules.json`:
-
-```json
-{
-  "allow_patterns": [
-    "^your-custom-command"
-  ]
-}
-```
-
 ### Creating Custom Agents
 
 Use the `/agent-creator` skill to create project-specific agents:
@@ -294,6 +224,5 @@ Varun Torka
 
 ## Links
 
-- [GitHub Repository](https://github.com/varuntorka/vt-claude-workflows)
-- [Issue Tracker](https://github.com/varuntorka/vt-claude-workflows/issues)
 - [Claude Code Documentation](https://code.claude.com/docs)
+- [npm Package](https://www.npmjs.com/package/@torka/claude-workflows)

package/examples/settings.local.example.json

@@ -14,44 +14,5 @@
     ],
     "deny": [],
     "ask": []
-  },
-  "hooks": {
-    "PreToolUse": [
-      {
-        "matcher": "Bash|Read|Grep|Glob|Write|Edit|MultiEdit",
-        "hooks": [
-          {
-            "type": "command",
-            "command": "python3 .claude/scripts/auto_approve_safe.py"
-          }
-        ]
-      }
-    ],
-    "PostToolUse": [
-      {
-        "matcher": "Edit|MultiEdit",
-        "hooks": [
-          {
-            "type": "command",
-            "command": "if [[ \"$CLAUDE_TOOL_FILE_PATH\" == *.js || \"$CLAUDE_TOOL_FILE_PATH\" == *.ts || \"$CLAUDE_TOOL_FILE_PATH\" == *.jsx || \"$CLAUDE_TOOL_FILE_PATH\" == *.tsx ]]; then npx eslint \"$CLAUDE_TOOL_FILE_PATH\" --fix 2>/dev/null || true; fi"
-          }
-        ]
-      }
-    ],
-    "Stop": [
-      {
-        "matcher": "*",
-        "hooks": [
-          {
-            "type": "command",
-            "command": "if command -v osascript >/dev/null 2>&1; then osascript -e 'display notification \"Claude Code task completed\" with title \"Claude Code\"'; elif command -v notify-send >/dev/null 2>&1; then notify-send 'Claude Code' 'Task completed'; fi"
-          }
-        ]
-      }
-    ]
-  },
-  "statusLine": {
-    "type": "command",
-    "command": "python3 .claude/scripts/context-monitor.py"
   }
 }

package/install.js

@@ -133,8 +133,6 @@ function install() {
     { src: 'commands', dest: 'commands' },
     { src: 'agents', dest: 'agents' },
     { src: 'skills', dest: 'skills' },
-    { src: 'hooks', dest: 'scripts' },  // Hooks go to scripts directory
-    { src: 'scripts', dest: 'scripts' },
   ];
 
   for (const { src, dest } of mappings) {
@@ -154,9 +152,8 @@ function install() {
 
   // Post-install instructions
   log('\n' + colors.bold + '📝 Next Steps' + colors.reset);
-  log('   1. Configure hooks in .claude/settings.local.json');
-  log('   2. See examples/settings.local.example.json for configuration');
-  log('   3. Run /git-cleanup-and-merge or /plan-parallelization to test\n');
+  log('   1. Run /git-cleanup-and-merge or /plan-parallelization to test');
+  log('   2. Try /designer-founder for UI/UX design workflows\n');
 
   // Note about BMAD dependencies
   log(colors.yellow + '⚠️  Note: Some components require BMAD Method workflows:' + colors.reset);
@@ -167,8 +164,7 @@ function install() {
   log('   ✓ git-cleanup-and-merge');
   log('   ✓ plan-parallelization');
   log('   ✓ agent-creator skill');
-  log('   ✓ auto_approve_safe hook');
-  log('   ✓ context-monitor status line\n');
+  log('   ✓ designer-founder skill\n');
 }
 
 // Run installation

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@torka/claude-workflows",
-  "version": "0.1.0",
-  "description": "Claude Code workflow helpers: epic automation, git cleanup, agents, hooks, and status line",
+  "version": "0.2.0",
+  "description": "Claude Code workflow helpers: epic automation, git cleanup, agents, and design workflows",
   "keywords": [
     "claude-code",
     "ai-workflows",
@@ -14,14 +14,6 @@
   ],
   "author": "Varun Torka",
   "license": "MIT",
-  "homepage": "https://github.com/varuntorka/vt-claude-workflows#readme",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/varuntorka/vt-claude-workflows.git"
-  },
-  "bugs": {
-    "url": "https://github.com/varuntorka/vt-claude-workflows/issues"
-  },
   "scripts": {
     "postinstall": "node install.js",
     "preuninstall": "node uninstall.js"
@@ -30,8 +22,6 @@
     "commands",
     "agents",
     "skills",
-    "hooks",
-    "scripts",
     "examples",
     ".claude-plugin",
     "install.js",

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

@@ -0,0 +1,171 @@
+# Step 1: Context & Mode Selection
+
+## 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
+
+---
+
+## YOUR TASK
+
+Establish context and select the appropriate workflow mode based on project state and user intent.
+
+---
+
+## TASK SEQUENCE
+
+### 1. Greet and Understand Intent
+
+Start with a brief greeting using `{user_name}` and ask what they'd like to design:
+
+```
+Hey {user_name}! I'm ready to help you design.
+
+What are you looking to create today?
+```
+
+Wait for user input describing what they want to design.
+
+---
+
+### 2. Detect Project State
+
+After user describes their intent, quickly assess:
+
+**Check for existing project artifacts:**
+- `_bmad-output/planning-artifacts/` - Do specs exist?
+- `_bmad-output/planning-artifacts/ux-design/` - Existing design docs?
+- 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
+
+**Report findings concisely:**
+```
+Project Context:
+- [Greenfield / Existing project with specs]
+- Related artifacts found: [list or "none"]
+- Relevant epics/stories: [list or "none"]
+```
+
+---
+
+### 3. 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
+```
+
+Note: shadcn CLI (`npx shadcn@latest add`) is always available as fallback.
+
+---
+
+### 4. Present Mode Selection
+
+Based on context, recommend a mode and let user choose:
+
+```
+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
+
+[P] Production Flow
+    → 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
+
+---
+
+### 5. Confirm and Route
+
+Once user selects mode, confirm and route:
+
+**If Quick Prototype:**
+```
+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)
+
+**If Production Flow:**
+```
+Production Flow selected.
+
+We'll create dev-ready artifacts including:
+- Component strategy with shadcn mappings
+- Page layouts (responsive)
+- User journeys (if multi-step flow)
+
+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
+
+---
+
+## STATE TO CARRY FORWARD
+
+Store in working memory for subsequent steps:
+
+```yaml
+mode: [quick_prototype | production]
+user_intent: "[what user wants to design]"
+project_state: [greenfield | existing]
+related_artifacts: [list of relevant files found]
+tools_available:
+  superdesign: true
+  magicpatterns: [true/false]
+  shadcn_mcp: [true/false]
+  playwright: [true/false]
+```
+
+---
+
+## NEXT STEP
+
+- 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-01b-continue.md

@@ -0,0 +1,75 @@
+# Step 1b: Continue Existing Session
+
+## PURPOSE
+
+Handle resumption of an interrupted designer-founder workflow session.
+
+---
+
+## DETECTION
+
+This step is loaded when:
+- User invokes designer-founder workflow
+- Existing design session state is detected
+- User confirms they want to continue (not start fresh)
+
+---
+
+## TASK SEQUENCE
+
+### 1. Detect Previous State
+
+Check for indicators of previous session:
+- Recent files in `{planning_artifacts}/ux-design/` matching current date
+- Incomplete artifacts (missing expected files)
+- SuperDesign files created recently in `.superdesign/design_iterations/`
+
+### 2. Present Recovery Options
+
+```
+EXISTING SESSION DETECTED
+
+I found evidence of a previous design session:
+- {list what was found}
+
+Would you like to:
+
+[C] Continue - Resume from where we left off
+[R] Review - Show me what was created
+[N] New - Start fresh (previous work preserved)
+```
+
+### 3. If Continue
+
+Reconstruct state:
+```yaml
+mode: {infer from artifacts}
+scope: {infer from artifact names}
+design:
+  tool_used: {infer from output files}
+  output_location: {found files}
+last_completed_step: {infer from artifacts present}
+```
+
+Route to appropriate step:
+- Only design brief exists → Step 3 (Design) or Step 4 (Artifacts)
+- Component strategy exists but incomplete → Step 4
+- All artifacts exist → Offer to refine or start new
+
+### 4. If Review
+
+Display summary of found artifacts and their contents.
+Return to recovery options after review.
+
+### 5. If New
+
+Proceed to `step-01-context.md` for fresh start.
+Do not delete previous work.
+
+---
+
+## NEXT STEP
+
+Based on user selection, route to:
+- Appropriate step for continuation
+- `step-01-context.md` for fresh start