Sync from nextlevelbuilder

.claude-plugin/marketplace.json

@@ -5,15 +5,15 @@
     "name": "nextlevelbuilder"
   },
   "metadata": {
-    "description": "UI/UX design intelligence skill with 67 styles, 96 palettes, 57 font pairings, 25 charts, and 13 stack guidelines",
-    "version": "2.2.1"
+    "description": "UI/UX design intelligence skill with 84 styles, 161 palettes, 73 font pairings, 25 charts, and 17 stack guidelines",
+    "version": "2.6.2"
   },
   "plugins": [
     {
       "name": "ui-ux-pro-max",
       "source": "./",
-      "description": "Professional UI/UX design intelligence for AI coding assistants. Includes searchable databases of styles, colors, typography, charts, and UX guidelines for React, Next.js, Astro, Vue, Nuxt.js, Nuxt UI, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and Jetpack Compose.",
-      "version": "2.2.1",
+      "description": "Professional UI/UX design intelligence for AI coding assistants. Includes searchable databases of styles, colors, typography, charts, and UX guidelines for React, Next.js, Astro, Vue, Nuxt.js, Nuxt UI, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, Jetpack Compose, Angular, Laravel, JavaFX, and Three.js.",
+      "version": "2.6.2",
       "author": {
         "name": "nextlevelbuilder"
       },

.claude-plugin/plugin.json

@@ -1,11 +1,11 @@
 {
   "name": "ui-ux-pro-max",
-  "description": "UI/UX design intelligence. 67 styles, 161 palettes, 57 font pairings, 25 charts, 15 stacks (React, Next.js, Vue, Svelte, Astro, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, Nuxt, Jetpack Compose). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.",
-  "version": "2.5.0",
+  "description": "UI/UX design intelligence. 84 styles, 161 palettes, 73 font pairings, 25 charts, 17 stacks (React, Next.js, Vue, Nuxt.js, Nuxt UI, Svelte, Astro, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, Jetpack Compose, Angular, Laravel, JavaFX, Three.js). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.",
+  "version": "2.6.2",
   "author": {
     "name": "nextlevelbuilder"
   },
   "license": "MIT",
   "keywords": ["ui", "ux", "design", "styles", "typography", "color-palette", "accessibility", "charts", "components"],
-  "skills": ["./.claude/skills/ui-ux-pro-max"]
+  "skills": "./.claude/skills/"
 }

.claude/skills/banner-design/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: ckm:banner-design
+name: banner-design
 description: "Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with AI-generated visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, website hero, print. Styles: minimalist, gradient, bold typography, photo-based, illustrated, geometric, retro, glassmorphism, 3D, neon, duotone, editorial, collage. Uses ui-ux-pro-max, frontend-design, ai-artist, ai-multimodal skills."
 argument-hint: "[platform] [style] [dimensions]"
 license: MIT
@@ -21,6 +21,10 @@ Design banners across social, ads, web, and print formats. Generates multiple ar
 - Event/print banner design
 - Creative asset generation for campaigns
 
+## Prerequisites
+
+**Python:** This skill uses Python scripts. On Windows, use `python` instead of `python3` (e.g., `python scripts/search.py` instead of `python3 scripts/search.py`).
+
 ## Workflow
 
 ### Step 1: Gather Requirements (AskUserQuestion)

.claude/skills/brand/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: ckm:brand
+name: brand
 description: Brand voice, visual identity, messaging frameworks, asset management, brand consistency. Activate for branded content, tone of voice, marketing assets, brand compliance, style guides.
 argument-hint: "[update|review|create] [args]"
 metadata:

.claude/skills/brand/scripts/sync-brand-to-tokens.cjs

@@ -11,7 +11,7 @@
 
 const fs = require('fs');
 const path = require('path');
-const { execSync } = require('child_process');
+const { execFileSync } = require('child_process');
 
 // Paths
 const BRAND_GUIDELINES = 'docs/brand-guidelines.md';
@@ -29,61 +29,47 @@ function extractColorsFromMarkdown(content) {
     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]}`;
-  }
+  // Match a "| Label | #hex |" markdown table row. Bold around the label
+  // (**Label**) is optional, so this handles both the bundled starter template
+  // ("| Primary Blue | #2563EB |") and bolded variants.
+  const rowRe = /\|\s*\*{0,2}([^*|]+?)\*{0,2}\s*\|\s*#([A-Fa-f0-9]{6})\b/g;
 
-  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;
-    }
+  // 1) Quick Reference table — hex only, no parenthesized name required.
+  const quickRef = {
+    primary: /Primary Color\s*\|\s*#([A-Fa-f0-9]{6})/i,
+    secondary: /Secondary Color\s*\|\s*#([A-Fa-f0-9]{6})/i,
+    accent: /Accent Color\s*\|\s*#([A-Fa-f0-9]{6})/i
+  };
+  for (const key of Object.keys(quickRef)) {
+    const m = content.match(quickRef[key]);
+    if (m) colors[key].base = `#${m[1]}`;
   }
 
