aiox-core 5.0.1 → 5.0.3

package/pro/squads/design/scripts/design-system/generate_curation_report.cjs

@@ -0,0 +1,258 @@
+#!/usr/bin/env node
+/**
+ * Generate Curation Report — Scoring + Decision Trail
+ *
+ * Reads all curated-*.json files and generates:
+ *   - curation-report.json (machine-readable scoring)
+ *   - curation-report.md (human-readable report)
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+const ROOT = process.cwd();
+const EXTRACTION_DIR = path.join(ROOT, 'workspace', 'domains', 'design-system', 'extraction');
+const CURATED_DIR = path.join(EXTRACTION_DIR, 'curated');
+const MERGED_PATH = path.join(EXTRACTION_DIR, 'all-pages-merged.json');
+const STYLES_PATH = path.join(EXTRACTION_DIR, 'figma-styles.json');
+const VARIABLES_PATH = path.join(EXTRACTION_DIR, 'figma-variables.json');
+const REPORT_JSON = path.join(CURATED_DIR, 'curation-report.json');
+const REPORT_MD = path.join(CURATED_DIR, 'curation-report.md');
+
+function readCurated(name) {
+  const filePath = path.join(CURATED_DIR, name);
+  return JSON.parse(fs.readFileSync(filePath, 'utf8'));
+}
+
+function main() {
+  console.log('=== CURATION REPORT GENERATION ===\n');
+
+  const colors = readCurated('curated-colors.json');
+  const spacing = readCurated('curated-spacing.json');
+  const typography = readCurated('curated-typography.json');
+  const shadows = readCurated('curated-shadows.json');
+  const radius = readCurated('curated-radius.json');
+  const components = readCurated('curated-components.json');
+
+  // Aggregate all decisions
+  const allDecisions = [
+    ...(colors.decisions || []),
+    ...(spacing.decisions || []),
+    ...(typography.decisions || []),
+    ...(shadows.decisions || []),
+    ...(radius.decisions || []),
+  ];
+
+  // Calculate overall reduction
+  const beforeTotal =
+    colors.scores.before +
+    spacing.scores.before +
+    (typography.scores.before.families + typography.scores.before.sizes + typography.scores.before.weights) +
+    shadows.scores.before +
+    radius.scores.before;
+
+  const afterTotal =
+    colors.scores.after +
+    spacing.scores.after +
+    (typography.scores.after.families + typography.scores.after.sizes + typography.scores.after.weights) +
+    shadows.scores.after +
+    radius.scores.after;
+
+  const overallReduction = ((beforeTotal - afterTotal) / beforeTotal) * 100;
+
+  const report = {
+    brand: 'clickmax',
+    source: 'all-pages-merged.json',
+    pagesIncluded: colors.meta.pagesIncluded,
+    timestamp: new Date().toISOString(),
+    scores: {
+      colors: {
+        before: colors.scores.before,
+        after: colors.scores.after,
+        reduction: colors.scores.reduction,
+        target: colors.scores.target,
+        status: colors.scores.status,
+        wcag_aa_pass: colors.scores.wcag_aa_pass,
+        coverage: colors.scores.coverage,
+      },
+      spacing: {
+        before: spacing.scores.before,
+        after: spacing.scores.after,
+        reduction: spacing.scores.reduction,
+        target: spacing.scores.target,
+        status: spacing.scores.status,
+        base_unit: spacing.scores.base_unit,
+        coverage: spacing.scores.coverage,
+      },
+      typography: {
+        before: typography.scores.before,
+        after: typography.scores.after,
+        reduction: typography.scores.reduction,
+        target: typography.scores.target,
+        status: typography.scores.status,
+      },
+      shadows: {
+        before: shadows.scores.before,
+        after: shadows.scores.after,
+        reduction: shadows.scores.reduction,
+        target: shadows.scores.target,
+        status: shadows.scores.status,
+      },
+      radius: {
+        before: radius.scores.before,
+        after: radius.scores.after,
+        reduction: radius.scores.reduction,
+        target: radius.scores.target,
+        status: radius.scores.status,
+      },
+      components: {
+        before: components.scores.before,
+        after: components.scores.after,
+        reduction: components.scores.reduction,
+        atomic: components.scores.atomic,
+        priority: components.scores.priority,
+      },
+      overall: {
+        before: beforeTotal,
+        after: afterTotal,
+        reduction: `${Math.round(overallReduction * 10) / 10}%`,
+        target: '80%',
+        status: overallReduction >= 80 ? 'PASS' : overallReduction >= 60 ? 'CONDITIONAL' : 'FAIL',
+      },
+    },
+    decisions: allDecisions,
+    decisionCount: allDecisions.length,
+    figmaMetadata: {
+      stylesCount: (() => { try { return JSON.parse(fs.readFileSync(STYLES_PATH, 'utf8')).length; } catch (_) { return 0; } })(),
+      variablesCount: (() => { try { return Object.keys(JSON.parse(fs.readFileSync(VARIABLES_PATH, 'utf8')).variables || {}).length; } catch (_) { return 0; } })(),
+    },
+  };
+
+  fs.writeFileSync(REPORT_JSON, JSON.stringify(report, null, 2));
+  console.log(`  ✓ ${REPORT_JSON}`);
+
+  // Generate Markdown report
+  let md = `# Curation Report — Clickmax Design System\n\n`;
+  md += `**Generated:** ${report.timestamp}\n`;
+  md += `**Source:** ${report.source} (${report.pagesIncluded} pages)\n`;
+  md += `**Brand:** ${report.brand}\n\n`;
+
+  md += `## Overall Score\n\n`;
+  md += `| Metric | Before | After | Reduction | Target | Status |\n`;
+  md += `|--------|--------|-------|-----------|--------|--------|\n`;
+  md += `| **Overall** | ${report.scores.overall.before} | ${report.scores.overall.after} | ${report.scores.overall.reduction} | ${report.scores.overall.target} | **${report.scores.overall.status}** |\n\n`;
+
+  md += `## Category Scores\n\n`;
+  md += `| Category | Before | After | Reduction | Target | Status |\n`;
+  md += `|----------|--------|-------|-----------|--------|--------|\n`;
+
+  const categories = ['colors', 'spacing', 'typography', 'shadows', 'radius'];
+  for (const cat of categories) {
+    const s = report.scores[cat];
+    const before = typeof s.before === 'object' ? JSON.stringify(s.before) : s.before;
+    const after = typeof s.after === 'object' ? JSON.stringify(s.after) : s.after;
+    md += `| ${cat} | ${before} | ${after} | ${s.reduction} | ${s.target} | ${s.status} |\n`;
+  }
+
+  md += `\n## Components\n\n`;
+  md += `| Metric | Value |\n`;
+  md += `|--------|-------|\n`;
+  md += `| Total (before filter) | ${report.scores.components.before} |\n`;
+  md += `| Curated (after filter) | ${report.scores.components.after} |\n`;
+  md += `| Atoms | ${report.scores.components.atomic.atoms} |\n`;
+  md += `| Molecules | ${report.scores.components.atomic.molecules} |\n`;
+  md += `| Organisms | ${report.scores.components.atomic.organisms} |\n`;
+  md += `| P0 (critical) | ${report.scores.components.priority.P0} |\n`;
+  md += `| P1 (important) | ${report.scores.components.priority.P1} |\n`;
+  md += `| P2 (nice-to-have) | ${report.scores.components.priority.P2} |\n`;
+
+  // Top 10 components by usage (with real names)
+  const topComponents = (components.components || []).slice(0, 10);
+  if (topComponents.length > 0) {
+    md += `\n### Top 10 Components by Usage\n\n`;
+    md += `| # | Name | Count | Atomic | Priority |\n`;
+    md += `|---|------|-------|--------|----------|\n`;
+    topComponents.forEach((c, i) => {
+      md += `| ${i + 1} | ${c.name || '(unnamed)'} | ${c.count} | ${c.atomicLevel} | ${c.priority} |\n`;
+    });
+  }
+
+  // Figma Metadata section
+  let figmaStylesCount = 0;
+  let figmaVarCount = 0;
+  let figmaColCount = 0;
+  try {
+    const styles = JSON.parse(fs.readFileSync(STYLES_PATH, 'utf8'));
+    figmaStylesCount = styles.length;
+  } catch (_) { /* optional */ }
+  try {
+    const vars = JSON.parse(fs.readFileSync(VARIABLES_PATH, 'utf8'));
+    figmaVarCount = Object.keys(vars.variables || {}).length;
+    figmaColCount = Object.keys(vars.variableCollections || {}).length;
+  } catch (_) { /* optional */ }
+
+  md += `\n## Figma Metadata\n\n`;
+  md += `| Metric | Count |\n`;
+  md += `|--------|-------|\n`;
+  md += `| Published styles | ${figmaStylesCount} |\n`;
+  md += `| Variables | ${figmaVarCount} |\n`;
+  md += `| Variable collections | ${figmaColCount} |\n`;
+
+  // New Properties Coverage
+  let mergedStats = {};
+  try {
+    const merged = JSON.parse(fs.readFileSync(MERGED_PATH, 'utf8'));
+    mergedStats = merged.meta?.stats || {};
+  } catch (_) { /* optional */ }
+
+  md += `\n## Extended Properties Coverage\n\n`;
+  md += `| Property | Count |\n`;
+  md += `|----------|-------|\n`;
+  md += `| Image references | ${mergedStats.totalImageRefs || 0} |\n`;
+  md += `| Stroke details | ${mergedStats.totalStrokeDetails || 0} |\n`;
+  md += `| Blur effects | ${mergedStats.totalBlurs || 0} |\n`;
+  md += `| Blend modes (non-default) | ${mergedStats.totalBlendModes || 0} |\n`;
+
+  md += `\n## Quality Gates\n\n`;
+  md += `| Gate | Value | Status |\n`;
+  md += `|------|-------|--------|\n`;
+  md += `| WCAG AA (colors) | ${report.scores.colors.wcag_aa_pass} | ${report.scores.colors.wcag_aa_pass === '100%' ? 'PASS' : 'CONDITIONAL'} |\n`;
+  md += `| Color coverage | ${report.scores.colors.coverage} | ${report.scores.colors.coverage >= '95' ? 'PASS' : 'CONDITIONAL'} |\n`;
+  md += `| Spacing coverage | ${report.scores.spacing.coverage} | ${report.scores.spacing.coverage >= '95' ? 'PASS' : 'CONDITIONAL'} |\n`;
+  md += `| Base unit | ${report.scores.spacing.base_unit} | PASS |\n`;
+
+  md += `\n## Decisions Trail\n\n`;
+  md += `Total decisions logged: **${report.decisionCount}**\n\n`;
+
+  // Group decisions by category
+  const decisionsByCategory = new Map();
+  for (const d of allDecisions) {
+    if (!decisionsByCategory.has(d.category)) decisionsByCategory.set(d.category, []);
+    decisionsByCategory.get(d.category).push(d);
+  }
+
+  for (const [category, decisions] of decisionsByCategory) {
+    md += `### ${category} (${decisions.length} decisions)\n\n`;
+    for (const d of decisions.slice(0, 5)) {
+      md += `- **${d.action}**: ${d.items.slice(0, 3).join(', ')}${d.items.length > 3 ? ` (+${d.items.length - 3} more)` : ''} → \`${d.result}\`\n`;
+      md += `  - _${d.reason}_\n`;
+      md += `  - Authority: ${d.authority}\n`;
+    }
+    if (decisions.length > 5) {
+      md += `- _... and ${decisions.length - 5} more_\n`;
+    }
+    md += '\n';
+  }
+
+  md += `---\n_Generated by DS Curation Pipeline_\n`;
+
+  fs.writeFileSync(REPORT_MD, md);
+  console.log(`  ✓ ${REPORT_MD}`);
+
+  console.log(`\n--- SUMMARY ---`);
+  console.log(`  Overall: ${report.scores.overall.before} → ${report.scores.overall.after} (${report.scores.overall.reduction}) → ${report.scores.overall.status}`);
+  console.log(`  Decisions: ${report.decisionCount}`);
+  console.log('\n=== DONE ===');
+}
+
+main();

