Pre-Dispatch Checklist for the AI Website Cloner: 7 Critical Steps Before Launching Builder Agents

The pre-dispatch checklist ensures every component specification is written, verified, and asset-complete before parallel builder agents are launched, preventing runtime failures and pixel drift.

The JCodesMore/ai-website-cloner-template repository implements a rigorous pre-dispatch routine to guarantee that the extraction phase produces complete, verifiable artefacts. This checklist acts as the final gate before the parallel build phase, ensuring that builder agents receive exhaustive instructions rather than partial guesses.

What Is the Pre-Dispatch Checklist?

The pre-dispatch checklist is a seven-step verification protocol enforced before any builder agent is dispatched. According to the repository's skill definition in .github/skills/clone-website/SKILL.md, this routine guarantees that component specifications, design tokens, and assets are fully extracted and validated. Skipping any item risks incomplete instructions, merge conflicts, or broken builds.

The 7 Critical Pre-Dispatch Items

1. Component Specification Files Written

Every component requires a dedicated spec file in docs/research/components/ before any builder is dispatched.

In .github/skills/clone-website/SKILL.md (lines 112-118), the specification file is defined as the contract between the extraction work and the builder agent. It contains exact CSS values, interaction models, responsive breakpoints, and asset paths. Without this file, the builder must rely on memory or inference, leading to incorrect code generation.

2. Spec File Completeness Verified

Confirm that all required CSS properties, states, and assets are captured in the specification.

As noted in .github/skills/clone-website/SKILL.md (lines 430-433), thorough verification prevents costly re-work. Missing properties force builders to produce broken components or require expensive post-dispatch fixes. This step forces exhaustive extraction during the reconnaissance phase.

3. Asset Extraction Completed

All images, fonts, videos, and SVG icons must be downloaded into public/ or the appropriate docs/research/ subfolder.

Builders reference these assets directly by path. Missing assets cause broken UI, 404 errors, or failed builds. Local asset storage ensures the generated site is fully self-contained and deployable without external dependencies.

4. Design Token Extraction Finished

Colour palettes, spacing tokens, typography scales, and other design tokens must be stored in the project's Tailwind configuration.

Design tokens guarantee pixel-perfect fidelity between the original site and the clone. Without extracted tokens, the rebuilt site drifts away from the source design during the build phase, violating the core goal of exact replication.

5. Worktree Preparation

A fresh Git worktree is created for each builder, typically one per section or component.

Isolating each builder in its own worktree prevents merge conflicts and enables true parallelism. This architecture allows the foreman to continue extracting the next section while builders run simultaneously on previous components.

6. PR-Ready State Check

Run the validation command and confirm the repository passes all quality gates:

npm run check

This command verifies linting, TypeScript type-checking, and successful builds. According to .github/PULL_REQUEST_TEMPLATE.md (lines 19-20), this is the final gate before code merges. Passing guarantees that generated code compiles, follows strict TypeScript rules, and meets style conventions, preventing broken builds from entering the main branch.

7. All Checklist Boxes Ticked

Manually verify that every item above is explicitly checked off before dispatch.

Explicit confirmation reduces human error by forcing the operator to pause and review. This mechanical verification ensures that no step was overlooked during the preparation phase.

How the Checklist Fits Into the Pipeline

The pre-dispatch checklist sits immediately before the Parallel Build phase in the five-stage workflow described in README.md (lines 90-95):

1. Reconnaissance – Screenshots, design-token extraction, interaction sweep
2. Foundation – Updates fonts, colors, globals, downloads assets
3. Component specs – Writes detailed spec files
4. Parallel Build – Dispatches builder agents in worktrees
5. Assembly & QA – Merges worktrees, runs visual diff

The checklist ensures that steps 1-3 are complete before triggering step 4, guaranteeing every builder receives a verified specification.

Key Files Governing Pre-Dispatch

File	Location	Purpose
Skill Definition	.github/skills/clone-website/SKILL.md	Defines the builder contract rules and pre-dispatch verification requirements
PR Template	.github/PULL_REQUEST_TEMPLATE.md	Enforces the npm run check requirement before merging
Pipeline Docs	README.md	Describes the five-phase workflow and dispatch timing
Spec Storage	docs/research/components/	Contains auto-generated specification files that drive builders

Summary

• Component specifications must exist in docs/research/components/ before dispatch to serve as the builder contract.
• Completeness verification prevents costly re-work by ensuring all CSS properties, states, and assets are captured.
• Asset extraction into public/ guarantees a self-contained, deployable site without broken links.
• Design tokens in the Tailwind config ensure pixel-perfect fidelity to the original design.
• Git worktrees enable parallel building without merge conflicts.
• npm run check validates TypeScript, linting, and build success before any merge.
• Manual verification of all checklist items prevents human error during the dispatch process.

Frequently Asked Questions

What happens if I dispatch a builder without a component spec file?

Dispatching without a spec file violates the builder contract defined in .github/skills/clone-website/SKILL.md. The builder will lack exact CSS values, interaction models, and asset paths, forcing it to generate guesses rather than precise code. This leads to incomplete components requiring expensive post-dispatch fixes.

Why must assets be extracted before dispatch rather than during the build?

Builders reference assets by exact paths during code generation. Missing assets cause broken UI elements, 404 errors, or build failures. Pre-dispatch extraction ensures the public/ folder contains all required images, fonts, and videos, making the generated site immediately self-contained and deployable.

How does the npm run check command prevent broken code?

The command validates linting rules, TypeScript type-checking, and successful compilation. As specified in .github/PULL_REQUEST_TEMPLATE.md, this check must pass before merging. It acts as a final quality gate ensuring that generated code follows the repository's strict conventions and compiles without errors.

Can multiple builders run without Git worktrees?

No. Without isolated worktrees, parallel builders would cause merge conflicts and race conditions. Worktrees create independent environments for each component build, allowing true parallelism while preventing code collision during the assembly phase.

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