claude-code-workflow 6.0.0

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

@@ -0,0 +1,243 @@
+/**
+ * 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

@@ -0,0 +1,118 @@
+/**
+ * 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();
+})();