claude-code-workflow 6.1.3 → 6.2.1

package/.claude/scripts/extract-animations.js

@@ -1,243 +0,0 @@
-/**
- * Animation & Transition Extraction Script
- *
- * Extracts CSS animations, transitions, and transform patterns from a live web page.
- * This script runs in the browser context via Chrome DevTools Protocol.
- *
- * @returns {Object} Structured animation data
- */
-(() => {
-  const extractionTimestamp = new Date().toISOString();
-  const currentUrl = window.location.href;
-
-  /**
-   * Parse transition shorthand or individual properties
-   */
-  function parseTransition(element, computedStyle) {
-    const transition = computedStyle.transition || computedStyle.webkitTransition;
-
-    if (!transition || transition === 'none' || transition === 'all 0s ease 0s') {
-      return null;
-    }
-
-    // Parse shorthand: "property duration easing delay"
-    const transitions = [];
-    const parts = transition.split(/,\s*/);
-
-    parts.forEach(part => {
-      const match = part.match(/^(\S+)\s+([\d.]+m?s)\s+(\S+)(?:\s+([\d.]+m?s))?/);
-      if (match) {
-        transitions.push({
-          property: match[1],
-          duration: match[2],
-          easing: match[3],
-          delay: match[4] || '0s'
-        });
-      }
-    });
-
-    return transitions.length > 0 ? transitions : null;
-  }
-
-  /**
-   * Extract animation name and properties
-   */
-  function parseAnimation(element, computedStyle) {
-    const animationName = computedStyle.animationName || computedStyle.webkitAnimationName;
-
-    if (!animationName || animationName === 'none') {
-      return null;
-    }
-
-    return {
-      name: animationName,
-      duration: computedStyle.animationDuration || computedStyle.webkitAnimationDuration,
-      easing: computedStyle.animationTimingFunction || computedStyle.webkitAnimationTimingFunction,
-      delay: computedStyle.animationDelay || computedStyle.webkitAnimationDelay || '0s',
-      iterationCount: computedStyle.animationIterationCount || computedStyle.webkitAnimationIterationCount || '1',
-      direction: computedStyle.animationDirection || computedStyle.webkitAnimationDirection || 'normal',
-      fillMode: computedStyle.animationFillMode || computedStyle.webkitAnimationFillMode || 'none'
-    };
-  }
-
-  /**
-   * Extract transform value
-   */
-  function parseTransform(computedStyle) {
-    const transform = computedStyle.transform || computedStyle.webkitTransform;
-
-    if (!transform || transform === 'none') {
-      return null;
-    }
-
-    return transform;
-  }
-
-  /**
-   * Get element selector (simplified for readability)
-   */
-  function getSelector(element) {
-    if (element.id) {
-      return `#${element.id}`;
-    }
-
-    if (element.className && typeof element.className === 'string') {
-      const classes = element.className.trim().split(/\s+/).slice(0, 2).join('.');
-      if (classes) {
-        return `.${classes}`;
-      }
-    }
-
-    return element.tagName.toLowerCase();
-  }
-
-  /**
-   * Extract all stylesheets and find @keyframes rules
-   */
-  function extractKeyframes() {
-    const keyframes = {};
-
-    try {
-      // Iterate through all stylesheets
-      Array.from(document.styleSheets).forEach(sheet => {
-        try {
-          // Skip external stylesheets due to CORS
-          if (sheet.href && !sheet.href.startsWith(window.location.origin)) {
-            return;
-          }
-
-          Array.from(sheet.cssRules || sheet.rules || []).forEach(rule => {
-            // Check for @keyframes rules
-            if (rule.type === CSSRule.KEYFRAMES_RULE || rule.type === CSSRule.WEBKIT_KEYFRAMES_RULE) {
-              const name = rule.name;
-              const frames = {};
-
-              Array.from(rule.cssRules || []).forEach(keyframe => {
-                const key = keyframe.keyText; // e.g., "0%", "50%", "100%"
-                frames[key] = keyframe.style.cssText;
-              });
-
-              keyframes[name] = frames;
-            }
-          });
-        } catch (e) {
-          // Skip stylesheets that can't be accessed (CORS)
-          console.warn('Cannot access stylesheet:', sheet.href, e.message);
-        }
-      });
-    } catch (e) {
-      console.error('Error extracting keyframes:', e);
-    }
-
-    return keyframes;
-  }
-
-  /**
-   * Scan visible elements for animations and transitions
-   */
-  function scanElements() {
-    const elements = document.querySelectorAll('*');
-    const transitionData = [];
-    const animationData = [];
-    const transformData = [];
-
-    const uniqueTransitions = new Set();
-    const uniqueAnimations = new Set();
-    const uniqueEasings = new Set();
-    const uniqueDurations = new Set();
-
-    elements.forEach(element => {
-      // Skip invisible elements
-      const rect = element.getBoundingClientRect();
-      if (rect.width === 0 && rect.height === 0) {
-        return;
-      }
-
-      const computedStyle = window.getComputedStyle(element);
-
-      // Extract transitions
-      const transitions = parseTransition(element, computedStyle);
-      if (transitions) {
-        const selector = getSelector(element);
-        transitions.forEach(t => {
-          const key = `${t.property}-${t.duration}-${t.easing}`;
-          if (!uniqueTransitions.has(key)) {
-            uniqueTransitions.add(key);
-            transitionData.push({
-              selector,
-              ...t
-            });
-            uniqueEasings.add(t.easing);
-            uniqueDurations.add(t.duration);
-          }
-        });
-      }
-
-      // Extract animations
-      const animation = parseAnimation(element, computedStyle);
-      if (animation) {
-        const selector = getSelector(element);
-        const key = `${animation.name}-${animation.duration}`;
-        if (!uniqueAnimations.has(key)) {
-          uniqueAnimations.add(key);
-          animationData.push({
-            selector,
-            ...animation
-          });
-          uniqueEasings.add(animation.easing);
-          uniqueDurations.add(animation.duration);
-        }
-      }
-
-      // Extract transforms (on hover/active, we only get current state)
-      const transform = parseTransform(computedStyle);
-      if (transform) {
-        const selector = getSelector(element);
-        transformData.push({
-          selector,
-          transform
-        });
-      }
-    });
-
-    return {
-      transitions: transitionData,
-      animations: animationData,
-      transforms: transformData,
-      uniqueEasings: Array.from(uniqueEasings),
-      uniqueDurations: Array.from(uniqueDurations)
-    };
-  }
-
-  /**
-   * Main extraction function
-   */
-  function extractAnimations() {
-    const elementData = scanElements();
-    const keyframes = extractKeyframes();
-
-    return {
-      metadata: {
-        timestamp: extractionTimestamp,
-        url: currentUrl,
-        method: 'chrome-devtools',
-        version: '1.0.0'
-      },
-      transitions: elementData.transitions,
-      animations: elementData.animations,
-      transforms: elementData.transforms,
-      keyframes: keyframes,
-      summary: {
-        total_transitions: elementData.transitions.length,
-        total_animations: elementData.animations.length,
-        total_transforms: elementData.transforms.length,
-        total_keyframes: Object.keys(keyframes).length,
-        unique_easings: elementData.uniqueEasings,
-        unique_durations: elementData.uniqueDurations
-      }
-    };
-  }
-
-  // Execute extraction
-  return extractAnimations();
-})();

