webgl-forensics 3.1.0

package/SKILL.md

@@ -0,0 +1,1256 @@
+---
+name: webgl-forensics
+description: "Universal website forensics and cloning skill. Reverse-engineer ANY site regardless of tech stack — extracts 3D scenes (Three.js, Babylon, R3F, custom WebGL/WebGPU), animations (GSAP, Framer Motion, anime.js, Lottie, CSS, WAAPI), scroll systems (Lenis, Locomotive, ScrollTrigger, native), responsive/breakpoint behavior, page transitions (Barba.js, Swup, View Transitions), loading sequences, audio systems, accessibility/reduced-motion patterns, and all assets. Auto-scores rebuild complexity (0-100) and produces a diff-validated reconstruction blueprint. Can scaffold the full clone in Next.js, Vite, or Astro."
+category: reverse-engineering
+risk: medium
+source: custom
+tags: [cloning, reverse-engineering, webgl, three.js, gsap, animations, scroll, design-system, forensics, chrome-devtools, responsive, page-transitions, audio, accessibility, complexity-scoring]
+date_added: "2026-04-02"
+version: "3.0"
+---
+
+# WebGL Forensics — Universal Site Cloner
+
+Reverse-engineer **any** website into a complete reconstruction blueprint, regardless of the underlying technology.
+Extracts everything: 3D scenes, shaders, animations, scroll interactions, layout systems, design tokens, fonts, assets, and interaction models.
+
+---
+
+## When to Use
+
+- User provides a URL and wants to understand or recreate its effects
+- "Reverse engineer this site"
+- "Clone the animations from [url]"
+- "How does this site do [effect]?"
+- "Extract the 3D / scroll / animations from [url]"
+- User wants a reconstruction blueprint for any website
+- User wants to analyze a competitor's implementation
+
+## Do Not Use When
+
+- Target requires authentication (login walls) — use manual browser instead
+- User wants a pixel-perfect screenshot-to-HTML conversion only (use `web-clone` skill)
+- User explicitly says "don't analyze, just build something similar"
+
+## Prerequisites
+
+**Required**: Chrome DevTools MCP access.
+- Claude Code: `claude --chrome`
+- Antigravity: Chrome DevTools MCP server must be connected
+
+**Required MCP Tools**:
+| Tool | Purpose |
+|------|---------|
+| `navigate_page` | Load target, scroll to positions |
+| `evaluate_script` | Runtime extraction (the core of everything) |
+| `take_screenshot` | Visual state capture at scroll breakpoints |
+| `take_snapshot` | DOM/a11y tree analysis |
+| `list_network_requests` | Intercept asset loads |
+| `get_network_request` | Download specific assets |
+
+**Optional Chrome Extensions** (enhance depth):
+- Spector.js — WebGL frame capture
+- Three.js DevTools — live scene graph
+- GSAP DevTools — timeline visualization
+- React DevTools — component tree for R3F/React sites
+- Vue DevTools — component tree for Vue/Nuxt sites
+
+## Inputs
+
+| Param | Required | Default | Description |
+|-------|----------|---------|-------------|
+| `target_url` | ✅ | — | URL to reverse-engineer |
+| `output_path` | ❌ | `docs/research/{domain}-forensics.md` | Report destination |
+| `focus` | ❌ | `all` | Narrow scope: `3d`, `animations`, `scroll`, `layout`, `assets`, `all` |
+| `clone` | ❌ | `false` | If `true`, scaffold a working project after analysis |
+| `clone_framework` | ❌ | `next` | Target framework for clone: `next`, `vite`, `astro`, `vanilla` |
+
+---
+
+## PHASE 0: UNIVERSAL TECH STACK DETECTION
+
+> Run this FIRST on every site. The results determine which subsequent phases to run.
+
+Execute via `evaluate_script`:
+
+```javascript
+(() => {
+  const report = {
+    url: window.location.href,
+    timestamp: new Date().toISOString(),
+    framework: null,
+    rendering: { webgl: false, webgpu: false, canvas2d: false, svg: false, css3d: false },
+    libraries: {},
+    animations: {},
+    scroll: {},
+    fonts: [],
+    meta: {},
+  };
+
+  // ═══ FRAMEWORK DETECTION ═══
+  if (window.__NEXT_DATA__) report.framework = { name: 'Next.js', version: window.__NEXT_DATA__?.buildId ? 'detected' : null, router: 'app' };
+  else if (window.__NUXT__) report.framework = { name: 'Nuxt', version: window.__NUXT__?.config?.public?.version || 'detected' };
+  else if (document.querySelector('[data-reactroot]') || document.querySelector('#__next')) report.framework = { name: 'React', version: 'detected' };
+  else if (document.querySelector('[data-v-]')) report.framework = { name: 'Vue', version: 'detected' };
+  else if (document.querySelector('[data-svelte-h]') || window.__svelte) report.framework = { name: 'Svelte/SvelteKit', version: 'detected' };
+  else if (window.ng || document.querySelector('[ng-version]')) report.framework = { name: 'Angular', version: document.querySelector('[ng-version]')?.getAttribute('ng-version') || 'detected' };
+  else if (document.querySelector('[data-astro-cid]') || document.querySelector('astro-island')) report.framework = { name: 'Astro', version: 'detected' };
+  else if (document.querySelector('meta[name="generator"][content*="Gatsby"]')) report.framework = { name: 'Gatsby', version: 'detected' };
+  else if (document.querySelector('meta[name="generator"][content*="WordPress"]')) report.framework = { name: 'WordPress', version: 'detected' };
+  else if (document.querySelector('meta[name="generator"][content*="Webflow"]')) report.framework = { name: 'Webflow', version: 'detected' };
+  else if (document.querySelector('meta[name="generator"][content*="Framer"]') || window.__framer) report.framework = { name: 'Framer', version: 'detected' };
+  else if (document.querySelector('meta[name="generator"][content*="Squarespace"]')) report.framework = { name: 'Squarespace', version: 'detected' };
+  else if (document.querySelector('meta[name="generator"][content*="Wix"]') || window.wixBiSession) report.framework = { name: 'Wix', version: 'detected' };
+  else report.framework = { name: 'Unknown/Vanilla', version: null };
+
+  // ═══ 3D / RENDERING DETECTION ═══
+  const canvases = [...document.querySelectorAll('canvas')];
+  canvases.forEach(c => {
+    const gl2 = c.getContext('webgl2', { failIfMajorPerformanceCaveat: true });
+    const gl = gl2 || c.getContext('webgl');
+    const gpu = navigator.gpu ? true : false;
+    if (gl) report.rendering.webgl = { version: gl2 ? 2 : 1, renderer: gl.getParameter(gl.RENDERER) };
+    if (c.getContext('2d')) report.rendering.canvas2d = true;
+    if (gpu) report.rendering.webgpu = true;
+  });
+  if (document.querySelectorAll('svg').length > 3) report.rendering.svg = true;
+  if (getComputedStyle(document.body).perspective !== 'none' || document.querySelector('[style*="transform-style: preserve-3d"]') || document.querySelector('[style*="perspective"]'))
+    report.rendering.css3d = true;
+
+  // Three.js
+  if (window.THREE) report.libraries.three = { version: window.THREE.REVISION, source: 'global' };
+  else {
+    const threeScripts = [...document.querySelectorAll('script[src]')].filter(s => /three/i.test(s.src));
+    if (threeScripts.length) report.libraries.three = { version: 'bundled', source: threeScripts[0].src };
+    // Check for R3F markers
+    canvases.forEach(c => { if (c.__r$) report.libraries.r3f = true; });
+  }
+  // Babylon.js
+  if (window.BABYLON) report.libraries.babylon = { version: window.BABYLON.Engine?.Version || 'detected' };
+  // PlayCanvas
+  if (window.pc) report.libraries.playcanvas = { version: window.pc.version || 'detected' };
+  // A-Frame
+  if (window.AFRAME) report.libraries.aframe = { version: window.AFRAME.version || 'detected' };
+  // Unity WebGL
+  if (window.unityInstance || document.querySelector('[data-unity-loader]') || document.querySelector('#unity-container'))
+    report.libraries.unity = { version: 'detected' };
+  // PixiJS
+  if (window.PIXI) report.libraries.pixi = { version: window.PIXI.VERSION || 'detected' };
+  // p5.js
+  if (window.p5) report.libraries.p5 = { version: 'detected' };
+  // Spline
+  if (document.querySelector('spline-viewer') || window.__spline) report.libraries.spline = true;
+
+  // ═══ ANIMATION LIBRARY DETECTION ═══
+  if (window.gsap) report.animations.gsap = { version: window.gsap.version };
+  if (window.ScrollTrigger) report.animations.scrollTrigger = true;
+  if (window.ScrollSmoother) report.animations.scrollSmoother = true;
+  // Framer Motion (React)
+  if (document.querySelector('[data-framer-appear-id]') || document.querySelector('[style*="--framer"]'))
+    report.animations.framerMotion = true;
+  // anime.js
+  if (window.anime) report.animations.anime = { version: window.anime.version || 'detected' };
+  // Lottie
+  if (window.lottie || document.querySelector('lottie-player') || document.querySelector('[data-lottie]'))
+    report.animations.lottie = true;
+  // Rive
+  if (window.rive || document.querySelector('canvas[data-rive]') || document.querySelector('rive-canvas'))
+    report.animations.rive = true;
+  // Web Animations API usage
+  const waapi = document.getAnimations?.();
+  if (waapi?.length > 0) report.animations.waapi = { count: waapi.length };
+  // CSS animations count
+  const allEls = document.querySelectorAll('*');
+  let cssAnimCount = 0;
+  let cssTransitionCount = 0;
+  const sample = Math.min(allEls.length, 200); // sample first 200
+  for (let i = 0; i < sample; i++) {
+    const s = getComputedStyle(allEls[i]);
+    if (s.animationName !== 'none') cssAnimCount++;
+    if (s.transitionProperty !== 'all' && s.transitionProperty !== 'none' && s.transitionDuration !== '0s') cssTransitionCount++;
+  }
+  if (cssAnimCount > 0) report.animations.cssAnimations = cssAnimCount;
+  if (cssTransitionCount > 0) report.animations.cssTransitions = cssTransitionCount;
+  // Motion One
+  if (window.Motion || window.motion) report.animations.motionOne = true;
+  // Popmotion
+  if (window.popmotion) report.animations.popmotion = true;
+
+  // ═══ SCROLL LIBRARY DETECTION ═══
+  if (window.__lenis || document.querySelector('[data-lenis-prevent]') || document.querySelector('.lenis'))
+    report.scroll.lenis = true;
+  if (window.LocomotiveScroll || document.querySelector('[data-scroll-container]'))
+    report.scroll.locomotive = true;
+  if (window.ScrollMagic) report.scroll.scrollMagic = true;
+  // Native scroll-driven animations (CSS)
+  const hasScrollTimeline = CSS?.supports?.('animation-timeline', 'scroll()');
+  if (hasScrollTimeline) report.scroll.nativeScrollDriven = true;
+  // Smooth scroll detection
+  const htmlStyle = getComputedStyle(document.documentElement);
+  if (htmlStyle.scrollBehavior === 'smooth') report.scroll.smoothScroll = 'css';
+
+  // ═══ FONT DETECTION ═══
+  try {
+    const fonts = new Set();
+    document.fonts.forEach(f => fonts.add(`${f.family} (${f.weight}, ${f.style})`));
+    report.fonts = [...fonts];
+  } catch(e) { report.fonts = ['detection failed']; }
+
+  // ═══ CSS FRAMEWORK DETECTION ═══
+  const sheets = [...document.styleSheets];
+  const firstSheetText = (() => { try { return sheets[0]?.cssRules?.[0]?.cssText || ''; } catch(e) { return ''; }})();
+  if (document.querySelector('[class*="tw-"]') || document.querySelector('[class*="bg-"]') || firstSheetText.includes('--tw-'))
+    report.libraries.tailwind = true;
+  if (document.querySelector('.chakra-ui') || document.querySelector('[data-chakra-component]'))
+    report.libraries.chakra = true;
+  if (document.querySelector('[class*="MuiButton"]') || document.querySelector('[class*="css-"][class*="Mui"]'))
+    report.libraries.mui = true;
+  if (document.querySelector('[class*="mantine-"]')) report.libraries.mantine = true;
+
+  // ═══ META / HEAD ═══
+  report.meta.title = document.title;
+  report.meta.description = document.querySelector('meta[name="description"]')?.content;
+  report.meta.viewport = document.querySelector('meta[name="viewport"]')?.content;
+  report.meta.ogImage = document.querySelector('meta[property="og:image"]')?.content;
+  report.meta.charset = document.characterSet;
+  report.meta.lang = document.documentElement.lang;
+
+  // ═══ SCRIPT INVENTORY ═══
+  report.scripts = [...document.querySelectorAll('script[src]')].map(s => s.src)
+    .filter(s => !/gtag|analytics|pixel|facebook|hotjar|clarity|cdn\.cookie/i.test(s))
+    .slice(0, 30);
+
+  return report;
+})()
+```
+
+**Decision Tree** — Based on detection results, run the appropriate phases:
+
+| Detection | Phase to Run |
+|-----------|-------------|
+| `rendering.webgl` or any 3D library | → Phase 1 (3D Forensics) |
+| `animations.gsap` or `animations.scrollTrigger` | → Phase 2A (GSAP Extraction) |
+| `animations.framerMotion` | → Phase 2B (Framer Motion Extraction) |
+| `animations.anime` | → Phase 2C (anime.js Extraction) |
+| `animations.lottie` | → Phase 2D (Lottie Extraction) |
+| `animations.rive` | → Phase 2E (Rive Extraction) |
+| `animations.cssAnimations > 0` or `waapi` | → Phase 2F (CSS/WAAPI Extraction) |
+| `scroll.lenis` or `scroll.locomotive` or `scroll.scrollMagic` | → Phase 3 (Scroll System Extraction) |
+| Always | → Phase 4 (Layout & Design Token Extraction) |
+| Always | → Phase 5 (Asset Inventory) |
+| If `clone: true` | → Phase 6 (Project Scaffolding) |
+| **Always — Bonus Phases (run in parallel with above)** | |
+| Always | → Phase 7 (Responsive & Breakpoint Analysis) · script: `03-responsive-analysis.js` |
+| Always | → Phase 8 (Page Transition Extraction) · script: `04-page-transitions.js` |
+| Always, run first | → Phase 9 (Loading Sequence & Preloader) · script: `05-loading-sequence.js` |
+| Always | → Phase 10 (Audio System Extraction) · script: `06-audio-extraction.js` |
+| Always | → Phase 11 (Accessibility & Reduced Motion) · script: `07-accessibility-reduced-motion.js` |
+| Always | → Phase 12 (Scroll Screenshots) · script: `11-scroll-screenshot-grid.js` |
+| Always | → Phase 13 (Network Waterfall) · script: `12-network-waterfall.js` |
+| If R3F detected | → Phase 14 (React Fiber Walker) · script: `13-react-fiber-walker.js` |
+| If Custom WebGL detected | → Phase 15 (Shader Hot-Patch) · script: `14-shader-hotpatch.js` |
+| Always | → Phase 16 (Multi-Page Crawler) · script: `15-multipage-crawler.js` |
+| If GSAP detected | → Phase 17 (GSAP Timeline) · script: `16-gsap-timeline-recorder.js` |
+| If R3F detected | → Phase 18 (R3F Serializer) · script: `17-r3f-fiber-serializer.js` |
+| Always | → Phase 19 (Font Extractor) · script: `18-font-extractor.js` |
+| Always | → Phase 20 (Token Exporter) · script: `19-design-token-export.js` |
+| Always | → Phase 21 (Visual Timelines) · script: `20-timeline-visualizer.js` |
+| **Run LAST** | → Phase 22 (Complexity Score) · script: `08-complexity-scorer.js` |
+| Always | → Phase 23 (Lighthouse Auditing) · script: `21-lighthouse-audit.js` |
+| After clone is built | → Phase 24 (Visual Diff Validation) · script: `09-visual-diff-validator.js` |
+
+---
+
+## PHASE 1: 3D SCENE FORENSICS
+
+> Run when ANY WebGL/WebGPU/3D library is detected.
+
+### 1A. Renderer Extraction
+
+```javascript
+(() => {
+  const canvases = [...document.querySelectorAll('canvas')];
+  return canvases.map((c, i) => {
+    const gl = c.getContext('webgl2') || c.getContext('webgl');
+    if (!gl) return { index: i, webgl: false };
+    return {
+      index: i,
+      width: c.width, height: c.height,
+      pixelRatio: window.devicePixelRatio,
+      version: gl.getParameter(gl.VERSION),
+      renderer: gl.getParameter(gl.RENDERER),
+      vendor: gl.getParameter(gl.VENDOR),
+      maxTextureSize: gl.getParameter(gl.MAX_TEXTURE_SIZE),
+      extensionCount: gl.getSupportedExtensions()?.length,
+      antialias: gl.getContextAttributes()?.antialias,
+      alpha: gl.getContextAttributes()?.alpha,
+      stencil: gl.getContextAttributes()?.stencil,
+    };
+  });
+})()
+```
+
+### 1B. Shader Program Extraction (THE GOLD)
+
+> Works with ANY WebGL app — Three.js, Babylon, PlayCanvas, custom.
+
+**Strategy**: Hook into the WebGL context to intercept shader programs.
+
+```javascript
+(() => {
+  const canvas = document.querySelector('canvas');
+  if (!canvas) return { error: 'No canvas found' };
+  const gl = canvas.getContext('webgl2') || canvas.getContext('webgl');
+  if (!gl) return { error: 'No WebGL context' };
+
+  // Method 1: Enumerate via WEBGL_debug_shaders extension
+  const debugExt = gl.getExtension('WEBGL_debug_shaders');
+
+  // Method 2: Try Three.js renderer cache
+  let threePrograms = null;
+  const keys = Object.getOwnPropertyNames(canvas);
+  for (const key of keys) {
+    try {
+      if (canvas[key]?.info?.programs) {
+        threePrograms = canvas[key].info;
+        break;
+      }
+    } catch(e) {}
+  }
+
+  // Method 3: Babylon.js engine
+  let babylonEngine = null;
+  if (window.BABYLON) {
+    const engines = window.BABYLON.Engine?.Instances;
+    if (engines?.length) babylonEngine = engines[0];
+  }
+
+  // Method 4: Walk the prototype chain for any renderer
+  const results = {
+    debugExtension: !!debugExt,
+    threeInfo: threePrograms ? {
+      programCount: threePrograms.programs?.length,
+      render: threePrograms.render,
+      memory: threePrograms.memory,
+    } : null,
+    babylonEngine: babylonEngine ? {
+      version: babylonEngine.name,
+      webglVersion: babylonEngine.webGLVersion,
+    } : null,
+  };
+
+  return results;
+})()
+```
+
+### 1C. Three.js Scene Graph (if Three.js detected)
+
+```javascript
+(() => {
+  // Multiple strategies to find the scene
+  let scene = null;
+  let scenePath = '';
+
+  // Strategy 1: Direct window scan
+  for (const key of Object.keys(window)) {
+    try {
+      if (window[key]?.isScene) { scene = window[key]; scenePath = `window.${key}`; break; }
+      if (window[key]?.scene?.isScene) { scene = window[key].scene; scenePath = `window.${key}.scene`; break; }
+    } catch(e) {}
+  }
+
+  // Strategy 2: R3F store (React Three Fiber)
+  if (!scene) {
+    const canvas = document.querySelector('canvas');
+    if (canvas) {
+      const fiberKey = Object.keys(canvas).find(k => k.startsWith('__reactFiber') || k.startsWith('__reactInternalInstance'));
+      if (fiberKey) {
+        let fiber = canvas[fiberKey];
+        for (let i = 0; i < 20 && fiber; i++) {
+          const state = fiber.memoizedState;
+          if (state?.memoizedState?.scene?.isScene) {
+            scene = state.memoizedState.scene;
+            scenePath = 'R3F fiber store';
+            break;
+          }
+          fiber = fiber.return;
+        }
+      }
+    }
+  }
+
+  // Strategy 3: THREE.Cache or global instances
+  if (!scene && window.THREE) {
+    window.THREE.Cache?.files && Object.values(window.THREE.Cache.files).forEach(f => {
+      if (f?.isScene) { scene = f; scenePath = 'THREE.Cache'; }
+    });
+  }
+
+  if (!scene) return { error: 'Scene not found. Try Spector.js for WebGL-level extraction.' };
+
+  const extract = (obj, depth = 0) => {
+    if (depth > 8) return '...max depth';
+    const data = {
+      type: obj.type,
+      name: obj.name || undefined,
+      uuid: obj.uuid?.slice(0, 8),
+      visible: obj.visible,
+      position: obj.position ? { x: +obj.position.x.toFixed(3), y: +obj.position.y.toFixed(3), z: +obj.position.z.toFixed(3) } : undefined,
+      rotation: obj.rotation ? { x: +obj.rotation.x.toFixed(3), y: +obj.rotation.y.toFixed(3), z: +obj.rotation.z.toFixed(3) } : undefined,
+      scale: obj.scale ? { x: +obj.scale.x.toFixed(3), y: +obj.scale.y.toFixed(3), z: +obj.scale.z.toFixed(3) } : undefined,
+    };
+
+    if (obj.isMesh || obj.isPoints || obj.isLine || obj.isSprite) {
+      data.geometry = { type: obj.geometry?.type, params: obj.geometry?.parameters };
+      if (obj.geometry?.attributes) {
+        data.geometry.attributes = Object.keys(obj.geometry.attributes);
+        data.geometry.vertexCount = obj.geometry.attributes.position?.count;
+      }
+      data.material = {
+        type: obj.material?.type,
+        color: obj.material?.color?.getHexString?.(),
+        opacity: obj.material?.opacity,
+        transparent: obj.material?.transparent,
+        wireframe: obj.material?.wireframe,
+        side: obj.material?.side,
+        blending: obj.material?.blending,
+      };
+      // Extract shaders if ShaderMaterial / RawShaderMaterial
+      if (obj.material?.isShaderMaterial || obj.material?.isRawShaderMaterial) {
+        data.material.vertexShader = obj.material.vertexShader;
+        data.material.fragmentShader = obj.material.fragmentShader;
+        data.material.uniforms = {};
+        if (obj.material.uniforms) {
+          for (const [k, u] of Object.entries(obj.material.uniforms)) {
+            data.material.uniforms[k] = {
+              type: u.value?.constructor?.name || typeof u.value,
+              value: typeof u.value === 'number' ? u.value :
+                     typeof u.value === 'boolean' ? u.value :
+                     u.value?.isVector2 ? { x: u.value.x, y: u.value.y } :
+                     u.value?.isVector3 ? { x: u.value.x, y: u.value.y, z: u.value.z } :
+                     u.value?.isColor ? u.value.getHexString() :
+                     String(u.value).slice(0, 80)
+            };
+          }
+        }
+      }
+      // Standard material textures
+      ['map', 'normalMap', 'roughnessMap', 'metalnessMap', 'emissiveMap', 'envMap', 'aoMap'].forEach(prop => {
+        if (obj.material?.[prop]) {
+          data.material[prop] = {
+            image: obj.material[prop].image?.src?.slice(0, 100) || obj.material[prop].image?.width + 'x' + obj.material[prop].image?.height,
+            wrapS: obj.material[prop].wrapS,
+            wrapT: obj.material[prop].wrapT,
+          };
+        }
+      });
+    }
+
+    if (obj.isCamera) {
+      data.fov = obj.fov; data.near = obj.near; data.far = obj.far; data.aspect = obj.aspect;
+      data.zoom = obj.zoom;
+    }
+    if (obj.isLight) {
+      data.color = obj.color?.getHexString(); data.intensity = obj.intensity;
+      if (obj.isDirectionalLight || obj.isSpotLight) data.target = obj.target?.position;
+      if (obj.isSpotLight) { data.angle = obj.angle; data.penumbra = obj.penumbra; }
+    }
+
+    if (obj.children?.length > 0) {
+      data.children = obj.children.map(c => extract(c, depth + 1));
+    }
+    return data;
+  };
+
+  return { path: scenePath, graph: extract(scene) };
+})()
+```
+
+### 1D. Babylon.js Scene Graph (if Babylon detected)
+
+```javascript
+(() => {
+  if (!window.BABYLON) return { skip: 'No Babylon.js' };
+  const engines = window.BABYLON.Engine.Instances;
+  if (!engines?.length) return { error: 'No engine instances' };
+  const engine = engines[0];
+  const scenes = engine.scenes;
+  return scenes.map((scene, i) => ({
+    index: i,
+    meshCount: scene.meshes.length,
+    lightCount: scene.lights.length,
+    cameraCount: scene.cameras.length,
+    materialCount: scene.materials.length,
+    meshes: scene.meshes.map(m => ({
+      name: m.name, type: m.getClassName(),
+      position: { x: m.position.x, y: m.position.y, z: m.position.z },
+      material: m.material?.name,
+    })),
+    activeCam: { name: scene.activeCamera?.name, type: scene.activeCamera?.getClassName() },
+  }));
+})()
+```
+
+### 1E. Post-Processing Detection
+
+```javascript
+(() => {
+  // Three.js EffectComposer
+  const composers = [];
+  for (const key of Object.keys(window)) {
+    try {
+      const obj = window[key];
+      if (obj?.passes) composers.push({ path: key, passes: obj.passes.map(p => p.constructor.name) });
+      if (obj?.composer?.passes) composers.push({ path: key + '.composer', passes: obj.composer.passes.map(p => p.constructor.name) });
+    } catch(e) {}
+  }
+
+  // Common post-processing effects to search for in bundles
+  const knownEffects = ['BloomEffect', 'VignetteEffect', 'NoiseEffect', 'ChromaticAberration',
+    'UnrealBloomPass', 'RenderPass', 'ShaderPass', 'FilmPass', 'GlitchPass', 'SMAAPass',
+    'FXAAShader', 'BokehPass', 'SSAOPass', 'OutlinePass'];
+
+  return { composers, knownEffects: 'search bundles for these string literals' };
+})()
+```
+
+---
+
+## PHASE 2: ANIMATION EXTRACTION
+
+> Run the sub-phase matching the detected animation library.
+
+### 2A. GSAP Extraction
+
+```javascript
+(() => {
+  if (!window.gsap) return { error: 'GSAP not on window' };
+
+  const result = { version: window.gsap.version, tweens: [], scrollTriggers: [], timelines: [] };
+
+  // All tweens
+  const children = window.gsap.globalTimeline?.getChildren(true, true, true) || [];
+  result.tweens = children.slice(0, 100).map((t, i) => ({
+    index: i,
+    type: t.constructor.name,
+    duration: t.duration?.(),
+    target: t.targets?.()?.map(el => el.tagName ? el.tagName + (el.className ? '.' + String(el.className).split(' ')[0] : '') : typeof el).join(', ') || 'unknown',
+    vars: Object.keys(t.vars || {}).filter(k => !['onComplete', 'onUpdate', 'callbackScope'].includes(k)),
+  }));
+
+  // ScrollTriggers
+  try {
+    const sts = window.ScrollTrigger?.getAll?.() || [];
+    result.scrollTriggers = sts.map((st, i) => ({
+      index: i,
+      trigger: st.trigger?.tagName + (st.trigger?.id ? '#' + st.trigger.id : '') + (st.trigger?.className ? '.' + String(st.trigger.className).split(' ')[0] : ''),
+      start: st.vars?.start,
+      end: st.vars?.end,
+      scrub: st.vars?.scrub,
+      pin: !!st.vars?.pin,
+      pinSpacing: st.vars?.pinSpacing,
+      anticipatePin: st.vars?.anticipatePin,
+      toggleActions: st.vars?.toggleActions,
+      snap: st.vars?.snap,
+      progress: +st.progress.toFixed(3),
+      isActive: st.isActive,
+    }));
+  } catch(e) { result.scrollTriggerError = e.message; }
+
+  return result;
+})()
+```
+
+### 2B. Framer Motion Extraction
+
+```javascript
+(() => {
+  // Framer Motion stores animation data in data attributes
+  const elements = document.querySelectorAll('[data-framer-appear-id], [style*="--framer"], [data-framer-component-type]');
+  return [...elements].map(el => ({
+    tag: el.tagName,
+    appearId: el.dataset.framerAppearId,
+    componentType: el.dataset.framerComponentType,
+    style: {
+      transform: el.style.transform,
+      opacity: el.style.opacity,
+      transition: el.style.transition,
+    },
+    framerVars: [...el.style].filter(p => p.startsWith('--framer')).reduce((acc, p) => {
+      acc[p] = el.style.getPropertyValue(p); return acc;
+    }, {}),
+  }));
+})()
+```
+
+### 2C. anime.js Extraction
+
+```javascript
+(() => {
+  if (!window.anime) return { error: 'anime.js not found' };
+  const running = window.anime.running || [];
+  return {
+    version: window.anime.version || 'detected',
+    runningCount: running.length,
+    animations: running.map(a => ({
+      type: a.type,
+      duration: a.duration,
+      delay: a.delay,
+      easing: a.easing,
+      direction: a.direction,
+      loop: a.loop,
+      targets: a.animatables?.map(t => t.target?.tagName || typeof t.target),
+    })),
+  };
+})()
+```
+
+### 2D. Lottie Extraction
+
+```javascript
+(() => {
+  // Find Lottie players
+  const players = document.querySelectorAll('lottie-player, dotlottie-player, [data-lottie]');
+  const iframes = document.querySelectorAll('iframe[src*="lottie"]');
+  // Check for bodymovin
+  const bodymovin = window.bodymovin || window.lottie;
+
+  return {
+    playerElements: [...players].map(p => ({
+      tag: p.tagName,
+      src: p.getAttribute('src') || p.dataset.lottie,
+      autoplay: p.hasAttribute('autoplay'),
+      loop: p.hasAttribute('loop'),
+      mode: p.getAttribute('mode'),
+    })),
+    bodymovin: bodymovin ? {
+      version: bodymovin.version || 'detected',
+      instances: bodymovin.getRegisteredAnimations?.()?.length || 'unknown',
+    } : null,
+    iframes: [...iframes].map(f => f.src),
+  };
+})()
+```
+
+### 2E. Rive Extraction
+
+```javascript
+(() => {
+  const riveCanvases = document.querySelectorAll('canvas[data-rive], rive-canvas');
+  return {
+    riveElements: riveCanvases.length,
+    globalRive: !!window.rive,
+  };
+})()
+```
+
+### 2F. CSS Animations & Web Animations API Extraction
+
+```javascript
+(() => {
+  const animations = document.getAnimations?.() || [];
+  return {
+    waapi: animations.map(a => ({
+      id: a.id || undefined,
+      playState: a.playState,
+      duration: a.effect?.getTiming?.()?.duration,
+      delay: a.effect?.getTiming?.()?.delay,
+      easing: a.effect?.getTiming?.()?.easing,
+      iterations: a.effect?.getTiming?.()?.iterations,
+      target: a.effect?.target?.tagName + (a.effect?.target?.className ? '.' + String(a.effect.target.className).split(' ')[0] : ''),
+      keyframes: a.effect?.getKeyframes?.()?.slice(0, 5), // first 5
+    })).slice(0, 50),
+    cssKeyframes: (() => {
+      const rules = [];
+      try {
+        [...document.styleSheets].forEach(sheet => {
+          try {
+            [...sheet.cssRules].forEach(rule => {
+              if (rule instanceof CSSKeyframesRule) {
+                rules.push({ name: rule.name, keyframeCount: rule.cssRules.length });
+              }
+            });
+          } catch(e) {} // CORS
+        });
+      } catch(e) {}
+      return rules;
+    })(),
+  };
+})()
+```
+
+---
+
+## PHASE 3: SCROLL SYSTEM EXTRACTION
+
+### 3A. Lenis / Locomotive Config
+
+```javascript
+(() => {
+  const result = {};
+  
+  // Lenis
+  if (window.__lenis) {
+    const l = window.__lenis;
+    result.lenis = {
+      duration: l.options?.duration,
+      easing: l.options?.easing?.toString?.(),
+      orientation: l.options?.orientation,
+      gestureOrientation: l.options?.gestureOrientation,
+      smoothWheel: l.options?.smoothWheel,
+      wheelMultiplier: l.options?.wheelMultiplier,
+      touchMultiplier: l.options?.touchMultiplier,
+    };
+  }
+
+  // Locomotive Scroll
+  if (window.LocomotiveScroll) {
+    const container = document.querySelector('[data-scroll-container]');
+    result.locomotive = {
+      container: container ? container.tagName + (container.id ? '#' + container.id : '') : null,
+      sections: document.querySelectorAll('[data-scroll-section]').length,
+      scrollElements: [...document.querySelectorAll('[data-scroll]')].map(el => ({
+        speed: el.dataset.scrollSpeed,
+        direction: el.dataset.scrollDirection,
+        position: el.dataset.scrollPosition,
+        class: el.dataset.scrollClass,
+        repeat: el.dataset.scrollRepeat,
+      })).slice(0, 30),
+    };
+  }
+
+  // Scroll-position metadata
+  result.pageHeight = document.documentElement.scrollHeight;
+  result.viewportHeight = window.innerHeight;
+  result.scrollSections = result.pageHeight / window.innerHeight;
+
+  return result;
+})()
+```
+
+### 3B. Scroll-to-State Mapping
+
+Programmatically scroll in 10vh increments. At each position:
+1. Screenshot
+2. Re-extract active ScrollTrigger states
+3. Re-extract 3D object positions/uniforms
+4. Record which CSS classes toggled
+
+```javascript
+// Execute for each scroll position: 0, 10vh, 20vh, ... 100vh, 200vh, etc.
+// Set SCROLL_Y before running:
+(() => {
+  const SCROLL_Y = 0; // REPLACE per iteration
+  window.scrollTo({ top: SCROLL_Y, behavior: 'instant' });
+
+  // Wait a frame for renders
+  return new Promise(resolve => requestAnimationFrame(() => {
+    const state = { scrollY: window.scrollY };
+
+    // Active ScrollTriggers
+    if (window.ScrollTrigger) {
+      state.activeTriggers = window.ScrollTrigger.getAll()
+        .filter(st => st.isActive)
+        .map(st => ({
+          trigger: st.trigger?.className?.split(' ')[0],
+          progress: +st.progress.toFixed(3),
+        }));
+    }
+
+    resolve(state);
+  }));
+})()
+```
+
+---
+
+## PHASE 4: LAYOUT & DESIGN TOKEN EXTRACTION
+
+> Always run this phase.
+
+### 4A. Design Tokens
+
+```javascript
+(() => {
+  const root = getComputedStyle(document.documentElement);
+  const tokens = {};
+
+  // Extract all CSS custom properties
+  const allProps = [];
+  try {
+    [...document.styleSheets].forEach(sheet => {
+      try {
+        [...sheet.cssRules].forEach(rule => {
+          if (rule.selectorText === ':root' || rule.selectorText === ':host') {
+            const style = rule.style;
+            for (let i = 0; i < style.length; i++) {
+              if (style[i].startsWith('--')) allProps.push({ name: style[i], value: style.getPropertyValue(style[i]).trim() });
+            }
+          }
+        });
+      } catch(e) {} // CORS
+    });
+  } catch(e) {}
+
+  tokens.cssVariables = allProps;
+  tokens.colors = allProps.filter(p => /color|bg|background|accent|primary|secondary|border|text|surface|muted|destructive|foreground/i.test(p.name));
+  tokens.spacing = allProps.filter(p => /space|gap|padding|margin|radius|size/i.test(p.name));
+  tokens.typography = allProps.filter(p => /font|text|letter|line-height|tracking|leading/i.test(p.name));
+
+  // Body computed styles
+  const body = getComputedStyle(document.body);
+  tokens.bodyStyles = {
+    backgroundColor: body.backgroundColor,
+    color: body.color,
+    fontFamily: body.fontFamily,
+    fontSize: body.fontSize,
+    lineHeight: body.lineHeight,
+  };
+
+  return tokens;
+})()
+```
+
+### 4B. Layout Structure
+
+```javascript
+(() => {
+  // Analyze the main content sections
+  const sections = document.querySelectorAll('section, [class*="section"], main > div, [data-section]');
+  return {
+    sectionCount: sections.length,
+    sections: [...sections].map((s, i) => ({
+      index: i,
+      tag: s.tagName,
+      id: s.id || undefined,
+      className: s.className?.toString?.().slice(0, 100),
+      rect: s.getBoundingClientRect(),
+      display: getComputedStyle(s).display,
+      position: getComputedStyle(s).position,
+      height: s.offsetHeight,
+      childCount: s.children.length,
+    })),
+    nav: (() => {
+      const nav = document.querySelector('nav, header, [class*="nav"], [role="navigation"]');
+      return nav ? {
+        tag: nav.tagName,
+        position: getComputedStyle(nav).position,
+        links: [...nav.querySelectorAll('a')].map(a => ({ text: a.textContent.trim(), href: a.getAttribute('href') })),
+      } : null;
+    })(),
+    footer: (() => {
+      const footer = document.querySelector('footer, [class*="footer"]');
+      return footer ? { tag: footer.tagName, height: footer.offsetHeight } : null;
+    })(),
+  };
+})()
+```
+
+---
+
+## PHASE 5: ASSET INVENTORY
+
+### 5A. Network Request Audit
+
+Use `list_network_requests` to find:
+- JS bundles (`.js`, `.mjs`, `.chunk.js`)
+- 3D models (`.glb`, `.gltf`, `.obj`, `.fbx`, `.draco`)
+- Shaders (`.glsl`, `.vert`, `.frag`, `.wgsl`)
+- Textures (`.hdr`, `.exr`, `.ktx2`, `.basis`)
+- Fonts (`.woff2`, `.woff`, `.ttf`, `.otf`)
+- Images (`.png`, `.jpg`, `.webp`, `.avif`, `.svg`)
+- Videos (`.mp4`, `.webm`)
+- Lottie/Rive (`.json`, `.riv`, `.lottie`)
+- Audio (`.mp3`, `.ogg`, `.wav`)
+
+### 5B. Font Extraction
+
+```javascript
+(() => {
+  const fontFaces = [];
+  try {
+    [...document.styleSheets].forEach(sheet => {
+      try {
+        [...sheet.cssRules].forEach(rule => {
+          if (rule instanceof CSSFontFaceRule) {
+            fontFaces.push({
+              family: rule.style.fontFamily,
+              src: rule.style.src?.slice(0, 200),
+              weight: rule.style.fontWeight,
+              style: rule.style.fontStyle,
+              display: rule.style.fontDisplay,
+            });
+          }
+        });
+      } catch(e) {}
+    });
+  } catch(e) {}
+
+  // Google Fonts links
+  const googleFonts = [...document.querySelectorAll('link[href*="fonts.googleapis.com"]')]
+    .map(l => l.href);
+
+  return { fontFaces, googleFonts, loadedFonts: [...document.fonts].map(f => f.family) };
+})()
+```
+
+### 5C. Image/Media Extraction
+
+```javascript
+(() => {
+  const images = [...document.querySelectorAll('img, picture source, [style*="background-image"]')];
+  return images.map(el => ({
+    tag: el.tagName,
+    src: el.src || el.srcset || (() => {
+      const bg = getComputedStyle(el).backgroundImage;
+      return bg !== 'none' ? bg.match(/url\("?(.+?)"?\)/)?.[1] : null;
+    })(),
+    alt: el.alt || undefined,
+    width: el.naturalWidth || el.width,
+    height: el.naturalHeight || el.height,
+    loading: el.loading,
+    sizes: el.sizes || undefined,
+  })).filter(i => i.src).slice(0, 100);
+})()
+```
+
+---
+
+## PHASE 6: CLONE SCAFFOLDING (Optional)
+
+> Only run if `clone: true`.
+
+### Project Setup
+
+Based on `clone_framework`:
+
+**Next.js**:
+```bash
+npx -y create-next-app@latest ./ --ts --tailwind --eslint --app --src-dir --import-alias "@/*" --use-pnpm
+pnpm add gsap @gsap/react three @types/three @react-three/fiber @react-three/drei
+```
+
+**Vite**:
+```bash
+npx -y create-vite@latest ./ --template react-ts
+pnpm add gsap three @react-three/fiber @react-three/drei
+```
+
+**Astro**:
+```bash
+npx -y create-astro@latest ./ --template minimal --typescript strict --install
+npx -y astro add react
+pnpm add gsap three
+```
+
+### Scaffolding Checklist
+
+After project creation, generate:
+1. Design token CSS file from Phase 4A extraction
+2. Layout component matching Phase 4B structure
+3. Animation utility hooks from Phase 2 data
+4. 3D scene component from Phase 1C scene graph
+5. Scroll configuration from Phase 3
+6. Asset directories with downloaded files from Phase 5
+
+---
+
+## PHASE 7: RESPONSIVE & BREAKPOINT ANALYSIS
+
+> Run script `scripts/03-responsive-analysis.js` via `evaluate_script` at each breakpoint.
+> Use `resize_page` tool to switch viewports: 375, 768, 1024, 1440, 1920.
+
+```javascript
+// Paste full contents of scripts/03-responsive-analysis.js here
+// or execute directly via evaluate_script with the file contents
+```
+
+**Workflow:**
+1. `resize_page` → width: 375, height: 812 → run script → save as `breakpoint-mobile.json`
+2. `resize_page` → width: 768, height: 1024 → run script → save as `breakpoint-tablet.json`
+3. `resize_page` → width: 1440, height: 900 → run script → save as `breakpoint-desktop.json`
+4. Compare `visibleCanvases`, `activeAnimations`, `cssBreakpoints` across all three
+5. Document any mobile kill-switches found in `mobileKillSwitches.elements`
+
+**Key outputs to record:**
+- CSS breakpoint values detected
+- Whether 3D/canvas is hidden on mobile (`hiddenCanvases > 0`)
+- Animation count change across viewports
+- Grid column changes
+
+---
+
+## PHASE 8: PAGE TRANSITION EXTRACTION
+
+> Run script `scripts/04-page-transitions.js` via `evaluate_script` on the initial page load.
+
+**Additional manual steps:**
+1. Navigate to a second page while monitoring Network panel
+2. Look for fetch requests to JSON/HTML that indicate SPA routing
+3. Observe overlay elements in DOM during transition (use take_snapshot before/after navigation)
+4. Check if `#app` or `#__next` innerHTML changes (React/Vue SPA) or full page reloads
+
+**Key outputs to record:**
+- Libraries detected (Barba.js, Swup, View Transitions)
+- Overlay elements with `position: fixed; z-index > 10`
+- GSAP page-level pins
+- View Transition names (for CSS-native transitions)
+
+---
+
+## PHASE 9: LOADING SEQUENCE & PRELOADER
+
+> Run script `scripts/05-loading-sequence.js` via `evaluate_script` immediately after `navigate_page`.
+> Do NOT scroll before running — you want the initial load state.
+
+**Manual steps:**
+1. Open Network panel → set throttling to "Fast 3G" to observe preloader behavior
+2. Take screenshot immediately after load (`take_screenshot`)
+3. Run the loading sequence script
+4. Take another screenshot after 2–3 seconds to capture preloader exit
+
+**Key outputs to record:**
+- Preloader element structure and CSS
+- Resource hints (`<link rel="preload">` assets)
+- Heaviest resources (those impacting Time to Interactive)
+- `firstContentfulPaint` timing
+- Whether 3D canvas is lazily initialized or eager
+
+---
+
+## PHASE 10: AUDIO SYSTEM EXTRACTION
+
+> Run script `scripts/06-audio-extraction.js` via `evaluate_script`.
+> Note: Browser autoplay policies may block audio until first user gesture.
+
+**Manual steps:**
+1. Run script immediately on load
+2. Then click anywhere on the page (user gesture)
+3. Run script again — compare `activeContexts` before/after
+4. Hover over interactive elements and check the audio tab in DevTools for new activity
+
+**Key outputs to record:**
+- Audio libraries present (Howler, Tone.js, Web Audio API)
+- Active AudioContext count and state
+- Media elements (ambient video/audio tracks)
+- Scroll-triggered audio data attributes
+
+---
+
+## PHASE 11: ACCESSIBILITY & REDUCED MOTION
+
+> Run script `scripts/07-accessibility-reduced-motion.js` twice:
+> 1. Normal (DevTools > Rendering > prefers-reduced-motion: no preference)
+> 2. With reduced motion emulated (DevTools > Rendering > prefers-reduced-motion: reduce)
+
+**Manual steps:**
+1. Desktop DevTools → ⋮ menu → More tools → Rendering → Emulate CSS media features
+2. Set `prefers-reduced-motion: reduce`
+3. Reload page and observe — do animations stop? Does the 3D scene disappear?
+4. Run the script and compare `activeAnimations` count
+5. Run Lighthouse accessibility audit for a score
+
+**Key outputs to record:**
+- CSS `@media (prefers-reduced-motion)` rule count
+- Whether GSAP uses `gsap.matchMedia()` for motion handling
+- ARIA role coverage
+- Focus management quality
+- Whether `:focus-visible` CSS is present
+
+---
+
+## PHASE 12: COMPLEXITY SCORING
+
+> Run LAST, after all other phases complete.
+> Uses script `scripts/08-complexity-scorer.js` via `evaluate_script`.
+
+The scorer returns:
+- **Score** (0–100)
+- **Rating**: Simple / Moderate / Complex / Very Complex / Extreme
+- **Estimated rebuild time**
+- **Breakdown** by category (3D, Animations, Scroll, Interactions, Transitions, Audio, Framework)
+
+```javascript
+// Paste full contents of scripts/08-complexity-scorer.js
+// Result example:
+// { score: 67, rating: 'Very Complex', estimatedRebuildTime: '2-4 weeks', ... }
+```
+
+Record the verdict in the Executive Summary of the reconstruction blueprint.
+
+---
+
+## PHASE 13: VISUAL DIFF VALIDATION (Clone QA)
+
+> Run AFTER the clone is built and running locally.
+> Uses script `scripts/09-visual-diff-validator.js` on BOTH source and clone.
+
+**Workflow:**
+1. Open source site → `evaluate_script` with validator → save JSON as `source-snapshot.json`
+2. Open localhost clone → `evaluate_script` with validator → save JSON as `clone-snapshot.json`
+3. Compare key values:
+   - `typography.bodyFont` — must match exactly
+   - `layout.sectionCount` — should match ±1
+   - `layout.canvasCount` — must match
+   - `layout.totalPageHeight` — should be within 20%
+   - `animations.scrollTriggerCount` — should be ≥ source
+   - `colorPalette` — compare primary/background colors
+4. Take full-page screenshots of both with `take_screenshot` and visually compare
+5. Fill in the `passFailTemplate` in the report
+
+**Pass criteria for "production-ready" clone:**
+- [ ] Body font matches
+- [ ] Background color matches
+- [ ] Section count matches (±1)
+- [ ] Canvas exists (if source had WebGL)
+- [ ] Scroll feels smooth (Lenis/GSAP present)
+- [ ] No console errors
+- [ ] Mobile layout is responsive
+- [ ] Lighthouse performance > 80
+
+---
+
+## OUTPUT: RECONSTRUCTION BLUEPRINT
+
+Save a comprehensive report to `{output_path}`:
+
+```markdown
+# {domain} — Complete Forensics Report
+> Generated: {timestamp}
+> Target: {url}
+
+## Executive Summary
+- Framework: {framework}
+- 3D Engine: {3d_library}
+- Animation: {animation_libraries}
+- Scroll: {scroll_system}
+- Estimated rebuild complexity: {low|medium|high|extreme}
+
+## 1. Tech Stack
+| Category | Library | Version |
+|----------|---------|---------|
+
+## 2. 3D Scene Architecture
+{scene graph tree}
+{camera setup}
+{lighting rig}
+{post-processing pipeline}
+
+## 3. Extracted Shaders
+{for each shader: vertex GLSL, fragment GLSL, uniforms table}
+
+## 4. Animation System
+{GSAP timelines / Framer Motion configs / CSS keyframes}
+
+## 5. Scroll-to-State Map
+| Scroll Y | Active Triggers | 3D State | Screenshot |
+|----------|----------------|----------|------------|
+
+## 6. Layout & Design Tokens
+{CSS variables, typography, spacing, color palette}
+
+## 7. Asset Manifest
+| Asset | Type | URL | Dimensions | Used By |
+|-------|------|-----|-----------|---------|
+
+## 8. Responsive Behavior
+| Breakpoint | Canvas Visible | Animations Active | Grid Columns | Mobile Kill-Switches |
+|------------|---------------|-------------------|-------------|----------------------|
+
+## 9. Page Transitions
+- System: {barba/swup/view-transitions/custom/none}
+- Overlay elements: {count and CSS}
+- GSAP wipe timelines: {description}
+
+## 10. Loading Sequence
+- Preloader: {yes/no, CSS structure}
+- FCP: {ms}
+- Heaviest resources: {list}
+- 3D init strategy: {eager/lazy/intersection-observer}
+
+## 11. Audio
+- System: {none/howler/tone/web-audio-raw}
+- Triggered by: {scroll/hover/auto/user-gesture}
+
+## 12. Accessibility
+- Reduced motion CSS rules: {count}
+- GSAP matchMedia: {yes/no}
+- Focus visible: {yes/no}
+
+## 13. Complexity Score
+- **Score: {X}/100 — {Rating}**
+- Estimated rebuild: {time}
+- Breakdown: {per-category scores}
+
+## 14. Reproduction Steps
+{step-by-step rebuild instructions for the chosen framework}
+
+## 15. Clone Validation Checklist
+- [ ] Body font matches
+- [ ] Background color matches
+- [ ] Section count matches
+- [ ] Canvas present (if source used WebGL)
+- [ ] Scroll system implemented
+- [ ] No console errors
+- [ ] Mobile responsive
+- [ ] Lighthouse performance > 80
+```
+
+---
+
+## ERROR HANDLING
+
+| Issue | Resolution |
+|-------|------------|
+| No canvas found | Site may lazy-load. Scroll to trigger, wait 3s, retry |
+| No WebGL context | Canvas is 2D-only. Skip to CSS animation extraction |
+| Scene not on window | Try R3F Fiber walk, prototype scan, `performance.getEntries()` |
+| Minified shaders | Extract raw GLSL anyway — valid code even with mangled names |
+| GSAP not on window | Search via bundle analysis |
+| CORS on stylesheets | Extract inline styles and computed styles instead |
+| Evaluation timeout | Break scripts into smaller chunks; extract one thing at a time |
+| Dynamic/lazy content | Scroll entire page first, then re-run detection scripts |
+| Audio context suspended | Click page once (user gesture) then re-run `06-audio-extraction.js` |
+| Breakpoint changes not visible | Reload after `resize_page` — some sites SSR different markup per breakpoint |
+| Complexity score seems off | Manual override: add +15 to score for any custom GLSL shaders found |
+| Clone validation mismatch | Acceptable: ±1 section, ±20% page height, different scroll trigger count from deferred loading |
+
+## EXECUTION RULES
+
+1. **Run Phase 0 first, always.** Results determine which phases run.
+2. **Run Phase 9 (Loading) immediately after navigate_page** — before any scrolling.
+3. **Be exhaustive.** Extract everything. Don't skip steps.
+4. **Prioritize shaders** — they're the DNA of 3D effects and can't be faked.
+5. **Screenshot every major scroll state** for visual reference.
+6. **If a script fails**, try alternate property paths, prototype chain walking, `globalThis` scanning.
+7. **Beautify minified code** and annotate behavior.
+8. **Run Phase 12 (Complexity Scorer) last** to cap the session with a clear rebuild estimate.
+9. **Run Phase 13 (Validation) on the clone** — never ship without a diff check.
+10. **Save the report** before concluding. Don't lose findings.
+
+## SCRIPTS DIRECTORY
+
+All extraction scripts are in `~/.gemini/antigravity/skills/webgl-forensics/scripts/`:
+
+| Script | Phase | Purpose |
+|--------|-------|--------|
+| `00-tech-stack-detect.js` | Phase 0 | Full tech stack auto-detection |
+| `01-source-map-extractor.js` | Phase 1 | Source map & bundle analysis |
+| `02-interaction-model.js` | Phase 2 | Magnetic cursors, parallax, touch |
+| `03-responsive-analysis.js` | Phase 7 | Breakpoint behavior at each viewport |
+| `04-page-transitions.js` | Phase 8 | Barba.js, Swup, View Transitions |
+| `05-loading-sequence.js` | Phase 9 | Preloader, resource hints, perf budget |
+| `06-audio-extraction.js` | Phase 10 | Web Audio API, Howler, Tone.js |
+| `07-accessibility-reduced-motion.js` | Phase 11 | ARIA, reduced motion CSS/JS |
+| `08-complexity-scorer.js` | Phase 12 | 0–100 rebuild difficulty score |
+| `09-visual-diff-validator.js` | Phase 13 | Clone-vs-source fingerprint comparison |
+
+## LEGAL NOTICE
+
+This skill is intended for:
+- Learning how production effects are implemented
+- Migrating your own sites to new stacks
+- Academic research and technical education
+- Creating inspired-by (not copied) experiences
+
+Do NOT use extracted shaders, models, or proprietary assets in commercial projects without proper licensing.