How Browser Automation Is Configured for Website Cloning in the AI Website Cloner Template

Browser automation in the AI Website Cloner Template is configured through the claude --chrome launch flag and the /clone-website skill definition, enabling headless Chrome control for reconnaissance tasks like screenshots, CSS extraction, and interaction sweeps.

The JCodesMore/ai-website-cloner-template repository demonstrates how browser automation is configured for website cloning by integrating Claude Code with Chrome DevTools Protocol (CDP). This setup allows AI agents to programmatically control a Chrome instance during the reconnaissance phase, capturing design tokens and user interactions that drive the cloning pipeline.

Launching the Agent with Chrome Automation

According to the repository's README.md (lines 44-48) and the CLAUDE.md configuration file, browser automation begins at the agent level. You must start Claude Code with the --chrome flag to enable programmatic Chrome control.

claude --chrome

This command launches Claude Code with a Chrome instance that the agent can control programmatically, providing the foundation for all subsequent browser automation tasks.

Defining Automation Actions in the Skill File

The actual automation logic resides in .github/skills/clone-website/SKILL.md. This file defines the /clone-website skill, which orchestrates a multi-phase pipeline where the Reconnaissance phase relies heavily on browser automation.

When you invoke the skill using /clone-website https://example.com, the agent performs the following automated actions within the controlled Chrome session:

• Screenshots – Captures visual references of the target website
• Design Token Extraction – Retrieves computed CSS values using getComputedStyle()
• Interaction Sweep – Simulates user actions including scroll, click, and hover events
• Responsive Testing – Validates breakpoints across different viewport sizes

The skill passes the complete component specification—including extracted styles and interaction patterns—to parallel builder agents for replication.

Maintaining Cross-Platform Automation Consistency

The repository ensures consistent browser automation across different AI platforms through scripts/sync-skills.mjs. This synchronization script regenerates platform-specific skill copies (for Codex, Cursor, and others) while preserving the identical Chrome-driven automation logic defined in the canonical SKILL.md file.

This architecture guarantees that regardless of which AI agent executes the cloning task, the browser automation configuration remains standardized and reproducible.

Complete Workflow Example

To execute the browser automation pipeline:

1. Start the agent with Chrome support:

   claude --chrome

2. Invoke the cloning skill with your target URL:

   /clone-website https://example.com

The agent automatically opens the URL in the controlled Chrome instance, executes the reconnaissance automation (scrolling, clicking, hovering), captures computed CSS values, and hands off the extracted specifications to builder agents.

Summary

• Browser automation is configured via the claude --chrome launch flag, which starts a Chrome instance under agent control
• The /clone-website skill defined in .github/skills/clone-website/SKILL.md orchestrates reconnaissance automation including screenshots, CSS extraction, and interaction sweeps
• scripts/sync-skills.mjs ensures consistent automation configuration across Claude, Codex, Cursor, and other supported agents
• The extracted component specifications include getComputedStyle() values and interaction patterns captured during automated browsing

Frequently Asked Questions

What flag enables browser automation in Claude Code?

The --chrome flag enables browser automation. When you start Claude Code using claude --chrome, it launches a Chrome instance that the agent can control programmatically through the Chrome DevTools Protocol, enabling automated navigation, screenshot capture, and DOM inspection for website cloning tasks.

Where are the browser automation steps defined?

The automation steps are defined in .github/skills/clone-website/SKILL.md within the reconnaissance phase specification. This file instructs the agent to perform scroll actions, click interactive elements, hover over components, and extract computed CSS values using getComputedStyle() during the controlled Chrome session.

How does the template ensure automation works across different AI agents?

The scripts/sync-skills.mjs script regenerates platform-specific skill files for Codex, Cursor, and other agents from the canonical SKILL.md definition. This ensures every agent executes the same Chrome-driven automation logic regardless of the underlying platform, maintaining consistency in how browser automation is configured for website cloning.

What specific browser actions does the reconnaissance phase perform?

The reconnaissance phase performs an interaction sweep that includes scrolling through pages, clicking interactive elements, hovering over components, testing responsive breakpoints, and extracting design tokens directly from the browser's computed styles. These actions populate the component specification passed to builder agents.

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