ui-ux-pro-max-cli 2.8.8

package/assets/skills/design-system/templates/design-tokens-starter.json

@@ -0,0 +1,143 @@
+{
+  "$schema": "https://design-tokens.org/schema.json",
+  "primitive": {
+    "color": {
+      "gray": {
+        "50": { "$value": "#F9FAFB", "$type": "color" },
+        "100": { "$value": "#F3F4F6", "$type": "color" },
+        "200": { "$value": "#E5E7EB", "$type": "color" },
+        "300": { "$value": "#D1D5DB", "$type": "color" },
+        "400": { "$value": "#9CA3AF", "$type": "color" },
+        "500": { "$value": "#6B7280", "$type": "color" },
+        "600": { "$value": "#4B5563", "$type": "color" },
+        "700": { "$value": "#374151", "$type": "color" },
+        "800": { "$value": "#1F2937", "$type": "color" },
+        "900": { "$value": "#111827", "$type": "color" },
+        "950": { "$value": "#030712", "$type": "color" }
+      },
+      "blue": {
+        "50": { "$value": "#EFF6FF", "$type": "color" },
+        "500": { "$value": "#3B82F6", "$type": "color" },
+        "600": { "$value": "#2563EB", "$type": "color" },
+        "700": { "$value": "#1D4ED8", "$type": "color" },
+        "800": { "$value": "#1E40AF", "$type": "color" }
+      },
+      "red": {
+        "500": { "$value": "#EF4444", "$type": "color" },
+        "600": { "$value": "#DC2626", "$type": "color" },
+        "700": { "$value": "#B91C1C", "$type": "color" }
+      },
+      "green": {
+        "500": { "$value": "#22C55E", "$type": "color" },
+        "600": { "$value": "#16A34A", "$type": "color" }
+      },
+      "yellow": {
+        "500": { "$value": "#EAB308", "$type": "color" }
+      },
+      "white": { "$value": "#FFFFFF", "$type": "color" }
+    },
+    "spacing": {
+      "0": { "$value": "0", "$type": "dimension" },
+      "1": { "$value": "0.25rem", "$type": "dimension" },
+      "2": { "$value": "0.5rem", "$type": "dimension" },
+      "3": { "$value": "0.75rem", "$type": "dimension" },
+      "4": { "$value": "1rem", "$type": "dimension" },
+      "5": { "$value": "1.25rem", "$type": "dimension" },
+      "6": { "$value": "1.5rem", "$type": "dimension" },
+      "8": { "$value": "2rem", "$type": "dimension" },
+      "10": { "$value": "2.5rem", "$type": "dimension" },
+      "12": { "$value": "3rem", "$type": "dimension" },
+      "16": { "$value": "4rem", "$type": "dimension" }
+    },
+    "fontSize": {
+      "xs": { "$value": "0.75rem", "$type": "dimension" },
+      "sm": { "$value": "0.875rem", "$type": "dimension" },
+      "base": { "$value": "1rem", "$type": "dimension" },
+      "lg": { "$value": "1.125rem", "$type": "dimension" },
+      "xl": { "$value": "1.25rem", "$type": "dimension" },
+      "2xl": { "$value": "1.5rem", "$type": "dimension" },
+      "3xl": { "$value": "1.875rem", "$type": "dimension" },
+      "4xl": { "$value": "2.25rem", "$type": "dimension" }
+    },
+    "radius": {
+      "none": { "$value": "0", "$type": "dimension" },
+      "sm": { "$value": "0.125rem", "$type": "dimension" },
+      "default": { "$value": "0.25rem", "$type": "dimension" },
+      "md": { "$value": "0.375rem", "$type": "dimension" },
+      "lg": { "$value": "0.5rem", "$type": "dimension" },
+      "xl": { "$value": "0.75rem", "$type": "dimension" },
+      "full": { "$value": "9999px", "$type": "dimension" }
+    },
+    "shadow": {
+      "none": { "$value": "none", "$type": "shadow" },
+      "sm": { "$value": "0 1px 2px 0 rgb(0 0 0 / 0.05)", "$type": "shadow" },
+      "default": { "$value": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)", "$type": "shadow" },
+      "md": { "$value": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)", "$type": "shadow" },
+      "lg": { "$value": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)", "$type": "shadow" }
+    },
+    "duration": {
+      "fast": { "$value": "150ms", "$type": "duration" },
+      "normal": { "$value": "200ms", "$type": "duration" },
+      "slow": { "$value": "300ms", "$type": "duration" }
+    }
+  },
+  "semantic": {
+    "color": {
+      "background": { "$value": "{primitive.color.gray.50}", "$type": "color" },
+      "foreground": { "$value": "{primitive.color.gray.900}", "$type": "color" },
+      "primary": { "$value": "{primitive.color.blue.600}", "$type": "color" },
+      "primary-hover": { "$value": "{primitive.color.blue.700}", "$type": "color" },
+      "primary-foreground": { "$value": "{primitive.color.white}", "$type": "color" },
+      "secondary": { "$value": "{primitive.color.gray.100}", "$type": "color" },
+      "secondary-foreground": { "$value": "{primitive.color.gray.900}", "$type": "color" },
+      "muted": { "$value": "{primitive.color.gray.100}", "$type": "color" },
+      "muted-foreground": { "$value": "{primitive.color.gray.500}", "$type": "color" },
+      "destructive": { "$value": "{primitive.color.red.600}", "$type": "color" },
+      "destructive-foreground": { "$value": "{primitive.color.white}", "$type": "color" },
+      "border": { "$value": "{primitive.color.gray.200}", "$type": "color" },
+      "ring": { "$value": "{primitive.color.blue.500}", "$type": "color" }
+    },
+    "spacing": {
+      "component": { "$value": "{primitive.spacing.4}", "$type": "dimension" },
+      "section": { "$value": "{primitive.spacing.12}", "$type": "dimension" }
+    }
+  },
+  "component": {
+    "button": {
+      "bg": { "$value": "{semantic.color.primary}", "$type": "color" },
+      "fg": { "$value": "{semantic.color.primary-foreground}", "$type": "color" },
+      "hover-bg": { "$value": "{semantic.color.primary-hover}", "$type": "color" },
+      "padding-x": { "$value": "{primitive.spacing.4}", "$type": "dimension" },
+      "padding-y": { "$value": "{primitive.spacing.2}", "$type": "dimension" },
+      "radius": { "$value": "{primitive.radius.md}", "$type": "dimension" },
+      "font-size": { "$value": "{primitive.fontSize.sm}", "$type": "dimension" }
+    },
+    "input": {
+      "bg": { "$value": "{semantic.color.background}", "$type": "color" },
+      "border": { "$value": "{semantic.color.border}", "$type": "color" },
+      "focus-ring": { "$value": "{semantic.color.ring}", "$type": "color" },
+      "padding-x": { "$value": "{primitive.spacing.3}", "$type": "dimension" },
+      "padding-y": { "$value": "{primitive.spacing.2}", "$type": "dimension" },
+      "radius": { "$value": "{primitive.radius.md}", "$type": "dimension" }
+    },
+    "card": {
+      "bg": { "$value": "{primitive.color.white}", "$type": "color" },
+      "border": { "$value": "{semantic.color.border}", "$type": "color" },
+      "shadow": { "$value": "{primitive.shadow.default}", "$type": "shadow" },
+      "padding": { "$value": "{primitive.spacing.6}", "$type": "dimension" },
+      "radius": { "$value": "{primitive.radius.lg}", "$type": "dimension" }
+    }
+  },
+  "dark": {
+    "semantic": {
+      "color": {
+        "background": { "$value": "{primitive.color.gray.950}", "$type": "color" },
+        "foreground": { "$value": "{primitive.color.gray.50}", "$type": "color" },
+        "secondary": { "$value": "{primitive.color.gray.800}", "$type": "color" },
+        "muted": { "$value": "{primitive.color.gray.800}", "$type": "color" },
+        "muted-foreground": { "$value": "{primitive.color.gray.400}", "$type": "color" },
+        "border": { "$value": "{primitive.color.gray.800}", "$type": "color" }
+      }
+    }
+  }
+}

