Give a coding agent an authorized URL. Get an editable local React project and an opened browser preview.
httrack-cloner-skill is a self-contained workflow for reconstructing authorized websites as local React + TypeScript + TanStack Router projects. It captures deployed files with HTTrack, recovers runtime assets, removes automatic external requests, builds the result, verifies it in a browser, and opens the local preview.
Important
Use this project only for websites and assets you are authorized to capture, modify, and redistribute.
Original website on the left · Local React clone on the right
Synchronized Santioni Spirits and 2xA Studio comparisons. Click for the higher-quality MP4.
Captured website source and original third-party assets are not distributed in this repository.
| Stage | Result |
|---|---|
| Capture | Host-scoped HTTrack mirror and asset inventory |
| Analyze | Routes, scripts, runtime assets, and interaction contracts |
| Reconstruct | React 19, TypeScript, Vite, and TanStack Router routes |
| Localize | Local media, fonts, workers, WASM, models, and textures |
| Verify | Typecheck, production build, route probes, and browser diagnostics |
| Deliver | Clean project directory and opened loopback preview |
Copy this sentence into Codex, Claude Code, Cursor, or another coding agent:
Install httrack-cloner-skill for me from https://github.com/Redux0223/httrack-cloner-skill: first try `npx skills add Redux0223/httrack-cloner-skill -g`, then follow the repository requirements to install its dependencies, run the validation, and confirm that $httrack-cloner-skill is ready to use; if the installer is unavailable, use the manual installation steps in the README for my coding agent.
Or install it manually:
git clone https://github.com/Redux0223/httrack-cloner-skill.git
cd httrack-cloner-skill
npm ci --prefix scripts
mkdir -p ~/.codex/skills
ln -s "$(pwd)" ~/.codex/skills/httrack-cloner-skillGive your coding agent a URL:
Use $httrack-cloner-skill on https://example.com/
Or run the deterministic entry point:
node scripts/run-url.mjs --url "https://example.com/" --authorized --depth 3Resume a repair loop with:
node scripts/run-url.mjs --resume "/absolute/path/to/run"- Node.js 20 or newer and npm
- HTTrack available on
PATH - Chromium dependencies for Playwright
- Network access to the authorized source during capture
# macOS
brew install httrack
# Ubuntu / Debian
sudo apt-get update && sudo apt-get install -y httrack
npx --prefix scripts playwright install chromiumclone-runs/<host>-<timestamp>-<id>/
├── mirror/ # captured source and inventory
├── react/ # editable React deliverable
├── proof/ # browser evidence
└── .cloner/ # trace, state, and repair history
Complex production bundles may remain behind a sanitized local React adapter when an automatic idiomatic rewrite would change behavior. The generated reports distinguish project delivery from visual parity instead of claiming pixel-perfect output without evidence.
- Capture is host-scoped and requires
--authorized. - Automatic external runtime requests are blocked or reported.
- Live APIs require deterministic local replacements.
- Minified WebGL and canvas runtimes may need a local adapter.
- Authentication, CAPTCHA, DRM, paywalls, and access controls are out of scope.
- Generated authorization reports are technical evidence, not legal advice.
npm ci --prefix scripts
npm run validateThe suite contains 123 automated tests covering capture, assets, React conversion, TanStack routing, external request cleanup, browser proof, repair loops, and reproducible delivery.
Read CONTRIBUTING.md before submitting changes. Report security issues through SECURITY.md.
The Skill implementation is released under the MIT License. Generated projects and captured assets retain their original ownership and licensing conditions.