stella-coder 3.9.1 → 4.0.0

package/.opencode/skills/design-system/scripts/validate-tokens.cjs

@@ -0,0 +1,246 @@
+#!/usr/bin/env node
+/**
+ * Validate token usage in codebase
+ * Finds hardcoded values that should use design tokens
+ *
+ * Usage:
+ *   node validate-tokens.cjs --dir src/
+ *   node validate-tokens.cjs --dir src/ --fix
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+/**
+ * Parse command line arguments
+ */
+function parseArgs() {
+  const args = process.argv.slice(2);
+  const options = {
+    dir: null,
+    fix: false,
+    ignore: ['node_modules', '.git', 'dist', 'build', '.next']
+  };
+
+  for (let i = 0; i < args.length; i++) {
+    if (args[i] === '--dir' || args[i] === '-d') {
+      options.dir = args[++i];
+    } else if (args[i] === '--fix') {
+      options.fix = true;
+    } else if (args[i] === '--ignore' || args[i] === '-i') {
+      options.ignore.push(args[++i]);
+    } else if (args[i] === '--help' || args[i] === '-h') {
+      console.log(`
+Usage: node validate-tokens.cjs [options]
+
+Options:
+  -d, --dir <path>      Directory to scan (required)
+  --fix                 Show suggested fixes (no auto-fix)
+  -i, --ignore <dir>    Additional directories to ignore
+  -h, --help            Show this help
+
+Checks for:
+  - Hardcoded hex colors (#RGB, #RRGGBB)
+  - Hardcoded pixel values (except 0, 1px)
+  - Hardcoded rem values in CSS
+      `);
+      process.exit(0);
+    }
+  }
+
+  return options;
+}
+
+/**
+ * Patterns to detect hardcoded values
+ */
+const patterns = {
+  hexColor: {
+    regex: /#([0-9A-Fa-f]{3}){1,2}\b/g,
+    message: 'Hardcoded hex color',
+    suggestion: 'Use var(--color-*) token'
+  },
+  rgbColor: {
+    regex: /rgb\s*\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*\)/gi,
+    message: 'Hardcoded RGB color',
+    suggestion: 'Use var(--color-*) token'
+  },
+  pixelValue: {
+    regex: /:\s*(\d{2,})px/g, // 2+ digit px values
+    message: 'Hardcoded pixel value',
+    suggestion: 'Use var(--space-*) or var(--radius-*) token'
+  },
+  remValue: {
+    regex: /:\s*\d+\.?\d*rem(?![^{]*\$value)/g, // rem not in token definition
+    message: 'Hardcoded rem value',
+    suggestion: 'Use var(--space-*) or var(--font-size-*) token'
+  }
+};
+
+/**
+ * File extensions to scan
+ */
+const extensions = ['.css', '.scss', '.tsx', '.jsx', '.ts', '.js', '.vue', '.svelte'];
+
+/**
+ * Files/patterns to skip
+ */
+const skipPatterns = [
+  /\.min\.(css|js)$/,
+  /tailwind\.config/,
+  /globals\.css/, // Token definitions
+  /tokens\.(css|json)/
+];
+
+/**
+ * Get all files recursively
+ */
+function getFiles(dir, ignore, files = []) {
+  const entries = fs.readdirSync(dir, { withFileTypes: true });
+
+  for (const entry of entries) {
+    const fullPath = path.join(dir, entry.name);
+
+    if (entry.isDirectory()) {
+      if (!ignore.includes(entry.name)) {
+        getFiles(fullPath, ignore, files);
+      }
+    } else if (entry.isFile()) {
+      const ext = path.extname(entry.name);
+      if (extensions.includes(ext)) {
+        files.push(fullPath);
+      }
+    }
+  }
+
+  return files;
+}
+
+/**
+ * Check if file should be skipped
+ */
+function shouldSkip(filePath) {
+  return skipPatterns.some(pattern => pattern.test(filePath));
+}
+
+/**
+ * Scan file for violations
+ */
+function scanFile(filePath) {
+  const content = fs.readFileSync(filePath, 'utf-8');
+  const lines = content.split('\n');
+  const violations = [];
+
+  lines.forEach((line, index) => {
+    // Skip comments
+    if (line.trim().startsWith('//') || line.trim().startsWith('/*')) {
+      return;
+    }
+
+    for (const [name, pattern] of Object.entries(patterns)) {
+      const matches = line.match(pattern.regex);
+      if (matches) {
+        matches.forEach(match => {
+          // Skip common exceptions
+          if (name === 'hexColor' && ['#000', '#fff', '#FFF', '#000000', '#FFFFFF'].includes(match.toUpperCase())) {
+            return; // Skip black/white, often intentional
+          }
+
+          violations.push({
+            file: filePath,
+            line: index + 1,
+            column: line.indexOf(match) + 1,
+            value: match,
+            type: name,
+            message: pattern.message,
+            suggestion: pattern.suggestion,
+            context: line.trim().substring(0, 80)
+          });
+        });
+      }
+    }
+  });
+
+  return violations;
+}
+
+/**
+ * Format violation report
+ */
+function formatReport(violations) {
+  if (violations.length === 0) {
+    return '✅ No token violations found';
+  }
+
+  let report = `⚠️  Found ${violations.length} potential token violations:\n\n`;
+
+  // Group by file
+  const byFile = {};
+  violations.forEach(v => {
+    if (!byFile[v.file]) byFile[v.file] = [];
+    byFile[v.file].push(v);
+  });
+
+  for (const [file, fileViolations] of Object.entries(byFile)) {
+    report += `📁 ${file}\n`;
+    fileViolations.forEach(v => {
+      report += `   Line ${v.line}: ${v.message}\n`;
+      report += `   Found: ${v.value}\n`;
+      report += `   Suggestion: ${v.suggestion}\n`;
+      report += `   Context: ${v.context}\n\n`;
+    });
+  }
+
+  // Summary
+  const byType = {};
+  violations.forEach(v => {
+    byType[v.type] = (byType[v.type] || 0) + 1;
+  });
+
+  report += `\n📊 Summary:\n`;
+  for (const [type, count] of Object.entries(byType)) {
+    report += `   ${patterns[type].message}: ${count}\n`;
+  }
+
+  return report;
+}
+
+/**
+ * Main
+ */
+function main() {
+  const options = parseArgs();
+
+  if (!options.dir) {
+    console.error('Error: --dir is required');
+    process.exit(1);
+  }
+
+  const dirPath = path.resolve(process.cwd(), options.dir);
+
+  if (!fs.existsSync(dirPath)) {
+    console.error(`Error: Directory not found: ${dirPath}`);
+    process.exit(1);
+  }
+
+  console.log(`Scanning ${dirPath} for token violations...\n`);
+
+  const files = getFiles(dirPath, options.ignore);
+  const allViolations = [];
+
+  for (const file of files) {
+    if (shouldSkip(file)) continue;
+
+    const violations = scanFile(file);
+    allViolations.push(...violations);
+  }
+
+  console.log(formatReport(allViolations));
+
+  // Exit with error code if violations found
+  if (allViolations.length > 0) {
+    process.exit(1);
+  }
+}
+
+main();

package/.opencode/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/.opencode/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/.opencode/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/.opencode/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>