web-reverse-engineer 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Uy Cung
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,130 @@
+# Web Reverse-Engineer Skill
+
+This skill defines the workflow and helper scripts used to reverse-engineer public websites for the purpose of clean-room reimplementation.
+
+## Overview
+
+The `web-reverse-engineer` skill provides instructions and automation to audit reference sites, extract design and animation patterns, and reimplement them cleanly without copying proprietary assets or source code.
+
+### Core Philosophy
+
+The primary focus is **clean-room reimplementation**. 
+This is **NOT** for copying a website, brand, or exact page expression. The goal is to:
+1. **Analyze**: Understand how a page does canvas animations, WebGL rendering, scroll triggers, etc.
+2. **Translate**: Extract high-level mathematical/design principles (e.g. "three blurred canvas blobs moving procedurally").
+3. **Rebuild**: Implement a distinct, original version (e.g. "SignalForge with teal and purple palettes, new copy, and different speeds").
+
+---
+
+## Folder Structure
+
+```txt
+skills/web-reverse-engineer/
+  SKILL.md             # The main instruction frontmatter/workflow file
+  README.md            # This documentation file
+  templates/
+    clean-room-notes.md # Template for documenting reimplementations
+    DESIGN.md           # Portable design-system template for demos/projects
+  scripts/
+    scrape_site_assets.js # Playwright deconstruction crawler
+```
+
+---
+
+## Clarification Contract
+
+Before an agent proposes or implements a reference-inspired demo, it must make the transfer contract explicit. Ask only for missing context, but cover these dimensions:
+
+1. **Target mode**
+   - `Motion-only transfer`: preserve layout, copywriting, assets, and brand; apply only animation/background/interaction principles.
+   - `Visual restyle`: preserve core content and brand; allow palette, surfaces, spacing, section rhythm, typography treatment, and composition changes.
+   - `Editorial redesign`: allow larger layout and copywriting changes while preserving the underlying product/theme.
+   - `Full concept demo`: create a new fictional brand/page inspired by the reference, not tied to the existing baseline.
+
+   Default: when the user says "dựa trên /sample", "giữ brand/copy", or "không sửa /sample", choose `Motion-only transfer` or `Visual restyle`. Do not substantially rewrite copy or layout unless explicitly approved.
+
+2. **Baseline preservation**
+   - Confirm whether the source page is protected.
+   - Confirm the output route.
+   - In this repo, `/sample` is immutable and experiments go under `/demos/...`.
+
+3. **Light vs dark direction**
+   - Ask or propose light/dark direction when either could work.
+   - Default to light when the user asks to keep the current brand feel.
+   - If the reference is dark or the user wants maximum visual impact, propose dark but ask first.
+   - Never silently convert a light baseline into dark mode.
+
+4. **Layout and copywriting permission**
+   - State what will be preserved.
+   - State what may change if approved.
+   - Do not rewrite headlines, replace product copy, change core layout, or change brand identity unless the transfer mode allows it.
+
+5. **Asset generation permission**
+   - Default to no new image assets.
+   - Programmatic canvas/CSS/SVG shapes are allowed when they are part of the implementation and do not copy reference assets.
+   - Ask before generating new supporting assets, and never download or reuse proprietary assets from the reference site.
+
+6. **Motion intensity**
+   - `Calm production`: subtle, premium, low distraction.
+   - `Showcase demo`: clearly visible within 3 seconds.
+   - `Debug/analysis`: exaggerated motion or overlays for testing only.
+
+   Default for public demo routes is `Showcase demo`. If a normal user cannot perceive the animation within 3 seconds without debug mode, the demo fails.
+
+7. **Technical preference**
+   - Ask only when relevant: CSS gradients/keyframes, Canvas 2D, WebGL, Framer Motion, simplest robust approach, or matching the reference mechanism where feasible.
+   - Default to the simplest robust clean-room approach that achieves the visible effect.
+
+8. **Design documentation**
+   - Every demo or real project application must include a `DESIGN.md`.
+   - Demo routes use `docs/demos/<demo-slug>/DESIGN.md` and `docs/demos/<demo-slug>/clean-room-notes.md`.
+   - If an existing demo uses flat docs such as `docs/demos/<demo-slug>.md`, keep that file working and link it to the folder-based `DESIGN.md` if adding one.
+   - Real projects use root-level `DESIGN.md`, updated carefully if it already exists.
+
+Use the full Step 2 response format and post-clarification implementation plan in `SKILL.md`.
+
+---
+
+## How to Run the Audit Script
+
+The local helper script crawls a target URL and records metadata about active canvas elements, style overrides, and network asset payloads.
+
+### Prerequisites
+
+Ensure you have playwright dependencies installed:
+```bash
+pnpm install
+pnpm exec playwright install chromium
+```
+
+### Execution Command
+
+```bash
+node skills/web-reverse-engineer/scripts/scrape_site_assets.js <target-url>
+```
+
+For example, to audit JoinClyde:
+```bash
+node skills/web-reverse-engineer/scripts/scrape_site_assets.js https://www.joinclyde.com
+```
+
+### Expected Output & Caveats
+
+1. **Manifest File**: Saved to `.tmp/reverse-engineer/[clean-domain]_manifest.json`. To prevent massive file sizes, large lists like loaded assets and animated elements are saved as a summary count with a capped sample of up to 50 items.
+2. **Screenshot**: Full-page view saved to `.tmp/reverse-engineer/[clean-domain]_screenshot.png`.
+3. **Terminal Output**: A concise text printout showcasing viewport metadata, canvas styles/counts, and request breakdowns.
+4. **Canvas/WebGL Caveat**: Detection of WebGL or 2D contexts is **best-effort**. If a site already initialized a WebGL context, the canvas may reject subsequent `.getContext` calls in our evaluator script. Therefore, context type is checked defensively and might show as `already_bound_or_error` or `unknown`.
+
+---
+
+## Clean-Room Rules
+
+Every developer/agent building a demo inspired by a reference site must:
+- State the transfer contract before coding.
+- Keep `/sample` unchanged unless the user explicitly requests otherwise.
+- Create a copy of `skills/web-reverse-engineer/templates/clean-room-notes.md` inside `docs/demos/<demo-slug>/clean-room-notes.md` for new demos.
+- Create a `DESIGN.md` from `skills/web-reverse-engineer/templates/DESIGN.md` inside `docs/demos/<demo-slug>/DESIGN.md` for new demos.
+- Document all observed principles, implementation strategies, and differences.
+- Keep `.tmp/` out of Git commits. Keep reference screenshots and manifests local.
+- Never use branding elements, copywriting, or logos from the reference site.
+- Avoid public wording that implies exact copying. Use "inspired by", "reconstruction", or "style transfer".

