real-prototypes-skill 2.0.0

package/.claude/skills/real-prototypes-skill/scripts/generate-tailwind-config.js

@@ -0,0 +1,296 @@
+#!/usr/bin/env node
+
+/**
+ * Tailwind Config Generator
+ *
+ * Takes design tokens JSON (from extract-tokens.js) and generates
+ * a Tailwind CSS configuration extend section.
+ *
+ * Usage:
+ *   node generate-tailwind-config.js <tokens.json>
+ *   node extract-tokens.js index.html | node generate-tailwind-config.js
+ *
+ * Output: TypeScript tailwind.config.ts extend section
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+/**
+ * Convert color name to Tailwind-friendly key
+ */
+function normalizeKey(key) {
+  return key
+    .replace(/([A-Z])/g, '-$1')
+    .toLowerCase()
+    .replace(/^-/, '')
+    .replace(/[^a-z0-9-]/g, '-')
+    .replace(/-+/g, '-');
+}
+
+/**
+ * Generate Tailwind colors configuration
+ */
+function generateColors(colors) {
+  const result = {};
+
+  Object.entries(colors).forEach(([key, value]) => {
+    const normalizedKey = normalizeKey(key);
+    result[normalizedKey] = value;
+  });
+
+  return result;
+}
+
+/**
+ * Generate Tailwind font family configuration
+ */
+function generateFontFamily(fonts) {
+  const result = {};
+
+  Object.entries(fonts).forEach(([key, value]) => {
+    const normalizedKey = normalizeKey(key);
+    // Wrap font name properly for Tailwind
+    result[normalizedKey] = [value, 'sans-serif'];
+  });
+
+  return result;
+}
+
+/**
+ * Generate Tailwind font size configuration
+ */
+function generateFontSize(fontSizes) {
+  const result = {};
+
+  Object.entries(fontSizes).forEach(([key, value]) => {
+    result[key] = value;
+  });
+
+  return result;
+}
+
+/**
+ * Generate Tailwind spacing configuration
+ */
+function generateSpacing(spacing) {
+  const result = {};
+
+  Object.entries(spacing).forEach(([key, value]) => {
+    result[key] = value;
+  });
+
+  return result;
+}
+
+/**
+ * Generate Tailwind border radius configuration
+ */
+function generateBorderRadius(borderRadius) {
+  const result = {};
+
+  Object.entries(borderRadius).forEach(([key, value]) => {
+    result[key] = value;
+  });
+
+  return result;
+}
+
+/**
+ * Generate the full Tailwind config extend section
+ */
+function generateTailwindConfig(tokens) {
+  const config = {
+    colors: generateColors(tokens.colors || {}),
+    fontFamily: generateFontFamily(tokens.fonts || {}),
+    fontSize: generateFontSize(tokens.fontSizes || {}),
+    spacing: generateSpacing(tokens.spacing || {}),
+    borderRadius: generateBorderRadius(tokens.borderRadius || {})
+  };
+
+  // Remove empty objects
+  Object.keys(config).forEach(key => {
+    if (Object.keys(config[key]).length === 0) {
+      delete config[key];
+    }
+  });
+
+  return config;
+}
+
+/**
+ * Format the config as TypeScript
+ */
+function formatAsTypeScript(config) {
+  const lines = [
+    '// Generated Tailwind CSS configuration',
+    '// Add this to your tailwind.config.ts in the theme.extend section',
+    '',
+    'import type { Config } from "tailwindcss";',
+    '',
+    'const config: Config = {',
+    '  content: [',
+    '    "./src/**/*.{js,ts,jsx,tsx,mdx}",',
+    '    "./app/**/*.{js,ts,jsx,tsx,mdx}",',
+    '    "./components/**/*.{js,ts,jsx,tsx,mdx}",',
+    '  ],',
+    '  theme: {',
+    '    extend: {'
+  ];
+
+  // Add colors
+  if (config.colors && Object.keys(config.colors).length > 0) {
+    lines.push('      colors: {');
+    Object.entries(config.colors).forEach(([key, value]) => {
+      lines.push(`        "${key}": "${value}",`);
+    });
+    lines.push('      },');
+  }
+
+  // Add font families
+  if (config.fontFamily && Object.keys(config.fontFamily).length > 0) {
+    lines.push('      fontFamily: {');
+    Object.entries(config.fontFamily).forEach(([key, value]) => {
+      const fontList = Array.isArray(value) ? value : [value];
+      lines.push(`        "${key}": ${JSON.stringify(fontList)},`);
+    });
+    lines.push('      },');
+  }
+
+  // Add font sizes
+  if (config.fontSize && Object.keys(config.fontSize).length > 0) {
+    lines.push('      fontSize: {');
+    Object.entries(config.fontSize).forEach(([key, value]) => {
+      lines.push(`        "${key}": "${value}",`);
+    });
+    lines.push('      },');
+  }
+
+  // Add spacing
+  if (config.spacing && Object.keys(config.spacing).length > 0) {
+    lines.push('      spacing: {');
+    Object.entries(config.spacing).forEach(([key, value]) => {
+      lines.push(`        "${key}": "${value}",`);
+    });
+    lines.push('      },');
+  }
+
+  // Add border radius
+  if (config.borderRadius && Object.keys(config.borderRadius).length > 0) {
+    lines.push('      borderRadius: {');
+    Object.entries(config.borderRadius).forEach(([key, value]) => {
+      lines.push(`        "${key}": "${value}",`);
+    });
+    lines.push('      },');
+  }
+
+  lines.push('    },');
+  lines.push('  },');
+  lines.push('  plugins: [],');
+  lines.push('};');
+  lines.push('');
+  lines.push('export default config;');
+
+  return lines.join('\n');
+}
+
+/**
+ * Format just the extend section as JSON (for partial use)
+ */
+function formatAsExtendSection(config) {
+  return JSON.stringify(config, null, 2);
+}
+
+/**
+ * Read tokens from stdin or file
+ */
+async function readTokens(inputPath) {
+  if (inputPath) {
+    // Read from file
+    const resolvedPath = path.resolve(inputPath);
+    if (!fs.existsSync(resolvedPath)) {
+      console.error(`Error: File not found: ${resolvedPath}`);
+      process.exit(1);
+    }
+    const content = fs.readFileSync(resolvedPath, 'utf8');
+    return JSON.parse(content);
+  } else {
+    // Read from stdin
+    return new Promise((resolve, reject) => {
+      let data = '';
+      process.stdin.setEncoding('utf8');
+
+      process.stdin.on('readable', () => {
+        let chunk;
+        while ((chunk = process.stdin.read()) !== null) {
+          data += chunk;
+        }
+      });
+
+      process.stdin.on('end', () => {
+        try {
+          resolve(JSON.parse(data));
+        } catch (err) {
+          reject(new Error('Invalid JSON input'));
+        }
+      });
+
+      process.stdin.on('error', reject);
+
+      // Set timeout for stdin
+      setTimeout(() => {
+        if (data === '') {
+          reject(new Error('No input received. Provide a file path or pipe JSON data.'));
+        }
+      }, 100);
+    });
+  }
+}
+
+// CLI execution
+async function main() {
+  const args = process.argv.slice(2);
+
+  // Check for help flag
+  if (args.includes('--help') || args.includes('-h')) {
+    console.log('Usage: node generate-tailwind-config.js [options] [tokens.json]');
+    console.log('');
+    console.log('Generates Tailwind CSS configuration from design tokens.');
+    console.log('');
+    console.log('Arguments:');
+    console.log('  tokens.json    Path to tokens JSON file (or pipe from stdin)');
+    console.log('');
+    console.log('Options:');
+    console.log('  --extend-only  Output only the extend section as JSON');
+    console.log('  --help, -h     Show this help message');
+    console.log('');
+    console.log('Examples:');
+    console.log('  node generate-tailwind-config.js tokens.json');
+    console.log('  node extract-tokens.js index.html | node generate-tailwind-config.js');
+    console.log('  node generate-tailwind-config.js tokens.json --extend-only');
+    process.exit(0);
+  }
+
+  const extendOnly = args.includes('--extend-only');
+  const inputPath = args.find(arg => !arg.startsWith('--'));
+
+  try {
+    const tokens = await readTokens(inputPath);
+    const config = generateTailwindConfig(tokens);
+
+    if (extendOnly) {
+      console.log(formatAsExtendSection(config));
+    } else {
+      console.log(formatAsTypeScript(config));
+    }
+  } catch (err) {
+    console.error(`Error: ${err.message}`);
+    process.exit(1);
+  }
+}
+
+if (require.main === module) {
+  main();
+}
+
+module.exports = { generateTailwindConfig, formatAsTypeScript, formatAsExtendSection };

