How cth9191/site-clone works
This repository is a Claude Code skill suite for measuring a live website, rebuilding it, checking visual fidelity, and optionally remixing the result. The main workflow starts with a URL: clone-site coordinates runtime probes and DOM/GPU tracks, produces a teardown and rebuilt site, then runs pixel-diff QA. Remix-site can follow that verified clone or be re-entered later to tokenize styles, create design directions, compare them in a gallery, and tune a selected result. README documents the overall routing; sampled scripts clarify probe, tokenization, and override behavior, while unsampled skill internals are represented at their directory paths.
Main entry points: clone-site/SKILL.md Clone coordinator · remix-site/SKILL.md Remix coordinator · apply-overrides.js Apply overrides · tokens-probe.js Design tokens
Components 19
Reconnaissance
- Clone coordinator
skills/clone-site/SKILL.md - Surface mapping
skills/clone-site/scripts/surface-map.js - Motion probing
skills/clone-site/scripts/motion-probe.js - Design tokens
skills/clone-site/scripts/tokens-probe.js - Teardown blueprint
skills/clone-site/SKILL.md
Clone tracks
- DOM reconstruction
skills/dom-clone/SKILL.md - GPU extraction
skills/shader-extract/SKILL.md - Rebuilt site
skills/clone-site/SKILL.md
Build validation
- Pixel comparison
skills/clone-site/references/visual-qa.md - Verified clone
Remix workflow
- Remix coordinator
skills/remix-site/SKILL.md - CSS tokenization
skills/remix-site/scripts/tokenize-css.js - Design directions
skills/remix-site/references/directions.md - Apply overrides
skills/remix-site/scripts/apply-overrides.js - Direction gallery
skills/remix-site/scripts/gallery.js - Live tweak panel
skills/remix-site/scripts/tweak-panel.js - Remixed site
Other components
- Engineer
- Live website
Connections 25
- Engineer → Clone coordinator: starts with URL
README.md - Live website → Surface mapping: surface evidence
skills/clone-site/scripts/surface-map.js - Live website → Motion probing: runtime parameters
skills/clone-site/scripts/motion-probe.js - Live website → Design tokens: computed styles
skills/clone-site/scripts/tokens-probe.js - Clone coordinator → Surface mapping: routes surfaces
README.md - Clone coordinator → Motion probing: runs probes
README.md - Clone coordinator → Design tokens: runs probes
README.md - Clone coordinator → Teardown blueprint: writes blueprint
README.md - Clone coordinator → DOM reconstruction: routes DOM
README.md - Clone coordinator → GPU extraction: routes GPU
README.md - DOM reconstruction → Rebuilt site: reconstructs DOM
README.md - GPU extraction → Rebuilt site: captures GPU
README.md - Clone coordinator → Pixel comparison: runs pixel diff
README.md - Pixel comparison → Verified clone: verifies result
README.md - Engineer → Remix coordinator: starts remix
README.md - Verified clone → Remix coordinator: hands off clone
README.md - Design tokens → CSS tokenization: provides measurements
README.md - CSS tokenization → Remix coordinator: prepares variables
skills/remix-site/scripts/tokenize-css.js - Remix coordinator → Design directions: creates options
README.md - Design directions → Apply overrides: materializes choice
README.md - Apply overrides → Direction gallery: registers directions
skills/remix-site/scripts/gallery.js - Direction gallery → Remix coordinator: records selection
skills/remix-site/scripts/gallery.js - Remix coordinator → Live tweak panel: offers live tuning
README.md - Live tweak panel → Apply overrides: exports settings
skills/remix-site/scripts/tweak-panel.js - Apply overrides → Remixed site: applies direction
skills/remix-site/scripts/apply-overrides.js