klic-awesome-code/ai-website-cloner-template

1. What this repository is

- This is not a backend service; it is a Next.js 16 template for rebuilding a target website as a clone.

- The runtime app is a mostly empty front-end shell, while the real “system” includes the Claude Code skill and the generated research/assets that drive the rebuild.

2. Primary execution flow

- The top-level workflow starts outside the app code: a user runs /clone-website <target-url> in Claude Code with Chrome MCP enabled.

- Claude performs reconnaissance, extracts assets/tokens, writes component specs, builds sections in parallel worktrees, then merges and QA-checks the result against the target.

3. App shell boundary

- The actual web app lives under src/app and uses the Next.js App Router.

- The only visible route structure in the tree is the root page and global layout/styles, so the template is centered on a single cloneable landing-page surface rather than a full multi-service application.

4. Presentation layer

- src/app/layout.tsx, src/app/page.tsx, and src/app/globals.css define the root document structure, homepage composition, and global styling.

- This layer is where the reconstructed UI ultimately renders after the AI-assisted build process.

5. Reusable UI primitives

- src/components/ui/ contains shadcn/ui-style primitives, with button.tsx visible in the tree.

- These are the lowest-level reusable building blocks for the cloned UI, intended to be composed into page sections rather than acting as a separate subsystem.

6. Shared utility layer

- src/lib/utils.ts provides shared helpers, likely the cn()-style class composition utility used across components.

- This is a small but important boundary: it keeps styling/composition concerns centralized instead of duplicated in each section.

7. Type and hook scaffolding

- src/types/ and src/hooks/ exist as extension points, but the tree shows no substantive custom implementations yet.

- Architecturally, these are placeholders for project-specific typing and interactive behavior if the clone requires them.

8. Generated research and design artifacts

- docs/research/ is a core part of the workflow, especially the component specs generated during reverse engineering.

- The readme describes these specs as containing exact computed styles, states, behavior, responsive values, and content, which makes this repo partly a spec-driven build system rather than a normal hand-authored app.

9. Reference and inspection assets

- docs/design-references/ stores screenshots/comparison material used to verify fidelity.

- The cloning process uses these visual references as the QA boundary between the original site and the rebuilt UI.

10. Static asset boundary

- public/images/, public/videos/, and public/seo/ are the landing zone for downloaded source assets and metadata from the target site.

- These folders are part of the clone pipeline’s output: images, video captures, favicons, and OG assets are brought into the template so the rebuilt page can match the source without relying on the original host.

11. Configuration and orchestration

- TARGET.md is the per-run configuration surface for scope, fidelity, and page selection.

- .claude/skills/clone-website/SKILL.md, along with AGENTS.md and CLAUDE.md, define the AI-agent operating rules and workflow conventions that orchestrate the build.

12. Tooling/runtime boundaries

- The repository is built around TypeScript, Tailwind CSS v4, shadcn/ui, and Lucide React, all running in a standard Node/Next.js toolchain.

- next.config.ts, eslint.config.mjs, postcss.config.mjs, and tsconfig.json support the build/lint/typecheck pipeline, but they do not introduce a separate service layer.

13. What is intentionally absent

- There are no visible API routes, database layers, auth systems, or background job services in the tree.

- That absence is important architecturally: the repo is a frontend-first cloning template whose complexity comes from the AI-driven reconstruction workflow, not from application backend logic.

14. How to draw the architecture

- A useful diagram would show three zones: Claude Code / Chrome MCP orchestration, research + generated assets in docs/public, and the Next.js UI runtime in src/.

- Data flows from the target website into the research/spec/asset folders, then into the React/Tailwind component tree, and finally into the rendered clone in the browser.