# How Responsive Breakpoints Are Captured During the Mandatory Interaction Sweep

> Learn how responsive breakpoints are captured during the AI Website Cloner interaction sweep. Discover how viewport widths and CSS styles are analyzed for layout shifts.

- Repository: [JCodesMore/ai-website-cloner-template](https://github.com/JCodesMore/ai-website-cloner-template)
- Tags: how-to-guide
- Published: 2026-06-26

---

**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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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:

```typescript
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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/scripts/sync-agent-rules.sh). No manual viewport adjustment or breakpoint definition is required from the user.