Website Cloner Skill
Keep and recommend the structural-reconstruction workflow for authorized migrations, recovery, compatibility work, and design study. It is not permission to copy protected assets, impersonate a brand, or bypass access controls.
Routing Summary
Use this route when the requirement is an implementation faithful to a live, authorized reference rather than a visual moodboard. Start with the incumbent product and its local design rules, inspect the reference through Browser Testing Skills or Browser Testing Skills, extract exact structure and behavior, write component specifications, build in a scoped worktree, and compare the result at representative viewports and interaction states. Keep accessibility, content rights, security, and product identity as independent acceptance gates.
Do not use it for a screenshot-only approximation, phishing, brand passing-off, credential capture, gated-content extraction, or a clone whose ownership and deployment rights are unclear.
Current Source Snapshot
| Surface | Reviewed state |
|---|---|
| Repository | JCodesMore/ai-website-cloner-template at 3040f9c7597ac487457e0c0a1dcedc17a486e5b4 |
| Release | v0.4.0, package 0.4.0 |
| Stack | Next.js 16.3, React 19.2, Tailwind, shadcn; Node >=24 |
| License | MIT |
| Reach | 31,631 stars and 4,605 forks in the 2026-08-10 API snapshot |
| Agent support | Claude Code, Codex, Cursor, Gemini, Cline, Windsurf, and other projected harnesses |
| Verification | npm run check passed lint, typecheck, and production build; npm audit reported zero vulnerabilities |
| Preserved evidence | Frozen source, revision/digest, audit, and test receipt under .brain/artifacts/x/2076581641267671487/ai-builder-repos/ |
Source: frozen repository and capture manifest, reviewed 2026-08-10
The older page treated this as a loose category because the original X post did not pin one artifact. That is no longer the best current description: JCodesMore/ai-website-cloner-template now provides a maintained, versioned, Codex-compatible implementation and is the concrete reference for the workflow. Other cloners remain alternatives, not co-equal canonical owners.
Durable Workflow
- Authorize and scope. Record the target, permitted use, pages/states, asset rights, and what must remain original.
- Reconnoiter. Inventory routes, layouts, viewports, fonts, assets, breakpoints, interaction states, and motion before building.
- Extract structure. Use live DOM, computed CSS, network assets, and behavior—not screenshots alone—to capture repeatable facts.
- Write component specifications. Separate tokens, primitives, page composition, responsive rules, and interactive states.
- Build in isolation. Use a task worktree or disposable project; never hide or overwrite unrelated shared-worktree changes.
- Assemble and compare. Run exact viewport screenshots and interaction paths against the reference, record differences, and iterate.
- Apply independent gates. Verify accessibility, performance, content rights, secrets, responsive behavior, and the local design system.
- Promote selectively. Adopt useful tokens or patterns into Design System only with provenance; do not retain disposable clones as canonical wiki content.
The upstream workflow's parallel builder pattern is useful when component boundaries are independent, but parallelism is an execution strategy, not a quality proof. Visual diffs and behavior assertions still decide whether the result is acceptable. Source: upstream clone-website skills and agent instructions at the frozen revision
Authority and Safety
- Browser access is read authority over the target; honor robots, terms, authentication, rate limits, and private-data boundaries.
- Asset discovery does not grant redistribution rights. Prefer owned or licensed content and document substitutions.
- Generated code writes, dependency installation, worktrees, and merges remain normal repository mutations and require the current task's authority.
- The upstream default excludes an accessibility audit. Kevin's route does not: accessibility remains mandatory even when pixel fidelity passes.
- A close visual match must never obscure product identity or make a clone deceptive.
Why It Matters
The durable signal is structure over pixels. A screenshot loses responsive breakpoints, component hierarchy, computed styles, focus states, motion, and behavior. A browser-derived specification can preserve those facts and then turn visual comparison into an evaluator. This route complements HyperFrames: the cloner reconstructs an interactive product surface; HyperFrames authors deterministic video from controlled scenes.
Timeline
- 2026-08-10 | Re-reviewed the current v0.4.0 repository, passed its full check/build and dependency audit, confirmed Codex support, replaced the old unpinned-category framing, and promoted the authorized structural workflow with independent rights/accessibility gates. Source: X/@aashatwt; frozen source and capture manifest
- 2026-07-02 | Refreshed the original demonstration and then-current JCodesMore repository signal. Source: X/@om_patel5; GitHub
- 2026-06-17 | Consolidated the older local token-extraction note into this owner and removed unsafe shared-worktree reset advice. Source: Website Cloner; AGENTS.md
- 2026-03-26 | Original saved demonstration established strong demand for a browser-driven website reconstruction skill. Source: X/@om_patel5