package/assets/skills/slides/SKILL.md

@@ -0,0 +1,40 @@
+---
+name: slides
+description: Create strategic HTML presentations with Chart.js, design tokens, responsive layouts, copywriting formulas, and contextual slide strategies.
+argument-hint: "[topic] [slide-count]"
+metadata:
+  author: claudekit
+  version: "1.0.0"
+---
+
+# Slides
+
+Strategic HTML presentation design with data visualization.
+
+## When to Use
+
+- Marketing presentations and pitch decks
+- Data-driven slides with Chart.js
+- Strategic slide design with layout patterns
+- Copywriting-optimized presentation content
+
+## Subcommands
+
+| Subcommand | Description | Reference |
+|------------|-------------|-----------|
+| `create` | Create strategic presentation slides | `references/create.md` |
+
+## References (Knowledge Base)
+
+| Topic | File |
+|-------|------|
+| Layout Patterns | `references/layout-patterns.md` |
+| HTML Template | `references/html-template.md` |
+| Copywriting Formulas | `references/copywriting-formulas.md` |
+| Slide Strategies | `references/slide-strategies.md` |
+
+## Routing
+
+1. Parse subcommand from `$ARGUMENTS` (first word)
+2. Load corresponding `references/{subcommand}.md`
+3. Execute with remaining arguments