package/.claude/scripts/extract-computed-styles.js

@@ -1,118 +0,0 @@
-/**
- * Extract Computed Styles from DOM
- *
- * This script extracts real CSS computed styles from a webpage's DOM
- * to provide accurate design tokens for UI replication.
- *
- * Usage: Execute this function via Chrome DevTools evaluate_script
- */
-
-(() => {
-  /**
-   * Extract unique values from a set and sort them
-   */
-  const uniqueSorted = (set) => {
-    return Array.from(set)
-      .filter(v => v && v !== 'none' && v !== '0px' && v !== 'rgba(0, 0, 0, 0)')
-      .sort();
-  };
-
-  /**
-   * Parse rgb/rgba to OKLCH format (placeholder - returns original for now)
-   */
-  const toOKLCH = (color) => {
-    // TODO: Implement actual RGB to OKLCH conversion
-    // For now, return the original color with a note
-    return `${color} /* TODO: Convert to OKLCH */`;
-  };
-
-  /**
-   * Extract only key styles from an element
-   */
-  const extractKeyStyles = (element) => {
-    const s = window.getComputedStyle(element);
-    return {
-      color: s.color,
-      bg: s.backgroundColor,
-      borderRadius: s.borderRadius,
-      boxShadow: s.boxShadow,
-      fontSize: s.fontSize,
-      fontWeight: s.fontWeight,
-      padding: s.padding,
-      margin: s.margin
-    };
-  };
-
-  /**
-   * Main extraction function - extract all critical design tokens
-   */
-  const extractDesignTokens = () => {
-    // Include all key UI elements
-    const selectors = [
-      'button', '.btn', '[role="button"]',
-      'input', 'textarea', 'select',
-      'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
-      '.card', 'article', 'section',
-      'a', 'p', 'nav', 'header', 'footer'
-    ];
-
-    // Collect all design tokens
-    const tokens = {
-      colors: new Set(),
-      borderRadii: new Set(),
-      shadows: new Set(),
-      fontSizes: new Set(),
-      fontWeights: new Set(),
-      spacing: new Set()
-    };
-
-    // Extract from all elements
-    selectors.forEach(selector => {
-      try {
-        const elements = document.querySelectorAll(selector);
-        elements.forEach(element => {
-          const s = extractKeyStyles(element);
-
-          // Collect all tokens (no limits)
-          if (s.color && s.color !== 'rgba(0, 0, 0, 0)') tokens.colors.add(s.color);
-          if (s.bg && s.bg !== 'rgba(0, 0, 0, 0)') tokens.colors.add(s.bg);
-          if (s.borderRadius && s.borderRadius !== '0px') tokens.borderRadii.add(s.borderRadius);
-          if (s.boxShadow && s.boxShadow !== 'none') tokens.shadows.add(s.boxShadow);
-          if (s.fontSize) tokens.fontSizes.add(s.fontSize);
-          if (s.fontWeight) tokens.fontWeights.add(s.fontWeight);
-
-          // Extract all spacing values
-          [s.padding, s.margin].forEach(val => {
-            if (val && val !== '0px') {
-              val.split(' ').forEach(v => {
-                if (v && v !== '0px') tokens.spacing.add(v);
-              });
-            }
-          });
-        });
-      } catch (e) {
-        console.warn(`Error: ${selector}`, e);
-      }
-    });
-
-    // Return all tokens (no element details to save context)
-    return {
-      metadata: {
-        extractedAt: new Date().toISOString(),
-        url: window.location.href,
-        method: 'computed-styles'
-      },
-      tokens: {
-        colors: uniqueSorted(tokens.colors),
-        borderRadii: uniqueSorted(tokens.borderRadii),  // ALL radius values
-        shadows: uniqueSorted(tokens.shadows),          // ALL shadows
-        fontSizes: uniqueSorted(tokens.fontSizes),
-        fontWeights: uniqueSorted(tokens.fontWeights),
-        spacing: uniqueSorted(tokens.spacing)
-      }
-    };
-  };
-
-  // Execute and return results
-  return extractDesignTokens();
-})();