npm - claude-code-workflow - Versions diffs - 6.0.5 → 6.1.0 - Mend

claude-code-workflow 6.0.5 → 6.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (117) hide show

package/ccw/src/tools/ui-generate-preview.js ADDED Viewed

@@ -0,0 +1,327 @@
+/**
+ * UI Generate Preview Tool
+ * Generate compare.html and index.html for UI prototypes
+ */
+import { readdirSync, existsSync, readFileSync, writeFileSync } from 'fs';
+import { resolve, basename } from 'path';
+/**
+ * Auto-detect matrix dimensions from file patterns
+ * Pattern: {target}-style-{s}-layout-{l}.html
+ */
+function detectMatrixDimensions(prototypesDir) {
+  const files = readdirSync(prototypesDir).filter(f => f.match(/.*-style-\d+-layout-\d+\.html$/));
+  const styles = new Set();
+  const layouts = new Set();
+  const targets = new Set();
+  files.forEach(file => {
+    const styleMatch = file.match(/-style-(\d+)-/);
+    const layoutMatch = file.match(/-layout-(\d+)\.html/);
+    const targetMatch = file.match(/^(.+)-style-/);
+    if (styleMatch) styles.add(parseInt(styleMatch[1]));
+    if (layoutMatch) layouts.add(parseInt(layoutMatch[1]));
+    if (targetMatch) targets.add(targetMatch[1]);
+  });
+  return {
+    styles: Math.max(...Array.from(styles)),
+    layouts: Math.max(...Array.from(layouts)),
+    targets: Array.from(targets).sort()
+  };
+}
+/**
+ * Load template from file
+ */
+function loadTemplate(templatePath) {
+  const defaultPath = resolve(
+    process.env.HOME || process.env.USERPROFILE,
+    '.claude/workflows/_template-compare-matrix.html'
+  );
+  const path = templatePath || defaultPath;
+  if (!existsSync(path)) {
+    // Return minimal fallback template
+    return `<!DOCTYPE html>
+<html>
+<head><title>UI Prototypes Comparison</title></head>
+<body>
+<h1>UI Prototypes Matrix</h1>
+<p>Styles: {{style_variants}} | Layouts: {{layout_variants}}</p>
+<p>Pages: {{pages_json}}</p>
+<p>Generated: {{timestamp}}</p>
+</body>
+</html>`;
+  }
+  return readFileSync(path, 'utf8');
+}
+/**
+ * Generate compare.html from template
+ */
+function generateCompareHtml(template, metadata) {
+  const { runId, sessionId, timestamp, styles, layouts, targets } = metadata;
+  const pagesJson = JSON.stringify(targets);
+  return template
+    .replace(/\{\{run_id\}\}/g, runId)
+    .replace(/\{\{session_id\}\}/g, sessionId)
+    .replace(/\{\{timestamp\}\}/g, timestamp)
+    .replace(/\{\{style_variants\}\}/g, styles.toString())
+    .replace(/\{\{layout_variants\}\}/g, layouts.toString())
+    .replace(/\{\{pages_json\}\}/g, pagesJson);
+}
+/**
+ * Generate index.html
+ */
+function generateIndexHtml(metadata) {
+  const { styles, layouts, targets } = metadata;
+  const total = styles * layouts * targets.length;
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>UI Prototypes Index</title>
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 40px 20px;
+            background: #f5f5f5;
+        }
+        h1 { margin-bottom: 10px; color: #333; }
+        .subtitle { color: #666; margin-bottom: 30px; }
+        .cta {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 20px;
+            border-radius: 8px;
+            margin-bottom: 30px;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+        }
+        .cta h2 { margin-bottom: 10px; }
+        .cta a {
+            display: inline-block;
+            background: white;
+            color: #667eea;
+            padding: 10px 20px;
+            border-radius: 6px;
+            text-decoration: none;
+            font-weight: 600;
+            margin-top: 10px;
+        }
+        .stats {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 15px;
+            margin-bottom: 30px;
+        }
+        .stat {
+            background: white;
+            padding: 15px;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+        .stat-label { font-size: 0.85em; color: #666; margin-bottom: 5px; }
+        .stat-value { font-size: 1.5em; font-weight: bold; color: #333; }
+        .files {
+            background: white;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+        .files h2 { margin-bottom: 15px; color: #333; }
+        .file-list { list-style: none; }
+        .file-list li {
+            padding: 8px 0;
+            border-bottom: 1px solid #eee;
+        }
+        .file-list li:last-child { border-bottom: none; }
+        .file-list a {
+            color: #667eea;
+            text-decoration: none;
+        }
+        .file-list a:hover { text-decoration: underline; }
+    </style>
+</head>
+<body>
+    <h1>UI Prototypes</h1>
+    <p class="subtitle">Interactive design exploration matrix</p>
+    <div class="cta">
+        <h2>📊 Interactive Comparison</h2>
+        <p>View all prototypes side-by-side with synchronized scrolling</p>
+        <a href="compare.html">Open Comparison Matrix →</a>
+    </div>
+    <div class="stats">
+        <div class="stat">
+            <div class="stat-label">Style Variants</div>
+            <div class="stat-value">${styles}</div>
+        </div>
+        <div class="stat">
+            <div class="stat-label">Layout Variants</div>
+            <div class="stat-value">${layouts}</div>
+        </div>
+        <div class="stat">
+            <div class="stat-label">Pages/Components</div>
+            <div class="stat-value">${targets.length}</div>
+        </div>
+        <div class="stat">
+            <div class="stat-label">Total Prototypes</div>
+            <div class="stat-value">${total}</div>
+        </div>
+    </div>
+    <div class="files">
+        <h2>Individual Prototypes</h2>
+        <ul class="file-list">
+${targets.map(target => {
+  const items = [];
+  for (let s = 1; s <= styles; s++) {
+    for (let l = 1; l <= layouts; l++) {
+      const filename = `${target}-style-${s}-layout-${l}.html`;
+      items.push(`            <li><a href="${filename}">${filename}</a></li>`);
+    }
+  }
+  return items.join('\n');
+}).join('\n')}
+        </ul>
+    </div>
+</body>
+</html>`;
+}
+/**
+ * Generate PREVIEW.md
+ */
+function generatePreviewMd(metadata) {
+  const { styles, layouts, targets } = metadata;
+  return `# UI Prototypes Preview
+## Matrix Dimensions
+- **Style Variants**: ${styles}
+- **Layout Variants**: ${layouts}
+- **Pages/Components**: ${targets.join(', ')}
+- **Total Prototypes**: ${styles * layouts * targets.length}
+## Quick Start
+1. **Interactive Comparison**: Open \`compare.html\` for side-by-side view with synchronized scrolling
+2. **Browse Index**: Open \`index.html\` for a navigable list of all prototypes
+3. **Individual Files**: Access specific prototypes directly (e.g., \`${targets[0]}-style-1-layout-1.html\`)
+## File Naming Convention
+\`\`\`
+{page}-style-{s}-layout-{l}.html
+\`\`\`
+- **page**: Component/page name (${targets.join(', ')})
+- **s**: Style variant number (1-${styles})
+- **l**: Layout variant number (1-${layouts})
+## Tips
+- Use compare.html for quick visual comparison across all variants
+- Synchronized scrolling helps identify consistency issues
+- Check responsive behavior across different layout variants
+`;
+}
+/**
+ * Main execute function
+ */
+async function execute(params) {
+  const { prototypesDir = '.', template: templatePath } = params;
+  const targetPath = resolve(process.cwd(), prototypesDir);
+  if (!existsSync(targetPath)) {
+    throw new Error(`Directory not found: ${targetPath}`);
+  }
+  // Auto-detect matrix dimensions
+  const { styles, layouts, targets } = detectMatrixDimensions(targetPath);
+  if (styles === 0 || layouts === 0 || targets.length === 0) {
+    throw new Error('No prototype files found matching pattern {target}-style-{s}-layout-{l}.html');
+  }
+  // Generate metadata
+  const metadata = {
+    runId: `run-${new Date().toISOString().replace(/[:.]/g, '-').slice(0, -5)}`,
+    sessionId: 'standalone',
+    timestamp: new Date().toISOString(),
+    styles,
+    layouts,
+    targets
+  };
+  // Load template
+  const template = loadTemplate(templatePath);
+  // Generate files
+  const compareHtml = generateCompareHtml(template, metadata);
+  const indexHtml = generateIndexHtml(metadata);
+  const previewMd = generatePreviewMd(metadata);
+  // Write files
+  writeFileSync(resolve(targetPath, 'compare.html'), compareHtml, 'utf8');
+  writeFileSync(resolve(targetPath, 'index.html'), indexHtml, 'utf8');
+  writeFileSync(resolve(targetPath, 'PREVIEW.md'), previewMd, 'utf8');
+  return {
+    success: true,
+    prototypes_dir: prototypesDir,
+    styles,
+    layouts,
+    targets,
+    total_prototypes: styles * layouts * targets.length,
+    files_generated: ['compare.html', 'index.html', 'PREVIEW.md']
+  };
+}
+/**
+ * Tool Definition
+ */
+export const uiGeneratePreviewTool = {
+  name: 'ui_generate_preview',
+  description: `Generate interactive preview files for UI prototypes.
+Generates:
+- compare.html: Interactive matrix view with synchronized scrolling
+- index.html: Navigation and statistics
+- PREVIEW.md: Usage guide
+Auto-detects matrix dimensions from file pattern: {target}-style-{s}-layout-{l}.html`,
+  parameters: {
+    type: 'object',
+    properties: {
+      prototypesDir: {
+        type: 'string',
+        description: 'Prototypes directory path (default: current directory)',
+        default: '.'
+      },
+      template: {
+        type: 'string',
+        description: 'Optional path to compare.html template'
+      }
+    },
+    required: []
+  },
+  execute
+};

package/ccw/src/tools/ui-instantiate-prototypes.js ADDED Viewed

@@ -0,0 +1,301 @@
+/**
+ * UI Instantiate Prototypes Tool
+ * Create final UI prototypes from templates (Style × Layout × Page matrix)
+ */
+import { readdirSync, existsSync, readFileSync, writeFileSync, mkdirSync, copyFileSync } from 'fs';
+import { resolve, join, basename } from 'path';
+/**
+ * Auto-detect pages from templates directory
+ */
+function autoDetectPages(templatesDir) {
+  if (!existsSync(templatesDir)) {
+    return [];
+  }
+  const files = readdirSync(templatesDir).filter(f => f.match(/.*-layout-\d+\.html$/));
+  const pages = new Set();
+  files.forEach(file => {
+    const match = file.match(/^(.+)-layout-\d+\.html$/);
+    if (match) pages.add(match[1]);
+  });
+  return Array.from(pages).sort();
+}
+/**
+ * Auto-detect style variants count
+ */
+function autoDetectStyleVariants(basePath) {
+  const styleDir = resolve(basePath, '..', 'style-extraction');
+  if (!existsSync(styleDir)) {
+    return 3; // Default
+  }
+  const dirs = readdirSync(styleDir, { withFileTypes: true })
+    .filter(d => d.isDirectory() && d.name.startsWith('style-'));
+  return dirs.length > 0 ? dirs.length : 3;
+}
+/**
+ * Auto-detect layout variants count
+ */
+function autoDetectLayoutVariants(templatesDir) {
+  if (!existsSync(templatesDir)) {
+    return 3; // Default
+  }
+  const files = readdirSync(templatesDir);
+  const firstPage = files.find(f => f.endsWith('-layout-1.html'));
+  if (!firstPage) return 3;
+  const pageName = firstPage.replace(/-layout-1\.html$/, '');
+  const layoutFiles = files.filter(f => f.match(new RegExp(`^${pageName}-layout-\\d+\\.html$`)));
+  return layoutFiles.length > 0 ? layoutFiles.length : 3;
+}
+/**
+ * Load CSS tokens file
+ */
+function loadTokensCss(styleDir, styleNum) {
+  const tokenPath = join(styleDir, `style-${styleNum}`, 'tokens.css');
+  if (existsSync(tokenPath)) {
+    return readFileSync(tokenPath, 'utf8');
+  }
+  return '/* No tokens.css found */';
+}
+/**
+ * Replace CSS placeholder in template
+ */
+function replaceCssPlaceholder(html, tokensCss) {
+  // Replace {{tokens.css}} placeholder
+  return html.replace(/\{\{tokens\.css\}\}/g, tokensCss);
+}
+/**
+ * Generate prototype from template
+ */
+function generatePrototype(templatePath, styleDir, styleNum, outputPath) {
+  const templateHtml = readFileSync(templatePath, 'utf8');
+  const tokensCss = loadTokensCss(styleDir, styleNum);
+  const finalHtml = replaceCssPlaceholder(templateHtml, tokensCss);
+  writeFileSync(outputPath, finalHtml, 'utf8');
+}
+/**
+ * Generate implementation notes
+ */
+function generateImplementationNotes(page, styleNum, layoutNum) {
+  return `# Implementation Notes: ${page}-style-${styleNum}-layout-${layoutNum}
+## Overview
+Prototype combining:
+- **Page/Component**: ${page}
+- **Style Variant**: ${styleNum}
+- **Layout Variant**: ${layoutNum}
+## Implementation Checklist
+### 1. Style Integration
+- [ ] Verify all CSS custom properties are applied correctly
+- [ ] Check color palette consistency
+- [ ] Validate typography settings
+- [ ] Test spacing and border radius values
+### 2. Layout Verification
+- [ ] Confirm component structure matches layout variant
+- [ ] Test responsive behavior
+- [ ] Verify flex/grid layouts
+- [ ] Check alignment and spacing
+### 3. Accessibility
+- [ ] Color contrast ratios (WCAG AA minimum)
+- [ ] Keyboard navigation
+- [ ] Screen reader compatibility
+- [ ] Focus indicators
+### 4. Browser Testing
+- [ ] Chrome/Edge
+- [ ] Firefox
+- [ ] Safari
+- [ ] Mobile browsers
+## Next Steps
+1. Review prototype in browser
+2. Compare with design specifications
+3. Implement in production codebase
+4. Add interactive functionality
+5. Write tests
+`;
+}
+/**
+ * Main execute function
+ */
+async function execute(params) {
+  const {
+    prototypesDir,
+    pages: pagesParam,
+    styleVariants: styleVariantsParam,
+    layoutVariants: layoutVariantsParam,
+    runId: runIdParam,
+    sessionId = 'standalone',
+    generatePreview = true
+  } = params;
+  if (!prototypesDir) {
+    throw new Error('Parameter "prototypesDir" is required');
+  }
+  const basePath = resolve(process.cwd(), prototypesDir);
+  if (!existsSync(basePath)) {
+    throw new Error(`Directory not found: ${basePath}`);
+  }
+  const templatesDir = join(basePath, '_templates');
+  const styleDir = resolve(basePath, '..', 'style-extraction');
+  // Auto-detect or use provided parameters
+  let pages, styleVariants, layoutVariants;
+  if (pagesParam && styleVariantsParam && layoutVariantsParam) {
+    // Manual mode
+    pages = Array.isArray(pagesParam) ? pagesParam : pagesParam.split(',').map(p => p.trim());
+    styleVariants = parseInt(styleVariantsParam);
+    layoutVariants = parseInt(layoutVariantsParam);
+  } else {
+    // Auto-detect mode
+    pages = autoDetectPages(templatesDir);
+    styleVariants = autoDetectStyleVariants(basePath);
+    layoutVariants = autoDetectLayoutVariants(templatesDir);
+  }
+  if (pages.length === 0) {
+    throw new Error('No pages detected. Ensure _templates directory contains layout files.');
+  }
+  // Generate run ID
+  const runId = runIdParam || `run-${new Date().toISOString().replace(/[:.]/g, '-').slice(0, -5)}`;
+  // Phase 1: Copy templates and replace CSS placeholders
+  const generatedFiles = [];
+  for (const page of pages) {
+    for (let s = 1; s <= styleVariants; s++) {
+      for (let l = 1; l <= layoutVariants; l++) {
+        const templateFile = `${page}-layout-${l}.html`;
+        const templatePath = join(templatesDir, templateFile);
+        if (!existsSync(templatePath)) {
+          console.warn(`Template not found: ${templateFile}, skipping...`);
+          continue;
+        }
+        const outputFile = `${page}-style-${s}-layout-${l}.html`;
+        const outputPath = join(basePath, outputFile);
+        // Generate prototype
+        generatePrototype(templatePath, styleDir, s, outputPath);
+        // Generate implementation notes
+        const notesFile = `${page}-style-${s}-layout-${l}-notes.md`;
+        const notesPath = join(basePath, notesFile);
+        const notes = generateImplementationNotes(page, s, l);
+        writeFileSync(notesPath, notes, 'utf8');
+        generatedFiles.push(outputFile);
+      }
+    }
+  }
+  // Phase 2: Generate preview files (optional)
+  const previewFiles = [];
+  if (generatePreview) {
+    // Import and execute ui_generate_preview tool
+    const { uiGeneratePreviewTool } = await import('./ui-generate-preview.js');
+    const previewResult = await uiGeneratePreviewTool.execute({ prototypesDir: basePath });
+    if (previewResult.success) {
+      previewFiles.push(...previewResult.files_generated);
+    }
+  }
+  return {
+    success: true,
+    run_id: runId,
+    session_id: sessionId,
+    prototypes_dir: basePath,
+    pages,
+    style_variants: styleVariants,
+    layout_variants: layoutVariants,
+    total_prototypes: generatedFiles.length,
+    files_generated: generatedFiles,
+    preview_files: previewFiles,
+    message: `Generated ${generatedFiles.length} prototypes (${styleVariants} styles × ${layoutVariants} layouts × ${pages.length} pages)`
+  };
+}
+/**
+ * Tool Definition
+ */
+export const uiInstantiatePrototypesTool = {
+  name: 'ui_instantiate_prototypes',
+  description: `Create final UI prototypes from templates (Style × Layout × Page matrix).
+Two Modes:
+1. Auto-detect (recommended): Only specify prototypesDir
+2. Manual: Specify prototypesDir, pages, styleVariants, layoutVariants
+Features:
+- Copies templates and replaces CSS placeholders with tokens.css
+- Generates implementation notes for each prototype
+- Optionally generates preview files (compare.html, index.html, PREVIEW.md)`,
+  parameters: {
+    type: 'object',
+    properties: {
+      prototypesDir: {
+        type: 'string',
+        description: 'Prototypes directory path'
+      },
+      pages: {
+        type: 'string',
+        description: 'Comma-separated list of pages (auto-detected if not provided)'
+      },
+      styleVariants: {
+        type: 'number',
+        description: 'Number of style variants (auto-detected if not provided)'
+      },
+      layoutVariants: {
+        type: 'number',
+        description: 'Number of layout variants (auto-detected if not provided)'
+      },
+      runId: {
+        type: 'string',
+        description: 'Run ID (auto-generated if not provided)'
+      },
+      sessionId: {
+        type: 'string',
+        description: 'Session ID (default: standalone)',
+        default: 'standalone'
+      },
+      generatePreview: {
+        type: 'boolean',
+        description: 'Generate preview files (default: true)',
+        default: true
+      }
+    },
+    required: ['prototypesDir']
+  },
+  execute
+};