package/assets/skills/slides/references/copywriting-formulas.md

@@ -0,0 +1,84 @@
+# Copywriting Formulas
+
+25 formulas for persuasive slide copy.
+
+## Core Formulas
+
+### PAS (Problem-Agitate-Solution)
+**Use:** Problem slides, pain points
+**Components:** Problem → Agitate → Solution
+**Template:** "[Pain point]? Every [time frame], [consequence]. [Solution] fixes this."
+
+### AIDA (Attention-Interest-Desire-Action)
+**Use:** CTAs, closing slides
+**Components:** Attention → Interest → Desire → Action
+**Template:** "[Bold statement]. [Benefit detail]. [Social proof]. [CTA]."
+
+### FAB (Features-Advantages-Benefits)
+**Use:** Feature slides, product showcases
+**Components:** Feature → Advantage → Benefit
+**Template:** "[Feature] lets you [advantage], so you can [benefit]."
+
+### Cost of Inaction
+**Use:** Agitation slides, urgency
+**Components:** Status Quo → Loss → Time Decay
+**Template:** "Without [solution], you're losing [amount] every [timeframe]."
+
+### Before-After-Bridge
+**Use:** Transformation slides, case studies
+**Components:** Before → After → Bridge
+**Template:** "[Pain point before]. [Desired state after]. [Your solution] is the bridge."
+
+## Formula-to-Slide Mapping
+
+| Slide Type | Primary Formula | Emotion |
+|------------|-----------------|---------|
+| Title/Hook | AIDA, Hook | curiosity |
+| Problem | PAS, Agitate | frustration |
+| Cost/Risk | Cost of Inaction | fear |
+| Solution | FAB, BAB | hope |
+| Features | FAB | confidence |
+| Traction | Proof Stack | trust |
+| Social Proof | Testimonial | trust |
+| Pricing | Value Stack | confidence |
+| CTA | AIDA, Urgency | urgency |
+
+## Headline Patterns
+
+### Power Words
+- "Stop [bad thing]"
+- "Get [desired result] in [timeframe]"
+- "The [adjective] way to [action]"
+- "Why [audience] choose [product]"
+- "[Number] ways to [achieve goal]"
+
+### Contrast Patterns
+- "[Old way] is dead. Meet [new way]."
+- "Don't [bad action]. Instead, [good action]."
+- "From [pain point] to [benefit]."
+
+### Social Proof Patterns
+- "[Number]+ [users/companies] trust [product]"
+- "Join [notable company] and [notable company]"
+- "As seen in [publication]"
+
+## Search Commands
+
+```bash
+# Find formula for slide type
+python .claude/skills/design-system/scripts/search-slides.py "problem agitation" -d copy
+
+# Get emotion-appropriate formula
+python .claude/skills/design-system/scripts/search-slides.py "urgency cta" -d copy
+```
+
+## Quick Reference
+
+| Need | Use Formula |
+|------|------------|
+| Create urgency | Cost of Inaction, Scarcity |
+| Build trust | Social Proof, Testimonial |
+| Show value | FAB, Value Stack |
+| Drive action | AIDA, CTA |
+| Tell story | BAB, Story Arc |
+| Present data | Proof Stack |

package/assets/skills/slides/references/create.md

@@ -0,0 +1,4 @@
+Invoke `slides` skill to create persuasive HTML slides using design tokens, Chart.js, and the slide knowledge database.
+
+## Task
+<task>$ARGUMENTS</task>

package/assets/skills/slides/references/html-template.md

