# Key Files in the Extraction and Specification Pipeline of the AI Website Cloner Template
> Discover the 8 key files driving the AI website cloner template's extraction and specification pipeline. Understand browser automation, style extraction, and component generation.
- Repository: [JCodesMore/ai-website-cloner-template](https://github.com/JCodesMore/ai-website-cloner-template)
- Tags: internals
- Published: 2026-07-10
---
**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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/components/icons.tsx)** – Central repository for all SVG icons extracted from the target site, converted into type-safe React components (e.g., ``, ``).
## 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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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:
```bash
# 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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/SKILL.md).
### Sample Component Specification
A generated specification file in [`docs/research/components/HeroSection.spec.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/docs/research/components/HeroSection.spec.md) follows this structure:
```markdown
# HeroSection Specification
## Overview
- **Target file:** `src/components/HeroSection.tsx`
- **Screenshot:** `docs/design-references/hero-desktop.png`
- **Interaction model:** scroll-driven
## DOM Structure
Headline Text
Supporting description
## 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:
```bash
# 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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/layout.tsx)** and **[`globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/utils.ts)** provides the `cn()` class-merge utility required by all shadcn/ui components
- **[`icons.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/layout.tsx) (for fonts and metadata) and [`src/app/globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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.