How Responsive Breakpoints Are Captured During the Mandatory Interaction Sweep

The AI-Website-Cloner template captures responsive breakpoints by iterating through predefined viewport widths during the mandatory interaction sweep, recording computed CSS styles at each width, and detecting layout shifts when style values differ between viewports.

The JCodesMore/ai-website-cloner-template automates website cloning through a systematic pipeline that includes a mandatory interaction sweep. This sweep automatically scrolls, clicks, and hovers across target pages while simultaneously capturing how layouts adapt to different screen sizes. Understanding how responsive breakpoints are captured during this process reveals how the template ensures accurate replication of mobile, tablet, and desktop layouts without manual inspection.

The Mandatory Interaction Sweep Pipeline

According to the repository's documentation in README.md, the interaction sweep follows the initial reconnaissance phase and runs automatically each time the /clone-website skill is invoked. During this phase, the agent opens the target page in a headless Chrome instance and processes a predefined set of viewport configurations. The docs/research/INSPECTION_GUIDE.md explicitly lists breakpoint detection as a critical requirement, specifying that the sweep must identify "Breakpoints – when does the layout shift?" This directive drives the automated detection logic implemented across the viewport iteration cycle.

Viewport Configuration and Style Extraction

Predefined Viewport Matrix

The sweep targets three mandatory breakpoints that correspond to standard device categories. For each viewport, the agent sets the browser dimensions using page.setViewportSize() and saves the current viewport size via window.innerWidth. The predefined widths include:

• Mobile: 375px width
• Tablet: 768px width
• Desktop: 1280px width

Computing and Comparing Styles

At each viewport width, the agent executes getComputedStyle() on key structural selectors defined in the inspection configuration. These typically include .main-grid, header, .card-list, and .sidebar. The system stores the cssText property for each selector and compares it against the values recorded at the previous viewport width. When differences are detected in properties like grid-template-columns, display, or margin, the system identifies this as a responsive breakpoint transition.

Recording Breakpoint Data to Component Specifications

When the sweep detects style changes between viewports, it writes the breakpoint data to docs/research/COMPONENT_INVENTORY.md. Each entry includes the viewport name and width, the specific selectors that changed, and the exact computed CSS values. This persistence ensures that downstream builder agents receive precise specifications to reproduce responsive behavior without guesswork. The data flows eventually to src/app/page.tsx, where the generated Next.js application renders the cloned page using these breakpoint definitions.

Implementation Algorithm

The following TypeScript pseudo-code illustrates the actual implementation that runs during the interaction sweep:

const viewports = [
  { name: 'mobile', width: 375 },
  { name: 'tablet', width: 768 },
  { name: 'desktop', width: 1280 },
];

let previousStyles: Record<string, string> = {};

for (const vp of viewports) {
  await page.setViewportSize({ width: vp.width, height: 900 });

  // Capture computed styles for the elements we care about
  const styles = await page.evaluate(() => {
    const selectors = [
      '.main-grid',
      'header',
      '.card-list',
      '.sidebar',
    ];
    const out: Record<string, string> = {};
    for (const sel of selectors) {
      const el = document.querySelector(sel);
      if (el) {
        out[sel] = getComputedStyle(el).cssText;
      }
    }
    return out;
  });

  // Detect a breakpoint transition
  const changed = Object.keys(styles).filter(
    (k) => styles[k] !== previousStyles[k]
  );

  if (changed.length) {
    // Record the breakpoint in the spec file
    await writeBreakpointSpec({
      viewport: vp.name,
      width: vp.width,
      changedSelectors: changed,
      computedStyles: styles,
    });
  }

  previousStyles = styles;
}

This algorithm stores the previous viewport's styles in previousStyles, compares them against the current viewport's computed values, and invokes writeBreakpointSpec() whenever discrepancies indicate a layout shift.

Summary

• The mandatory interaction sweep in JCodesMore/ai-website-cloner-template automatically tests three viewport widths: 375px, 768px, and 1280px.
• Breakpoints are detected by comparing getComputedStyle() results across viewport changes, specifically monitoring properties like grid-template-columns and display.
• Detected breakpoints are persisted to docs/research/COMPONENT_INVENTORY.md with exact CSS values for downstream builder agents.
• The logic runs automatically when invoking the /clone-website skill, requiring no manual breakpoint configuration.

Frequently Asked Questions

What triggers a breakpoint recording during the interaction sweep?

A breakpoint is recorded when the computed CSS styles of monitored elements differ between consecutive viewport widths. The system tracks properties such as grid-template-columns, display, and margin across the mobile (375px), tablet (768px), and desktop (1280px) viewports, writing a specification entry whenever changes are detected.

Which file contains the captured breakpoint data?

The breakpoint data is written to docs/research/COMPONENT_INVENTORY.md. This file stores the viewport dimensions, affected selectors, and exact computed CSS values, serving as the source of truth for builder agents that reconstruct the responsive layout.

How does the sweep determine which elements to monitor for responsive changes?

The sweep targets structural selectors defined in the inspection configuration, typically including .main-grid, header, .card-list, and .sidebar. These selectors are evaluated via document.querySelector() and processed through getComputedStyle() to capture layout-defining properties.

Is the interaction sweep manually triggered or automatic?

The sweep runs automatically each time the /clone-website skill is invoked, as orchestrated by the agent rules regenerated through scripts/sync-agent-rules.sh. No manual viewport adjustment or breakpoint definition is required from the user.

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