Revise README.md to introduce Dev Browser plugin for Claude Code

This commit updates the README.md file to provide a comprehensive overview of the Dev Browser plugin, detailing its purpose, unique features, installation steps, and usage examples. The enhancements aim to clarify the plugin's functionality and improve the onboarding experience for developers integrating browser automation into their workflows.
2026-09-20 13:44:44 +08:00 · 2025-12-05 14:27:44 -08:00
parent 5206ad2e25
commit 218c6e1a79
2 changed files with 92 additions and 8 deletions
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Sawyer Hood
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
@@ -1,15 +1,78 @@
-# browser-skill
+# Dev Browser - Claude Code Plugin

-To install dependencies:
+A browser automation plugin for [Claude Code](https://docs.anthropic.com/en/docs/claude-code) that lets Claude control your web browser to close the loop on your development workflows.

-```bash
-bun install
+## Why Dev Browser?
+
+This plugin is optimized for **testing and verifying as you develop**. Claude can interact with your running application, fill out forms, click buttons, and verify that your changes work—all without leaving your coding session.
+
+### How It's Different
+
+| Approach                      | How It Works                                      | Tradeoff                                                                         |
+| ----------------------------- | ------------------------------------------------- | -------------------------------------------------------------------------------- |
+| **Playwright MCP**            | Observe-think-act loop with individual tool calls | Simple but slow; each action is a separate round-trip.                           |
+| **Direct Playwright scripts** | Full scripts that run end-to-end                  | Fast but fragile; scripts start fresh every time, so failures mean starting over |
+| **Dev Browser**               | Stateful server + agentic script execution        | Best of both worlds                                                              |
+
+**Dev Browser** runs a persistent Playwright server that maintains browser state across script executions. This means:
+
+- **Pages stay alive** - Navigate to a page once, interact with it across multiple scripts
+- **Flexible execution** - Run full Playwright scripts when the agent knows what to do, or fall back to step-by-step observation when exploring
+- **Codebase-aware** - The plugin includes instructions for Claude to look at your actual code to inform debugging
+- **LLM-friendly inspection** - Get structured DOM snapshots optimized for AI understanding, similar to browser-use
+
+In practice, Claude will often explore a page step-by-step first, then generate reusable scripts to speed up repetitive actions.
+
+## Prerequisites
+
+- [Claude Code](https://docs.anthropic.com/en/docs/claude-code) CLI installed
+- [Bun](https://bun.sh) runtime (v1.0 or later)
+  ```bash
+  curl -fsSL https://bun.sh/install | bash
+  ```
+
+## Installation
+
+### Step 1: Add the Marketplace
+
+In Claude Code, run:
+
+```
+/plugin marketplace add sawyerhood/dev-browser
 ```

-To run:
+### Step 2: Install the Plugin

-```bash
-bun run index.ts
+```
+/plugin install dev-browser@sawyerhood/dev-browser
 ```

-This project was created using `bun init` in bun v1.3.2. [Bun](https://bun.com) is a fast all-in-one JavaScript runtime.
+### Step 3: Use It!
+
+Prompt Claude to use it!
+
+> **Restart Claude Code** after installation to activate the plugin.
+
+## Usage
+
+Once installed, just ask Claude to interact with your browser. Here are some example prompts:
+
+**Testing your app:**
+
+> "Open my local dev server at localhost:3000 and create an account to verify the signup flow"
+
+**Debugging UI issues:**
+
+> "Go to the settings page and figure out why the save button isn't working"
+
+**Close the loop visually**
+
+> "Can you use the frontend design skill to make the landing page more visually appealing? Use dev-browser to iterate on the design until it looks good."
+
+## License
+
+MIT
+
+## Author
+
+[Sawyer Hood](https://github.com/sawyerhood)