My 4-Layer Claude Code Playwright CLI Skill (Agentic Browser Automation)

Too Long; Didn't Watch — Summary

A 4-layer agentic architecture—Skills, Subagents, Slash Commands, and Task Runners—enables engineers to automate complex browser workflows and parallelized UI testing with high token efficiency and repeatable success.

Main Takeaways

• The 4-Layer Stack: Effective automation requires layering raw capabilities (Skills), parallel execution (Subagents), orchestration (Slash Commands), and reusability (Task Runners/Just files).
• CLI over MCP: Using Command Line Interfaces (CLIs) like Playwright is preferred over MCP servers because CLIs are more token-efficient, less rigid, and allow for highly opinionated, custom implementations.
• Agentic UI Testing: Unlike traditional frameworks (Jest/Vitest), agentic testing operates like a real user, validating workflows against URLs without brittle selectors or complex configurations.
• Parallelization & Persistence: The Playwright CLI skill allows for headless, parallel browser sessions and persistent profiles, enabling agents to maintain login states and run multiple tests simultaneously.
• Mastery vs. Outsourcing: Engineers should build their own agentic layers rather than outsourcing to plugins to avoid security risks like prompt injection and to maintain a competitive advantage in knowledge work.

Detailed Summary

Introduction (0:00 - 02:16)

Overview of the necessity of automating classes of work rather than individual tasks.

• Demonstration of an automated Amazon shopping workflow using Claude Code in fast mode.
• Introduction of the 'Bowser' codebase, designed for agentic browser automation.
• Comparison between personal automation (shopping) and professional engineering tasks (UI testing).
• Initial look at parallel UI testing on Hacker News using three simultaneous browser agents.

The Core Technology Layer (02:17 - 04:21)

Analysis of the foundational tools used to build the automation stack.

• Claude with the -chrome flag is used for personal browser sessions, allowing agents to use existing login states.
• Playwright CLI is the preferred tool for scaling UI testing due to its token efficiency and lack of MCP overhead.
• The importance of 'screenshot trails' is highlighted, providing a visual audit of every step an agent takes for debugging failures.

Layer 1: Skills (04:22 - 06:31)

Deep dive into the foundational capability layer where raw tools are defined.

• The Playwright skill is built to be token-efficient, headless by default, and supports named sessions for stored state.
• The Claude browser skill acts as a wrapper to ensure the Chrome flag is active and handles basic window resizing.
• Emphasis on the idea that code is commoditized; the advantage lies in the specific, opinionated solution built into the skill.

Layer 2: Subagents (06:32 - 12:42)

How to scale skills into specialized agents for parallel execution.

• Subagents are used to prompt over and over for specific UI testing or automation tasks.
• A 'Browser QA Agent' is introduced as a specialized UI validation agent that parses user stories into actionable steps.
• Demonstration of the Amazon workflow completing a 20-minute task autonomously, including cart management and stopping just before the final purchase.
• Discussion on the 'buff' subagents received through new orchestration features in Claude Code.

Layer 3: Slash Commands & Orchestration (12:43 - 20:03)

Using reusable prompts and 'Higher Order Prompts' (HOPs) to coordinate agent teams.

• Custom slash commands (e.g., /ui-review) act as the orchestration layer to fire off parallel story validations.
• Introduction of 'Higher Order Prompts'—prompts that take other prompts as parameters to wrap them in consistent workflows.
• Meta-prompt engineering: teaching a primary 'orchestrator' agent how to prompt its subagents for specific results.
• The benefit of non-deterministic agentic testing: agents act like users and can quickly adapt to new URLs or UI changes.

Layer 4: Reusability with Just Files (20:04 - 24:57)

Implementing a task runner to provide a single entry point for all agentic workflows.

• The just command runner (aliased to j) is used to store and execute complex agent commands with default parameters.
• This layer ensures that the engineer, the team, and even other agents know exactly which tools and workflows are available.
• Demonstration of a 'Test Chrome Skill' that visits a blog, finds the latest post, and provides a summarized rating.
• The goal is to solve 'classes of problems' so that every subsequent task requires less human intervention.

Conclusion: Agentic Engineering vs. Vibe Coding (24:58 - 27:12)

Final thoughts on the professional evolution of the engineer in the age of AI.

• Warning against 'outsourcing learning' to plugins; engineers must understand the underlying layers of their agents.
• Distinction between 'Vibe Coders' (who don't know what their agents are doing) and 'Agentic Engineers' (who design the systems).
• Final encouragement to specialize and combine that specialization with scale and orchestration.

Notable Quotes

"If your agents can't use a browser, you're still doing manual work that should have been automated yesterday." — Indie Devdan

"Code is fully commoditized. Anyone can generate code. That is not an advantage anymore. What is an advantage is your specific solution to the problem you're solving." — Indie Devdan

"Agentic engineers know what their agents are doing, and they know it so well, they don't have to look. Vibe coders don't know, and they don't look." — Indie Devdan

"If you master the agent, you will master knowledge work." — Indie Devdan