@torka/claude-workflows 0.1.0 → 0.2.0

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

@@ -0,0 +1,193 @@
+# MagicPatterns Tool Execution
+
+## Overview
+
+MagicPatterns is an AI design tool that generates React components directly. Requires MagicPatterns MCP to be configured.
+
+**Output:** React component code + hosted design URL
+**MCP Tools Used:** `create_design`, `get_design`, `read_files`, `update_design`
+
+---
+
+## Prerequisites
+
+Check MCP availability:
+```
+MagicPatterns MCP: [check if mcp__magicpatterns tools available]
+```
+
+If not available, inform user:
+```
+MagicPatterns MCP is not configured.
+
+To use MagicPatterns:
+1. Configure MCP server (see magicpatterns.com/docs)
+2. Or use MagicPatterns directly in browser and share the URL
+
+Alternative options:
+[S] SuperDesign - HTML/CSS prototype
+[W] Wireframe - Structure first
+[D] Direct - Map to components directly
+```
+
+---
+
+## Execution Flow
+
+### 1. Frame Design Prompt
+
+Construct prompt from context:
+
+```
+{user_intent}
+
+Requirements:
+- Use React with TypeScript
+- Tailwind CSS for styling
+- Responsive design (mobile-first)
+- {additional_context_from_scope}
+
+Style:
+- {inspiration_notes}
+- Clean, modern aesthetic
+- Consistent with shadcn/ui patterns
+```
+
+### 2. Create Design
+
+Use MCP tool:
+```
+Tool: create_design
+Parameters:
+  prompt: "{constructed_prompt}"
+  imageUrls: [{inspiration_image_urls}]  // optional
+```
+
+### 3. Present Result
+
+```
+DESIGN CREATED
+
+Preview URL: {preview_url}
+Editor URL: {editor_url}
+
+Please review the design in MagicPatterns.
+
+Options:
+[U] Update - Request changes
+[R] Read Code - Extract React component code
+[V] View Files - List available files
+[C] Continue - Design is approved
+```
+
+### 4. Handle User Selection
+
+**If U (Update):**
+
+Ask what changes are needed:
+```
+What changes would you like to make?
+```
+
+Use MCP tool:
+```
+Tool: update_design
+Parameters:
+  url: "{design_url}"
+  prompt: "{user_change_request}"
+```
+
+Return to step 3 after update completes.
+
+**If V (View Files):**
+
+Use MCP tool:
+```
+Tool: get_design
+Parameters:
+  url: "{design_url}"
+```
+
+Present file list:
+```
+Available files in design:
+- {file_1}
+- {file_2}
+- ...
+
+Which files would you like to read? [comma-separated list or 'all']
+```
+
+**If R (Read Code):**
+
+First get file list if not already retrieved:
+```
+Tool: get_design
+Parameters:
+  url: "{design_url}"
+```
+
+Then read files:
+```
+Tool: read_files
+Parameters:
+  url: "{design_url}"
+  fileNames: [{selected_files}]
+```
+
+Present code:
+```
+REACT CODE EXTRACTED
+
+{file_contents}
+
+Options:
+[S] Save - Store code for artifact generation
+[A] Adjust - Request changes
+[C] Continue - Code is approved
+```
+
+**If C (Continue):**
+- Store design URL and any extracted code
+- Return control to parent step
+
+---
+
+## Output State
+
+After completion, set:
+
+```yaml
+design:
+  tool_used: magicpatterns
+  output_location: "{design_url}"
+  output_format: react
+  needs_conversion: false  # Already React
+  extracted_code:
+    files:
+      - name: "{filename}"
+        content: "{code}"
+  design_id: "{id_from_url}"
+```
+
+---
+
+## Using MagicPatterns for Conversion
+
+MagicPatterns can also convert existing designs (from SuperDesign HTML) to React:
+
+```
+Tool: create_design
+Parameters:
+  prompt: "Convert this HTML design to React components with Tailwind CSS:
+           [describe the HTML structure]
+
+           Requirements:
+           - TypeScript
+           - Tailwind CSS
+           - Break into reusable components
+           - Follow shadcn/ui patterns"
+  imageUrls: [{screenshot_of_html_design}]  // if available
+```
+
+This is useful in the conversion step when the user chooses MagicPatterns for HTML→React conversion.

package/skills/designer-founder/tools/superdesign-assets/generate-theme.ts

