# minosdevs/copycat-skill architecture

> Architecture diagram of the GitHub repository minosdevs/copycat-skill, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/minosdevs/copycat-skill
- Repository: https://github.com/minosdevs/copycat-skill

## Overview

copycat is a Claude Code skill and companion Node scripts for reproducing a website from a URL and measuring the result. The documented workflow captures the original across viewports, extracts browser-visible design and content, guides a section-by-section rebuild, then compares the clone using pixel and design diffs plus console checks. The graph separates capture, extraction, rebuild guidance, and verification. Capture and compare wiring is based on sampled excerpts; rebuild details and other documented capabilities are represented at the documented subsystem level.

Main entry points: [`scripts/compare.mjs`](https://github.com/minosdevs/copycat-skill/blob/main/scripts/compare.mjs) (Compare Runner), [`scripts/capture.mjs`](https://github.com/minosdevs/copycat-skill/blob/main/scripts/capture.mjs) (Capture Runner), [`scripts/lib.mjs`](https://github.com/minosdevs/copycat-skill/blob/main/scripts/lib.mjs) (Capture Helpers), [`scripts/extract.browser.js`](https://github.com/minosdevs/copycat-skill/blob/main/scripts/extract.browser.js) (Design Extractor)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_capture["Original Capture"]
  node_capture_script["Capture Runner<br/>[capture.mjs]"]
  node_browser["Playwright Browser"]
  node_capture_helpers["Capture Helpers<br/>[lib.mjs]"]
  node_capture_data["Capture Artifacts"]
end

subgraph group_extract["Page Extraction"]
  node_extractor["Design Extractor<br/>[extract.browser.js]"]
end

subgraph group_rebuild["Rebuild Guidance"]
  node_rebuild_skill["Workflow Instructions<br/>[SKILL.md]"]
  node_fidelity["Fidelity Checklist"]
  node_recipes["Rebuild Recipes<br/>[rebuild-recipes.md]"]
  node_troubleshooting["Troubleshooting Guide<br/>[troubleshooting.md]"]
end

subgraph group_verify["Clone Verification"]
  node_compare_script["Compare Runner<br/>[compare.mjs]"]
  node_pixel_diff["Pixel Diff<br/>[compare.mjs]"]
  node_design_diff["Design Diff<br/>[compare.mjs]"]
  node_compare_report["Comparison Report"]
end

node_user(("User"))
node_claude(("Claude Code"))
node_original["Original Website"]
node_clone["Local Clone"]

node_user -->|"requests clone"| node_claude
node_claude -->|"follows workflow"| node_rebuild_skill
node_claude -->|"runs capture"| node_capture_script
node_capture_script -->|"opens pages"| node_browser
node_browser -->|"navigates"| node_original
node_capture_script -->|"uses helpers"| node_capture_helpers
node_capture_script -->|"evaluates"| node_extractor
node_extractor -->|"reads page"| node_browser
node_capture_script -->|"writes captures"| node_capture_data
node_capture_helpers -->|"writes images"| node_capture_data
node_claude -->|"checks details"| node_fidelity
node_claude -->|"uses recipes"| node_recipes
node_claude -->|"consults"| node_troubleshooting
node_claude -->|"builds locally"| node_clone
node_user -->|"runs comparison"| node_compare_script
node_compare_script -->|"reads original"| node_capture_data
node_compare_script -->|"opens clone"| node_browser
node_browser -->|"navigates"| node_clone
node_compare_script -->|"measures pixels"| node_pixel_diff
node_compare_script -->|"checks design"| node_design_diff
node_compare_script -->|"writes results"| node_compare_report

click node_capture_script "https://github.com/minosdevs/copycat-skill/blob/main/scripts/capture.mjs"
click node_capture_helpers "https://github.com/minosdevs/copycat-skill/blob/main/scripts/lib.mjs"
click node_extractor "https://github.com/minosdevs/copycat-skill/blob/main/scripts/extract.browser.js"
click node_rebuild_skill "https://github.com/minosdevs/copycat-skill/blob/main/SKILL.md"
click node_fidelity "https://github.com/minosdevs/copycat-skill/blob/main/references/fidelity-checklist.md"
click node_recipes "https://github.com/minosdevs/copycat-skill/blob/main/references/rebuild-recipes.md"
click node_troubleshooting "https://github.com/minosdevs/copycat-skill/blob/main/references/troubleshooting.md"
click node_compare_script "https://github.com/minosdevs/copycat-skill/blob/main/scripts/compare.mjs"
click node_pixel_diff "https://github.com/minosdevs/copycat-skill/blob/main/scripts/compare.mjs"
click node_design_diff "https://github.com/minosdevs/copycat-skill/blob/main/scripts/compare.mjs"

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_capture_script,node_browser,node_capture_helpers,node_capture_data,node_user toneBlue
class node_extractor toneAmber
class node_rebuild_skill,node_fidelity,node_recipes,node_troubleshooting toneMint
class node_compare_script,node_pixel_diff,node_design_diff,node_compare_report toneRose
class node_claude,node_original,node_clone toneIndigo
```

## Components

### Original Capture

- [Capture Runner](https://github.com/minosdevs/copycat-skill/blob/main/scripts/capture.mjs): `scripts/capture.mjs`
- **Playwright Browser**
- [Capture Helpers](https://github.com/minosdevs/copycat-skill/blob/main/scripts/lib.mjs): `scripts/lib.mjs`
- **Capture Artifacts**

### Page Extraction

- [Design Extractor](https://github.com/minosdevs/copycat-skill/blob/main/scripts/extract.browser.js): `scripts/extract.browser.js`

### Rebuild Guidance

- [Workflow Instructions](https://github.com/minosdevs/copycat-skill/blob/main/SKILL.md): `SKILL.md`
- [Fidelity Checklist](https://github.com/minosdevs/copycat-skill/blob/main/references/fidelity-checklist.md): `references/fidelity-checklist.md`
- [Rebuild Recipes](https://github.com/minosdevs/copycat-skill/blob/main/references/rebuild-recipes.md): `references/rebuild-recipes.md`
- [Troubleshooting Guide](https://github.com/minosdevs/copycat-skill/blob/main/references/troubleshooting.md): `references/troubleshooting.md`

### Clone Verification

- [Compare Runner](https://github.com/minosdevs/copycat-skill/blob/main/scripts/compare.mjs): `scripts/compare.mjs`
- [Pixel Diff](https://github.com/minosdevs/copycat-skill/blob/main/scripts/compare.mjs): `scripts/compare.mjs`
- [Design Diff](https://github.com/minosdevs/copycat-skill/blob/main/scripts/compare.mjs): `scripts/compare.mjs`
- **Comparison Report**

### Other components

- **User**
- **Claude Code**
- **Original Website**
- **Local Clone**

## Connections

- User → Claude Code: requests clone
- Claude Code → Workflow Instructions: follows workflow
- Claude Code → Capture Runner: runs capture
- Capture Runner → Playwright Browser: opens pages
- Playwright Browser → Original Website: navigates
- Capture Runner → Capture Helpers: uses helpers
- Capture Runner → Design Extractor: evaluates
- Design Extractor → Playwright Browser: reads page
- Capture Runner → Capture Artifacts: writes captures
- Capture Helpers → Capture Artifacts: writes images
- Claude Code → Fidelity Checklist: checks details
- Claude Code → Rebuild Recipes: uses recipes
- Claude Code → Troubleshooting Guide: consults
- Claude Code → Local Clone: builds locally
- User → Compare Runner: runs comparison
- Compare Runner → Capture Artifacts: reads original
- Compare Runner → Playwright Browser: opens clone
- Playwright Browser → Local Clone: navigates
- Compare Runner → Pixel Diff: measures pixels
- Compare Runner → Design Diff: checks design
- Compare Runner → Comparison Report: writes results