video youtu.be Watch ↗

My 4-Layer Claude Code + Playwright CLI Skill (Agentic Browser Automation & UI Testing)

TL;DR

IndyDevDan walks through Bowser, an opinionated Claude Code codebase that automates two "classes of work" — browser automation (doing web tasks on your behalf) and UI testing (validating your app) — by stacking four layers of agentics: a skill (raw capability, a Playwright-CLI wrapper) → a sub-agent (specialize + scale it, bowser-qa-agent, model: opus) → a command (an /ui-review slash prompt that spawns a parallel team of QA agents and merges their reports) → a task runner (just/justfile, aliased j, the single reuse front-door). The load-bearing tool choice is CLI over MCP: the Playwright CLI is token- efficient and, unlike a rigid MCP server, can be wrapped in your own skill with opinionated defaults (headless, parallel named sessions, persistent login profiles). UI tests are written as plain-language user stories (name + URL + workflow) and the QA agent screenshots every step into a per-run directory — a walkable "trail of success and failure" — trading determinism for near-zero authoring cost. A top layer generalizes commands into higher-order prompts (a prompt that takes another prompt as a parameter, wrapping it in a consistent workflow — a meta-prompt variant). The closing thesis is anti-hype and pedagogical: don't just throw agents at problems or lean on other people's plugins/prompts ("prompt injection is one of the most dangerous vulnerabilities") — template your own engineering into a reusable, specializable mold so you solve a whole class of problem once. Specialization + scale + orchestration is the moat.

Concepts introduced

Layered Agentic Architecture — the headline: skill (capability) → sub-agent (scale) → command (orchestration) → task runner (reusability), built so you can enter at any altitude and reuse the whole stack as a "mold."
CLI Tools over MCP Servers — prefer CLI tools (wrapped in your own skill) to MCP servers for token efficiency and own-the-contract extensibility; the Playwright CLI is the demonstrated case.
Agentic UI Testing — validate a UI by having an agent operate it like a user against a plain-language user story, screenshotting every step, run in parallel — traded against deterministic Jest/Vitest.

Held, not dropped

Themes the capture touches that don't warrant their own concept page yet — spin out on demand:

Browser automation as a work-class (shopping, data entry, support workflows, gathering docs from many blogs) — the other half of "copy yourself into the digital world." Currently folded into Layered Agentic Architecture and Agentic UI Testing as the sibling application; spin out agentic-browser-automation if a second source develops automation (vs. testing) as a distinct discipline with its own patterns.
Claude-with-Chrome (--chrome flag) — computer-use tools injected onto your logged-in browser session; convenient but can't parallelize (its stated pro/con vs. the Playwright CLI). A specific tool detail; held under CLI Tools over MCP Servers / Agent-Computer Interface (ACI).
Persistent / named browser sessions for login state — a Playwright-CLI skill feature (persist a session across a login workflow); folded into CLI Tools over MCP Servers.
Anti-hype / "don't outsource learning" / vibe-coders-vs-agentic-engineers — the pedagogical stance; corroborates the same author's anti-hype thread (see Claude Code Task System: Orchestrating a Team of Agents Through a Task Graph), not re-abstracted.
Prompt injection as the top risk of using others' prompts/plugins — a one-line security aside ("more on that later"); held pending a source that develops agentic prompt-injection.

Key claims