package/.claude/skills/real-prototypes-skill/scripts/integrate-accessibility.sh

@@ -0,0 +1,161 @@
+#!/bin/bash
+
+###############################################################################
+# Accessibility Integration Script
+#
+# Integrates accessibility validation into the prototype build process
+# Installs dependencies, configures ESLint, and runs validation
+###############################################################################
+
+set -e
+
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+PROJECT_ROOT="$(cd "$SCRIPT_DIR/../../../.." && pwd)"
+PROTOTYPE_DIR="$PROJECT_ROOT/prototype"
+
+echo "=================================================="
+echo "Accessibility Integration Script"
+echo "=================================================="
+echo ""
+echo "Project Root: $PROJECT_ROOT"
+echo "Prototype Dir: $PROTOTYPE_DIR"
+echo ""
+
+# Check if prototype directory exists
+if [ ! -d "$PROTOTYPE_DIR" ]; then
+  echo "❌ Error: Prototype directory not found at $PROTOTYPE_DIR"
+  echo "   Run setup-prototype.sh first to create the prototype project"
+  exit 1
+fi
+
+cd "$PROTOTYPE_DIR"
+
+# Step 1: Install accessibility dependencies
+echo "📦 Installing accessibility dependencies..."
+echo ""
+
+if [ -f "package.json" ]; then
+  # Check if dependencies are already installed
+  if grep -q "eslint-plugin-jsx-a11y" package.json; then
+    echo "✅ Accessibility dependencies already in package.json"
+  else
+    echo "Adding dependencies to package.json..."
+    npm install --save-dev \
+      eslint@^8.57.0 \
+      eslint-config-next@^15.1.4 \
+      eslint-plugin-jsx-a11y@^6.10.2
+  fi
+
+  # Ensure dependencies are installed
+  npm install
+  echo "✅ Dependencies installed"
+else
+  echo "❌ Error: package.json not found"
+  exit 1
+fi
+
+echo ""
+
+# Step 2: Create/update ESLint configuration
+echo "🔧 Configuring ESLint for accessibility..."
+echo ""
+
+ESLINT_CONFIG="$PROTOTYPE_DIR/.eslintrc.json"
+
+if [ -f "$ESLINT_CONFIG" ]; then
+  echo "✅ ESLint config already exists at $ESLINT_CONFIG"
+else
+  echo "Creating ESLint configuration..."
+  cp "$SCRIPT_DIR/../.eslintrc.json.template" "$ESLINT_CONFIG" 2>/dev/null || {
+    echo "Template not found, using built-in config..."
+    cat > "$ESLINT_CONFIG" <<'EOF'
+{
+  "extends": [
+    "next/core-web-vitals",
+    "plugin:jsx-a11y/recommended"
+  ],
+  "plugins": ["jsx-a11y"],
+  "rules": {
+    "jsx-a11y/alt-text": "error",
+    "jsx-a11y/anchor-has-content": "error",
+    "jsx-a11y/anchor-is-valid": "error",
+    "jsx-a11y/aria-props": "error",
+    "jsx-a11y/aria-role": "error",
+    "jsx-a11y/click-events-have-key-events": "error",
+    "jsx-a11y/heading-has-content": "error",
+    "jsx-a11y/interactive-supports-focus": "error",
+    "jsx-a11y/label-has-associated-control": "error",
+    "jsx-a11y/no-noninteractive-element-interactions": "error",
+    "jsx-a11y/role-has-required-aria-props": "error"
+  }
+}
+EOF
+  }
+  echo "✅ ESLint config created"
+fi
+
+echo ""
+
+# Step 3: Update package.json scripts
+echo "📝 Adding accessibility validation scripts..."
+echo ""
+
+if grep -q "validate:a11y" package.json; then
+  echo "✅ Validation scripts already in package.json"
+else
+  # Add scripts using node
+  node -e "
+    const fs = require('fs');
+    const pkg = JSON.parse(fs.readFileSync('package.json', 'utf8'));
+    pkg.scripts = pkg.scripts || {};
+    pkg.scripts['lint:a11y'] = 'eslint . --ext .ts,.tsx,.js,.jsx';
+    pkg.scripts['validate:a11y'] = 'node ../.claude/skills/real-prototypes-skill/scripts/validate-accessibility.js . --verbose';
+    fs.writeFileSync('package.json', JSON.stringify(pkg, null, 2));
+  "
+  echo "✅ Scripts added to package.json"
+fi
+
+echo ""
+
+# Step 4: Create references directory if needed
+echo "📁 Ensuring references directory exists..."
+echo ""
+
+REFERENCES_DIR="$PROJECT_ROOT/references"
+if [ ! -d "$REFERENCES_DIR" ]; then
+  mkdir -p "$REFERENCES_DIR"
+  echo "✅ Created references directory"
+else
+  echo "✅ References directory exists"
+fi
+
+echo ""
+
+# Step 5: Run initial validation
+echo "🔍 Running initial accessibility validation..."
+echo ""
+
+node "$SCRIPT_DIR/validate-accessibility.js" "$PROTOTYPE_DIR" --verbose
+
+echo ""
+echo "=================================================="
+echo "✅ Accessibility Integration Complete!"
+echo "=================================================="
+echo ""
+echo "Next steps:"
+echo ""
+echo "1. Review the accessibility report:"
+echo "   → $REFERENCES_DIR/accessibility-report.json"
+echo ""
+echo "2. Review fixes documentation:"
+echo "   → $REFERENCES_DIR/accessibility-fixes.md"
+echo ""
+echo "3. Run validation anytime:"
+echo "   → npm run validate:a11y"
+echo ""
+echo "4. Run ESLint for accessibility:"
+echo "   → npm run lint:a11y"
+echo ""
+echo "5. Fix any issues found and re-run validation"
+echo ""
+echo "=================================================="