package/SKILL.md

@@ -0,0 +1,694 @@
+---
+name: web-reverse-engineer
+description: "Web reverse-engineering workflow for inspecting public web frontends, extracting design/runtime principles, and rebuilding clean-room implementations inside a target project."
+---
+
+# Web Reverse-Engineering Skill
+
+## Purpose
+
+This skill helps an agent inspect a public reference website, understand its visual and runtime mechanisms, and create a **clean-room implementation** inside a target project.
+
+It is intended for:
+
+- design/style transfer,
+- animation reverse-engineering,
+- canvas/WebGL/background deconstruction,
+- scroll and interaction analysis,
+- runtime UI behavior analysis,
+- creating project-specific implementations inspired by observed principles.
+
+It is **not** a website copier, clone generator, or pixel-perfect reproduction tool.
+
+The objective is to:
+
+1. Inspect a real website runtime.
+2. Understand technical and visual mechanisms.
+3. Extract high-level principles.
+4. Rebuild an original implementation in the user's project.
+5. Avoid copying proprietary code, assets, logos, copywriting, brand identity, or exact expressive output.
+
+---
+
+## Core Rules
+
+### Clean-room only
+
+Do not copy or reuse:
+
+- proprietary source code,
+- minified bundles,
+- shader strings,
+- CSS files,
+- image/video/audio assets,
+- custom fonts,
+- logos,
+- trademarked brand elements,
+- copywriting,
+- exact layouts,
+- exact animation timing or composition.
+
+Allowed:
+
+- inspect public runtime behavior,
+- record metadata,
+- take screenshots for analysis,
+- extract high-level design and motion principles,
+- rebuild original code using different implementation details,
+- preserve the user's own existing project content when requested.
+
+### Public and accessible references only
+
+Do not bypass:
+
+- authentication,
+- paywalls,
+- private routes,
+- access controls,
+- anti-scraping protections.
+
+If the reference depends on protected assets, private APIs, or proprietary media, state the limitation and propose an original alternative.
+
+### Ask before generating assets
+
+Some agents can create images, SVGs, textures, icons, or other assets.
+
+Default:
+
+- Do not generate new image assets unless the user approves.
+- Programmatic CSS/canvas/SVG shapes are allowed when they are part of the implementation and do not copy reference assets.
+- Never download and reuse proprietary assets from the reference website.
+
+---
+
+## When to Use This Skill
+
+Use this skill when the user asks for something like:
+
+- “Make this page feel like [reference site].”
+- “Copy the animation style from [reference site], but apply it to my project.”
+- “Inspect this landing page and rebuild the background effect.”
+- “Create a clean-room demo inspired by this website.”
+- “Analyze the canvas/WebGL/scroll effect on this page.”
+- “Extract more than static design tokens from this site.”
+
+Do not use this skill for ordinary CSS tweaks, simple component styling, or static page implementation where no reference deconstruction is needed.
+
+---
+
+## Transfer Modes
+
+Before planning or coding, identify the requested transfer mode.
+
+### 1. Motion-only transfer
+
+Preserve:
+
+- existing brand,
+- layout,
+- copywriting,
+- section order,
+- data,
+- local assets.
+
+Change only:
+
+- animation layer,
+- background behavior,
+- transitions,
+- interaction patterns,
+- supporting motion wrappers.
+
+Use this when the user wants to keep their current page but apply a reference-inspired animation or interaction.
+
+### 2. Visual restyle
+
+Preserve:
+
+- core content,
+- brand,
+- product/theme,
+- general structure.
+
+May change:
+
+- color palette,
+- surfaces,
+- spacing rhythm,
+- typography treatment,
+- card styling,
+- section atmosphere,
+- motion treatment.
+
+Use this when the user wants a recognizable restyle while keeping the same content.
+
+### 3. Editorial redesign
+
+Preserve:
+
+- underlying product/theme,
+- core message.
+
+May change:
+
+- layout,
+- copywriting,
+- section rhythm,
+- hierarchy,
+- visual storytelling.
+
+Use this only when the user approves broader creative changes.
+
+### 4. Full concept demo
+
+Create a new fictional or independent page inspired by the reference.
+
+Use this only when the user wants a standalone demo or concept, not an application to an existing page.
+
+---
+
+## Clarification Contract
+
+Ask only for missing information. If the user already answered a dimension, record it and move on.
+
+Before implementation, make the following explicit:
+
+### Baseline / target project
+
+Clarify:
+
+- What page, route, component, or project should receive the implementation?
+- Is the source page a protected baseline?
+- Should the implementation modify the existing page or create a separate variant/demo?
+- What is the desired output path?
+
+### Transfer mode
+
+State the recommended transfer mode:
+
+- Motion-only transfer
+- Visual restyle
+- Editorial redesign
+- Full concept demo
+
+Do not substantially rewrite copy or layout unless the user approved a mode that allows it.
+
+### Light vs dark direction
+
+If the reference style could work either way, ask or propose:
+
+```md
+Which visual direction do you want?
+
+A. Light adaptation
+- Preserve the current light brand feel.
+- Motion must remain visible on a light background.
+- Lower contrast, more editorial.
+
+B. Dark adaptation
+- Convert the target/demo route to a darker, more immersive style.
+- Higher contrast and stronger glow/motion.
+- More dramatic departure from the baseline.
+
+C. Agent proposes both options first.
+````
+
+Do not silently convert a light baseline into dark mode.
+
+### Layout and copywriting permission
+
+State clearly:
+
+```md
+Preserve:
+- Brand
+- Product data
+- Existing copywriting
+- Section order
+- Local assets
+
+Allowed to change:
+- Background layer
+- Surface opacity
+- Section spacing
+- Card treatment
+- Motion layer
+
+Not allowed unless approved:
+- Rewriting headlines
+- Replacing product copy
+- Changing core layout
+- Changing brand identity
+```
+
+If layout or copywriting changes would improve the result, propose them as optional.
+
+### Asset generation permission
+
+Ask when relevant:
+
+```md
+Do you want new supporting assets for this implementation?
+
+A. No new assets. Reuse existing local assets only.
+B. Generate simple local SVG/CSS/canvas assets only.
+C. Generate image assets if useful, but ask before each major asset.
+```
+
+### Motion intensity
+
+Ask or infer:
+
+```md
+Motion intensity:
+
+A. Calm production
+- Subtle, premium, low distraction.
+
+B. Showcase demo
+- Clearly visible within a few seconds.
+- Useful for portfolio/demo proof.
+
+C. Debug/analysis
+- Exaggerated motion or overlays for testing only.
+```
+
+For public demos, prefer `Showcase demo` unless the user asks for production subtlety.
+
+Acceptance rule:
+
+> If a normal viewer cannot perceive the animation in normal mode without debug overlays, mouse movement, or explanation, the animation demo fails.
+
+### Technical preference
+
+Ask only if needed:
+
+* CSS gradients/keyframes
+* Canvas 2D
+* WebGL
+* Framer Motion
+* simplest robust approach
+* match reference mechanism where feasible
+
+Default:
+
+> Use the simplest robust clean-room approach that achieves the approved visual effect.
+
+---
+
+## Standard Clarification Output
+
+When clarification is needed, respond in this format:
+
+```md
+## Clarification Needed
+
+### Target
+- Reference:
+- Baseline / target page:
+- Proposed output:
+
+### Baseline preservation
+- I will / will not modify the source page.
+
+### Transfer mode
+Recommended:
+Reason:
+
+### Light or dark direction
+Recommended:
+Reason:
+
+### Layout & copy
+Preserve:
+- ...
+
+May change if approved:
+- ...
+
+Will not change without approval:
+- ...
+
+### Assets
+Recommended:
+- No new assets / SVG only / generated image assets with permission
+
+### Motion intensity
+Recommended:
+- Calm production / Showcase demo / Debug only
+
+### DESIGN.md
+I will create or update:
+- ...
+
+### Questions
+1. ...
+2. ...
+```
+
+If the user already provided enough information, skip clarification and proceed to the implementation plan.
+
+---
+
+## Workflow
+
+### Step 1 — Intake and Contract
+
+Collect:
+
+* reference URL,
+* target page/project,
+* output path,
+* transfer mode,
+* light/dark direction,
+* layout/copy permissions,
+* asset generation permission,
+* motion intensity,
+* technical constraints,
+* documentation paths.
+
+Do not start implementation until the contract is clear enough.
+
+---
+
+### Step 2 — Reference Audit
+
+Inspect the reference website using browser automation or devtools.
+
+Capture:
+
+* page title and URL,
+* viewport size,
+* screenshots,
+* DOM structure around relevant sections,
+* loaded scripts,
+* loaded stylesheets,
+* loaded images/media/fonts,
+* canvas elements,
+* canvas context type if detectable,
+* CSS animations/transitions,
+* transform/filter/mask/blend-mode usage,
+* scroll-linked behavior,
+* runtime animation libraries,
+* WebGL indicators,
+* requestAnimationFrame usage where detectable.
+
+Save audit evidence in a temporary project-appropriate location, such as:
+
+```txt
+.tmp/reverse-engineer/<slug>/
+```
+
+unless the target project has a different convention.
+
+---
+
+### Step 3 — Static Design Analysis
+
+Extract high-level static design principles:
+
+* color families,
+* foreground/background contrast,
+* typography feel,
+* spacing rhythm,
+* layout density,
+* surface treatment,
+* borders/radius/shadows,
+* card treatments,
+* imagery style,
+* section composition.
+
+This is similar to static `design.md` extraction, but it is not enough for runtime animation. Continue into motion/runtime analysis when relevant.
+
+---
+
+### Step 4 — Runtime Animation Analysis
+
+Analyze:
+
+* CSS keyframes,
+* transitions,
+* transform states,
+* masks,
+* blend modes,
+* filters,
+* canvas drawing loops,
+* WebGL contexts,
+* shader indicators,
+* scroll-linked timelines,
+* pointer/mouse interactions,
+* procedural noise or gradient systems.
+
+If the effect depends on WebGL and normal inspection is insufficient, recommend deeper inspection with tools such as Spector.js or browser WebGL debuggers.
+
+Document only high-level principles. Do not copy shader code, uniforms, textures, or proprietary implementation details.
+
+---
+
+### Step 5 — Clean-Room Transformation
+
+Before coding, write a short transformation note:
+
+```md
+Observed principle:
+- ...
+
+Clean-room implementation decision:
+- ...
+
+What is intentionally changed:
+- ...
+```
+
+Examples:
+
+```md
+Observed principle:
+- The reference uses a soft animated gradient field behind the hero.
+
+Clean-room implementation decision:
+- Rebuild with original Canvas 2D radial fields using a different palette, timing model, and composition.
+
+What is intentionally changed:
+- Brand, copy, layout rhythm, color values, motion speed, and shape positions.
+```
+
+---
+
+### Step 6 — Implementation
+
+Implement only what the user approved.
+
+Requirements:
+
+* original code only,
+* no copied reference assets,
+* no copied copywriting,
+* no copied logos,
+* no exact reference layout,
+* preserve baseline content when requested,
+* support responsive layouts,
+* respect `prefers-reduced-motion`,
+* avoid hydration errors,
+* avoid console errors,
+* provide graceful fallback for Canvas/WebGL failures.
+
+---
+
+### Step 7 — DESIGN.md
+
+Every real project application or demo should produce a `DESIGN.md`.
+
+The file should be portable and useful for future agents/design tools.
+
+Recommended sections:
+
+```md
+# DESIGN.md — {Project or Demo Name}
+
+## Purpose
+
+## Design Intent
+
+## Source Context
+- Baseline:
+- Reference:
+- Transfer mode:
+
+## Brand Principles
+
+## Visual System
+
+### Color Tokens
+| Token | Value | Usage |
+|---|---|---|
+
+### Typography
+| Role | Font / Style | Usage |
+|---|---|---|
+
+### Spacing & Layout
+
+### Surfaces
+
+### Borders, Radius, Shadows
+
+### Imagery & Assets
+
+## Component Guidelines
+
+### Header / Navigation
+
+### Hero
+
+### Cards
+
+### CTA
+
+### Footer
+
+## Motion System
+
+### Motion Intent
+
+### Animation Tokens
+| Token | Value | Usage |
+|---|---|---|
+
+### Reduced Motion
+
+## Accessibility & Readability
+
+## Clean-Room Differentiation
+
+## Implementation Notes
+
+## Do / Don’t
+```
+
+Location rules:
+
+* For a real user project, create or update root-level `DESIGN.md` unless the user or project convention says otherwise.
+* If a root `DESIGN.md` already exists, update it carefully. Do not overwrite blindly.
+* For local demos or experiments, save `DESIGN.md` near the demo documentation according to that project’s convention.
+
+---
+
+### Step 8 — Evidence and Validation
+
+Save evidence that proves the reference was inspected and the implementation works.
+
+Prefer:
+
+* reference screenshot,
+* audit manifest,
+* transformation notes,
+* implementation screenshot,
+* normal-mode animation screenshots or video,
+* reduced-motion screenshot if relevant.
+
+Debug screenshots are allowed, but cannot be the only proof.
+
+Run the project’s validation commands, usually:
+
+```bash
+pnpm lint
+pnpm typecheck
+pnpm build
+```
+
+or the equivalent package-manager scripts.
+
+For animation demos, build success is not enough. Verify normal viewer perception:
+
+* visible in normal mode,
+* no debug mode required,
+* no mouse movement required unless the effect is explicitly pointer-driven,
+* no explanation required to notice the effect.
+
+---
+
+## Standard Implementation Plan Output
+
+After clarification, respond with:
+
+```md
+## Implementation Plan
+
+### Output
+- Route/component/path:
+
+### Transfer contract
+- Mode:
+- Light/dark:
+- Preserve:
+- Allowed changes:
+- Not allowed:
+- Assets:
+- Motion intensity:
+
+### Reference findings
+- ...
+
+### Clean-room transformation
+Observed principle:
+- ...
+
+Implementation decision:
+- ...
+
+Intentionally changed:
+- ...
+
+### DESIGN.md output
+- ...
+
+### Files to create/change
+- ...
+
+### Validation
+- ...
+```
+
+---
+
+## Standard Final Report
+
+After implementation, report:
+
+```md
+## Completed
+
+### Output
+- ...
+
+### Reference inspected
+- ...
+
+### Transfer contract followed
+- ...
+
+### What changed
+- ...
+
+### What was preserved
+- ...
+
+### What was not copied
+- ...
+
+### DESIGN.md
+- ...
+
+### Evidence
+- ...
+
+### Validation
+- Lint:
+- Typecheck:
+- Build:
+- Browser/runtime QA:
+
+### Notes
+- ...
+```

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "web-reverse-engineer",
+  "version": "0.1.0",
+  "description": "Agent skill for clean-room web reverse engineering: inspect a public reference site, extract high-level animation/design principles, and rebuild an original, brand-distinct implementation.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/uycung/web-reverse-engineer.git",
+    "directory": "skills/web-reverse-engineer"
+  },
+  "keywords": [
+    "agent-skill",
+    "claude-code",
+    "skill",
+    "web-design",
+    "clean-room",
+    "reverse-engineering",
+    "animation",
+    "playwright",
+    "design-transfer"
+  ],
+  "files": [
+    "SKILL.md",
+    "scripts/"
+  ]
+}

package/scripts/scrape_site_assets.js

@@ -0,0 +1,285 @@
+const { chromium } = require('playwright');
+const fs = require('fs');
+const path = require('path');
+
+// Extract target URL from CLI arguments
+const targetUrl = process.argv[2];
+if (!targetUrl) {
+  console.error('Error: Please provide a target URL.');
+  console.log('Usage: node skills/web-reverse-engineer/scripts/scrape_site_assets.js <url>');
+  process.exit(1);
+}
+
+// Validate URL format
+try {
+  new URL(targetUrl);
+} catch (e) {
+  console.error(`Error: Invalid URL "${targetUrl}". Please include protocol (e.g., https://).`);
+  process.exit(1);
+}
+
+(async () => {
+  console.log(`Starting clean-room deconstruction audit for: ${targetUrl}`);
+  console.log('Launching headless Chromium via Playwright...');
+
+  const browser = await chromium.launch({ headless: true });
+  const context = await browser.newContext({
+    userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36'
+  });
+  const page = await context.newPage();
+
+  // Storage for categorized network requests
+  const assets = {
+    scripts: [],
+    stylesheets: [],
+    images: [],
+    fonts: [],
+    media: [],
+    fetchXhr: [],
+    other: []
+  };
+
+  // Track network requests and group them by type
+  page.on('request', request => {
+    const url = request.url();
+    const type = request.resourceType();
+    const method = request.method();
+    
+    // We only record metadata of the requests, never downloading asset contents
+    const assetMeta = { url, method };
+
+    if (type === 'script') {
+      assets.scripts.push(assetMeta);
+    } else if (type === 'stylesheet') {
+      assets.stylesheets.push(assetMeta);
+    } else if (type === 'image') {
+      assets.images.push(assetMeta);
+    } else if (type === 'font') {
+      assets.fonts.push(assetMeta);
+    } else if (type === 'media') {
+      assets.media.push(assetMeta);
+    } else if (type === 'fetch' || type === 'xhr') {
+      assets.fetchXhr.push(assetMeta);
+    } else {
+      assets.other.push(assetMeta);
+    }
+  });
+
+  try {
+    console.log(`Navigating to ${targetUrl} (waiting for network idle)...`);
+    await page.goto(targetUrl, { waitUntil: 'networkidle', timeout: 35000 });
+    
+    // Additional wait for client-side animations and canvas setups to run
+    await page.waitForTimeout(3000);
+    console.log('Page loaded. Analyzing runtime elements...');
+
+    // Run DOM audit in page context
+    const auditResults = await page.evaluate(() => {
+      // 1. Inspect Canvases (Best-Effort detection)
+      const canvases = Array.from(document.querySelectorAll('canvas'));
+      const canvasDetails = canvases.map((canvas, index) => {
+        let contextType = 'unknown';
+        try {
+          // Attempt best-effort context detection without breaking active renderings
+          // Some sites might throw if getContext is called after it's already bound to a different context, so we try-catch.
+          const gl = canvas.getContext('webgl') || canvas.getContext('webgl2') || canvas.getContext('experimental-webgl');
+          if (gl) {
+            contextType = gl instanceof WebGL2RenderingContext ? 'webgl2' : 'webgl';
+          } else {
+            const ctx = canvas.getContext('2d');
+            if (ctx) {
+              contextType = '2d';
+            }
+          }
+        } catch (e) {
+          contextType = 'already_bound_or_error';
+        }
+
+        const rect = canvas.getBoundingClientRect();
+        const style = window.getComputedStyle(canvas);
+
+        return {
+          index,
+          id: canvas.id || null,
+          className: canvas.className || null,
+          attributes: {
+            width: canvas.getAttribute('width'),
+            height: canvas.getAttribute('height')
+          },
+          renderedSize: {
+            width: Math.round(rect.width),
+            height: Math.round(rect.height)
+          },
+          styles: {
+            display: style.display,
+            position: style.position,
+            transform: style.transform !== 'none' ? style.transform : null,
+            filter: style.filter !== 'none' ? style.filter : null,
+            opacity: style.opacity,
+            zIndex: style.zIndex !== 'auto' ? style.zIndex : null
+          },
+          contextType
+        };
+      });
+
+      // 2. Inspect likely animated elements (animations, transitions, active transforms/filters/masks)
+      const allElements = Array.from(document.querySelectorAll('*'));
+      const animatedElements = [];
+
+      allElements.forEach(el => {
+        const style = window.getComputedStyle(el);
+        
+        const hasAnim = style.animationName !== 'none' && style.animationDuration !== '0s';
+        const hasTrans = style.transitionProperty !== 'none' && style.transitionDuration !== '0s';
+        const hasTransform = style.transform !== 'none';
+        const hasFilter = style.filter !== 'none' || style.backdropFilter !== 'none';
+        const hasBlend = style.mixBlendMode !== 'normal';
+        const hasMask = style.maskImage !== 'none' || style.webkitMaskImage !== 'none';
+
+        if (hasAnim || hasTrans || hasTransform || hasFilter || hasBlend || hasMask) {
+          // Construct a selector or identifier for the element
+          let identifier = el.tagName.toLowerCase();
+          if (el.id) {
+            identifier += `#${el.id}`;
+          } else if (el.className) {
+            identifier += `.${Array.from(el.classList).join('.')}`;
+          }
+
+          animatedElements.push({
+            tag: el.tagName.toLowerCase(),
+            identifier,
+            indicators: {
+              animation: hasAnim ? { name: style.animationName, duration: style.animationDuration } : null,
+              transition: hasTrans ? { property: style.transitionProperty, duration: style.transitionDuration } : null,
+              transform: hasTransform ? style.transform : null,
+              filter: hasFilter ? { filter: style.filter, backdropFilter: style.backdropFilter } : null,
+              mixBlendMode: hasBlend ? style.mixBlendMode : null,
+              mask: hasMask ? 'detected' : null
+            }
+          });
+        }
+      });
+
+      // Page basic metadata
+      const rootClasses = document.documentElement.className || '';
+      const bodyClasses = document.body.className || '';
+      const title = document.title;
+      const viewport = document.querySelector('meta[name="viewport"]')?.getAttribute('content') || null;
+
+      return {
+        metadata: {
+          title,
+          viewport,
+          rootClasses,
+          bodyClasses
+        },
+        canvases: canvasDetails,
+        animatedElements
+      };
+    });
+
+    // Helper to slice sample data and keep JSON output bounded
+    const limitSample = (arr, limit = 50) => {
+      if (arr.length <= limit) return arr;
+      return arr.slice(0, limit);
+    };
+
+    // Construct bounded manifest
+    const manifest = {
+      targetUrl,
+      timestamp: new Date().toISOString(),
+      metadata: auditResults.metadata,
+      canvases: auditResults.canvases,
+      canvasCaveats: "Canvas/WebGL context detection is best-effort. Active WebGL drawing contexts may already be locked by runtime frameworks, rendering them undetectable via getContext in this script.",
+      assetsSummary: {
+        scriptsCount: assets.scripts.length,
+        stylesheetsCount: assets.stylesheets.length,
+        imagesCount: assets.images.length,
+        fontsCount: assets.fonts.length,
+        mediaCount: assets.media.length,
+        fetchXhrCount: assets.fetchXhr.length,
+        otherCount: assets.other.length,
+        totalAssets: Object.values(assets).reduce((acc, curr) => acc + curr.length, 0)
+      },
+      // Store total counts and capped samples so the file does not grow massive
+      assetsSamples: {
+        scripts: limitSample(assets.scripts),
+        stylesheets: limitSample(assets.stylesheets),
+        images: limitSample(assets.images),
+        fonts: limitSample(assets.fonts),
+        media: limitSample(assets.media),
+        fetchXhr: limitSample(assets.fetchXhr),
+        other: limitSample(assets.other)
+      },
+      animatedElementsSummary: {
+        totalDetected: auditResults.animatedElements.length,
+        samples: limitSample(auditResults.animatedElements)
+      }
+    };
+
+    // Ensure output directories exist
+    const outputDir = path.join(process.cwd(), '.tmp', 'reverse-engineer');
+    if (!fs.existsSync(outputDir)) {
+      fs.mkdirSync(outputDir, { recursive: true });
+    }
+
+    const domainName = new URL(targetUrl).hostname.replace(/\./g, '_');
+    const manifestPath = path.join(outputDir, `${domainName}_manifest.json`);
+    const screenshotPath = path.join(outputDir, `${domainName}_screenshot.png`);
+
+    // Save JSON manifest
+    fs.writeFileSync(manifestPath, JSON.stringify(manifest, null, 2), 'utf-8');
+
+    // Save screenshot
+    await page.screenshot({ path: screenshotPath, fullPage: true });
+
+    // Print summary to terminal
+    console.log('\n==================================================');
+    console.log('   DECONSTRUCTION AUDIT SUMMARY (PLAYWRIGHT)');
+    console.log('==================================================');
+    console.log(`Target URL:        ${targetUrl}`);
+    console.log(`Page Title:        ${auditResults.metadata.title}`);
+    console.log(`Viewport Meta:     ${auditResults.metadata.viewport}`);
+    console.log(`Root HTML Class:   "${auditResults.metadata.rootClasses}"`);
+    console.log(`Body Class:        "${auditResults.metadata.bodyClasses}"`);
+    console.log(`Canvas Elements:   ${auditResults.canvases.length} detected`);
+
+    if (auditResults.canvases.length > 0) {
+      console.log('\n--- Canvas Details (Best-effort detection) ---');
+      auditResults.canvases.forEach(c => {
+        console.log(`  Canvas #${c.index}: id="${c.id}" class="${c.className}" type=${c.contextType}`);
+        console.log(`    Attributes:    ${c.attributes.width || 'none'}x${c.attributes.height || 'none'}`);
+        console.log(`    Rendered size: ${c.renderedSize.width}x${c.renderedSize.height}`);
+        console.log(`    Positioning:   display=${c.styles.display}, position=${c.styles.position}, zIndex=${c.styles.zIndex || 'none'}`);
+        if (c.styles.transform) console.log(`    Transform:     ${c.styles.transform}`);
+        if (c.styles.filter) console.log(`    Filter:        ${c.styles.filter}`);
+      });
+    }
+
+    console.log('\n--- Network Request Summary ---');
+    console.log(`  Scripts:         ${assets.scripts.length}`);
+    console.log(`  Stylesheets:     ${assets.stylesheets.length}`);
+    console.log(`  Images:          ${assets.images.length}`);
+    console.log(`  Fonts:           ${assets.fonts.length}`);
+    console.log(`  Media:           ${assets.media.length}`);
+    console.log(`  Fetch/XHR:       ${assets.fetchXhr.length}`);
+    console.log(`  Others:          ${assets.other.length}`);
+    console.log(`  Total Requests:  ${manifest.assetsSummary.totalAssets}`);
+
+    console.log('\n--- Animation Indicators ---');
+    console.log(`  Likely animated elements: ${auditResults.animatedElements.length} detected`);
+    console.log(`  (Saved first ${manifest.animatedElementsSummary.samples.length} elements to manifest samples)`);
+
+    console.log('\n==================================================');
+    console.log(`Manifest saved to:   ${manifestPath}`);
+    console.log(`Screenshot saved to: ${screenshotPath}`);
+    console.log('NOTE: Proprietary asset contents have NOT been downloaded.');
+    console.log('Canvas/WebGL detection is best-effort; drawing contexts may be locked.');
+    console.log('==================================================\n');
+
+  } catch (error) {
+    console.error('An error occurred during deconstruction:', error);
+  } finally {
+    await browser.close();
+  }
+})();