Layer agentic primitives — skill (capability) → sub-agent (scale) → command (orchestration) → task runner (reusability) — rather than relying on any single layer. (best practice — context: repeatable agent systems deployed across codebases; a one-off doesn't need the full stack) → Layered Agentic Architecture
A skill is raw capability; a sub-agent is where you specialize and scale it into a concrete workflow. principle → Layered Agentic Architecture
Structure the stack as a reusable "mold" and solve a whole class of problems once, not one codebase. principle → Layered Agentic Architecture, Reusable Workflow Library
Prefer CLI tools (wrapped in your own skill) over MCP servers — token efficiency plus own-the-contract extensibility. (best practice — context: capabilities that map to a shell-out command and where you want to own conventions; MCP still fits stateful/streaming connections) → CLI Tools over MCP Servers, Agent-Computer Interface (ACI)
Wrapping a CLI in a skill lets you impose opinionated defaults (headless, named sessions, persistent profiles) the raw tool doesn't. (best practice — context: building a reusable capability layer on a stable CLI) → CLI Tools over MCP Servers
Test a UI by having an agent operate it as a user against a natural-language user story, not only with scripted deterministic tests. (best practice — context: fast-changing UIs where selector-test maintenance is the bottleneck; complements, not replaces, a deterministic suite) → Agentic UI Testing
Screenshot every step and, on failure, capture the console and stop — the trail is the evidence. (best practice — context: non-deterministic agentic browser runs needing an auditable record) → Agentic UI Testing
A higher-order prompt is a prompt that takes another prompt as a parameter, wrapping it in a consistent workflow. (best practice — context: reusing one execution shell across many concrete task-prompts; a meta-prompt variant) → Meta-Prompt
Code is commoditized; the advantage is your specific, opinionated solution — expressed in how you write skills, agents, and commands. observation → Layered Agentic Architecture
Don't outsource learning to plugins/others' prompts — you'll be limited to what everyone else can do, and importing others' prompts carries prompt-injection risk. principle → Reusable Workflow Library

Why this builds on the graph (and corroborates the anti-hype thesis)

Dominant stance — builds_on. This is the same author's agentic-coding worldview extended downward from orchestration into the full capability stack. Where Claude Code Task System: Orchestrating a Team of Agents Through a Task Graph gave the orchestration layer a native runtime (the Task System / Agent Task Graph), this video shows the layers beneath it — skills as capability, sub-agents as scale — and the layer above commands (a just task runner as the reuse front-door). It sharpens Reusable Workflow Library (slash commands + a task runner as a personal, machine-and-human-discoverable catalog) and Agentic Workflow Patterns (/ui-review is parallelization/orchestrator-workers with a reusable front door), and it spins out three new nodes (Layered Agentic Architecture, CLI Tools over MCP Servers, Agentic UI Testing) rather than attaching to nothing — hence builds_on, not novel.

Secondary — refines Meta-Prompt. The higher-order prompt ("a function that takes a function as a parameter") is a concrete new shape of meta-prompt: instead of expanding a short request into a large artifact, it parameterizes a fixed execution shell over an arbitrary inner prompt. That's added as a claim on Meta-Prompt, not a new page.

Secondary — builds_on Agent-Computer Interface (ACI). "CLIs, not MCP servers" is an ACI decision at the level of which surface to expose: a CLI + your skill is a hand-tuned ACI that beats an off-the-shelf MCP server on token cost and extensibility. The ACI principle ("tool quality gates agent reliability") is unchanged; it gains a concrete surface-choice instance.

Also present — corroborates the anti-hype / simplicity thread. The close — "don't just throw agents at the problem," specialization over spamming skills, agentic engineers vs. vibe coders — is a second independent witness (same author, different video) to the stance that structure and understanding beat raw agent count, echoing the sibling distillate's anti-hype close. Not contradicted; reinforced.

Illustrated walkthrough

Visual coverage is ok (max blind gap ~40s, roughly 16:40–17:20, over the "most important agent — the Bowser QA agent" transition into the example.com demo). The sampler misses text-on-solid-background changes, so a missing frame in that window is not evidence the screen was static.

t=00:27 — the dual demo. Two terminals opened side by side: j automate kicks off a Claude-Code-in-fast-mode browser automation run (shopping a list on Amazon), while j ui-review kicks off agentic UI testing — three browser agents running mock user stories against Hacker News, ~40K tokens each, summarizing pass/fail back to a primary agent. The framing: with the right stack of skills/sub-agents/prompts you "copy yourself into the digital world" to automate whole classes of work.
t=01:04 — "AGENTIC UI TESTING" title card. A single green-on-black word sets the second of the two work-classes the whole system targets.
t=03:53 — the screenshot trail (a QA agent's evidence). An Open with Preview window showing 00_navigate-to-homepage.png: the Hacker News front page the agent visited, with a green highlight ring around where it acted. Every step of every run is screenshotted, so a failed workflow leaves an auditable trail, not just a red X.
t=05:00 — the core technology (CLI over MCP). github.com/microsoft/playwright-cli open in Chrome — "CLI for common Playwright actions… inspect selectors and take screenshots," and the browser banner reads "Claude started debugging this browser" (the --chrome flag path). Narration: "you want to be using CLIs, not MCP servers — MCP servers chew up your tokens and they're rigid; CLIs let you build on top in your own opinionated way." The two technologies Bowser rides on: Claude-with-Chrome (--chrome) and the Playwright CLI.
t=11:00 — the sub-agent layer (.claude/agents/bowser-qa-agent.md). Front-matter: name: bowser-qa-agent, description: UI validation agent that executes user stories against web apps and reports pass/fail with screenshots, model: opus, skills: [playwright-bowser] (the skill is activated in front-matter and re-mentioned in the body). Body ## Workflow:
1. Parse the user story into sequential steps; 2) Setup a named session + mkdir -p the screenshot dir; 3) Execute each step — act via playwright-bowser, screenshot (playwright-cli -s=<session> screenshot --filename=…), evaluate PASS/FAIL, and on FAIL capture JS console errors and stop; 4) Close the session; 5) Return a structured report. The left tree shows the full mold: .claude/{agents,commands,skills}, ai_review, screenshots, specs, justfile, in projects/experimental/bowser. "The skill is the capability; the agent is where we specialize and scale."
t=17:30 — layering, stated. "We layered an agent on top of a skill… everyone's obsessed with skills, but there are layers to how you build this up for repeat success" — and a nod to the "new agent-orchestration features coming out of Claude Code" (the same author's Task System, see the sibling distillate). Sub-agents "got a massive buff."
t=17:20 (Amazon run completes). The browser-automation agent has filled the cart (blue- light blockers, Valentine's flowers) and stopped at the doorstep of purchase — "not placing order"; 20 min / many tokens. The operator credits Opus 4.6's instruction-adherence for respecting the stop boundary (his words — a "risky workflow" that walked right up to the buy button and held).
t=17:30 — the command / orchestration layer (/ui-review + user stories). Editor on ai_review/user_stories/hackernews.yaml: a stories: list, each with name, url, and a plain-language workflow ("Navigate to…", "Verify the front page loads", "Click 'More'", "Verify page 2 loads"). The terminal runs /ui-review headed → "Starting UI Review in headed mode. Let me discover the user stories first," then bashes a screenshot dir screenshots/bowser-qa/20260212_105603_5aae74. The command's ## Workflow: discover UIs → spawn a team of agents (with a per-agent prompt template — "meta prompt engineering… we're teaching the primary agent how to prompt the sub-agents") → collect via the task list → clean up and report. "The prompt controls the sub-agents; the sub-agents use the skills."
t=19:00 — why agents over Jest/Vitest. "No sea of testing configuration… they act like a user would." The standing balance between an agentic (non-deterministic) and a deterministic solution — leaning "a little extra agentic" for fast-moving UIs, spun up "at a drop of a dime."
t=22:00 — the higher-order prompt (HOP). For browser automation, automations are written as reusable slash commands; the top pattern is a HOP — "a function that takes a function as a parameter." hop_automate takes another prompt (the workflow to run) as argument one and wraps it in a consistent parse → load-workflow → execute shell. "Consistent pieces go in the higher-order prompt; the details (steps to run) go in the lower-order prompt." A meta-prompt that parameterizes over prompts.
t=24:26 — the task-runner layer (just). which j reveals j is aliased to just, "a powerful and simple command runner." The justfile lists every command + parameter permutation to kick off Claude agents — "my reusability layer at the very top." Stack, bottom to top: skills (capability) → sub-agents (scale) → commands (orchestrate) → just (reusability). He demos overriding a default parameter on a test Chrome skill recipe.
t=24:50 — the Claude-with-Chrome path. A Claude-in-Chrome agent browses simonwillison.net — "Claude in Chrome[computer](scroll down) — Action completed" — running the default prompt "get current date, go to Simon Willison, find his latest blog, summarize it, rate it out of 10." The --chrome flag injects browser/computer-use tools onto your existing session; its key limitation: it can't run in parallel (why the Playwright-CLI path exists for scaled UI testing).
t=27:15 — the anti-hype close. "Don't outsource learning how to build with the most important technology of our lifetime." If you only use others' plugins/prompts you'll be limited to what everyone else can do — and it's dangerous: "prompt injections are one of the most dangerous security vulnerabilities." Vibe coders don't know what their agents do; agentic engineers know it so well they don't have to look. Specialization + scale + orchestration is "the big nugget of gold."