Key Files in the Extraction and Specification Pipeline of the AI Website Cloner Template

The extraction and specification pipeline in the JCodesMore/ai-website-cloner-template repository is orchestrated by a master skill definition that coordinates browser automation, global style extraction, and component specification generation across eight critical source files.

This open-source template provides a complete framework for AI agents to clone any website into a Next.js application. The pipeline operates through a strict sequence of phases—from initial reconnaissance to final assembly—defined in configuration files and executable scripts that ensure pixel-perfect replication.

Skill Orchestration and Global Configuration

The foundation of the extraction and specification pipeline resides in the master skill definition and the global application files that store design tokens.

SKILL.md – The Pipeline Definition

The .claude/skills/clone-website/SKILL.md file serves as the single source of truth for the entire workflow. It defines the five-phase extraction process:

1. Reconnaissance – Browser MCP-driven screenshot capture and interaction sweeping
2. Foundation Build – Global font, color, and CSS variable extraction
3. Component Specification – Markdown generation for every UI element
4. Builder Dispatch – Parallel agent spawning for component implementation
5. Assembly & Visual QA – Final page composition and verification

This file contains the mandatory checklists that gate each phase, ensuring the foundation build completes before any component generator agents launch.

Global Style Foundation

Two files store the extracted global design tokens that must compile before component generation begins:

src/app/layout.tsx – Configures the root Next.js layout with Google Fonts or local font files matching the target site. It imports the global CSS variables and wraps the application in the required providers.

src/app/globals.css – Stores the CSS custom properties extracted during the foundation phase, including color palettes, spacing scales, animation keyframes, and responsive breakpoints.

Component Specification and Asset Management

The pipeline generates discrete specification files for each UI component, supported by a utility library and centralized icon management.

The Component Specification Directory

The docs/research/components/ directory contains individual .spec.md files—one per section or component. Each specification acts as the immutable contract between the extraction agent and the builder agent, documenting:

• Complete DOM hierarchy with semantic HTML structure
• Exact computed CSS values captured via getComputedStyle()
• Interactive states (hover, focus, click, scroll-triggered)
• Asset dependencies and responsive breakpoint behaviors

Utility and Icon Libraries

src/lib/utils.ts – Implements the cn() utility function (compatible with shadcn/ui) used by all generated components to conditionally merge Tailwind CSS classes.

src/components/icons.tsx – Central repository for all SVG icons extracted from the target site, converted into type-safe React components (e.g., <SearchIcon />, <ArrowRightIcon />).

Build Automation and Page Assembly

The pipeline concludes with synchronization scripts and the final page composition layer.

Sync Scripts

scripts/sync-skills.mjs – Node.js script that regenerates platform-specific copies of the master skill file. When SKILL.md changes, this script updates the Claude, Gemini, and Codex specific configurations to maintain consistency across AI coding platforms.

Page Assembly

src/app/page.tsx – The terminal assembly point that imports all generated components from src/components/ and composes them into the final Next.js page structure. This file is updated during the final assembly phase to wire together all sections built by parallel agents.

Code Examples

Running the Extraction Pipeline

Invoke the skill from an AI agent console to initiate the extraction and specification pipeline:

# Launch Claude Code with browser capabilities

claude --chrome

# Execute the clone skill

/clone-website https://example.com

The agent parses the command, validates the URL, and executes the phase workflow defined in SKILL.md.

Sample Component Specification

A generated specification file in docs/research/components/HeroSection.spec.md follows this structure:

# HeroSection Specification

## Overview

- **Target file:** `src/components/HeroSection.tsx`
- **Screenshot:** `docs/design-references/hero-desktop.png`
- **Interaction model:** scroll-driven

## DOM Structure

<div class="hero">
  <h1 class="title">Headline Text</h1>
  <p class="subtitle">Supporting description</p>
  <button class="cta">Call to Action</button>
</div>

## Computed Styles

### Container

- display: flex
- flex-direction: column
- padding: 4rem 2rem
- background-color: #f5f7fa

## States & Behaviors

### Scroll-triggered Shrink

- **Trigger:** scroll-position ≥ 80px
- **Before:** height: 120px; background: transparent
- **After:** height: 80px; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1)
- **Transition:** all 0.3s ease-in-out

Synchronizing Skill Definitions

After editing the master skill file, regenerate all platform-specific variants:

# Regenerate AI platform skill files

node scripts/sync-skills.mjs

This ensures Claude, Gemini, and other supported agents receive the updated pipeline definition.

Summary

• SKILL.md defines the five-phase extraction and specification pipeline with mandatory completion checklists
• layout.tsx and globals.css store the global foundation (fonts, colors, CSS variables) required before component generation
• docs/research/components/ houses individual specification files that serve as the source of truth for builder agents
• utils.ts provides the cn() class-merge utility required by all shadcn/ui components
• icons.tsx manages extracted SVG assets as React components
• sync-skills.mjs maintains consistency across AI platforms by regenerating skill copies from the master definition
• page.tsx serves as the final assembly layer, importing and composing all generated components

Frequently Asked Questions

What is the role of SKILL.md in the extraction and specification pipeline?

SKILL.md acts as the master orchestration document located at .claude/skills/clone-website/SKILL.md. It defines the complete workflow from initial browser-based reconnaissance through final assembly, including the specific prompts and checklists that ensure agents extract complete visual specifications before generating code. The file mandates that foundation assets (fonts, colors) must be committed before any component builder agents can launch.

How does the component specification format work?

Each component specification is a markdown file stored in docs/research/components/ that documents the exact DOM structure, computed CSS values, interaction states, and asset dependencies for a single UI element. These files serve as immutable contracts—extraction agents write them, and builder agents read them to implement the code, ensuring the clone matches the target site's pixel measurements and behavior.

What is the purpose of the sync-skills.mjs script?

The scripts/sync-skills.mjs script regenerates platform-specific copies of the master skill definition whenever SKILL.md changes. It ensures that Claude, Gemini, Codex, and other supported AI coding platforms maintain synchronized versions of the extraction and specification pipeline, preventing divergence between the master workflow and individual agent configurations.

How are global styles preserved during the cloning process?

Global styles are captured during the Foundation Build phase and stored in src/app/layout.tsx (for fonts and metadata) and src/app/globals.css (for CSS variables and animations). These files must compile successfully and pass visual QA before the pipeline proceeds to component generation, ensuring every subsequent builder agent inherits the correct design tokens.

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