clone-any-website-skill

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #llm #go #linux #docker #java #security #mcp #openai #ios #open-source

clone-any-website-skill

(★ 61)

A Codex skill for rebuilding public websites as clean, maintainable projects with disciplined visual and interaction QA.

clone-any-website-skill Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Clone Any Website Skill

A Codex skill for rebuilding public websites as clean, maintainable projects with disciplined rendering, interaction, and multi-client QA.

It treats a page as a behavior system—not a screenshot. The workflow observes the real experience, records an implementation contract, rebuilds it with original source code, and verifies the result at fixed viewports and interaction states.

## Install

```bash
git clone git@github.com:promptwhisper/clone-any-website-skill.git
mkdir -p ~/.codex/skills
ln -s "$PWD/clone-any-website-skill/clone-any-website" \
  ~/.codex/skills/clone-any-website
```

Restart Codex, then give it a public URL:

```text
Use $clone-any-website to rebuild https://example.com as a clean local
project. Preserve responsive behavior and verify the final result.
```

## The reconstruction loop

| Stage | What happens | Evidence produced |
| --- | --- | --- |
| **Observe** | Inspect stack, routes, responsive states, assets, timing, interaction triggers, and shared-state transport | Screenshots, state captures, asset and connection inventory |
| **Specify** | Convert findings into explicit page, component, rendering, behavior, authority, and validation contracts | Research templates under `assets/research-templates/` |
| **Rebuild** | Implement the experience as maintainable DOM, Three.js, Pixi.js, Canvas2D, or video-led source | Clean project code and locally mirrored assets |
| **Verify** | Compare screenshots and motion at matching states, viewports, and media times | Difference metrics, heatmaps, network/build checks |

## What it handles

- conventional DOM pages and responsive product sites;
- Three.js and React Three Fiber experiences;
- measured renderer, camera, shadow, fog, material, authored-layer, and
  postprocessing reconstruction;
- Pixi.js and Canvas2D screen toys;
- scroll, click, hover, pointer, time, and mixed interaction models;
- MP4, WebM, and HLS experiences where video is the primary visual system;
- multiplayer rooms, shared presence, collaborative surfaces, and
  WebSocket/SSE/WebRTC-backed interactions;
- skinned characters, sprite atlases, physics interactions, and animated scenes;
- client-bundle inspection as behavioral reference when observation alone is insufficient.

The detailed guidance is loaded by stack, so a DOM landing page does not pay the context cost of a WebGL reconstruction playbook.

## Verification is part of the deliverable

The workflow checks more than whether the project builds:

- target screenshots at named viewport sizes;
- interaction states before, during, and after input;
- frame-aligned video comparisons for known media times;
- missing or unexpectedly remote assets;
- console and network failures;
- responsive layout and touch behavior;
- renderer pipeline, scene-layer completeness, and shared local/NPC/remote
  visual parity for custom-rendered experiences;
- late join, bidirectional shared state, leave cleanup, reconnect, and room
  isolation through independent clients when multiplayer is present;
- production build and deployment readiness.

`scripts/compare-screenshots.py` provides repeatable image-difference metrics and can write a heatmap for fixed visual states.

## Responsible scope

Use this workflow only for public targets. Do not bypass authentication, payment, access controls, rate limits, or technical restrictions.

Reimplement behavior as clean source. Do not redistribute a site's compiled application bundle, private data, proprietary backend, or assets whose license does not allow reuse. Record approximations honestly when exact reconstruction is not lawful or technically possible.

## Repository map

```text
clone-any-website/
├── SKILL.md
├── agents/
│   └── openai.yaml
├── assets/research-templates/
│   ├── ASSET_INVENTORY.md
│   ├── BEHAVIORS.md
│   ├── COMPONENT_SPEC.md
│   ├── PAGE_TOPOLOGY.md
│   ├── REALTIME_SPEC.md
│   ├── RENDERING_SPEC.md
│   └── VALIDATION_MATRIX.md
├── references/
│   ├── bundle-analysis.md
│   ├── dom-pages.md
│   ├── pixi-canvas.md
│   ├── realtime-multiplayer.md
│   ├── recon-and-assets.md
│   ├── three-r3f.md
│   └── video-first.md
└── scripts/
    └── compare-screenshots.py
```

Start with [`SKILL.md`](clone-any-website/SKILL.md). It routes into the relevant reference material only after the target stack and interaction model are known.

## License

MIT. See [LICENSE](LICENSE).

clone-any-website-skill

clone-any-website-skill Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

clone-any-website-skill

clone-any-website-skill Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README