7.6Architecture Diagram: Hybrid Approach

                        ┌──────────────────────────┐
                        │      Claude Code Agent    │
                        │                           │
                        │  ┌────────┐ ┌──────────┐ │
                        │  │ Skills │ │ MCP Tools│ │
                        │  │(SKILL. │ │(browser_ │ │
                        │  │ md)    │ │ *)       │ │
                        │  └───┬────┘ └────┬─────┘ │
                        └──────┼───────────┼───────┘
                               │           │
                    Bash tool  │           │ MCP protocol
                               │           │
                        ┌──────▼──────┐  ┌─▼────────────┐
                        │ playwright- │  │ Playwright   │
                        │ cli         │  │ MCP Server   │
                        └────┬────────┘  └──────┬───────┘
                             │                  │
                             └───────┬──────────┘
                                     │  (same Playwright engine;
                                     │   browser.bind() can even
                                     │   share one browser)
                        ┌────────────▼─────────────┐
                        │  Chromium/Firefox/WebKit │
                        └──────────────────────────┘

In this hybrid model:

• playwright-cli handles interaction commands (open, goto, click, fill, snapshot, screenshot) — cheap, disk-first
• Playwright MCP serves sandboxed surfaces and MCP-native integrations — inline but expensive
• Since Playwright 1.59, browser.bind() lets both attach to the same browser instance — the transports are interchangeable views onto one session