Handling Responsive Breakpoint Extraction and Mandatory Viewport Widths in AI Website Cloner

The AI Website Cloner Template enforces deterministic viewport testing at specific pixel widths (320px, 480px, 768px, 1024px, 1440px) to capture exact CSS breakpoints and layout transitions, ensuring cloned Next.js sites reproduce responsive behavior identically to the original.

Responsive breakpoint extraction is a first-class operation in the JCodesMore/ai-website-cloner-template repository. When the /clone-website skill executes, the agent must resize the viewport through a mandatory series of widths, capture computed styles with getComputedStyle(), and record specific pixel values where layouts shift from columns to stacks or navigation drawers disappear. This deterministic approach eliminates flaky results from arbitrary browser resizing and creates reproducible component specifications that builder agents convert into Tailwind CSS media queries.

Why Breakpoint Extraction Matters for Responsive Cloning

Modern websites rely on fluid grid systems that change structure at specific viewport thresholds. The cloning process must preserve these transitions—such as hero sections switching from grid to flex, sidebars collapsing, or navigation morphing into hamburger menus—to ensure the generated Next.js application behaves identically across mobile, tablet, and desktop devices. Without explicit breakpoint extraction, automated agents might miss subtle layout shifts or invent arbitrary breakpoints that break the visual parity between the original and cloned site.

How the Template Enforces Mandatory Viewport Widths

The template institutes a strict measurement grid through checklist directives in the skill definition and research documentation. Agents cannot complete the inspection phase without documenting responsive behavior at every mandatory width.

Skill-Level Checklist Directives

In .github/skills/clone-website/SKILL.md, the agent instructions contain explicit mandates:

• "At each width, note which sections change layout (column → stack, sidebar disappears, etc.) and at approximately which breakpoint the change occurs." [line 164]
• "For responsive behavior: the specific breakpoint values and what changes." [line 391]

These instructions force the inspecting agent to open the target page in a headless browser, resize to each mandatory width (320px, 480px, 768px, 1024px, 1440px), and capture the computed CSS at each step.

Research Guide Alignment

The same expectations appear in docs/research/INSPECTION_GUIDE.md under the Responsive behavior section [line 37] and the column-layout sub-checklist [line 57]. This alignment ensures that both the initial research phase and the execution phase follow identical breakpoint extraction protocols.

The Breakpoint Specification Format

After inspection, the agent emits a YAML component specification that records exact pixel values and layout transformations:

responsive:
  breakpoints:
    - width: 480   # Mobile – stacked layout

    - width: 768   # Tablet – two‑column layout

    - width: 1024  # Desktop – three‑column layout

layoutChanges:
  - selector: ".hero"
    atWidth: 768
    change: "grid → flex"

Builder agents consume this specification to generate Tailwind utility classes that match the original breakpoints exactly, avoiding arbitrary media query values that might deviate from the source design.

Implementing Responsive Grids from Extracted Breakpoints

The builder agents use the cn() utility from src/lib/utils.ts to conditionally apply Tailwind classes based on the extracted breakpoint widths:

import { cn } from "@/lib/utils";

type Breakpoint = { width: number; label: string };

const breakpoints: Breakpoint[] = [
  { width: 480, label: "mobile" },
  { width: 768, label: "tablet" },
  { width: 1024, label: "desktop" },
];

export function ResponsiveGrid({ children }: { children: React.ReactNode }) {
  return (
    <div
      className={cn(
        "grid gap-4",
        "sm:grid-cols-1", // ≤480px (mobile)
        "md:grid-cols-2", // 481-768px (tablet)
        "lg:grid-cols-3", // >768px (desktop)
      )}
    >
      {children}
    </div>
  );
}

This approach binds the generated code to the specific widths recorded during the inspection phase, ensuring the cloned site replicates the original responsive behavior pixel-for-pixel.

Running the Clone Skill with Viewport Enforcement

Execute the skill with explicit viewport sizes to trigger the breakpoint extraction protocol:

npm run dev                     # start the dev server

claude --chrome                 # launch Claude Code agent

/clone-website https://example.com \
  --viewport-sizes=320,480,768,1024,1440

The --viewport-sizes flag tells the inspector which mandatory widths to probe. The skill then writes the breakpoint list into the component specification, which feeds directly into the builder agents responsible for generating Tailwind markup.

Key Files in the Breakpoint Pipeline

File	Purpose
.github/skills/clone-website/SKILL.md	Core skill definition with explicit breakpoint extraction instructions at lines 164 and 391
docs/research/INSPECTION_GUIDE.md	Research checklist defining responsive behavior validation at lines 37 and 57
.windsurf/workflows/clone-website.md	Windsurf-specific workflow mirroring the skill instructions
src/lib/utils.ts	Provides the cn() utility for applying responsive Tailwind classes
README.md	Summarizes the breakpoint extraction pipeline in the "How It Works" section

Summary

• Mandatory viewport widths (320px, 480px, 768px, 1024px, 1440px) create a deterministic measurement grid that eliminates arbitrary resizing during inspection.
• Skill directives in SKILL.md force agents to record specific breakpoint values and layout transitions using getComputedStyle().
• YAML specifications capture breakpoint data and layout changes in a structured format consumable by builder agents.
• Tailwind generation uses the cn() utility to map extracted breakpoints to exact media query classes, preserving the original site's responsive behavior.

Frequently Asked Questions

What viewport widths are mandatory in the AI Website Cloner?

The template requires inspection at 320px, 480px, 768px, 1024px, and 1440px. These values cover the standard range from mobile through large desktop displays, ensuring the agent captures every layout transition that occurs in the source website.

How does the template capture layout changes at each breakpoint?

The inspecting agent opens the target page in a headless browser, resizes the viewport to each mandatory width, and calls getComputedStyle() to record CSS values. It documents which sections change layout—such as grid systems collapsing to single columns or navigation drawers disappearing—along with the exact pixel width where each change triggers.

Where are breakpoint instructions defined for the cloning agent?

Primary instructions reside in .github/skills/clone-website/SKILL.md at lines 164 and 391, with complementary guidance in docs/research/INSPECTION_GUIDE.md at lines 37 and 57. A Windsurf-specific copy also exists at .windsurf/workflows/clone-website.md ensuring consistent behavior across different agent environments.

How are extracted breakpoints converted to Tailwind CSS classes?

Builder agents read the breakpoint values from the YAML specification and apply them using the cn() utility from src/lib/utils.ts. This function composes Tailwind utility classes like sm:grid-cols-1, md:grid-cols-2, and lg:grid-cols-3 that correspond to the specific widths (480px, 768px, 1024px) recorded during the inspection phase.

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