@@ -0,0 +1,193 @@
+#!/usr/bin/env npx tsx
+/**
+ * Theme Generation CLI Script
+ *
+ * Generates CSS theme files from input content.
+ * Matches the execution logic of the generateTheme tool.
+ *
+ * Usage:
+ *   npx tsx _bmad-output/tmp/generate-theme.ts --name "Theme Name" --output path/to/theme.css --input source.css
+ *   cat theme.css | npx tsx _bmad-output/tmp/generate-theme.ts --name "Theme Name" --output path/to/theme.css
+ */
+
+import * as fs from 'node:fs'
+import * as path from 'node:path'
+import * as readline from 'node:readline'
+
+// Parse command-line arguments
+const args = process.argv.slice(2)
+
+function getArg(flag: string): string | undefined {
+  const idx = args.indexOf(flag)
+  return idx !== -1 && args[idx + 1] ? args[idx + 1] : undefined
+}
+
+function hasFlag(flag: string): boolean {
+  return args.includes(flag)
+}
+
+function printUsage(): void {
+  console.log(`
+Theme Generation CLI
+
+Usage:
+  npx tsx generate-theme.ts --name <theme_name> --output <path> [options]
+
+Required:
+  --name <theme_name>    Theme name for identification
+  --output <path>        Output CSS file path (relative to project root)
+
+Optional:
+  --input <path>         Read CSS content from file (alternative to stdin)
+  --no-create-dirs       Don't create parent directories
+  --help                 Show this help message
+
+Examples:
+  # Read CSS from file
+  npx tsx generate-theme.ts --name "Dark Mode" --output .superdesign/themes/dark.css --input theme-content.css
+
+  # Read CSS from stdin
+  cat theme.css | npx tsx generate-theme.ts --name "Light Mode" --output .superdesign/themes/light.css
+
+  # Echo CSS directly
+  echo ':root { --primary: blue; }' | npx tsx generate-theme.ts --name "Test" --output .superdesign/test.css
+`)
+}
+
+function printResult(success: boolean, message: string, data?: Record<string, unknown>): void {
+  const result = {
+    success,
+    message,
+    ...data,
+  }
+  console.log(JSON.stringify(result, null, 2))
+}
+
+async function readStdin(): Promise<string> {
+  return new Promise((resolve, reject) => {
+    // Check if stdin has data (not a TTY)
+    if (process.stdin.isTTY) {
+      resolve('')
+      return
+    }
+
+    const rl = readline.createInterface({
+      input: process.stdin,
+      terminal: false,
+    })
+
+    const lines: string[] = []
+    rl.on('line', line => lines.push(line))
+    rl.on('close', () => resolve(lines.join('\n')))
+    rl.on('error', reject)
+  })
+}
+
+async function main(): Promise<void> {
+  // Show help if requested
+  if (hasFlag('--help') || hasFlag('-h')) {
+    printUsage()
+    process.exit(0)
+  }
+
+  // Parse arguments
+  const themeName = getArg('--name')
+  const outputPath = getArg('--output')
+  const inputPath = getArg('--input')
+  const createDirs = !hasFlag('--no-create-dirs')
+
+  // Validate required arguments
+  if (!themeName) {
+    printResult(false, 'Missing required argument: --name')
+    process.exit(1)
+  }
+
+  if (!outputPath) {
+    printResult(false, 'Missing required argument: --output')
+    process.exit(1)
+  }
+
+  // Determine project root (two levels up from this script location)
+  const projectRoot = path.resolve(__dirname, '../..')
+
+  // Resolve and validate output path
+  const resolvedOutputPath = path.resolve(projectRoot, outputPath)
+  if (!resolvedOutputPath.startsWith(projectRoot)) {
+    printResult(false, 'Output path must be within project directory', {
+      attempted_path: outputPath,
+      resolved_path: resolvedOutputPath,
+      project_root: projectRoot,
+    })
+    process.exit(1)
+  }
+
+  // Read CSS content from input file or stdin
+  let cssContent: string
+
+  if (inputPath) {
+    const resolvedInputPath = path.resolve(projectRoot, inputPath)
+    if (!resolvedInputPath.startsWith(projectRoot)) {
+      printResult(false, 'Input path must be within project directory', {
+        attempted_path: inputPath,
+      })
+      process.exit(1)
+    }
+
+    if (!fs.existsSync(resolvedInputPath)) {
+      printResult(false, `Input file not found: ${inputPath}`, {
+        resolved_path: resolvedInputPath,
+      })
+      process.exit(1)
+    }
+
+    cssContent = fs.readFileSync(resolvedInputPath, 'utf-8')
+  }
+  else {
+    cssContent = await readStdin()
+  }
+
+  if (!cssContent || cssContent.trim() === '') {
+    printResult(false, 'No CSS content provided. Use --input <file> or pipe content via stdin.')
+    process.exit(1)
+  }
+
+  // Create parent directories if needed
+  const outputDir = path.dirname(resolvedOutputPath)
+  if (createDirs && !fs.existsSync(outputDir)) {
+    try {
+      fs.mkdirSync(outputDir, { recursive: true })
+    }
+    catch (err) {
+      printResult(false, `Failed to create directory: ${outputDir}`, {
+        error: err instanceof Error ? err.message : String(err),
+      })
+      process.exit(1)
+    }
+  }
+
+  // Write CSS content to output file
+  try {
+    fs.writeFileSync(resolvedOutputPath, cssContent, 'utf-8')
+  }
+  catch (err) {
+    printResult(false, `Failed to write file: ${resolvedOutputPath}`, {
+      error: err instanceof Error ? err.message : String(err),
+    })
+    process.exit(1)
+  }
+
+  // Print success result
+  printResult(true, `Theme "${themeName}" saved successfully`, {
+    theme_name: themeName,
+    file_path: resolvedOutputPath,
+    relative_path: outputPath,
+    bytes_written: Buffer.byteLength(cssContent, 'utf-8'),
+  })
+}
+
+main().catch((err) => {
+  printResult(false, 'Unexpected error', {
+    error: err instanceof Error ? err.message : String(err),
+  })
+  process.exit(1)
+})