$ show JCodesMore/ai-website-cloner-template
This repository is a meticulously crafted template for using AI coding agents to reverse-engineer live websites into clean, modern Next.js codebases. It provides a pre-configured Next.js 16 scaffold (with shadcn/ui, Tailwind v4, and TypeScript strict) alongside a sophisticated set of agent instructions that guide the AI through the entire cloning process: mapping URLs, observing the target, building components, and comparing results. The project is not just a code scaffold; it is a complete workflow definition designed for Claude Code, Codex, Cursor, and OpenCode. The architecture is elegantly split between the application scaffold (src/, public/) and the agent skill definitions (.agents/skills/clone-website/). The canonical skill (SKILL.md) and its references (inspection-guide.md, framer-and-motion.md) represent a masterclass in prompt engineering, providing concrete, actionable guidance for handling complex scenarios like Framer-generated pages, scroll-driven animations, and responsive asset extraction. The project structure enforces clean separation of concerns for multiple cloned sites. The codebase demonstrates exceptional craftsmanship and a deep understanding of both software engineering and AI agent capabilities. The highlighted components—the agent skills, the token-counting CI workflow, and the cross-platform agent configuration—are genuinely reusable patterns that solve non-obvious problems. This is a rare example of a template that is more valuable for its workflow and documentation than its application code, setting a high standard for AI-assisted development projects. Maintenance is active, technical drift is low, and the project is a strong 9.0 on the quality scale.
The LLM identified 5 files worth highlighting for reuse:
Canonical AI agent skill defining the complete website cloning pipeline (Map, Observe, Build, Compare). Highly reusable across multiple AI coding agents (Claude Code, Codex, Cursor, OpenCode). Demonstrates advanced prompt engineering for guiding autonomous code generation, including handling of Framer sites, motion design, and responsive layout extraction.
Specialized reference guide for reverse-engineering Framer-generated websites and animated pages. Provides concrete inspection techniques for scroll-driven, time-driven, and click-driven motion, including Framer-specific details like data-framer-name attributes, CDN image format quirks, and Lenis smooth scrolling. Solves a highly specific and recurring problem in website cloning.
Structured methodology for inspecting a source web page before cloning. Covers visual structure analysis, asset inventory (images, fonts, SVGs, video), and state evidence capture. Emphasizes measuring computed styles, verifying content types, and distinguishing interaction drivers (scroll vs. click). A reusable pattern for any web scraping or reverse-engineering task.
CI workflow that automatically counts the total tokens in the repository using gitingest and tiktoken, then publishes the result as a JSON badge to a dedicated branch. This is a non-obvious DevOps pattern specifically useful for AI-centric repositories where context window size is a critical constraint. Highly reusable for any project that wants to display its AI context cost.
Single source of truth for AI agent instructions. Contains the critical 'This is NOT the Next.js you know' warning and defines the project structure, tech stack, and code style. Designed to be the central configuration file that is imported by platform-specific configs (e.g., CLAUDE.md). Demonstrates a clean pattern for managing cross-platform AI agent instructions.