@torka/claude-workflows 0.1.0 → 0.2.0

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

@@ -0,0 +1,41 @@
+# {feature_name} Layouts
+
+## Desktop (lg: 1024px+)
+
+```
+{desktop_layout_ascii}
+```
+
+### Layout Notes
+
+{desktop_notes}
+
+## Tablet (md: 768px-1023px)
+
+```
+{tablet_layout_ascii}
+```
+
+### Changes from Desktop
+
+{tablet_changes}
+
+## Mobile (sm: <768px)
+
+```
+{mobile_layout_ascii}
+```
+
+### Changes from Tablet
+
+{mobile_changes}
+
+## Responsive Behavior Summary
+
+| Element | Desktop | Tablet | Mobile |
+|---------|---------|--------|--------|
+{responsive_summary_rows}
+
+---
+
+*Generated by designer-founder workflow on {date}*

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

@@ -0,0 +1,32 @@
+# {feature_name} User Journeys
+
+## Primary Flow: {journey_name}
+
+**Trigger:** {journey_trigger}
+**Goal:** {journey_goal}
+
+### Flow Diagram
+
+```mermaid
+{mermaid_flowchart}
+```
+
+### Steps Detail
+
+{journey_steps}
+
+## Alternative Flows
+
+{alternative_flows}
+
+## Edge Cases
+
+{edge_cases}
+
+## Error States
+
+{error_states}
+
+---
+
+*Generated by designer-founder workflow on {date}*

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

