# How Browser Automation Is Configured for Website Cloning in the AI Website Cloner Template > Discover how browser automation is configured for website cloning using the claude --chrome flag and /clone-website skill in the AI Website Cloner Template for headless Chrome control. - Repository: [JCodesMore/ai-website-cloner-template](https://github.com/JCodesMore/ai-website-cloner-template) - Tags: how-to-guide - Published: 2026-07-10 --- **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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/README.md) (lines 44-48) and the [`CLAUDE.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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. ```bash 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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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: ```bash claude --chrome ``` 2. Invoke the cloning skill with your target URL: ```bash /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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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.