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 Agent Browser -- Browser Automation for Agents 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