@@ -0,0 +1,275 @@
+# HTML to React Conversion Tool
+
+## Overview
+
+Convert SuperDesign HTML/CSS output to React components. Used when `design.tool_used` = `superdesign`.
+
+---
+
+## Conversion Strategies
+
+### Strategy C: Component Mapping (Recommended)
+
+Analyze HTML structure and map to shadcn/ui components.
+
+**Best for:** Standard UI patterns, minimal custom styling
+
+### Strategy M: MagicPatterns Conversion
+
+Use MagicPatterns AI to generate React code from the design.
+
+**Best for:** Complex custom components, unique designs
+
+### Strategy H: Hybrid
+
+Map standard elements to shadcn, use MagicPatterns for custom components.
+
+**Best for:** Mix of standard and custom elements
+
+---
+
+## Execution Flow
+
+### 1. Present Conversion Options
+
+```
+CONVERSION STRATEGY
+
+Your SuperDesign prototype is HTML/CSS. Let's convert to React components.
+
+Prototype location: {design.output_location}
+
+Choose your approach:
+
+[C] Component Mapping (Recommended)
+    → Analyze HTML and map to shadcn components
+    → You install via CLI, minimal custom code
+    → Best for: Standard UI patterns
+
+[M] MagicPatterns Conversion {if available, else "(not configured)"}
+    → Generate React code from the design
+    → Direct component code output
+    → Best for: Complex custom components
+
+[H] Hybrid
+    → Map standard elements to shadcn
+    → Use MagicPatterns for custom components
+    → Best for: Mix of standard and custom
+
+Which approach? [C/M/H]
+```
+
+---
+
+### 2A. Component Mapping Execution
+
+```
+ANALYZING HTML STRUCTURE
+
+Reading: {design.output_location}
+```
+
+Parse and identify:
+- Semantic structure (header, main, footer, sections)
+- Interactive elements (buttons, forms, links)
+- Layout patterns (grid, flex, containers)
+- Custom styled elements
+
+Generate mapping:
+```
+HTML TO SHADCN MAPPING
+
+┌─ Analysis ───────────────────────────────────────────────────┐
+│                                                              │
+│  HTML Element         shadcn Match        Confidence         │
+│  ─────────────────────────────────────────────────────────── │
+│  <header>             -                   Layout only        │
+│  <nav>                NavigationMenu      High               │
+│  <button.primary>     Button              High               │
+│  <div.card>           Card                High               │
+│  <input>              Input               High               │
+│  <form>               Form                High               │
+│  <div.modal>          Dialog              High               │
+│  <div.custom-widget>  CUSTOM              Needs build        │
+│                                                              │
+└──────────────────────────────────────────────────────────────┘
+
+SHADCN COMPONENTS IDENTIFIED
+
+✓ Button - Primary and secondary actions
+✓ Card - Content containers
+✓ Input - Form fields
+✓ Form - Form wrapper with validation
+✓ Dialog - Modal overlays
+{... more as identified}
+
+CUSTOM ELEMENTS (No direct match)
+
+1. {element_description}
+   - HTML: {relevant html snippet}
+   - Suggestion: {how to build with primitives}
+
+2. {another_element}
+   ...
+```
+
+If shadcn MCP available, verify components:
+```
+Verifying components in shadcn registry...
+✓ All identified components available
+```
+
+For custom elements:
+```
+CUSTOM ELEMENT: {name}
+
+No direct shadcn match. Options:
+
+[B] Build from primitives
+    Compose using: {suggested_primitives}
+
+[M] MagicPatterns {if available}
+    Generate React code for this specific component
+
+[S] Skip
+    Handle during implementation
+
+Choice? [B/M/S]
+```
+
+---
+
+### 2B. MagicPatterns Conversion Execution
+
+```
+MAGICPATTERNS CONVERSION
+
+Preparing design reference...
+```
+
+If Playwright available, take screenshot of HTML file for reference.
+
+Create design request:
+```
+Tool: create_design
+Parameters:
+  prompt: "Convert this HTML/CSS design to React components:
+
+           Structure:
+           - {describe main sections from HTML}
+           - {describe key components}
+
+           Requirements:
+           - React with TypeScript
+           - Tailwind CSS (match existing styles)
+           - Break into reusable components
+           - Follow shadcn/ui patterns where applicable
+           - Responsive design preserved"
+
+  imageUrls: [{screenshot_url_if_available}]
+```
+
+After generation:
+```
+REACT CODE GENERATED
+
+Design URL: {url}
+
+Files available:
+- {file_list}
+
+[R] Read all code
+[V] View specific file
+[U] Update - Request changes
+[C] Continue with generated code
+```
+
+Extract code via `read_files` when user approves.
+
+---
+
+### 2C. Hybrid Execution
+
+Combine both approaches:
+
+```
+HYBRID CONVERSION
+
+Step 1: Mapping standard elements to shadcn
+Step 2: Using MagicPatterns for custom components
+
+Starting analysis...
+```
+
+1. Run component mapping analysis
+2. Identify elements that map cleanly to shadcn
+3. Identify custom elements that need generation
+4. For each custom element, use MagicPatterns:
+   ```
+   Generating custom component: {name}
+   ```
+5. Combine into unified component list
+
+---
+
+### 3. Generate Installation Command
+
+After any conversion strategy:
+
+```
+INSTALLATION READY
+
+shadcn components to install:
+```bash
+npx shadcn@latest add {all_identified_components}
+```
+
+Custom components:
+- {list custom components and their approach}
+
+MagicPatterns code (if any):
+- {component}: {url} - Extract via MCP
+```
+
+---
+
+## Output State
+
+After conversion, update:
+
+```yaml
+conversion:
+  strategy: [mapping | magicpatterns | hybrid]
+  shadcn_components:
+    - name: "{component}"
+      usage: "{where used}"
+  custom_components:
+    - name: "{component}"
+      approach: "{build method}"
+      source: [primitives | magicpatterns]
+      code: "{if extracted}"
+  install_command: "npx shadcn@latest add {components}"
+```
+
+---
+
+## Mapping Reference
+
+### Common HTML → shadcn Mappings
+
+| HTML Pattern | shadcn Component |
+|--------------|------------------|
+| `<button>` | Button |
+| `<input type="text">` | Input |
+| `<input type="checkbox">` | Checkbox |
+| `<select>` | Select |
+| `<form>` | Form |
+| `<div class="card">` | Card |
+| `<div class="modal">` | Dialog |
+| `<div class="dropdown">` | DropdownMenu |
+| `<table>` | Table |
+| `<div class="tabs">` | Tabs |
+| `<div class="accordion">` | Accordion |
+| `<span class="badge">` | Badge |
+| `<div class="alert">` | Alert |
+| `<div class="tooltip">` | Tooltip |

package/skills/designer-founder/tools/direct-mapping.md

