imhcode 1.0.0

package/skills/ui-ux-pro-max/.claude/skills/brand/scripts/inject-brand-context.cjs

@@ -0,0 +1,349 @@
+#!/usr/bin/env node
+/**
+ * inject-brand-context.cjs
+ *
+ * Extracts brand context from markdown brand guidelines
+ * and outputs a formatted system prompt addition.
+ *
+ * Usage:
+ *   node inject-brand-context.cjs [path-to-guidelines]
+ *   node inject-brand-context.cjs --json [path-to-guidelines]
+ *
+ * Default path: docs/brand-guidelines.md
+ */
+
+const fs = require("fs");
+const path = require("path");
+
+// Default brand guidelines path
+const DEFAULT_GUIDELINES_PATH = "docs/brand-guidelines.md";
+
+/**
+ * Extract hex colors from text
+ */
+function extractHexColors(text) {
+  const hexPattern = /#[0-9A-Fa-f]{6}\b/g;
+  return [...new Set(text.match(hexPattern) || [])];
+}
+
+/**
+ * Extract color data from markdown table
+ */
+function extractColorsFromTable(content) {
+  const colors = {
+    primary: [],
+    secondary: [],
+    neutral: [],
+    semantic: [],
+  };
+
+  // Find color tables
+  const primaryMatch = content.match(
+    /### Primary Colors[\s\S]*?\|[\s\S]*?(?=###|$)/i
+  );
+  const secondaryMatch = content.match(
+    /### Secondary Colors[\s\S]*?\|[\s\S]*?(?=###|$)/i
+  );
+  const neutralMatch = content.match(
+    /### Neutral[\s\S]*?\|[\s\S]*?(?=###|$)/i
+  );
+  const semanticMatch = content.match(
+    /### Semantic[\s\S]*?\|[\s\S]*?(?=###|$)/i
+  );
+
+  if (primaryMatch) colors.primary = extractHexColors(primaryMatch[0]);
+  if (secondaryMatch) colors.secondary = extractHexColors(secondaryMatch[0]);
+  if (neutralMatch) colors.neutral = extractHexColors(neutralMatch[0]);
+  if (semanticMatch) colors.semantic = extractHexColors(semanticMatch[0]);
+
+  return colors;
+}
+
+/**
+ * Extract typography info
+ */
+function extractTypography(content) {
+  const typography = {
+    heading: null,
+    body: null,
+    mono: null,
+  };
+
+  // Look for font definitions
+  const headingMatch = content.match(/--font-heading:\s*['"]([^'"]+)['"]/);
+  const bodyMatch = content.match(/--font-body:\s*['"]([^'"]+)['"]/);
+  const monoMatch = content.match(/--font-mono:\s*['"]([^'"]+)['"]/);
+
+  // Fallback: look in tables
+  const fontStackMatch = content.match(/### Font Stack[\s\S]*?(?=###|##|$)/i);
+  if (fontStackMatch) {
+    const stackText = fontStackMatch[0];
+    const headingAlt = stackText.match(/heading[^']*['"]([^'"]+)['"]/i);
+    const bodyAlt = stackText.match(/body[^']*['"]([^'"]+)['"]/i);
+
+    if (headingAlt) typography.heading = headingAlt[1];
+    if (bodyAlt) typography.body = bodyAlt[1];
+  }
+
+  if (headingMatch) typography.heading = headingMatch[1];
+  if (bodyMatch) typography.body = bodyMatch[1];
+  if (monoMatch) typography.mono = monoMatch[1];
+
+  return typography;
+}
+
+/**
+ * Extract voice/tone information
+ */
+function extractVoice(content) {
+  const voice = {
+    traits: [],
+    prohibited: [],
+    personality: "",
+  };
+
+  // Extract personality traits from table
+  const personalityMatch = content.match(
+    /### Brand Personality[\s\S]*?\|[\s\S]*?(?=###|##|$)/i
+  );
+  if (personalityMatch) {
+    const traits = personalityMatch[0].match(
+      /\*\*([^*]+)\*\*\s*\|\s*([^|]+)/g
+    );
+    if (traits) {
+      voice.traits = traits.map((t) => {
+        const match = t.match(/\*\*([^*]+)\*\*/);
+        return match ? match[1].trim() : "";
+      }).filter(Boolean);
+    }
+  }
+
+  // Extract prohibited terms
+  const prohibitedMatch = content.match(
+    /### Prohibited[\s\S]*?(?=###|##|$)/i
+  );
+  if (prohibitedMatch) {
+    const terms = prohibitedMatch[0].match(/\|\s*([^|]+)\s*\|/g);
+    if (terms) {
+      voice.prohibited = terms
+        .map((t) => t.replace(/\|/g, "").trim())
+        .filter((t) => t && !t.includes("Avoid") && !t.includes("---"));
+    }
+  }
+
+  // Fallback: look for Forbidden Phrases
+  const forbiddenMatch = content.match(
+    /### Forbidden Phrases[\s\S]*?(?=###|##|$)/i
+  );
+  if (forbiddenMatch && voice.prohibited.length === 0) {
+    const items = forbiddenMatch[0].match(/-\s*["']?([^"'\n(]+)/g);
+    if (items) {
+      voice.prohibited = items
+        .map((item) => item.replace(/^-\s*["']?/, "").trim())
+        .filter(Boolean);
+    }
+  }
+
+  voice.personality = voice.traits.join(", ");
+
+  return voice;
+}
+
+/**
+ * Extract core attributes
+ */
+function extractCoreAttributes(content) {
+  const attributes = [];
+
+  const attributesMatch = content.match(
+    /### Core Attributes[\s\S]*?\|[\s\S]*?(?=###|##|$)/i
+  );
+  if (attributesMatch) {
+    const rows = attributesMatch[0].match(
+      /\|\s*\*\*([^*]+)\*\*\s*\|\s*([^|]+)\|/g
+    );
+    if (rows) {
+      rows.forEach((row) => {
+        const match = row.match(/\*\*([^*]+)\*\*\s*\|\s*([^|]+)/);
+        if (match) {
+          attributes.push({
+            name: match[1].trim(),
+            description: match[2].trim(),
+          });
+        }
+      });
+    }
+  }
+
+  return attributes;
+}
+
+/**
+ * Extract AI image generation context
+ */
+function extractImageStyle(content) {
+  const imageStyle = {
+    basePrompt: "",
+    keywords: [],
+    mood: [],
+    donts: [],
+    examplePrompts: [],
+  };
+
+  // Extract base prompt template (content between ``` blocks after "Base Prompt Template")
+  const basePromptMatch = content.match(
+    /### Base Prompt Template[\s\S]*?```\n?([\s\S]*?)```/i
+  );
+  if (basePromptMatch) {
+    imageStyle.basePrompt = basePromptMatch[1].trim().replace(/\n/g, " ");
+  }
+
+  // Extract style keywords from table
+  const keywordsMatch = content.match(
+    /### Style Keywords[\s\S]*?\|[\s\S]*?(?=###|##|$)/i
+  );
+  if (keywordsMatch) {
+    const keywordRows = keywordsMatch[0].match(/\|\s*\*\*[^*]+\*\*\s*\|\s*([^|]+)\|/g);
+    if (keywordRows) {
+      keywordRows.forEach((row) => {
+        const match = row.match(/\|\s*\*\*[^*]+\*\*\s*\|\s*([^|]+)\|/);
+        if (match) {
+          const keywords = match[1].split(",").map((k) => k.trim()).filter(Boolean);
+          imageStyle.keywords.push(...keywords);
+        }
+      });
+    }
+  }
+
+  // Extract visual mood descriptors (bullet points)
+  const moodMatch = content.match(
+    /### Visual Mood Descriptors[\s\S]*?(?=###|##|$)/i
+  );
+  if (moodMatch) {
+    const moodItems = moodMatch[0].match(/-\s*([^\n]+)/g);
+    if (moodItems) {
+      imageStyle.mood = moodItems.map((item) => item.replace(/^-\s*/, "").trim());
+    }
+  }
+
+  // Extract visual don'ts from table
+  const dontsMatch = content.match(
+    /### Visual Don'ts[\s\S]*?\|[\s\S]*?(?=###|##|$)/i
+  );
+  if (dontsMatch) {
+    const dontRows = dontsMatch[0].match(/\|\s*([^|]+)\s*\|\s*([^|]+)\s*\|/g);
+    if (dontRows) {
+      dontRows.forEach((row) => {
+        const match = row.match(/\|\s*([^|]+)\s*\|\s*([^|]+)\s*\|/);
+        if (match && !match[1].includes("Avoid") && !match[1].includes("---")) {
+          imageStyle.donts.push(match[1].trim());
+        }
+      });
+    }
+  }
+
+  // Extract example prompts (content between ``` blocks after specific headers)
+  const exampleMatch = content.match(/### Example Prompts[\s\S]*?(?=##|$)/i);
+  if (exampleMatch) {
+    const prompts = exampleMatch[0].match(/\*\*([^*]+)\*\*:\s*```\n?([\s\S]*?)```/g);
+    if (prompts) {
+      prompts.forEach((p) => {
+        const match = p.match(/\*\*([^*]+)\*\*:\s*```\n?([\s\S]*?)```/);
+        if (match) {
+          imageStyle.examplePrompts.push({
+            type: match[1].trim(),
+            prompt: match[2].trim().replace(/\n/g, " "),
+          });
+        }
+      });
+    }
+  }
+
+  return imageStyle;
+}
+
+/**
+ * Generate system prompt addition
+ */
+function generatePromptAddition(brandContext) {
+  const { colors, typography, voice, attributes, imageStyle } = brandContext;
+
+  let prompt = `
+BRAND CONTEXT:
+==============
+
+VISUAL IDENTITY:
+- Primary Colors: ${colors.primary.join(", ") || "Not specified"}
+- Secondary Colors: ${colors.secondary.join(", ") || "Not specified"}
+- Typography: ${typography.heading || typography.body || "System fonts"}
+
+BRAND VOICE:
+- Personality: ${voice.personality || "Professional"}
+- Core Attributes: ${attributes.map((a) => a.name).join(", ") || "Not specified"}
+
+CONTENT RULES:
+- Prohibited Terms: ${voice.prohibited.join(", ") || "None specified"}
+`;
+
+  // Add image style context if available
+  if (imageStyle && imageStyle.basePrompt) {
+    prompt += `
+IMAGE GENERATION:
+- Base Prompt: ${imageStyle.basePrompt}
+- Style Keywords: ${imageStyle.keywords.slice(0, 10).join(", ") || "Not specified"}
+- Visual Mood: ${imageStyle.mood.slice(0, 5).join("; ") || "Not specified"}
+- Avoid: ${imageStyle.donts.join(", ") || "None specified"}
+`;
+  }
+
+  prompt += `
+Apply these brand guidelines to all generated content.
+Maintain consistent voice, colors, and messaging.
+`;
+
+  return prompt.trim();
+}
+
+/**
+ * Main function
+ */
+function main() {
+  const args = process.argv.slice(2);
+  const jsonOutput = args.includes("--json");
+  const guidelinesPath = args.find((a) => !a.startsWith("--")) || DEFAULT_GUIDELINES_PATH;
+
+  // Resolve path
+  const resolvedPath = path.isAbsolute(guidelinesPath)
+    ? guidelinesPath
+    : path.join(process.cwd(), guidelinesPath);
+
+  // Check if file exists
+  if (!fs.existsSync(resolvedPath)) {
+    console.error(`Error: Brand guidelines not found at ${resolvedPath}`);
+    console.error(`Create brand guidelines at ${DEFAULT_GUIDELINES_PATH} or specify a path.`);
+    process.exit(1);
+  }
+
+  // Read file
+  const content = fs.readFileSync(resolvedPath, "utf-8");
+
+  // Extract brand context
+  const brandContext = {
+    colors: extractColorsFromTable(content),
+    typography: extractTypography(content),
+    voice: extractVoice(content),
+    attributes: extractCoreAttributes(content),
+    imageStyle: extractImageStyle(content),
+    source: resolvedPath,
+    extractedAt: new Date().toISOString(),
+  };
+
+  // Output
+  if (jsonOutput) {
+    console.log(JSON.stringify(brandContext, null, 2));
+  } else {
+    console.log(generatePromptAddition(brandContext));
+  }
+}
+
+main();

package/skills/ui-ux-pro-max/.claude/skills/brand/scripts/sync-brand-to-tokens.cjs

@@ -0,0 +1,266 @@
+#!/usr/bin/env node
+/**
+ * sync-brand-to-tokens.cjs
+ *
+ * Syncs brand-guidelines.md colors → design-tokens.json → design-tokens.css
+ *
+ * Usage:
+ *   node sync-brand-to-tokens.cjs
+ *   node sync-brand-to-tokens.cjs --dry-run
+ */
+
+const fs = require('fs');
+const path = require('path');
+const { execSync } = require('child_process');
+
+// Paths
+const BRAND_GUIDELINES = 'docs/brand-guidelines.md';
+const DESIGN_TOKENS_JSON = 'assets/design-tokens.json';
+const DESIGN_TOKENS_CSS = 'assets/design-tokens.css';
+const GENERATE_TOKENS_SCRIPT = '.claude/skills/design-system/scripts/generate-tokens.cjs';
+
+/**
+ * Extract color info from brand guidelines markdown
+ */
+function extractColorsFromMarkdown(content) {
+  const colors = {
+    primary: { name: 'primary', shades: {} },
+    secondary: { name: 'secondary', shades: {} },
+    accent: { name: 'accent', shades: {} }
+  };
+
+  // Extract primary color name and hex from Quick Reference table
+  const quickRefMatch = content.match(/Primary Color\s*\|\s*#([A-Fa-f0-9]{6})\s*\(([^)]+)\)/);
+  if (quickRefMatch) {
+    colors.primary.name = quickRefMatch[2].toLowerCase().replace(/\s+/g, '-');
+    colors.primary.base = `#${quickRefMatch[1]}`;
+  }
+
+  const secondaryMatch = content.match(/Secondary Color\s*\|\s*#([A-Fa-f0-9]{6})\s*\(([^)]+)\)/);
+  if (secondaryMatch) {
+    colors.secondary.name = secondaryMatch[2].toLowerCase().replace(/\s+/g, '-');
+    colors.secondary.base = `#${secondaryMatch[1]}`;
+  }
+
+  const accentMatch = content.match(/Accent Color\s*\|\s*#([A-Fa-f0-9]{6})\s*\(([^)]+)\)/);
+  if (accentMatch) {
+    colors.accent.name = accentMatch[2].toLowerCase().replace(/\s+/g, '-');
+    colors.accent.base = `#${accentMatch[1]}`;
+  }
+
+  // Extract all shades from Primary Colors table
+  const primarySection = content.match(/### Primary Colors[\s\S]*?\|[\s\S]*?(?=###|$)/i);
+  if (primarySection) {
+    const hexMatches = primarySection[0].matchAll(/\*\*([^*]+)\*\*\s*\|\s*#([A-Fa-f0-9]{6})/g);
+    for (const match of hexMatches) {
+      const name = match[1].trim().toLowerCase();
+      const hex = `#${match[2]}`;
+      if (name.includes('dark')) colors.primary.dark = hex;
+      else if (name.includes('light')) colors.primary.light = hex;
+      else colors.primary.base = hex;
+    }
+  }
+
+  // Extract secondary shades
+  const secondarySection = content.match(/### Secondary Colors[\s\S]*?\|[\s\S]*?(?=###|$)/i);
+  if (secondarySection) {
+    const hexMatches = secondarySection[0].matchAll(/\*\*([^*]+)\*\*\s*\|\s*#([A-Fa-f0-9]{6})/g);
+    for (const match of hexMatches) {
+      const name = match[1].trim().toLowerCase();
+      const hex = `#${match[2]}`;
+      if (name.includes('dark')) colors.secondary.dark = hex;
+      else if (name.includes('light')) colors.secondary.light = hex;
+      else colors.secondary.base = hex;
+    }
+  }
+
+  // Extract accent shades
+  const accentSection = content.match(/### Accent Colors[\s\S]*?\|[\s\S]*?(?=###|$)/i);
+  if (accentSection) {
+    const hexMatches = accentSection[0].matchAll(/\*\*([^*]+)\*\*\s*\|\s*#([A-Fa-f0-9]{6})/g);
+    for (const match of hexMatches) {
+      const name = match[1].trim().toLowerCase();
+      const hex = `#${match[2]}`;
+      if (name.includes('dark')) colors.accent.dark = hex;
+      else if (name.includes('light')) colors.accent.light = hex;
+      else colors.accent.base = hex;
+    }
+  }
+
+  return colors;
+}
+
+/**
+ * Generate color scale from base color (simple approach)
+ */
+function generateColorScale(baseHex, darkHex, lightHex) {
+  // Use provided shades or generate approximations
+  return {
+    "50": { "$value": lightHex || adjustBrightness(baseHex, 0.9), "$type": "color" },
+    "100": { "$value": lightHex || adjustBrightness(baseHex, 0.8), "$type": "color" },
+    "200": { "$value": adjustBrightness(baseHex, 0.6), "$type": "color" },
+    "300": { "$value": adjustBrightness(baseHex, 0.4), "$type": "color" },
+    "400": { "$value": adjustBrightness(baseHex, 0.2), "$type": "color" },
+    "500": { "$value": baseHex, "$type": "color" },
+    "600": { "$value": darkHex || adjustBrightness(baseHex, -0.15), "$type": "color" },
+    "700": { "$value": adjustBrightness(baseHex, -0.3), "$type": "color" },
+    "800": { "$value": adjustBrightness(baseHex, -0.45), "$type": "color" },
+    "900": { "$value": adjustBrightness(baseHex, -0.6), "$type": "color" }
+  };
+}
+
+/**
+ * Adjust hex color brightness
+ */
+function adjustBrightness(hex, percent) {
+  const num = parseInt(hex.replace('#', ''), 16);
+  const r = Math.min(255, Math.max(0, (num >> 16) + Math.round(255 * percent)));
+  const g = Math.min(255, Math.max(0, ((num >> 8) & 0x00FF) + Math.round(255 * percent)));
+  const b = Math.min(255, Math.max(0, (num & 0x0000FF) + Math.round(255 * percent)));
+  return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, '0').toUpperCase()}`;
+}
+
+/**
+ * Update design tokens JSON
+ */
+function updateDesignTokens(tokens, colors) {
+  // Update brand name
+  const brandName = `ClaudeKit Marketing - ${colors.primary.name.split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ')}`;
+  tokens.brand = brandName;
+
+  // Update primitive colors with new names
+  const primitiveColors = tokens.primitive?.color || {};
+
+  // Remove old color keys, add new ones
+  delete primitiveColors.coral;
+  delete primitiveColors.purple;
+  delete primitiveColors.mint;
+
+  // Add new named colors
+  primitiveColors[colors.primary.name] = generateColorScale(
+    colors.primary.base,
+    colors.primary.dark,
+    colors.primary.light
+  );
+  primitiveColors[colors.secondary.name] = generateColorScale(
+    colors.secondary.base,
+    colors.secondary.dark,
+    colors.secondary.light
+  );
+  primitiveColors[colors.accent.name] = generateColorScale(
+    colors.accent.base,
+    colors.accent.dark,
+    colors.accent.light
+  );
+
+  tokens.primitive.color = primitiveColors;
+
+  // Update ALL semantic color references
+  if (tokens.semantic?.color) {
+    const sem = tokens.semantic.color;
+    const p = colors.primary.name;
+    const s = colors.secondary.name;
+    const a = colors.accent.name;
+
+    // Primary variants
+    sem.primary = { "$value": `{primitive.color.${p}.500}`, "$type": "color" };
+    sem['primary-hover'] = { "$value": `{primitive.color.${p}.600}`, "$type": "color" };
+    sem['primary-active'] = { "$value": `{primitive.color.${p}.700}`, "$type": "color" };
+    sem['primary-light'] = { "$value": `{primitive.color.${p}.400}`, "$type": "color" };
+    sem['primary-lighter'] = { "$value": `{primitive.color.${p}.100}`, "$type": "color" };
+    sem['primary-dark'] = { "$value": `{primitive.color.${p}.600}`, "$type": "color" };
+
+    // Secondary variants
+    sem.secondary = { "$value": `{primitive.color.${s}.500}`, "$type": "color" };
+    sem['secondary-hover'] = { "$value": `{primitive.color.${s}.600}`, "$type": "color" };
+    sem['secondary-light'] = { "$value": `{primitive.color.${s}.300}`, "$type": "color" };
+    sem['secondary-dark'] = { "$value": `{primitive.color.${s}.600}`, "$type": "color" };
+
+    // Accent variants
+    sem.accent = { "$value": `{primitive.color.${a}.500}`, "$type": "color" };
+    sem['accent-hover'] = { "$value": `{primitive.color.${a}.600}`, "$type": "color" };
+    sem['accent-light'] = { "$value": `{primitive.color.${a}.300}`, "$type": "color" };
+
+    // Status colors (use accent for success, primary for error/info)
+    sem.success = { "$value": `{primitive.color.${a}.500}`, "$type": "color" };
+    sem['success-light'] = { "$value": `{primitive.color.${a}.300}`, "$type": "color" };
+    sem.error = { "$value": `{primitive.color.${p}.500}`, "$type": "color" };
+    sem['error-light'] = { "$value": `{primitive.color.${p}.300}`, "$type": "color" };
+    sem.info = { "$value": `{primitive.color.${s}.500}`, "$type": "color" };
+    sem['info-light'] = { "$value": `{primitive.color.${s}.300}`, "$type": "color" };
+  }
+
+  // Update component references (button uses primary color with opacity)
+  if (tokens.component?.button?.secondary) {
+    const primaryBase = colors.primary.base;
+    tokens.component.button.secondary['bg-hover'] = {
+      "$value": `${primaryBase}1A`,
+      "$type": "color"
+    };
+  }
+
+  return tokens;
+}
+
+/**
+ * Main
+ */
+function main() {
+  const dryRun = process.argv.includes('--dry-run');
+
+  console.log('🔄 Syncing brand guidelines → design tokens\n');
+
+  // Read brand guidelines
+  const guidelinesPath = path.resolve(process.cwd(), BRAND_GUIDELINES);
+  if (!fs.existsSync(guidelinesPath)) {
+    console.error(`❌ Brand guidelines not found: ${guidelinesPath}`);
+    process.exit(1);
+  }
+  const guidelinesContent = fs.readFileSync(guidelinesPath, 'utf-8');
+
+  // Extract colors
+  const colors = extractColorsFromMarkdown(guidelinesContent);
+  console.log('📊 Extracted colors:');
+  console.log(`   Primary: ${colors.primary.name} (${colors.primary.base})`);
+  console.log(`   Secondary: ${colors.secondary.name} (${colors.secondary.base})`);
+  console.log(`   Accent: ${colors.accent.name} (${colors.accent.base})\n`);
+
+  // Read existing tokens
+  const tokensPath = path.resolve(process.cwd(), DESIGN_TOKENS_JSON);
+  let tokens = {};
+  if (fs.existsSync(tokensPath)) {
+    tokens = JSON.parse(fs.readFileSync(tokensPath, 'utf-8'));
+  }
+
+  // Update tokens
+  tokens = updateDesignTokens(tokens, colors);
+
+  if (dryRun) {
+    console.log('📋 Would update design-tokens.json:');
+    console.log(JSON.stringify(tokens.primitive.color, null, 2).slice(0, 500) + '...');
+    console.log('\n⏭️  Dry run - no files changed');
+    return;
+  }
+
+  // Write updated tokens
+  fs.writeFileSync(tokensPath, JSON.stringify(tokens, null, 2));
+  console.log(`✅ Updated: ${DESIGN_TOKENS_JSON}`);
+
+  // Regenerate CSS
+  const generateScript = path.resolve(process.cwd(), GENERATE_TOKENS_SCRIPT);
+  if (fs.existsSync(generateScript)) {
+    try {
+      execSync(`node ${generateScript} --config ${DESIGN_TOKENS_JSON} -o ${DESIGN_TOKENS_CSS}`, {
+        cwd: process.cwd(),
+        stdio: 'inherit'
+      });
+      console.log(`✅ Regenerated: ${DESIGN_TOKENS_CSS}`);
+    } catch (e) {
+      console.error('⚠️  Failed to regenerate CSS:', e.message);
+    }
+  }
+
+  console.log('\n✨ Brand sync complete!');
+}
+
+main();