How the Mandatory Interaction Sweep Discovers Scroll, Click, and Hover Behaviors in AI Website Cloning

The mandatory interaction sweep is a dedicated manual pass through the browser's MCP (Mouse-Control-Program) interface that captures dynamic UI behaviors—scroll effects, click handlers, and hover states—after screenshots but before code generation, recording all findings to docs/research/BEHAVIORS.md.

In the JCodesMore/ai-website-cloner-template repository, the mandatory interaction sweep serves as the critical bridge between static visual analysis and functional code generation. This phase ensures that dynamic behaviors invisible to screenshot-only analysis are faithfully mapped before any React components are written.

What Is the Mandatory Interaction Sweep?

The mandatory interaction sweep is Phase 1 – Reconnaissance in the AI Website Cloner pipeline. According to the workflow definition in .windsurf/workflows/clone-website.md, this sweep runs immediately after screenshot capture but before any code generation begins. The agent manually interacts with the live target website through the MCP (Mouse-Control-Program) interface, observing real-time DOM changes and computed styles that static assets cannot reveal.

Unlike automated scraping, this sweep requires deliberate human-like interaction to trigger stateful UI changes. The agent records observations as plain-text notes and captures computed CSS values via getComputedStyle() where possible. All data flows into docs/research/BEHAVIORS.md, which subsequent builder agents use to generate component specifications with exact interaction models.

How the Sweep Discovers Scroll Behaviors

Slow Top-to-Bottom Scroll Method

The agent performs a slow linear scroll from the top of the page to the bottom, deliberately pausing at each major section. This methodical approach reveals scroll-triggered animations and layout shifts that occur at specific viewport positions.

Scroll-Specific Observations

During the scroll sweep, the agent documents:

• Header appearance changes (e.g., sticky vs. transparent) and the exact scroll offset at which triggers fire
• Elements that animate into view, including animation types and trigger points
• Auto-switching UI components such as tabs or sidebars that respond to scroll position
• Scroll-snap containers and their snap points
• Smooth-scroll libraries (e.g., Lenis, Locomotive Scroll) detected by observing non-native scroll behavior

These details are written to docs/research/BEHAVIORS.md and become part of each component's specification. The official description appears in .windsurf/workflows/clone-website.md at lines 41-46.

How the Sweep Captures Click Behaviors

Systematic Element Interaction

The click sweep involves systematic clicking of every element that appears interactive. The agent targets buttons, links, cards, tabs, pills, and any other elements suggesting clickability. Each interactive element receives individual attention to map the complete navigation and state-change graph.

State Change Documentation

When clicks trigger changes, the agent records:

• Content changes resulting from the interaction
• Modal openings and dropdown displays
• Navigation events and route changes
• For tab/pill groups, each variant is clicked and the resulting content is recorded

This output feeds directly into component specifications, ensuring generated React components include correct event handlers and state logic. The process is outlined in .windsurf/workflows/clone-website.md at lines 48-52.

How the Sweep Records Hover Behaviors

Visual Diff Technique

The hover sweep requires the agent to hover over potential hover-state elements including buttons, cards, links, images, and navigation items. Using a visual diff approach, the agent notes any changes in:

• Color values
• Scale transforms
• Shadow effects
• Underline decorations
• Opacity transitions
• Other CSS transitions

This information is crucial for reproducing interactive styling, such as Tailwind hover: utility classes. The hover-sweep description appears in .windsurf/workflows/clone-website.md at lines 53-56.

Implementation and Data Flow

The sweep's architecture guarantees faithful behavior mapping. Data collection occurs through the browser console where agents can execute JavaScript to capture getComputedStyle() values. The pipeline distinguishes between scroll-driven, click-driven, hover-driven, and time-driven behaviors, categorizing each observation appropriately.

Because the sweep runs before any code modifications, it creates an accurate behavioral blueprint of the original site. The AGENTS.md file references this sweep as part of the central instruction set, while README.md (lines 86-93) provides the high-level overview of this multi-phase pipeline.

Programmatic Behavior Capture Example

During the sweep, agents can run JavaScript in the browser MCP console to log interactions programmatically:

// Run in the browser MCP console during the scroll sweep
let behaviors = {
  scroll: [],
  clicks: [],
  hovers: []
};

// Example: record header changes while scrolling
window.addEventListener('scroll', () => {
  const header = document.querySelector('header');
  if (header) {
    const styles = getComputedStyle(header);
    behaviors.scroll.push({
      y: window.scrollY,
      bg: styles.backgroundColor,
      sticky: styles.position === 'sticky'
    });
  }
});

// Example: click every button and log the result
document.querySelectorAll('button, a, [role="button"]').forEach(el => {
  el.addEventListener('click', () => {
    behaviors.clicks.push({
      selector: el.tagName + (el.id ? `#${el.id}` : ''),
      text: el.innerText.trim()
    });
  });
});

// Example: hover detection
document.querySelectorAll('a, button, .card').forEach(el => {
  el.addEventListener('mouseenter', () => {
    const before = getComputedStyle(el);
    // Wait a tick for hover styles to apply
    requestAnimationFrame(() => {
      const after = getComputedStyle(el);
      behaviors.hovers.push({
        selector: el.tagName + (el.id ? `#${el.id}` : ''),
        changes: {
          color: after.color !== before.color,
          transform: after.transform !== before.transform
        }
      });
    });
  });
});

// At the end of the sweep, copy the JSON to the clipboard
await navigator.clipboard.writeText(JSON.stringify(behaviors, null, 2));

This snippet demonstrates how agents programmatically log scroll-related CSS changes, click outcomes, and hover transitions while the mandatory sweep is in progress.

Summary

• The mandatory interaction sweep runs after screenshots but before code generation in the JCodesMore/ai-website-cloner-template pipeline.
• The scroll sweep uses slow top-to-bottom scrolling to detect sticky headers, scroll-snap containers, and smooth-scroll libraries like Lenis.
• The click sweep systematically interacts with every interactive element to map modals, dropdowns, and tab behaviors.
• The hover sweep employs visual diff techniques to capture CSS transitions for hover states.
• All findings are recorded in docs/research/BEHAVIORS.md and referenced by subsequent builder agents to create accurate React components.
• The sweep operates through the MCP (Mouse-Control-Program) interface, allowing agents to observe live DOM changes and capture getComputedStyle() values.

Frequently Asked Questions

When does the mandatory interaction sweep occur in the cloning process?

The sweep occurs in Phase 1 – Reconnaissance, immediately after screenshot capture but before any code generation begins. This timing ensures the agent has a complete behavioral map of the target site before architecting React components.

How does the sweep detect scroll-snap and smooth-scroll libraries?

The agent detects scroll-snap containers by observing snap points during the slow linear scroll. Smooth-scroll libraries like Lenis or Locomotive Scroll are identified by detecting non-native scroll behavior patterns that deviate from standard browser scrolling physics.

What file stores the behavior observations captured during the sweep?

All observations are consolidated into docs/research/BEHAVIORS.md. This file serves as the central source of truth for builder agents that generate component specifications, ensuring they implement exact interaction models for scroll-driven, click-driven, and hover-driven behaviors.

Why is the MCP interface required instead of automated scraping?

The MCP (Mouse-Control-Program) interface allows the agent to perform manual interactions while observing real-time DOM changes. Automated scraping cannot capture stateful UI changes, computed CSS transitions on hover, or the specific scroll offsets that trigger header transformations—behaviors that require human-like observation and timing.

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