@@ -0,0 +1,222 @@
+# Direct Component Mapping Tool Execution
+
+## Overview
+
+Skip visual prototyping and map directly to shadcn/ui components. Best for standard UI patterns where the structure is clear.
+
+**Output:** Component mapping document
+**Requires:** shadcn MCP (optional, CLI fallback available)
+
+---
+
+## Execution Flow
+
+### 1. Understand Requirements
+
+```
+DIRECT MAPPING MODE
+
+I'll map your requirements directly to shadcn/ui components.
+
+Let me understand what you need:
+
+1. What type of UI is this? (form, dashboard, list, modal, etc.)
+2. What data/content will it display?
+3. What actions can users take?
+```
+
+### 2. Identify Component Needs
+
+Based on requirements, identify needed components:
+
+```
+COMPONENT ANALYSIS
+
+For: {user_intent}
+
+Identified UI patterns:
+- {pattern_1}: Needs {component_type}
+- {pattern_2}: Needs {component_type}
+- ...
+```
+
+### 3. Search shadcn Registry (if MCP available)
+
+If shadcn MCP is available:
+```
+Searching shadcn registry for matching components...
+```
+
+Use MCP to search for each identified pattern.
+
+If shadcn MCP not available:
+```
+shadcn MCP not configured. Using known component list.
+
+Available shadcn/ui components:
+- Layout: Card, Separator, Sheet, Tabs
+- Forms: Form, Input, Label, Select, Checkbox, Radio, Switch, Textarea
+- Feedback: Alert, Badge, Toast, Tooltip
+- Navigation: Breadcrumb, Dropdown Menu, Navigation Menu
+- Data: Table, Data Table
+- Overlay: Dialog, Drawer, Popover, Alert Dialog
+- Other: Accordion, Avatar, Button, Calendar, Command, Skeleton
+
+Docs: https://ui.shadcn.com/docs/components
+```
+
+### 4. Generate Component Mapping
+
+```
+COMPONENT MAPPING
+
+Page/Feature: {feature_name}
+
+## Structure
+
+┌─ {Section 1} ────────────────────────────────────────────────┐
+│                                                              │
+│  UI Element          →  shadcn Component   →  Props/Notes   │
+│  ─────────────────────────────────────────────────────────── │
+│  {element}           →  {component}        →  {notes}       │
+│  {element}           →  {component}        →  {notes}       │
+│                                                              │
+└──────────────────────────────────────────────────────────────┘
+
+┌─ {Section 2} ────────────────────────────────────────────────┐
+│                                                              │
+│  {element}           →  {component}        →  {notes}       │
+│  {element}           →  CUSTOM             →  {approach}    │
+│                                                              │
+└──────────────────────────────────────────────────────────────┘
+
+## Installation
+
+```bash
+npx shadcn@latest add {component1} {component2} {component3}
+```
+
+## Custom Components Needed
+
+{list any elements that don't map to shadcn}
+```
+
+### 5. Handle Custom Components
+
+For elements that don't map to shadcn:
+
+```
+CUSTOM COMPONENT: {name}
+
+This element doesn't have a direct shadcn match.
+
+Options:
+[B] Build from primitives - Compose using Radix + Tailwind
+[M] MagicPatterns - Generate via AI {if available}
+[R] Research - Search for existing solutions
+[S] Skip - Handle during implementation
+```
+
+### 6. Present Final Mapping
+
+```
+COMPONENT MAPPING COMPLETE
+
+Summary:
+- shadcn components: {count}
+- Custom components: {count}
+
+Installation command ready:
+npx shadcn@latest add {all_components}
+
+Options:
+[A] Adjust - Modify component choices
+[S] Search - Look up more components {if MCP available}
+[C] Continue - Mapping is approved
+```
+
+---
+
+## Output State
+
+After completion, set:
+
+```yaml
+design:
+  tool_used: direct
+  output_location: "inline"
+  output_format: mapping
+  needs_conversion: false  # Already mapped
+  components:
+    shadcn:
+      - name: "{component}"
+        usage: "{where used}"
+        props: "{key props}"
+    custom:
+      - name: "{component}"
+        approach: "{how to build}"
+        complexity: "{low/medium/high}"
+  install_command: "npx shadcn@latest add {components}"
+```
+
+---
+
+## Common Patterns Quick Reference
+
+### Form Pattern
+```
+Login/Signup Form:
+- Card (container)
+- Form (wrapper)
+- Input + Label (fields)
+- Button (submit)
+- Separator (dividers)
+
+Install: npx shadcn@latest add card form input label button separator
+```
+
+### Dashboard Pattern
+```
+Dashboard Page:
+- Card (stat cards, content sections)
+- Table or Data Table (lists)
+- Badge (status indicators)
+- Dropdown Menu (actions)
+- Tabs (content organization)
+
+Install: npx shadcn@latest add card table badge dropdown-menu tabs
+```
+
+### Settings Pattern
+```
+Settings Page:
+- Tabs (sections)
+- Form + Input + Label (fields)
+- Switch (toggles)
+- Select (dropdowns)
+- Button (save actions)
+- Alert (notifications)
+
+Install: npx shadcn@latest add tabs form input label switch select button alert
+```
+
+### Modal Pattern
+```
+Modal/Dialog:
+- Dialog (container)
+- Form elements (content)
+- Button (actions)
+
+Install: npx shadcn@latest add dialog button
+```
+
+### List Pattern
+```
+Item List:
+- Card (item container)
+- Badge (status)
+- Dropdown Menu (actions)
+- Skeleton (loading state)
+
+Install: npx shadcn@latest add card badge dropdown-menu skeleton
+```