package/pro/squads/design/scripts/design-system/generate_tokens.cjs

@@ -0,0 +1,342 @@
+#!/usr/bin/env node
+/**
+ * Generate CSS Tokens from Curated Data
+ *
+ * Reads curated-*.json files and generates:
+ *   - tokens/primitives/colors.css
+ *   - tokens/primitives/spacing.css
+ *   - tokens/primitives/typography.css
+ *   - tokens/semantic/colors.css
+ *   - tokens/semantic/surfaces.css
+ *   - tokens/component/shadows.css
+ *   - tokens/component/radius.css
+ *   - themes/light.css
+ *   - themes/dark.css
+ *   - tailwind.theme.css (Tailwind v4 @theme)
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+const ROOT = process.cwd();
+const EXTRACTION_DIR = path.join(ROOT, 'workspace', 'domains', 'design-system', 'extraction');
+const CURATED_DIR = path.join(EXTRACTION_DIR, 'curated');
+const OUTPUT_DIR = path.join(ROOT, 'workspace', 'ui', 'clickmax');
+
+// ── Helpers ────────────────────────────────────────────────────────────────
+
+function readCurated(name) {
+  const filePath = path.join(CURATED_DIR, name);
+  return JSON.parse(fs.readFileSync(filePath, 'utf8'));
+}
+
+function writeCSS(relativePath, content) {
+  const fullPath = path.join(OUTPUT_DIR, relativePath);
+  fs.mkdirSync(path.dirname(fullPath), { recursive: true });
+  fs.writeFileSync(fullPath, content);
+  console.log(`  ✓ ${relativePath}`);
+}
+
+function cssHeader(title) {
+  return `/* @AIOS-RULES: Auto-generated by DS Curation Pipeline — DO NOT EDIT MANUALLY */\n/* ${title} */\n/* Generated: ${new Date().toISOString()} */\n\n`;
+}
+
+// ── Generate Primitives ────────────────────────────────────────────────────
+
+function generatePrimitiveColors(colors) {
+  let css = cssHeader('Primitive Color Tokens — OKLCH');
+  css += ':root {\n';
+
+  // Sort palette by classification then count
+  const palette = colors.palette || [];
+
+  // Group by classification
+  const groups = new Map();
+  for (const color of palette) {
+    const cls = color.classification || 'unknown';
+    if (!groups.has(cls)) groups.set(cls, []);
+    groups.get(cls).push(color);
+  }
+
+  for (const [classification, colorGroup] of groups) {
+    css += `\n  /* ${classification} */\n`;
+    if (colorGroup.length === 1) {
+      css += `  --color-${classification}: ${colorGroup[0].hex};\n`;
+    } else {
+      colorGroup.forEach((c, i) => {
+        const suffix = i === 0 ? '' : `-${i + 1}`;
+        css += `  --color-${classification}${suffix}: ${c.hex};\n`;
+      });
+    }
+  }
+
+  // Tonal scales
+  const tonalScales = colors.tonalScales || {};
+  for (const [name, scale] of Object.entries(tonalScales)) {
+    css += `\n  /* ${name} tonal scale */\n`;
+    for (const step of scale.scale || []) {
+      css += `  --color-${name}-${step.step}: ${step.hex};\n`;
+    }
+  }
+
+  css += '}\n';
+  return css;
+}
+
+function generatePrimitiveSpacing(spacing) {
+  let css = cssHeader('Primitive Spacing Tokens — 4px grid');
+  css += ':root {\n';
+
+  for (const step of spacing.scale || []) {
+    const varName = `--spacing-${step.name.replace('.', '_')}`;
+    css += `  ${varName}: ${step.rem}rem; /* ${step.px}px */\n`;
+  }
+
+  css += '}\n';
+  return css;
+}
+
+function generatePrimitiveTypography(typography) {
+  let css = cssHeader('Primitive Typography Tokens');
+  css += ':root {\n';
+
+  // Font families
+  css += '\n  /* Font Families */\n';
+  for (const family of typography.families || []) {
+    css += `  --font-family-${family.role}: '${family.name}', ${family.role === 'mono' ? 'monospace' : 'sans-serif'};\n`;
+  }
+
+  // Font sizes
+  css += '\n  /* Font Sizes */\n';
+  for (const size of typography.sizeScale || []) {
+    css += `  --font-size-${size.name}: ${size.rem}rem; /* ${size.px}px */\n`;
+  }
+
+  // Font weights
+  css += '\n  /* Font Weights */\n';
+  for (const weight of typography.weights || []) {
+    css += `  --font-weight-${weight.name}: ${weight.value};\n`;
+  }
+
+  // Line heights
+  css += '\n  /* Line Heights */\n';
+  for (const lh of typography.lineHeights || []) {
+    css += `  --line-height-${lh.name}: ${lh.value};\n`;
+  }
+
+  // Letter spacing
+  css += '\n  /* Letter Spacing */\n';
+  for (const ls of typography.letterSpacing || []) {
+    css += `  --letter-spacing-${ls.name}: ${ls.em}em;\n`;
+  }
+
+  css += '}\n';
+  return css;
+}
+
+// ── Generate Shadows & Radius ──────────────────────────────────────────────
+
+function generateShadows(shadows) {
+  let css = cssHeader('Shadow Tokens — Depth Levels');
+  css += ':root {\n';
+  css += '  --color-shadow: rgba(0, 0, 0, 0.1);\n';
+  css += '  --color-shadow-strong: rgba(0, 0, 0, 0.25);\n\n';
+
+  for (const shadow of shadows.shadows || []) {
+    css += `  ${shadow.cssVar}: ${shadow.css};\n`;
+  }
+
+  for (const shadow of shadows.innerShadows || []) {
+    css += `  ${shadow.cssVar}: ${shadow.css};\n`;
+  }
+
+  css += '\n  --shadow-none: none;\n';
+  css += '}\n';
+  return css;
+}
+
+function generateRadius(radius) {
+  let css = cssHeader('Border Radius Tokens — Harmonic Scale');
+  css += ':root {\n';
+
+  for (const r of radius.scale || []) {
+    const value = r.name === 'full' ? '9999px' : `${r.rem}`;
+    css += `  ${r.cssVar}: ${value}; /* ${r.px}px */\n`;
+  }
+
+  css += '}\n';
+  return css;
+}
+
+// ── Generate Semantic Colors ───────────────────────────────────────────────
+
+function generateSemanticColors(colors) {
+  let css = cssHeader('Semantic Color Tokens');
+  css += ':root {\n';
+
+  // Try to identify semantic colors from the palette
+  const palette = colors.palette || [];
+
+  // Find accent/brand color (highest-count chromatic)
+  const chromatic = palette.filter((c) => !['white', 'black'].includes(c.classification) && !c.classification.startsWith('gray'));
+  const accent = chromatic[0];
+
+  css += '  /* Brand */\n';
+  if (accent) css += `  --color-primary: ${accent.hex};\n`;
+  if (chromatic[1]) css += `  --color-secondary: ${chromatic[1].hex};\n`;
+
+  // Semantic states
+  const findByClass = (cls) => palette.find((c) => c.classification === cls);
+  const green = findByClass('green') || findByClass('teal');
+  const red = findByClass('red') || findByClass('pink');
+  const yellow = findByClass('yellow') || findByClass('orange');
+  const blue = findByClass('blue') || findByClass('indigo');
+
+  css += '\n  /* Feedback */\n';
+  if (green) css += `  --color-success: ${green.hex};\n`;
+  if (red) css += `  --color-destructive: ${red.hex};\n`;
+  if (yellow) css += `  --color-warning: ${yellow.hex};\n`;
+  if (blue) css += `  --color-info: ${blue.hex};\n`;
+
+  // Surfaces
+  css += '\n  /* Surfaces */\n';
+  css += '  --color-background: #ffffff;\n';
+  css += '  --color-foreground: #0a0a0a;\n';
+  css += '  --color-muted: #f5f5f5;\n';
+  css += '  --color-muted-foreground: #737373;\n';
+  css += '  --color-border: #e5e5e5;\n';
+  css += '  --color-ring: var(--color-primary);\n';
+
+  css += '}\n';
+  return css;
+}
+
+// ── Generate Themes ────────────────────────────────────────────────────────
+
+function generateLightTheme() {
+  let css = cssHeader('Light Theme');
+  css += '[data-theme="light"], :root {\n';
+  css += '  color-scheme: light;\n';
+  css += '  --color-background: #ffffff;\n';
+  css += '  --color-foreground: #0a0a0a;\n';
+  css += '  --color-muted: #f5f5f5;\n';
+  css += '  --color-muted-foreground: #737373;\n';
+  css += '  --color-border: #e5e5e5;\n';
+  css += '  --color-card: #ffffff;\n';
+  css += '  --color-card-foreground: #0a0a0a;\n';
+  css += '  --color-popover: #ffffff;\n';
+  css += '  --color-popover-foreground: #0a0a0a;\n';
+  css += '}\n';
+  return css;
+}
+
+function generateDarkTheme() {
+  let css = cssHeader('Dark Theme');
+  css += '[data-theme="dark"] {\n';
+  css += '  color-scheme: dark;\n';
+  css += '  --color-background: #0a0a0a;\n';
+  css += '  --color-foreground: #fafafa;\n';
+  css += '  --color-muted: #262626;\n';
+  css += '  --color-muted-foreground: #a3a3a3;\n';
+  css += '  --color-border: #262626;\n';
+  css += '  --color-card: #0a0a0a;\n';
+  css += '  --color-card-foreground: #fafafa;\n';
+  css += '  --color-popover: #0a0a0a;\n';
+  css += '  --color-popover-foreground: #fafafa;\n';
+  css += '}\n';
+  return css;
+}
+
+// ── Generate Tailwind v4 @theme ────────────────────────────────────────────
+
+function generateTailwindTheme(colors, spacing, typography, shadows, radius) {
+  let css = cssHeader('Tailwind v4 @theme — Generated from curated tokens');
+  css += '@theme {\n';
+
+  // Colors
+  css += '  /* Colors */\n';
+  const palette = colors.palette || [];
+  const chromatic = palette.filter((c) => !['white', 'black'].includes(c.classification) && !c.classification.startsWith('gray'));
+  if (chromatic[0]) css += `  --color-primary: ${chromatic[0].hex};\n`;
+  if (chromatic[1]) css += `  --color-secondary: ${chromatic[1].hex};\n`;
+
+  // Tonal scale for primary
+  const tonalScales = colors.tonalScales || {};
+  for (const [name, scale] of Object.entries(tonalScales)) {
+    for (const step of (scale.scale || []).slice(0, 5)) {
+      css += `  --color-${name}-${step.step}: ${step.hex};\n`;
+    }
+  }
+
+  // Spacing
+  css += '\n  /* Spacing */\n';
+  for (const step of (spacing.scale || []).slice(0, 20)) {
+    css += `  --spacing-${step.name.replace('.', '_')}: ${step.rem}rem;\n`;
+  }
+
+  // Typography
+  css += '\n  /* Font Families */\n';
+  for (const family of typography.families || []) {
+    css += `  --font-${family.role}: '${family.name}', ${family.role === 'mono' ? 'monospace' : 'sans-serif'};\n`;
+  }
+
+  css += '\n  /* Font Sizes */\n';
+  for (const size of typography.sizeScale || []) {
+    css += `  --text-${size.name}: ${size.rem}rem;\n`;
+  }
+
+  // Radius
+  css += '\n  /* Border Radius */\n';
+  for (const r of radius.scale || []) {
+    const name = r.name.replace('radius-', '');
+    const value = name === 'full' ? '9999px' : r.rem;
+    css += `  --radius-${name}: ${value};\n`;
+  }
+
+  // Shadows
+  css += '\n  /* Shadows */\n';
+  for (const shadow of shadows.shadows || []) {
+    css += `  ${shadow.cssVar}: ${shadow.css};\n`;
+  }
+
+  css += '}\n';
+  return css;
+}
+
+// ── Main ───────────────────────────────────────────────────────────────────
+
+function main() {
+  console.log('=== CSS TOKEN GENERATION ===\n');
+
+  const colors = readCurated('curated-colors.json');
+  const spacing = readCurated('curated-spacing.json');
+  const typography = readCurated('curated-typography.json');
+  const shadows = readCurated('curated-shadows.json');
+  const radius = readCurated('curated-radius.json');
+
+  console.log('Generating CSS files:');
+
+  // Primitives
+  writeCSS('tokens/primitives/colors.css', generatePrimitiveColors(colors));
+  writeCSS('tokens/primitives/spacing.css', generatePrimitiveSpacing(spacing));
+  writeCSS('tokens/primitives/typography.css', generatePrimitiveTypography(typography));
+
+  // Semantic
+  writeCSS('tokens/semantic/colors.css', generateSemanticColors(colors));
+
+  // Component
+  writeCSS('tokens/component/shadows.css', generateShadows(shadows));
+  writeCSS('tokens/component/radius.css', generateRadius(radius));
+
+  // Themes
+  writeCSS('themes/light.css', generateLightTheme());
+  writeCSS('themes/dark.css', generateDarkTheme());
+
+  // Tailwind v4
+  writeCSS('tailwind.theme.css', generateTailwindTheme(colors, spacing, typography, shadows, radius));
+
+  console.log('\n=== TOKEN GENERATION COMPLETE ===');
+  console.log(`Output directory: ${OUTPUT_DIR}`);
+}
+
+main();

package/pro/squads/design/scripts/design-system/sync_design_manifest.cjs

@@ -0,0 +1,27 @@
+#!/usr/bin/env node
+
+const process = require('process');
+const {
+  buildGeneratedConfig,
+  getDesignPaths,
+  readYaml,
+  writeYaml
+} = require('./design_manifest_lib.cjs');
+
+function main() {
+  const { squadPath, configPath } = getDesignPaths(process.cwd());
+  const squad = readYaml(squadPath);
+  const config = readYaml(configPath);
+
+  const generated = buildGeneratedConfig(squad, config);
+  writeYaml(configPath, generated);
+
+  console.log('PASS: synced squads/design/config.yaml from squads/design/squad.yaml');
+  console.log(`  agents=${generated.agents.length}`);
+  console.log(`  tasks=${generated.tasks.length}`);
+  console.log(`  templates=${generated.templates.length}`);
+  console.log(`  checklists=${generated.checklists.length}`);
+  console.log(`  workflows=${generated.workflows.length}`);
+}
+
+main();