| name | web-reconstruction |
|---|---|
| description | Reconstruct a referenced website, page, interaction, or WebGL/WebGPU/Canvas effect from a URL or supplied evidence. Use for faithful site cloning, offline mirrors, responsive page replication, SPA fixture replay, visual-effect extraction, design transfer, and continued fidelity work on an existing replica. Not for greenfield web design, screenshot-only capture, or cloning private backend behavior. |
Web Reconstruction
Reconstruct the requested surface from target-bound evidence. Deliver a runnable local result, verification evidence, and explicit gaps. Match the user's requested scope; a reference URL does not authorize copying unrelated routes, private data, or backend behavior.
Operating contract
- Establish facts before implementation. Label implementation-critical facts
SOURCE,PARTIAL, orGUESS; unlabeled facts areGUESS. - Preserve a runnable baseline before refactoring. Put editable or simplified variants beside it, never over it.
- Diagnose visible mismatch by mechanism, asset, timing, coordinates, composition, state, or environment. Treat appearance-improving guesses as gaps, not evidence.
- Verify the target and local result under comparable viewport, DPR, state, time, and interaction conditions. One screenshot proves only one state.
- Keep credentials, cookies, authorization headers, paid assets, and private response bodies out of saved evidence.
- Check source and asset licenses before redistribution. When permission is unclear, restrict work to authorized local analysis or independently recreate the behavior.
Read references/evidence-and-gates.md before collecting evidence or declaring a gate complete.
Workflow
- Frame the assignment. Record the canonical target, exact scope, requested fidelity, intended use, access authority, and output directory. Distinguish faithful reconstruction, visual approximation, and design transfer.
- Scout cheaply. Capture representative viewports and states; inventory routes, DOM, media, canvases, workers, network activity, fonts, and interaction coupling. Search for public source or structured definitions without starting broad deobfuscation.
- Lock a route. Choose the smallest branch set that explains the target. Persist the choice and evidence;
autois not a completed route. - Build a baseline. Reuse source-authorized code or deployed assets when that is the most faithful permitted route. Otherwise reproduce the observed mechanism with the fewest new assumptions.
- Verify and route failures. Compare structure, visuals, responsive behavior, time, scrolling, input, data states, and console/network health as applicable. Return to the earliest wrong assumption.
- Projectize and package. Only after baseline verification, create an editable version, replace content or branding if requested, audit external dependencies, and report all gaps.
Initialize a new evidence workspace when useful:
node scripts/init-project.mjs <output-dir> --url <target-url> --scope <scope> --fidelity <faithful|visual|design-transfer>
Inspect gate readiness at any point:
node scripts/check-gates.mjs <output-dir>
Route selection
Load only the references required by the selected route:
| Target evidence | Route | Read |
|---|---|---|
| Deployed static HTML/CSS/JS/assets can run without private services | site-mirror | references/site-mirror.md |
| DOM-led page, responsive marketing site, content site, or ordinary interaction | page-rebuild | references/page-rebuild.md |
| UI depends on fetch/XHR/GraphQL or live application state | data-replay | references/data-replay.md, plus the page route |
| Target visual is produced by Canvas2D, WebGL, WebGPU, OffscreenCanvas, or a worker | render-replay | references/render-replay.md |
| User wants the visual language with different content or brand | design-transfer overlay | references/design-transfer.md, after selecting a base route |
For mixed pages, use one base route and add only necessary overlays. A WebGL hero on a content page is usually page-rebuild + render-replay, not a reason to analyze every bundle as graphics code.
Completion
Read references/verification.md before final verification. Completion requires:
- the requested scope runs locally from documented launch instructions;
- the baseline and editable output, when both exist, are separate;
- every P0-P2 verification issue is closed or explicitly accepted by the user;
- facts and assets used by the implementation point to persisted evidence;
- remaining gaps state impact, truth label, and a concrete promotion or fallback path;
- public distribution is consistent with the recorded licenses and permissions.