# cth9191/site-clone architecture

> Architecture diagram of the GitHub repository cth9191/site-clone, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-10). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/cth9191/site-clone
- Repository: https://github.com/cth9191/site-clone

## Overview

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: [`skills/clone-site/SKILL.md`](https://github.com/cth9191/site-clone/blob/main/skills/clone-site/SKILL.md) (Clone coordinator), [`skills/remix-site/SKILL.md`](https://github.com/cth9191/site-clone/blob/main/skills/remix-site/SKILL.md) (Remix coordinator), [`skills/remix-site/scripts/apply-overrides.js`](https://github.com/cth9191/site-clone/blob/main/skills/remix-site/scripts/apply-overrides.js) (Apply overrides), [`skills/clone-site/scripts/tokens-probe.js`](https://github.com/cth9191/site-clone/blob/main/skills/clone-site/scripts/tokens-probe.js) (Design tokens)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_recon["Reconnaissance"]
  node_clone_skill["Clone coordinator<br/>[SKILL.md]"]
  node_surface_probe["Surface mapping<br/>[surface-map.js]"]
  node_motion_probe["Motion probing<br/>[motion-probe.js]"]
  node_token_probe["Design tokens<br/>[tokens-probe.js]"]
  node_teardown["Teardown blueprint<br/>[SKILL.md]"]
end

subgraph group_clone["Clone tracks"]
  node_dom_track["DOM reconstruction<br/>[SKILL.md]"]
  node_shader_track["GPU extraction<br/>[SKILL.md]"]
  node_rebuild["Rebuilt site<br/>[SKILL.md]"]
end

subgraph group_validation["Build validation"]
  node_pixel_qa["Pixel comparison<br/>[visual-qa.md]"]
  node_verified_clone["Verified clone"]
end

subgraph group_remix["Remix workflow"]
  node_remix_skill["Remix coordinator<br/>[SKILL.md]"]
  node_tokenize["CSS tokenization<br/>[tokenize-css.js]"]
  node_directions["Design directions<br/>[directions.md]"]
  node_overrides["Apply overrides<br/>[apply-overrides.js]"]
  node_gallery["Direction gallery<br/>[gallery.js]"]
  node_tweak_panel["Live tweak panel<br/>[tweak-panel.js]"]
  node_remixed_site["Remixed site"]
end

node_user(("Engineer"))
node_live_site(("Live website"))

node_user -->|"starts with URL"| node_clone_skill
node_live_site -->|"surface evidence"| node_surface_probe
node_live_site -->|"runtime parameters"| node_motion_probe
node_live_site -->|"computed styles"| node_token_probe
node_clone_skill -->|"routes surfaces"| node_surface_probe
node_clone_skill -->|"runs probes"| node_motion_probe
node_clone_skill -->|"runs probes"| node_token_probe
node_clone_skill -->|"writes blueprint"| node_teardown
node_clone_skill -->|"routes DOM"| node_dom_track
node_clone_skill -->|"routes GPU"| node_shader_track
node_dom_track -->|"reconstructs DOM"| node_rebuild
node_shader_track -->|"captures GPU"| node_rebuild
node_clone_skill -->|"runs pixel diff"| node_pixel_qa
node_pixel_qa -->|"verifies result"| node_verified_clone
node_user -->|"starts remix"| node_remix_skill
node_verified_clone -->|"hands off clone"| node_remix_skill
node_token_probe -->|"provides measurements"| node_tokenize
node_tokenize -->|"prepares variables"| node_remix_skill
node_remix_skill -->|"creates options"| node_directions
node_directions -->|"materializes choice"| node_overrides
node_overrides -->|"registers directions"| node_gallery
node_gallery -->|"records selection"| node_remix_skill
node_remix_skill -->|"offers live tuning"| node_tweak_panel
node_tweak_panel -->|"exports settings"| node_overrides
node_overrides -->|"applies direction"| node_remixed_site

click node_clone_skill "https://github.com/cth9191/site-clone/blob/main/skills/clone-site/SKILL.md"
click node_surface_probe "https://github.com/cth9191/site-clone/blob/main/skills/clone-site/scripts/surface-map.js"
click node_motion_probe "https://github.com/cth9191/site-clone/blob/main/skills/clone-site/scripts/motion-probe.js"
click node_token_probe "https://github.com/cth9191/site-clone/blob/main/skills/clone-site/scripts/tokens-probe.js"
click node_teardown "https://github.com/cth9191/site-clone/blob/main/skills/clone-site/SKILL.md"
click node_dom_track "https://github.com/cth9191/site-clone/blob/main/skills/dom-clone/SKILL.md"
click node_shader_track "https://github.com/cth9191/site-clone/blob/main/skills/shader-extract/SKILL.md"
click node_rebuild "https://github.com/cth9191/site-clone/blob/main/skills/clone-site/SKILL.md"
click node_pixel_qa "https://github.com/cth9191/site-clone/blob/main/skills/clone-site/references/visual-qa.md"
click node_remix_skill "https://github.com/cth9191/site-clone/blob/main/skills/remix-site/SKILL.md"
click node_tokenize "https://github.com/cth9191/site-clone/blob/main/skills/remix-site/scripts/tokenize-css.js"
click node_directions "https://github.com/cth9191/site-clone/blob/main/skills/remix-site/references/directions.md"
click node_overrides "https://github.com/cth9191/site-clone/blob/main/skills/remix-site/scripts/apply-overrides.js"
click node_gallery "https://github.com/cth9191/site-clone/blob/main/skills/remix-site/scripts/gallery.js"
click node_tweak_panel "https://github.com/cth9191/site-clone/blob/main/skills/remix-site/scripts/tweak-panel.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_clone_skill,node_surface_probe,node_motion_probe,node_token_probe,node_teardown toneBlue
class node_dom_track,node_shader_track,node_rebuild toneAmber
class node_pixel_qa,node_verified_clone toneMint
class node_remix_skill,node_tokenize,node_directions,node_overrides,node_gallery,node_tweak_panel,node_remixed_site toneRose
class node_user,node_live_site toneIndigo
```

## Components

### Reconnaissance

- [Clone coordinator](https://github.com/cth9191/site-clone/blob/main/skills/clone-site/SKILL.md): `skills/clone-site/SKILL.md`
- [Surface mapping](https://github.com/cth9191/site-clone/blob/main/skills/clone-site/scripts/surface-map.js): `skills/clone-site/scripts/surface-map.js`
- [Motion probing](https://github.com/cth9191/site-clone/blob/main/skills/clone-site/scripts/motion-probe.js): `skills/clone-site/scripts/motion-probe.js`
- [Design tokens](https://github.com/cth9191/site-clone/blob/main/skills/clone-site/scripts/tokens-probe.js): `skills/clone-site/scripts/tokens-probe.js`
- [Teardown blueprint](https://github.com/cth9191/site-clone/blob/main/skills/clone-site/SKILL.md): `skills/clone-site/SKILL.md`

### Clone tracks

- [DOM reconstruction](https://github.com/cth9191/site-clone/blob/main/skills/dom-clone/SKILL.md): `skills/dom-clone/SKILL.md`
- [GPU extraction](https://github.com/cth9191/site-clone/blob/main/skills/shader-extract/SKILL.md): `skills/shader-extract/SKILL.md`
- [Rebuilt site](https://github.com/cth9191/site-clone/blob/main/skills/clone-site/SKILL.md): `skills/clone-site/SKILL.md`

### Build validation

- [Pixel comparison](https://github.com/cth9191/site-clone/blob/main/skills/clone-site/references/visual-qa.md): `skills/clone-site/references/visual-qa.md`
- **Verified clone**

### Remix workflow

- [Remix coordinator](https://github.com/cth9191/site-clone/blob/main/skills/remix-site/SKILL.md): `skills/remix-site/SKILL.md`
- [CSS tokenization](https://github.com/cth9191/site-clone/blob/main/skills/remix-site/scripts/tokenize-css.js): `skills/remix-site/scripts/tokenize-css.js`
- [Design directions](https://github.com/cth9191/site-clone/blob/main/skills/remix-site/references/directions.md): `skills/remix-site/references/directions.md`
- [Apply overrides](https://github.com/cth9191/site-clone/blob/main/skills/remix-site/scripts/apply-overrides.js): `skills/remix-site/scripts/apply-overrides.js`
- [Direction gallery](https://github.com/cth9191/site-clone/blob/main/skills/remix-site/scripts/gallery.js): `skills/remix-site/scripts/gallery.js`
- [Live tweak panel](https://github.com/cth9191/site-clone/blob/main/skills/remix-site/scripts/tweak-panel.js): `skills/remix-site/scripts/tweak-panel.js`
- **Remixed site**

### Other components

- **Engineer**
- **Live website**

## Connections

- Engineer → Clone coordinator: starts with URL (evidence: `README.md`)
- Live website → Surface mapping: surface evidence (evidence: `skills/clone-site/scripts/surface-map.js`)
- Live website → Motion probing: runtime parameters (evidence: `skills/clone-site/scripts/motion-probe.js`)
- Live website → Design tokens: computed styles (evidence: `skills/clone-site/scripts/tokens-probe.js`)
- Clone coordinator → Surface mapping: routes surfaces (evidence: `README.md`)
- Clone coordinator → Motion probing: runs probes (evidence: `README.md`)
- Clone coordinator → Design tokens: runs probes (evidence: `README.md`)
- Clone coordinator → Teardown blueprint: writes blueprint (evidence: `README.md`)
- Clone coordinator → DOM reconstruction: routes DOM (evidence: `README.md`)
- Clone coordinator → GPU extraction: routes GPU (evidence: `README.md`)
- DOM reconstruction → Rebuilt site: reconstructs DOM (evidence: `README.md`)
- GPU extraction → Rebuilt site: captures GPU (evidence: `README.md`)
- Clone coordinator → Pixel comparison: runs pixel diff (evidence: `README.md`)
- Pixel comparison → Verified clone: verifies result (evidence: `README.md`)
- Engineer → Remix coordinator: starts remix (evidence: `README.md`)
- Verified clone → Remix coordinator: hands off clone (evidence: `README.md`)
- Design tokens → CSS tokenization: provides measurements (evidence: `README.md`)
- CSS tokenization → Remix coordinator: prepares variables (evidence: `skills/remix-site/scripts/tokenize-css.js`)
- Remix coordinator → Design directions: creates options (evidence: `README.md`)
- Design directions → Apply overrides: materializes choice (evidence: `README.md`)
- Apply overrides → Direction gallery: registers directions (evidence: `skills/remix-site/scripts/gallery.js`)
- Direction gallery → Remix coordinator: records selection (evidence: `skills/remix-site/scripts/gallery.js`)
- Remix coordinator → Live tweak panel: offers live tuning (evidence: `README.md`)
- Live tweak panel → Apply overrides: exports settings (evidence: `skills/remix-site/scripts/tweak-panel.js`)
- Apply overrides → Remixed site: applies direction (evidence: `skills/remix-site/scripts/apply-overrides.js`)