# My 4-Layer Agentic Browser Automation Stack (Skill, Subagent, Prompt, ????) Source: https://www.youtube.com/watch?v=efctPj6bjCY Recap page: https://rapidrecap.app/video/efctPj6bjCY Generated: 2026-02-16T14:34:24.159+00:00 --- ## Quick Overview The video outlines a four-layer agentic stack for browser automation and UI testing, consisting of Skills (capability), Subagents (scale), Commands (orchestration), and a final layer of Reusability achieved via a JustFile, enabling highly customized and repeatable workflows. **Key Points:** - The core architecture involves a four-layer stack: Skill (Capability), Subagent (Scale), Command (Orchestration), and JustFile (Reusability). - Skills, like `playwright-browser` or `claude-browser`, define basic browser automation capabilities. - Subagents (e.g., `playwright-bowser-agent`) use skills to achieve specific goals, enabling scaling of tasks. - Commands (like `browser` or `ui-review` in the `commands` folder) orchestrate subagents to execute complex workflows. - A demonstration showed an agent successfully executing an Amazon 'add-to-cart' workflow, which took 20 minutes and 43 seconds. - The QA agent workflow (`bowser-qa-agent.md`) is highly detailed, outlining steps for parsing user stories, executing steps sequentially, taking screenshots, evaluating results, and reporting. - The JustFile acts as the top layer, providing reusable, repeatable command prompts to orchestrate the entire system for various tasks like UI review or workflow execution. ![Screenshot at 00:10: The four-layer agentic architecture pyramid is displayed, showing Skill \(Capability\) at the base, followed by Subagent \(Scale\), Command \(Orchestrate\), and an unnamed layer labeled '???? Reusability' at the top.](https://ss.rapidrecap.app/screens/efctPj6bjCY/00-00-10.jpg) **Context:** The presenter, IndyDevDan, introduces a custom architecture for building powerful, repeatable agentic systems focused on browser automation and UI testing. This framework is designed to overcome the limitations of simple, non-reusable prompts by layering capabilities (Skills), scaling them into specialized agents (Subagents), coordinating them via Orchestration (Commands), and finally providing a high-level, reusable interface via a JustFile. ## Detailed Analysis The video explains a four-layer architecture for agentic browser automation and UI testing. The base layer is **Skill** (Capability), which represents fundamental browser actions, exemplified by skills like `playwright-bowser` or `claude-bowser` located in the `skills` directory. The next layer up is **Subagent** (Scale), which involves creating agents (like `playwright-bowser-agent.md`) that utilize specific skills to perform focused tasks, such as adding items to an Amazon cart or performing QA validation on a staging environment. The third layer is **Command** (Orchestration), found in the `commands` directory, which coordinates multiple subagents to execute complex, multi-step workflows, as demonstrated by the `amazon-add-to-cart.md` workflow. Finally, the top layer is **Reusability**, achieved using a `JustFile`, which defines reusable, high-level commands (like `just automate-amazon`) that orchestrate the underlying workflows and agents. The presenter emphasizes that this structure allows for creating repeatable, specialized solutions that are not limited by the token constraints or lack of context that plague simpler, one-off prompts. The demonstration showed a complex multi-item Amazon cart workflow running successfully, and the QA agent workflow demonstrated detailed reporting, including per-step screenshots and final success/failure metrics. The overall goal is to move beyond brittle, single-prompt solutions toward scalable, reusable, and deterministic agentic systems. ### Architecture Layers - Skill (Capability) at the base, followed by Subagent (Scale), Command (Orchestrate), and JustFile (Reusability) at the top - Skills defined in `bowser/skills` using Playwright or Claude browser functionality - Subagents defined in `bowser/agents` link to specific skills. ### Commands Layer - Found in `bowser/commands` (e.g., `amazon-add-to-cart.md`, `ui-review.md`) - Commands act as orchestrators, invoking specific agents and workflows to solve a larger problem. ### Workflow Example (Amazon Add to Cart) - A 32-step workflow involving navigation, search, adding multiple items, verifying checkout, and reporting, but crucially stopping before final submission. ### QA Agent Workflow - `bowser-qa-agent.md` defines a strict, multi-phase workflow (Discover, Spawn, Collect, Cleanup & Report) with explicit instructions for screenshotting and result parsing, ensuring deterministic testing. ### JustFile - Provides the top layer of abstraction for running complex workflows using simple commands like `just automate-amazon` or `just test-qa` - Enables reusability by defining pre-configured agent teams and prompts. ![Screenshot at 00:10: The four-layer agentic architecture pyramid is displayed, showing Skill \(Capability\) at the base, followed by Subagent \(Scale\), Command \(Orchestrate\), and an unnamed layer labeled '???? Reusability' at the top.](https://ss.rapidrecap.app/screens/efctPj6bjCY/00-00-10.jpg) ![Screenshot at 00:34: The terminal shows the execution of j automate-amazon using the claude-browser skill, demonstrating the execution of a complex workflow.](https://ss.rapidrecap.app/screens/efctPj6bjCY/00-00-34.jpg) ![Screenshot at 01:36: A slide titled 'WHY IS AGENTIC BROWSER USE SO IMPORTANT?' highlights the transition from simple skills to complex, orchestrated workflows.](https://ss.rapidrecap.app/screens/efctPj6bjCY/00-01-36.jpg) ![Screenshot at 02:13: The code for the playwright-browser skill is shown, detailing key features like headless mode, parallel sessions, and persistent profiles.](https://ss.rapidrecap.app/screens/efctPj6bjCY/00-02-13.jpg) ![Screenshot at 04:06: The QA agent workflow results show three stories passing in parallel, demonstrating the effectiveness of multi-agent orchestration.](https://ss.rapidrecap.app/screens/efctPj6bjCY/00-04-06.jpg)