# Where Is the Main Logic for Cloning Located in the AI Website Cloner Template? > Discover where the main AI website cloner logic lives in the JCodesMore/ai-website-cloner-template. Find the core cloning functionality within the SKILL.md file. - Repository: [JCodesMore/ai-website-cloner-template](https://github.com/JCodesMore/ai-website-cloner-template) - Tags: internals - Published: 2026-06-30 --- **The main logic for cloning in `JCodesMore/ai-website-cloner-template` resides entirely in [`.claude/skills/clone-website/SKILL.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.claude/skills/clone-website/SKILL.md), a declarative skill markdown file that the AI agent interprets to execute the end-to-end cloning pipeline.** If you are tracing the main logic for cloning in the `JCodesMore/ai-website-cloner-template` repository, you will not find it inside a conventional JavaScript or Node.js executable. Instead, the entire workflow is authored as a platform-agnostic skill definition that the AI agent reads and follows at runtime. This declarative approach places the algorithm inside a single markdown document rather than a compiled script. ## The Main Logic for Cloning Is Defined in [`.claude/skills/clone-website/SKILL.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.claude/skills/clone-website/SKILL.md) The single source of truth for the cloning algorithm is [`.claude/skills/clone-website/SKILL.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.claude/skills/clone-website/SKILL.md). According to the `JCodesMore/ai-website-cloner-template` source code, this file contains the complete, step-by-step pipeline that the agent executes when you invoke the `/clone-website` command. Because the logic is written in plain text with embedded snippets, triggers, and file-system expectations, the agent interprets it in real time without requiring a separate executable runner. ### Pre-Flight Checks and Environment Validation The first stage defined in the skill markdown verifies that the environment can support browser automation and that the target project is stable. The agent checks for available browser MCP tools, parses `$ARGUMENTS` into one or more URLs, and confirms the base project builds cleanly by running `npm run build`. It also creates the required output directories if they do not already exist. ### Reconnaissance and Token Extraction During the reconnaissance phase, the agent captures screenshots and performs an interaction sweep across the target site. It extracts global design tokens such as fonts, colors, and favicons that will later drive the generated application’s styling foundation. ### Foundation Build In the foundation stage, the skill directs the agent to update [`src/app/layout.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/layout.tsx) with extracted fonts and metadata, populate [`src/app/globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/globals.css) with color tokens and utility classes, and refresh TypeScript types. The skill also triggers icon extraction and generates `scripts/download-assets.mjs` at runtime to handle bulk downloading of images, videos, and fonts. ### Component Specification and Builder Dispatch After reconnaissance, the pipeline extracts individual sections and writes structured requirements into `docs/research/components/*.spec.md`. These specification files act as blueprints for parallel builder agents, allowing multiple components to be constructed simultaneously from the extracted research. ### Assembly and QA The final stage merges the work-trees produced by the builder agents and wires the completed components into [`src/app/page.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/page.tsx). The skill then instructs the agent to perform visual diff checks to ensure the assembled output matches the reference site before concluding the clone. ## Platform Wrappers and the Sync Script While the master skill remains platform-agnostic, the repository includes `scripts/sync-skills.mjs` to distribute it across specific AI environments. Running this script regenerates thin wrapper files such as [`.opencode/commands/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.opencode/commands/clone-website.md) and [`.github/skills/clone-website/SKILL.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.github/skills/clone-website/SKILL.md), ensuring that every supported platform points back to the same authoritative pipeline. These generated wrappers contain no independent logic; they simply invoke the master definition stored under [`.claude/skills/clone-website/SKILL.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.claude/skills/clone-website/SKILL.md). ## Supporting Files Referenced by the Main Logic for Cloning Several scaffolding files are read or updated by the skill as it executes: - **[`src/app/layout.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/layout.tsx)** – Updated during the foundation phase to inject extracted fonts and metadata. - **[`src/app/globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/globals.css)** – Populated with the color tokens and utility classes recovered during reconnaissance. - **[`src/lib/utils.ts`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/lib/utils.ts)** – Supplies the `cn()` helper function used by generated components for conditional class merging. - **`docs/research/components/*.spec.md`** – Output directory for the per-section specification files that drive builder agents. - **`scripts/download-assets.mjs`** – Generated at runtime by the skill to manage bulk asset downloads. These files provide the Next.js project structure that the skill manipulates, but they do not contain the cloning algorithm itself. ## How to Trigger and Sync the Cloning Logic Invoking the clone is straightforward once your AI agent is active: ```bash /clone-website https://example.com ``` The agent reads [`.claude/skills/clone-website/SKILL.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.claude/skills/clone-website/SKILL.md), performs reconnaissance, writes component specs under `docs/research/components/`, dispatches builder agents, and ultimately produces a fully built Next.js site. If you edit the master skill and need to update every platform wrapper, run the sync script: ```bash node scripts/sync-skills.mjs ``` This command regenerates the command files for every supported platform so they all reference the updated logic. The following snippet illustrates the pre-flight section as it appears in the skill markdown: ```markdown ## Pre-Flight 1. **Browser automation is required.** Check for available browser MCP tools … 2. Parse `$ARGUMENTS` as one or more URLs … 3. Verify the base project builds: `npm run build`. 4. Create the output directories if they don't exist … ``` Because the agent follows these instructions verbatim, the startup environment remains consistent across every clone operation. ## Summary - **The main logic for cloning is located in [`.claude/skills/clone-website/SKILL.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.claude/skills/clone-website/SKILL.md)**, not in a traditional executable script. - The skill markdown defines a five-phase pipeline: pre-flight, reconnaissance, foundation build, component specification, and assembly with QA. - **`scripts/sync-skills.mjs`** propagates the master skill to platform-specific wrappers such as [`.opencode/commands/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.opencode/commands/clone-website.md). - Generated files like `docs/research/components/*.spec.md` and `scripts/download-assets.mjs` are produced at runtime by the skill itself. ## Frequently Asked Questions ### Is there a traditional JavaScript or Node.js script that runs the clone? No. As implemented in `JCodesMore/ai-website-cloner-template`, the agent interprets the [`.claude/skills/clone-website/SKILL.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.claude/skills/clone-website/SKILL.md) markdown directly at runtime. There is no separate compiled or executable script that orchestrates the clone; the logic is declarative and agent-executed. ### What happens if I modify the master skill file? Any changes to [`.claude/skills/clone-website/SKILL.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.claude/skills/clone-website/SKILL.md) must be propagated using `node scripts/sync-skills.mjs`. This script regenerates the thin platform wrappers so that every AI environment points to the updated master definition. ### Which project file is updated first during the cloning process? During the foundation build phase, the skill typically updates [`src/app/layout.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/layout.tsx) first to establish the document structure, fonts, and metadata. It simultaneously prepares [`src/app/globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/globals.css) with the extracted global style tokens. ### Where are the generated component specifications stored? The skill writes per-section specification files to `docs/research/components/*.spec.md` during the component specification phase. These markdown specs are then consumed by parallel builder agents to construct the corresponding React components.