# How Browser Automation Works in the AI Website Cloner Template > Explore how the AI Website Cloner uses browser automation with its --chrome flag to capture screenshots extract design tokens and simulate user interactions for website cloning. - Repository: [JCodesMore/ai-website-cloner-template](https://github.com/JCodesMore/ai-website-cloner-template) - Tags: deep-dive - Published: 2026-07-22 --- **The AI Website Cloner Template leverages Claude Code's `--chrome` flag to launch a controllable Chrome instance that performs automated reconnaissance—capturing screenshots, extracting design tokens, and simulating user interactions—during the `/clone-website` skill execution.** The JCodesMore/ai-website-cloner-template repository implements a sophisticated browser automation pipeline that enables AI agents to interact with live websites rather than parsing static HTML. This approach allows the system to capture computed styles, responsive behavior, and interactive states that traditional scraping methods cannot access. ## Launching the Browser Automation Environment Browser automation begins at the agent level with a specific launch flag. When you start Claude Code with the `--chrome` argument, it initializes a Chrome instance that the agent can control programmatically through the Chrome DevTools Protocol. According to the repository's [`README.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/README.md) (lines 44-48) and the agent-specific [`CLAUDE.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/CLAUDE.md) configuration file, the recommended invocation is: ```bash claude --chrome ``` This command establishes the foundation for all subsequent automation tasks by providing the agent with a live browser context rather than a simple HTTP client. ## The Reconnaissance Phase The actual browser automation logic is defined 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 instructs the agent to execute a multi-phase pipeline where the **Reconnaissance** phase drives the Chrome instance through a systematic interaction sweep. During this phase, the agent performs the following actions inside the controlled Chrome session: - **Screenshots** – Captures visual states at multiple viewport sizes - **Interaction sweeping** – Executes scroll, click, and hover actions on interactive elements - **Responsive testing** – Validates layout behavior across breakpoints - **Style extraction** – Retrieves `getComputedStyle()` values for every component to capture the final rendered CSS including inherited and dynamic properties The skill passes these extracted specifications—including precise color values, spacing calculations, and interaction patterns—back to the builder agents for replication. ## Cross-Agent Consistency via Skill Synchronization To ensure browser automation behaves identically across different AI platforms, the repository includes `scripts/sync-skills.mjs`. This synchronization script regenerates platform-specific copies of the skill definition, ensuring that whether the agent is Claude, Codex, or Cursor, the same Chrome-driven automation logic executes consistently. The skill file serves as the single source of truth for browser automation parameters. When maintainers update the reconnaissance actions in the canonical skill definition, the sync script propagates those changes to all supported agent configurations. ## Practical Usage Example To initiate the full browser automation workflow: ```bash # 1. Start the agent with Chrome automation enabled claude --chrome # 2. Invoke the cloning skill with your target URL /clone-website https://example.com ``` Once invoked, the agent automatically: 1. Opens the target URL in the controlled Chrome instance 2. Scrolls through the complete page to trigger lazy-loaded content 3. Clicks buttons and hovers over interactive elements to capture state changes 4. Extracts computed CSS values and downloads assets 5. Hands the structured specifications to parallel builder agents for code generation ## Summary - **Browser automation** requires launching Claude Code with `claude --chrome` to enable programmatic Chrome control - **Reconnaissance actions** 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) and include scrolling, clicking, hovering, and style extraction via `getComputedStyle()` - **Cross-platform consistency** is maintained by `scripts/sync-skills.mjs`, which propagates automation logic to all supported agent types - The system captures **dynamic visual states** that static scrapers miss by executing interactions in a live browser context ## Frequently Asked Questions ### What command enables browser automation in the AI Website Cloner? Browser automation activates when you launch Claude Code with the `--chrome` flag. This command-line argument starts a Chrome instance under the agent's direct control, enabling programmatic navigation and interaction with target websites. ### Which file defines the specific browser automation actions? The [`.github/skills/clone-website/SKILL.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.github/skills/clone-website/SKILL.md) file contains the canonical definition of all browser automation steps. It specifies the reconnaissance phase actions including screenshots, interaction sweeps, and computed style extraction that the agent performs within the Chrome session. ### How does the template ensure consistent automation across different AI agents? The `scripts/sync-skills.mjs` script maintains consistency by regenerating platform-specific skill files from the canonical definition. When the repository supports multiple agents like Codex or Cursor, this script ensures every platform executes identical Chrome-driven automation logic during the cloning process. ### What specific interactions does the reconnaissance phase capture? The reconnaissance phase captures scroll behaviors, click interactions, hover states, and responsive breakpoint adaptations. It also extracts `getComputedStyle()` values for every element to record the final rendered appearance including dynamic and inherited CSS properties that static HTML parsing cannot reveal.