-  // 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;
+  // 2) Dedicated "### <Role> Colors" tables — assign base/dark/light by the
+  //    row label keyword.
+  const assignFromSection = (heading, target) => {
+    const section = content.match(new RegExp(`### ${heading}[\\s\\S]*?(?=\\n###|$)`, 'i'));
+    if (!section) return;
+    for (const m of section[0].matchAll(rowRe)) {
+      const label = m[1].trim().toLowerCase();
+      const hex = `#${m[2]}`;
+      if (label.includes('dark')) target.dark = hex;
+      else if (label.includes('light')) target.light = hex;
+      else if (!target.base) target.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;
+  };
+  assignFromSection('Primary Colors', colors.primary);
+  assignFromSection('Secondary Colors', colors.secondary);
+  assignFromSection('Accent Colors', colors.accent);
+
+  // 3) Fallback: an accent swatch may live in another table (the starter
+  //    lists "Accent Green" under Secondary Colors).
+  if (!colors.accent.base) {
+    for (const m of content.matchAll(rowRe)) {
+      if (m[1].trim().toLowerCase().includes('accent')) {
+        colors.accent.base = `#${m[2]}`;
+        break;
+      }
     }
   }
 
@@ -113,6 +99,7 @@ function generateColorScale(baseHex, darkHex, lightHex) {
  * Adjust hex color brightness
  */
 function adjustBrightness(hex, percent) {
+  if (typeof hex !== 'string') return '#000000';
   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)));
@@ -129,29 +116,24 @@ function updateDesignTokens(tokens, colors) {
   tokens.brand = brandName;
 
   // Update primitive colors with new names
-  const primitiveColors = tokens.primitive?.color || {};
+  tokens.primitive = tokens.primitive || {};
+  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
-  );
+  // Add new named colors. Skip any role with no base hex rather than crashing
+  // on an unexpected guidelines format.
+  for (const role of ['primary', 'secondary', 'accent']) {
+    const c = colors[role];
+    if (!c.base) {
+      console.warn(`⚠️  No base hex found for ${role} color — skipping its token scale.`);
+      continue;
+    }
+    primitiveColors[c.name] = generateColorScale(c.base, c.dark, c.light);
+  }
 
   tokens.primitive.color = primitiveColors;
 
@@ -191,7 +173,7 @@ function updateDesignTokens(tokens, colors) {
   }
 
   // Update component references (button uses primary color with opacity)
-  if (tokens.component?.button?.secondary) {
+  if (tokens.component?.button?.secondary && colors.primary.base) {
     const primaryBase = colors.primary.base;
     tokens.component.button.secondary['bg-hover'] = {
       "$value": `${primaryBase}1A`,
@@ -250,7 +232,7 @@ function main() {
   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}`, {
+      execFileSync('node', [generateScript, '--config', DESIGN_TOKENS_JSON, '-o', DESIGN_TOKENS_CSS], {
         cwd: process.cwd(),
         stdio: 'inherit'
       });

.claude/skills/brand/scripts/tests/test_sync_brand_to_tokens.py

@@ -0,0 +1,52 @@
+"""Regression test for sync-brand-to-tokens.cjs.
+
+The color parser required a parenthesized name in the Quick Reference row
+(`#2563EB (name)`) and a bolded label in the color tables (`**Primary Blue**`),
+neither of which the bundled starter template uses. As a result the base hex
+came back `undefined` and `adjustBrightness(undefined)` threw a TypeError —
+i.e. the script crashed on its own documented happy path. This test runs the
+sync against the bundled starter template and asserts it completes and writes
+the expected base colors. It is pytest-based so the existing pytest CI runs it.
+"""
+
+import json
+import shutil
+import subprocess
+from pathlib import Path
+
+import pytest
+
+SCRIPTS = Path(__file__).resolve().parent.parent
+SCRIPT = SCRIPTS / "sync-brand-to-tokens.cjs"
+BRAND_STARTER = SCRIPTS.parent / "templates" / "brand-guidelines-starter.md"
+TOKENS_STARTER = (
+    SCRIPTS.parent.parent / "design-system" / "templates" / "design-tokens-starter.json"
+)
+
+
+def test_sync_parses_bundled_starter_template(tmp_path):
+    node = shutil.which("node")
+    if not node:
+        pytest.skip("node not available")
+
+    (tmp_path / "docs").mkdir()
+    (tmp_path / "assets").mkdir()
+    shutil.copy(BRAND_STARTER, tmp_path / "docs" / "brand-guidelines.md")
+    shutil.copy(TOKENS_STARTER, tmp_path / "assets" / "design-tokens.json")
+
+    result = subprocess.run(
+        [node, str(SCRIPT)],
+        cwd=tmp_path,
+        capture_output=True,
+        text=True,
+    )
+
+    # Must not crash (the bug raised an unhandled TypeError).
+    assert "TypeError" not in result.stderr, result.stderr
+    assert result.returncode == 0, result.stderr + result.stdout
+
+    tokens = json.loads((tmp_path / "assets" / "design-tokens.json").read_text())
+    primitive = tokens["primitive"]["color"]
+    assert primitive["primary"]["500"]["$value"] == "#2563EB"
+    assert primitive["secondary"]["500"]["$value"] == "#8B5CF6"
+    assert primitive["accent"]["500"]["$value"] == "#10B981"

.claude/skills/design-system/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: ckm:design-system
+name: design-system
 description: Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations.
 argument-hint: "[component or token]"
 license: MIT