Where Is the Main Logic for Cloning Located in the AI Website Cloner Template?

The main logic for cloning in JCodesMore/ai-website-cloner-template resides entirely in .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

The single source of truth for the cloning algorithm is .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 with extracted fonts and metadata, populate 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. 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 and .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.

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 – Updated during the foundation phase to inject extracted fonts and metadata.
• src/app/globals.css – Populated with the color tokens and utility classes recovered during reconnaissance.
• 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:

/clone-website https://example.com

The agent reads .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:

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:

## 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, 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.
• 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 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 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 first to establish the document structure, fonts, and metadata. It simultaneously prepares 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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}