@@ -0,0 +1,295 @@
+# HTML Slide Template
+
+Complete HTML structure with navigation, tokens, and Chart.js integration.
+
+## Base Structure
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Presentation Title</title>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
+    <style>
+        /* Paste embed-tokens.cjs output here */
+        :root {
+            --color-primary: #FF6B6B;
+            --color-background: #0D0D0D;
+            /* ... more tokens */
+        }
+
+        /* Base slide styles */
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body {
+            background: var(--color-background);
+            color: #fff;
+            font-family: var(--typography-font-body, 'Inter', sans-serif);
+            overflow: hidden;
+        }
+
+        /* 16:9 Aspect Ratio Container (desktop) */
+        .slide-deck {
+            position: relative;
+            width: 100vw;
+            height: 100vh;
+            overflow: hidden;
+        }
+
+        @media (min-width: 769px) {
+            .slide-deck {
+                /* Lock to 16:9 — letterbox if viewport ratio differs */
+                max-width: calc(100vh * 16 / 9);
+                max-height: calc(100vw * 9 / 16);
+                margin: auto;
+                position: absolute;
+                inset: 0;
+            }
+        }
+
+        .slide {
+            position: absolute;
+            width: 100%; height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            text-align: center;
+            padding: 60px;
+            opacity: 0;
+            visibility: hidden;
+            transition: opacity 0.4s;
+            background: var(--color-background);
+            overflow: hidden; /* Prevent content overflow */
+        }
+
+        .slide.active { opacity: 1; visibility: visible; }
+
+        /* Slide inner wrapper — constrains content within safe area */
+        .slide-content {
+            width: 100%;
+            max-width: 100%;
+            max-height: 100%;
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            gap: 16px;
+        }
+
+        /* Typography */
+        h1, h2 { font-family: var(--typography-font-heading, 'Space Grotesk', sans-serif); }
+        .slide-title {
+            font-size: clamp(32px, 6vw, 80px);
+            background: var(--primitive-gradient-primary, linear-gradient(135deg, #FF6B6B, #FF8E53));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            line-height: 1.1;
+        }
+
+        /* ===== RESPONSIVE BREAKPOINTS ===== */
+
+        /* Tablet (portrait) */
+        @media (max-width: 768px) {
+            .slide { padding: 32px 24px; }
+            .slide-title { font-size: clamp(28px, 5vw, 48px); }
+            h2 { font-size: clamp(20px, 4vw, 32px); }
+            p, li { font-size: clamp(14px, 2.5vw, 18px); }
+        }
+
+        /* Mobile */
+        @media (max-width: 480px) {
+            .slide { padding: 24px 16px; }
+            .slide-title { font-size: clamp(22px, 6vw, 36px); }
+            h2 { font-size: clamp(18px, 4.5vw, 28px); }
+            p, li { font-size: clamp(12px, 3vw, 16px); }
+            .nav-controls { bottom: 16px; gap: 12px; }
+            .nav-btn { width: 32px; height: 32px; font-size: 14px; }
+        }
+
+        /* Navigation */
+        .progress-bar {
+            position: fixed;
+            top: 0; left: 0;
+            height: 3px;
+            background: var(--color-primary);
+            transition: width 0.3s;
+            z-index: 1000;
+        }
+        .nav-controls {
+            position: fixed;
+            bottom: 30px;
+            left: 50%;
+            transform: translateX(-50%);
+            display: flex;
+            align-items: center;
+            gap: 20px;
+            z-index: 1000;
+        }
+        .nav-btn {
+            background: rgba(255,255,255,0.1);
+            border: none;
+            color: #fff;
+            width: 40px; height: 40px;
+            border-radius: 50%;
+            cursor: pointer;
+            font-size: 18px;
+        }
+        .nav-btn:hover { background: rgba(255,255,255,0.2); }
+        .slide-counter { color: rgba(255,255,255,0.6); font-size: 14px; }
+    </style>
+</head>
+<body>
+    <!-- Progress Bar -->
+    <div class="progress-bar" id="progressBar"></div>
+
+    <!-- Slide Deck Container (16:9 on desktop) -->
+    <div class="slide-deck">
+
+    <!-- Slides -->
+    <div class="slide active">
+        <div class="slide-content">
+            <h1 class="slide-title">Title Slide</h1>
+            <p>Subtitle or tagline</p>
+        </div>
+    </div>
+
+    <!-- More slides... (always wrap content in .slide-content) -->
+
+    </div><!-- /.slide-deck -->
+
+    <!-- Navigation -->
+    <div class="nav-controls">
+        <button class="nav-btn" onclick="prevSlide()">←</button>
+        <span class="slide-counter"><span id="current">1</span> / <span id="total">9</span></span>
+        <button class="nav-btn" onclick="nextSlide()">→</button>
+    </div>
+
+    <script>
+        let current = 1;
+        const total = document.querySelectorAll('.slide').length;
+        document.getElementById('total').textContent = total;
+
+        function showSlide(n) {
+            if (n < 1) n = 1;
+            if (n > total) n = total;
+            current = n;
+            document.querySelectorAll('.slide').forEach((s, i) => {
+                s.classList.toggle('active', i === n - 1);
+            });
+            document.getElementById('current').textContent = n;
+            document.getElementById('progressBar').style.width = (n / total * 100) + '%';
+        }
+
+        function nextSlide() { showSlide(current + 1); }
+        function prevSlide() { showSlide(current - 1); }
+
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'ArrowRight' || e.key === ' ') { e.preventDefault(); nextSlide(); }
+            if (e.key === 'ArrowLeft') { e.preventDefault(); prevSlide(); }
+        });
+
+        document.addEventListener('click', (e) => {
+            if (!e.target.closest('.nav-controls')) nextSlide();
+        });
+
+        showSlide(1);
+    </script>
+</body>
+</html>
+```
+
+## Chart.js Integration
+
+```html
+<div class="chart-container" style="width: min(80%, 600px); height: clamp(200px, 40vh, 350px);">
+    <canvas id="revenueChart"></canvas>
+</div>
+
+<script>
+new Chart(document.getElementById('revenueChart'), {
+    type: 'line', // or 'bar', 'doughnut', 'radar'
+    data: {
+        labels: ['Sep', 'Oct', 'Nov', 'Dec'],
+        datasets: [{
+            label: 'MRR ($K)',
+            data: [5, 12, 28, 45],
+            borderColor: '#FF6B6B',
+            backgroundColor: 'rgba(255, 107, 107, 0.1)',
+            borderWidth: 3,
+            fill: true,
+            tension: 0.4
+        }]
+    },
+    options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: { legend: { display: false } },
+        scales: {
+            x: { grid: { color: 'rgba(255,255,255,0.05)' }, ticks: { color: '#B8B8D0' } },
+            y: { grid: { color: 'rgba(255,255,255,0.05)' }, ticks: { color: '#B8B8D0' } }
+        }
+    }
+});
+</script>
+```
+
+## Animation Classes
+
+```css
+/* Fade Up */
+.animate-fade-up {
+    animation: fadeUp 0.6s ease-out forwards;
+    opacity: 0;
+}
+@keyframes fadeUp {
+    from { opacity: 0; transform: translateY(30px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+/* Count Animation */
+.animate-count { animation: countUp 1s ease-out forwards; }
+
+/* Scale */
+.animate-scale {
+    animation: scaleIn 0.5s ease-out forwards;
+}
+@keyframes scaleIn {
+    from { opacity: 0; transform: scale(0.9); }
+    to { opacity: 1; transform: scale(1); }
+}
+
+/* Stagger Children */
+.animate-stagger > * {
+    opacity: 0;
+    animation: fadeUp 0.5s ease-out forwards;
+}
+.animate-stagger > *:nth-child(1) { animation-delay: 0.1s; }
+.animate-stagger > *:nth-child(2) { animation-delay: 0.2s; }
+.animate-stagger > *:nth-child(3) { animation-delay: 0.3s; }
+.animate-stagger > *:nth-child(4) { animation-delay: 0.4s; }
+```
+
+## Background Images
+
+```html
+<div class="slide slide-with-bg" style="background-image: url('https://images.pexels.com/...')">
+    <div class="overlay" style="background: linear-gradient(135deg, rgba(13,13,13,0.9), rgba(13,13,13,0.7))"></div>
+    <div class="content" style="position: relative; z-index: 1;">
+        <!-- Slide content -->
+    </div>
+</div>
+```
+
+## CSS Variables Reference
+
+| Variable | Usage |
+|----------|-------|
+| `--color-primary` | Brand primary (CTA, highlights) |
+| `--color-background` | Slide background |
+| `--color-secondary` | Secondary elements |
+| `--primitive-gradient-primary` | Title gradients |
+| `--typography-font-heading` | Headlines |
+| `--typography-font-body` | Body text |