[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6HS74GASM6FJ77F83EY679E":3,"skill-same:01M6HS74GASM6FJ77F83EY679E":135},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":22,"publishedAt":42,"linkOnly":43,"markdownContent":44,"markdownBody":45,"frontMatter":46,"refName":48,"commitSha":49,"skillDirectory":50,"forksCount":51,"repositoryHtmlUrl":52,"repositoryHomepageUrl":6,"ownerHtmlUrl":53,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":54,"install":55,"resources":68},"01M6HS74GASM6FJ77F83EY679E","browsing",null,"Use when you need direct browser control - teaches Chrome DevTools Protocol for controlling existing browser sessions, multi-tab management, form automation, and content extraction via use_browser MCP tool","welflau\u002Fai-dev-system","welflau","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F7010385?v=4","01M6HPTDGF18RFY07M229P8CTM","01M6HPTDMRMZCJPYBFEA9XVVYT",3,"MIT","https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fexternal_plugins\u002Fsuperpowers-chrome\u002Fskills\u002Fbrowsing\u002FSKILL.md",[17],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[5,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41],"use","Existing","for","you","multi","form","via","control","browser control","MCP","direct","tool","chrome devtools","devtools","browser","protocol","sessions","chrome","automation","2026-11-10 10:12:30",false,"---\nname: browsing\ndescription: Use when you need direct browser control - teaches Chrome DevTools Protocol for controlling existing browser sessions, multi-tab management, form automation, and content extraction via use_browser MCP tool\nallowed-tools: mcp__chrome__use_browser\n---\n\n# Browsing with Chrome Direct\n\n## Overview\n\nControl Chrome via DevTools Protocol using the `use_browser` MCP tool. Single unified interface with auto-starting Chrome.\n\n**Announce:** \"I'm using the browsing skill to control Chrome.\"\n\n## When to Use\n\n**Use this when:**\n- Controlling authenticated sessions\n- Managing multiple tabs in running browser\n- Playwright MCP unavailable or excessive\n\n**Use Playwright MCP when:**\n- Need fresh browser instances\n- Generating screenshots\u002FPDFs\n- Prefer higher-level abstractions\n\n## The use_browser Tool\n\nSingle MCP tool with action-based interface. Chrome auto-starts on first use.\n\n**Parameters:**\n- `action` (required): Operation to perform\n- `tab_index` (optional): Tab to operate on (default: 0)\n- `selector` (optional): CSS selector for element operations\n- `payload` (optional): Action-specific data\n- `timeout` (optional): Timeout in ms for await operations (default: 5000)\n\n## Actions Reference\n\n### Navigation\n- **navigate**: Navigate to URL\n  - `payload`: URL string\n  - Example: `{action: \"navigate\", payload: \"https:\u002F\u002Fexample.com\"}`\n\n- **await_element**: Wait for element to appear\n  - `selector`: CSS selector\n  - `timeout`: Max wait time in ms\n  - Example: `{action: \"await_element\", selector: \".loaded\", timeout: 10000}`\n\n- **await_text**: Wait for text to appear\n  - `payload`: Text to wait for\n  - Example: `{action: \"await_text\", payload: \"Welcome\"}`\n\n### Interaction\n- **click**: Click element\n  - `selector`: CSS selector\n  - Example: `{action: \"click\", selector: \"button.submit\"}`\n\n- **type**: Type text into input (append `\\n` to submit)\n  - `selector`: CSS selector\n  - `payload`: Text to type\n  - Example: `{action: \"type\", selector: \"#email\", payload: \"user@example.com\\n\"}`\n\n- **select**: Select dropdown option\n  - `selector`: CSS selector\n  - `payload`: Option value(s)\n  - Example: `{action: \"select\", selector: \"select[name=state]\", payload: \"CA\"}`\n\n### Extraction\n- **extract**: Get page content\n  - `payload`: Format ('markdown'|'text'|'html')\n  - `selector`: Optional - limit to element\n  - Example: `{action: \"extract\", payload: \"markdown\"}`\n  - Example: `{action: \"extract\", payload: \"text\", selector: \"h1\"}`\n\n- **attr**: Get element attribute\n  - `selector`: CSS selector\n  - `payload`: Attribute name\n  - Example: `{action: \"attr\", selector: \"a.download\", payload: \"href\"}`\n\n- **eval**: Execute JavaScript\n  - `payload`: JavaScript code\n  - Example: `{action: \"eval\", payload: \"document.title\"}`\n\n### Export\n- **screenshot**: Capture screenshot\n  - `payload`: Filename\n  - `selector`: Optional - screenshot specific element\n  - Example: `{action: \"screenshot\", payload: \"\u002Ftmp\u002Fpage.png\"}`\n\n### Tab Management\n- **list_tabs**: List all open tabs\n  - Example: `{action: \"list_tabs\"}`\n\n- **new_tab**: Create new tab\n  - Example: `{action: \"new_tab\"}`\n\n- **close_tab**: Close tab\n  - `tab_index`: Tab to close\n  - Example: `{action: \"close_tab\", tab_index: 2}`\n\n### Browser Mode Control\n- **show_browser**: Make browser window visible (headed mode)\n  - Example: `{action: \"show_browser\"}`\n  - ⚠️ **WARNING**: Restarts Chrome, reloads pages via GET, loses POST state\n\n- **hide_browser**: Switch to headless mode (invisible browser)\n  - Example: `{action: \"hide_browser\"}`\n  - ⚠️ **WARNING**: Restarts Chrome, reloads pages via GET, loses POST state\n\n- **browser_mode**: Check current browser mode and profile\n  - Example: `{action: \"browser_mode\"}`\n  - Returns: `{\"headless\": true|false, \"mode\": \"headless\"|\"headed\", \"running\": true|false, \"profile\": \"name\", \"profileDir\": \"\u002Fpath\"}`\n\n### Profile Management\n- **set_profile**: Change Chrome profile (must kill Chrome first)\n  - Example: `{action: \"set_profile\", \"payload\": \"browser-user\"}`\n  - ⚠️ **WARNING**: Chrome must be stopped first\n\n- **get_profile**: Get current profile name and directory\n  - Example: `{action: \"get_profile\"}`\n  - Returns: `{\"profile\": \"name\", \"profileDir\": \"\u002Fpath\"}`\n\n**Default behavior**: Chrome starts in **headless mode** with **\"superpowers-chrome\" profile**.\n\n**Critical caveats when toggling modes**:\n1. **Chrome must restart** - Cannot switch headless\u002Fheaded mode on running Chrome\n2. **Pages reload via GET** - All open tabs are reopened with GET requests\n3. **POST state is lost** - Form submissions, POST results, and POST-based navigation will be lost\n4. **Session state is lost** - Any client-side state (JavaScript variables, etc.) is cleared\n5. **Cookies\u002Fauth may persist** - Uses same user data directory, so logged-in sessions may survive\n\n**When to use headed mode**:\n- Debugging visual rendering issues\n- Demonstrating browser behavior to user\n- Testing features that only work with visible browser\n- Debugging issues that don't reproduce in headless mode\n\n**When to stay in headless mode** (default):\n- All other cases - faster, cleaner, less intrusive\n- Screenshots work perfectly in headless mode\n- Most automation works identically in both modes\n\n**Profile management**:\nProfiles store persistent browser data (cookies, localStorage, extensions, auth sessions).\n\n**Profile locations**:\n- macOS: `~\u002FLibrary\u002FCaches\u002Fsuperpowers\u002Fbrowser-profiles\u002F{name}\u002F`\n- Linux: `~\u002F.cache\u002Fsuperpowers\u002Fbrowser-profiles\u002F{name}\u002F`\n- Windows: `%LOCALAPPDATA%\u002Fsuperpowers\u002Fbrowser-profiles\u002F{name}\u002F`\n\n**When to use separate profiles**:\n- **Default profile (\"superpowers-chrome\")**: General automation, shared sessions\n- **Agent-specific profiles**: Isolate different agents' browser state\n  - Example: browser-user agent uses \"browser-user\" profile\n- **Task-specific profiles**: Testing with different user contexts\n  - Example: \"test-logged-in\" vs \"test-logged-out\"\n\n**Profile data persists across**:\n- Chrome restarts\n- Mode toggles (headless ↔ headed)\n- System reboots (data is in cache directory)\n\n**To use a different profile**:\n1. Kill Chrome if running: `await chromeLib.killChrome()`\n2. Set profile: `{action: \"set_profile\", \"payload\": \"my-profile\"}`\n3. Start Chrome: Next navigate\u002Faction will use new profile\n\n## Quick Start Pattern\n\n```\nNavigate and extract:\n{action: \"navigate\", payload: \"https:\u002F\u002Fexample.com\"}\n{action: \"await_element\", selector: \"h1\"}\n{action: \"extract\", payload: \"text\", selector: \"h1\"}\n```\n\n## Common Patterns\n\n### Fill and Submit Form\n```\n{action: \"navigate\", payload: \"https:\u002F\u002Fexample.com\u002Flogin\"}\n{action: \"await_element\", selector: \"input[name=email]\"}\n{action: \"type\", selector: \"input[name=email]\", payload: \"user@example.com\"}\n{action: \"type\", selector: \"input[name=password]\", payload: \"pass123\\n\"}\n{action: \"await_text\", payload: \"Welcome\"}\n```\n\nThe `\\n` at the end of the password submits the form.\n\n### Multi-Tab Workflow\n```\n{action: \"list_tabs\"}\n{action: \"click\", tab_index: 2, selector: \"a.email\"}\n{action: \"await_element\", tab_index: 2, selector: \".content\"}\n{action: \"extract\", tab_index: 2, payload: \"text\", selector: \".amount\"}\n```\n\n### Dynamic Content\n```\n{action: \"navigate\", payload: \"https:\u002F\u002Fexample.com\"}\n{action: \"type\", selector: \"input[name=q]\", payload: \"query\"}\n{action: \"click\", selector: \"button.search\"}\n{action: \"await_element\", selector: \".results\"}\n{action: \"extract\", payload: \"text\", selector: \".result-title\"}\n```\n\n### Get Link Attribute\n```\n{action: \"navigate\", payload: \"https:\u002F\u002Fexample.com\"}\n{action: \"await_element\", selector: \"a.download\"}\n{action: \"attr\", selector: \"a.download\", payload: \"href\"}\n```\n\n### Execute JavaScript\n```\n{action: \"eval\", payload: \"document.querySelectorAll('a').length\"}\n{action: \"eval\", payload: \"Array.from(document.querySelectorAll('a')).map(a => a.href)\"}\n```\n\n## Tips\n\n**Always wait before interaction:**\nDon't click or fill immediately after navigate - pages need time to load.\n\n```\n\u002F\u002F BAD - might fail if page slow\n{action: \"navigate\", payload: \"https:\u002F\u002Fexample.com\"}\n{action: \"click\", selector: \"button\"}  \u002F\u002F May fail!\n\n\u002F\u002F GOOD - wait first\n{action: \"navigate\", payload: \"https:\u002F\u002Fexample.com\"}\n{action: \"await_element\", selector: \"button\"}\n{action: \"click\", selector: \"button\"}\n```\n\n**Use specific selectors:**\nAvoid generic selectors that match multiple elements.\n\n```\n\u002F\u002F BAD - matches first button\n{action: \"click\", selector: \"button\"}\n\n\u002F\u002F GOOD - specific\n{action: \"click\", selector: \"button[type=submit]\"}\n{action: \"click\", selector: \"#login-button\"}\n```\n\n**Submit forms with \\n:**\nAppend newline to text to submit forms automatically.\n\n```\n{action: \"type\", selector: \"#search\", payload: \"query\\n\"}\n```\n\n**Check content first:**\nExtract page content to verify selectors before building workflow.\n\n```\n{action: \"extract\", payload: \"html\"}\n```\n\n## Troubleshooting\n\n**Element not found:**\n- Use `await_element` before interaction\n- Verify selector with `extract` action using 'html' format\n\n**Timeout errors:**\n- Increase timeout: `{timeout: 30000}` for slow pages\n- Wait for specific element instead of text\n\n**Tab index out of range:**\n- Use `list_tabs` to get current indices\n- Tab indices change when tabs close\n\n**eval returns `[object Object]`:**\n- Use `JSON.stringify()` for complex objects: `{action: \"eval\", payload: \"JSON.stringify({name: 'test'})\"}`\n- For async functions: `{action: \"eval\", payload: \"JSON.stringify(await yourAsyncFunction())\"}`\n\n## Test Automation (Advanced)\n\n\u003Cdetails>\n\u003Csummary>Click to expand test automation guidance\u003C\u002Fsummary>\n\nWhen building test automation, you have two approaches:\n\n### Approach 1: use_browser MCP (Simple Tests)\nBest for: Single-step tests, direct Claude control during conversation\n\n```json\n{\"action\": \"navigate\", \"payload\": \"https:\u002F\u002Fapp.com\"}\n{\"action\": \"click\", \"selector\": \"#test-button\"}\n{\"action\": \"eval\", \"payload\": \"JSON.stringify({passed: document.querySelector('.success') !== null})\"}\n```\n\n### Approach 2: chrome-ws CLI (Complex Tests)\nBest for: Multi-step test suites, standalone automation scripts\n\n**Key insight**: `chrome-ws` is the reference implementation showing proper Chrome DevTools Protocol usage. When `use_browser` doesn't work as expected, examine how `chrome-ws` handles the same operation.\n\n```bash\n# Example: Automated form testing\n.\u002Fchrome-ws navigate 0 \"https:\u002F\u002Fapp.com\u002Fform\"\n.\u002Fchrome-ws fill 0 \"#email\" \"test@example.com\"\n.\u002Fchrome-ws click 0 \"button[type=submit]\"\n.\u002Fchrome-ws wait-text 0 \"Success\"\n```\n\n### When use_browser Fails\n1. **Check chrome-ws source code** - It shows the correct CDP pattern\n2. **Use chrome-ws to verify** - Test the same operation via CLI\n3. **Adapt the pattern** - Apply the working CDP approach to use_browser\n\n### Common Test Automation Patterns\n- **Form validation**: Fill forms, check error states\n- **UI state testing**: Click elements, verify DOM changes\n- **Performance testing**: Measure load times, capture metrics\n- **Screenshot comparison**: Capture before\u002Fafter states\n\n\u003C\u002Fdetails>\n\n## Advanced Usage\n\nFor command-line usage outside Claude Code, see [COMMANDLINE-USAGE.md](COMMANDLINE-USAGE.md).\n\nFor detailed examples, see [EXAMPLES.md](EXAMPLES.md).\n\n## Protocol Reference\n\nFull CDP documentation: https:\u002F\u002Fchromedevtools.github.io\u002Fdevtools-protocol\u002F\n","# Browsing with Chrome Direct\n\n## Overview\n\nControl Chrome via DevTools Protocol using the `use_browser` MCP tool. Single unified interface with auto-starting Chrome.\n\n**Announce:** \"I'm using the browsing skill to control Chrome.\"\n\n## When to Use\n\n**Use this when:**\n- Controlling authenticated sessions\n- Managing multiple tabs in running browser\n- Playwright MCP unavailable or excessive\n\n**Use Playwright MCP when:**\n- Need fresh browser instances\n- Generating screenshots\u002FPDFs\n- Prefer higher-level abstractions\n\n## The use_browser Tool\n\nSingle MCP tool with action-based interface. Chrome auto-starts on first use.\n\n**Parameters:**\n- `action` (required): Operation to perform\n- `tab_index` (optional): Tab to operate on (default: 0)\n- `selector` (optional): CSS selector for element operations\n- `payload` (optional): Action-specific data\n- `timeout` (optional): Timeout in ms for await operations (default: 5000)\n\n## Actions Reference\n\n### Navigation\n- **navigate**: Navigate to URL\n  - `payload`: URL string\n  - Example: `{action: \"navigate\", payload: \"https:\u002F\u002Fexample.com\"}`\n\n- **await_element**: Wait for element to appear\n  - `selector`: CSS selector\n  - `timeout`: Max wait time in ms\n  - Example: `{action: \"await_element\", selector: \".loaded\", timeout: 10000}`\n\n- **await_text**: Wait for text to appear\n  - `payload`: Text to wait for\n  - Example: `{action: \"await_text\", payload: \"Welcome\"}`\n\n### Interaction\n- **click**: Click element\n  - `selector`: CSS selector\n  - Example: `{action: \"click\", selector: \"button.submit\"}`\n\n- **type**: Type text into input (append `\\n` to submit)\n  - `selector`: CSS selector\n  - `payload`: Text to type\n  - Example: `{action: \"type\", selector: \"#email\", payload: \"user@example.com\\n\"}`\n\n- **select**: Select dropdown option\n  - `selector`: CSS selector\n  - `payload`: Option value(s)\n  - Example: `{action: \"select\", selector: \"select[name=state]\", payload: \"CA\"}`\n\n### Extraction\n- **extract**: Get page content\n  - `payload`: Format ('markdown'|'text'|'html')\n  - `selector`: Optional - limit to element\n  - Example: `{action: \"extract\", payload: \"markdown\"}`\n  - Example: `{action: \"extract\", payload: \"text\", selector: \"h1\"}`\n\n- **attr**: Get element attribute\n  - `selector`: CSS selector\n  - `payload`: Attribute name\n  - Example: `{action: \"attr\", selector: \"a.download\", payload: \"href\"}`\n\n- **eval**: Execute JavaScript\n  - `payload`: JavaScript code\n  - Example: `{action: \"eval\", payload: \"document.title\"}`\n\n### Export\n- **screenshot**: Capture screenshot\n  - `payload`: Filename\n  - `selector`: Optional - screenshot specific element\n  - Example: `{action: \"screenshot\", payload: \"\u002Ftmp\u002Fpage.png\"}`\n\n### Tab Management\n- **list_tabs**: List all open tabs\n  - Example: `{action: \"list_tabs\"}`\n\n- **new_tab**: Create new tab\n  - Example: `{action: \"new_tab\"}`\n\n- **close_tab**: Close tab\n  - `tab_index`: Tab to close\n  - Example: `{action: \"close_tab\", tab_index: 2}`\n\n### Browser Mode Control\n- **show_browser**: Make browser window visible (headed mode)\n  - Example: `{action: \"show_browser\"}`\n  - ⚠️ **WARNING**: Restarts Chrome, reloads pages via GET, loses POST state\n\n- **hide_browser**: Switch to headless mode (invisible browser)\n  - Example: `{action: \"hide_browser\"}`\n  - ⚠️ **WARNING**: Restarts Chrome, reloads pages via GET, loses POST state\n\n- **browser_mode**: Check current browser mode and profile\n  - Example: `{action: \"browser_mode\"}`\n  - Returns: `{\"headless\": true|false, \"mode\": \"headless\"|\"headed\", \"running\": true|false, \"profile\": \"name\", \"profileDir\": \"\u002Fpath\"}`\n\n### Profile Management\n- **set_profile**: Change Chrome profile (must kill Chrome first)\n  - Example: `{action: \"set_profile\", \"payload\": \"browser-user\"}`\n  - ⚠️ **WARNING**: Chrome must be stopped first\n\n- **get_profile**: Get current profile name and directory\n  - Example: `{action: \"get_profile\"}`\n  - Returns: `{\"profile\": \"name\", \"profileDir\": \"\u002Fpath\"}`\n\n**Default behavior**: Chrome starts in **headless mode** with **\"superpowers-chrome\" profile**.\n\n**Critical caveats when toggling modes**:\n1. **Chrome must restart** - Cannot switch headless\u002Fheaded mode on running Chrome\n2. **Pages reload via GET** - All open tabs are reopened with GET requests\n3. **POST state is lost** - Form submissions, POST results, and POST-based navigation will be lost\n4. **Session state is lost** - Any client-side state (JavaScript variables, etc.) is cleared\n5. **Cookies\u002Fauth may persist** - Uses same user data directory, so logged-in sessions may survive\n\n**When to use headed mode**:\n- Debugging visual rendering issues\n- Demonstrating browser behavior to user\n- Testing features that only work with visible browser\n- Debugging issues that don't reproduce in headless mode\n\n**When to stay in headless mode** (default):\n- All other cases - faster, cleaner, less intrusive\n- Screenshots work perfectly in headless mode\n- Most automation works identically in both modes\n\n**Profile management**:\nProfiles store persistent browser data (cookies, localStorage, extensions, auth sessions).\n\n**Profile locations**:\n- macOS: `~\u002FLibrary\u002FCaches\u002Fsuperpowers\u002Fbrowser-profiles\u002F{name}\u002F`\n- Linux: `~\u002F.cache\u002Fsuperpowers\u002Fbrowser-profiles\u002F{name}\u002F`\n- Windows: `%LOCALAPPDATA%\u002Fsuperpowers\u002Fbrowser-profiles\u002F{name}\u002F`\n\n**When to use separate profiles**:\n- **Default profile (\"superpowers-chrome\")**: General automation, shared sessions\n- **Agent-specific profiles**: Isolate different agents' browser state\n  - Example: browser-user agent uses \"browser-user\" profile\n- **Task-specific profiles**: Testing with different user contexts\n  - Example: \"test-logged-in\" vs \"test-logged-out\"\n\n**Profile data persists across**:\n- Chrome restarts\n- Mode toggles (headless ↔ headed)\n- System reboots (data is in cache directory)\n\n**To use a different profile**:\n1. Kill Chrome if running: `await chromeLib.killChrome()`\n2. Set profile: `{action: \"set_profile\", \"payload\": \"my-profile\"}`\n3. Start Chrome: Next navigate\u002Faction will use new profile\n\n## Quick Start Pattern\n\n```\nNavigate and extract:\n{action: \"navigate\", payload: \"https:\u002F\u002Fexample.com\"}\n{action: \"await_element\", selector: \"h1\"}\n{action: \"extract\", payload: \"text\", selector: \"h1\"}\n```\n\n## Common Patterns\n\n### Fill and Submit Form\n```\n{action: \"navigate\", payload: \"https:\u002F\u002Fexample.com\u002Flogin\"}\n{action: \"await_element\", selector: \"input[name=email]\"}\n{action: \"type\", selector: \"input[name=email]\", payload: \"user@example.com\"}\n{action: \"type\", selector: \"input[name=password]\", payload: \"pass123\\n\"}\n{action: \"await_text\", payload: \"Welcome\"}\n```\n\nThe `\\n` at the end of the password submits the form.\n\n### Multi-Tab Workflow\n```\n{action: \"list_tabs\"}\n{action: \"click\", tab_index: 2, selector: \"a.email\"}\n{action: \"await_element\", tab_index: 2, selector: \".content\"}\n{action: \"extract\", tab_index: 2, payload: \"text\", selector: \".amount\"}\n```\n\n### Dynamic Content\n```\n{action: \"navigate\", payload: \"https:\u002F\u002Fexample.com\"}\n{action: \"type\", selector: \"input[name=q]\", payload: \"query\"}\n{action: \"click\", selector: \"button.search\"}\n{action: \"await_element\", selector: \".results\"}\n{action: \"extract\", payload: \"text\", selector: \".result-title\"}\n```\n\n### Get Link Attribute\n```\n{action: \"navigate\", payload: \"https:\u002F\u002Fexample.com\"}\n{action: \"await_element\", selector: \"a.download\"}\n{action: \"attr\", selector: \"a.download\", payload: \"href\"}\n```\n\n### Execute JavaScript\n```\n{action: \"eval\", payload: \"document.querySelectorAll('a').length\"}\n{action: \"eval\", payload: \"Array.from(document.querySelectorAll('a')).map(a => a.href)\"}\n```\n\n## Tips\n\n**Always wait before interaction:**\nDon't click or fill immediately after navigate - pages need time to load.\n\n```\n\u002F\u002F BAD - might fail if page slow\n{action: \"navigate\", payload: \"https:\u002F\u002Fexample.com\"}\n{action: \"click\", selector: \"button\"}  \u002F\u002F May fail!\n\n\u002F\u002F GOOD - wait first\n{action: \"navigate\", payload: \"https:\u002F\u002Fexample.com\"}\n{action: \"await_element\", selector: \"button\"}\n{action: \"click\", selector: \"button\"}\n```\n\n**Use specific selectors:**\nAvoid generic selectors that match multiple elements.\n\n```\n\u002F\u002F BAD - matches first button\n{action: \"click\", selector: \"button\"}\n\n\u002F\u002F GOOD - specific\n{action: \"click\", selector: \"button[type=submit]\"}\n{action: \"click\", selector: \"#login-button\"}\n```\n\n**Submit forms with \\n:**\nAppend newline to text to submit forms automatically.\n\n```\n{action: \"type\", selector: \"#search\", payload: \"query\\n\"}\n```\n\n**Check content first:**\nExtract page content to verify selectors before building workflow.\n\n```\n{action: \"extract\", payload: \"html\"}\n```\n\n## Troubleshooting\n\n**Element not found:**\n- Use `await_element` before interaction\n- Verify selector with `extract` action using 'html' format\n\n**Timeout errors:**\n- Increase timeout: `{timeout: 30000}` for slow pages\n- Wait for specific element instead of text\n\n**Tab index out of range:**\n- Use `list_tabs` to get current indices\n- Tab indices change when tabs close\n\n**eval returns `[object Object]`:**\n- Use `JSON.stringify()` for complex objects: `{action: \"eval\", payload: \"JSON.stringify({name: 'test'})\"}`\n- For async functions: `{action: \"eval\", payload: \"JSON.stringify(await yourAsyncFunction())\"}`\n\n## Test Automation (Advanced)\n\n\u003Cdetails>\n\u003Csummary>Click to expand test automation guidance\u003C\u002Fsummary>\n\nWhen building test automation, you have two approaches:\n\n### Approach 1: use_browser MCP (Simple Tests)\nBest for: Single-step tests, direct Claude control during conversation\n\n```json\n{\"action\": \"navigate\", \"payload\": \"https:\u002F\u002Fapp.com\"}\n{\"action\": \"click\", \"selector\": \"#test-button\"}\n{\"action\": \"eval\", \"payload\": \"JSON.stringify({passed: document.querySelector('.success') !== null})\"}\n```\n\n### Approach 2: chrome-ws CLI (Complex Tests)\nBest for: Multi-step test suites, standalone automation scripts\n\n**Key insight**: `chrome-ws` is the reference implementation showing proper Chrome DevTools Protocol usage. When `use_browser` doesn't work as expected, examine how `chrome-ws` handles the same operation.\n\n```bash\n# Example: Automated form testing\n.\u002Fchrome-ws navigate 0 \"https:\u002F\u002Fapp.com\u002Fform\"\n.\u002Fchrome-ws fill 0 \"#email\" \"test@example.com\"\n.\u002Fchrome-ws click 0 \"button[type=submit]\"\n.\u002Fchrome-ws wait-text 0 \"Success\"\n```\n\n### When use_browser Fails\n1. **Check chrome-ws source code** - It shows the correct CDP pattern\n2. **Use chrome-ws to verify** - Test the same operation via CLI\n3. **Adapt the pattern** - Apply the working CDP approach to use_browser\n\n### Common Test Automation Patterns\n- **Form validation**: Fill forms, check error states\n- **UI state testing**: Click elements, verify DOM changes\n- **Performance testing**: Measure load times, capture metrics\n- **Screenshot comparison**: Capture before\u002Fafter states\n\n\u003C\u002Fdetails>\n\n## Advanced Usage\n\nFor command-line usage outside Claude Code, see [COMMANDLINE-USAGE.md](COMMANDLINE-USAGE.md).\n\nFor detailed examples, see [EXAMPLES.md](EXAMPLES.md).\n\n## Protocol Reference\n\nFull CDP documentation: https:\u002F\u002Fchromedevtools.github.io\u002Fdevtools-protocol\u002F\n",{"name":5,"description":7,"allowed-tools":47},"mcp__chrome__use_browser","main","18d0e63d1313ca87098f614aa7c1e2dcf6de79c7","backend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fexternal_plugins\u002Fsuperpowers-chrome\u002Fskills\u002Fbrowsing",1,"https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system","https:\u002F\u002Fgithub.com\u002Fwelflau","2026-11-10 11:14:25",{"source":8,"skillName":5,"commands":56,"prompt":66,"zipAvailable":67},[57,60,63],{"tool":58,"command":59},"npx","npx skills add welflau\u002Fai-dev-system --skill browsing",{"tool":61,"command":62},"bunx","bunx skills add welflau\u002Fai-dev-system --skill browsing",{"tool":64,"command":65},"pnpm","pnpm dlx skills add welflau\u002Fai-dev-system --skill browsing","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fexternal_plugins\u002Fsuperpowers-chrome\u002Fskills\u002Fbrowsing\u002FSKILL.md",true,[69,75,81,87,91,95,99,103,107,111,115,119,123,127,131],{"path":70,"resourceType":71,"resourceTypeDesc":72,"sizeBytes":73,"sourceHtmlUrl":74},"chrome-ws","OTHER","其他",24278,"https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fexternal_plugins\u002Fsuperpowers-chrome\u002Fskills\u002Fbrowsing\u002Fchrome-ws",{"path":76,"resourceType":77,"resourceTypeDesc":78,"sizeBytes":79,"sourceHtmlUrl":80},"chrome-ws-lib.js","SCRIPT","脚本",62934,"https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fexternal_plugins\u002Fsuperpowers-chrome\u002Fskills\u002Fbrowsing\u002Fchrome-ws-lib.js",{"path":82,"resourceType":83,"resourceTypeDesc":84,"sizeBytes":85,"sourceHtmlUrl":86},"COMMANDLINE-USAGE.md","REFERENCE","参考文档",13089,"https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fexternal_plugins\u002Fsuperpowers-chrome\u002Fskills\u002Fbrowsing\u002FCOMMANDLINE-USAGE.md",{"path":88,"resourceType":83,"resourceTypeDesc":84,"sizeBytes":89,"sourceHtmlUrl":90},"EXAMPLES.md",15314,"https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fexternal_plugins\u002Fsuperpowers-chrome\u002Fskills\u002Fbrowsing\u002FEXAMPLES.md",{"path":92,"resourceType":77,"resourceTypeDesc":78,"sizeBytes":93,"sourceHtmlUrl":94},"host-override.js",1135,"https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fexternal_plugins\u002Fsuperpowers-chrome\u002Fskills\u002Fbrowsing\u002Fhost-override.js",{"path":96,"resourceType":83,"resourceTypeDesc":84,"sizeBytes":97,"sourceHtmlUrl":98},"package.json",326,"https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fexternal_plugins\u002Fsuperpowers-chrome\u002Fskills\u002Fbrowsing\u002Fpackage.json",{"path":100,"resourceType":83,"resourceTypeDesc":84,"sizeBytes":101,"sourceHtmlUrl":102},"README.md",1113,"https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fexternal_plugins\u002Fsuperpowers-chrome\u002Fskills\u002Fbrowsing\u002FREADME.md",{"path":104,"resourceType":77,"resourceTypeDesc":78,"sizeBytes":105,"sourceHtmlUrl":106},"test-e2e.sh",1157,"https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fexternal_plugins\u002Fsuperpowers-chrome\u002Fskills\u002Fbrowsing\u002Ftest-e2e.sh",{"path":108,"resourceType":77,"resourceTypeDesc":78,"sizeBytes":109,"sourceHtmlUrl":110},"test-extract.sh",399,"https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fexternal_plugins\u002Fsuperpowers-chrome\u002Fskills\u002Fbrowsing\u002Ftest-extract.sh",{"path":112,"resourceType":77,"resourceTypeDesc":78,"sizeBytes":113,"sourceHtmlUrl":114},"test-host-override.js",1988,"https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fexternal_plugins\u002Fsuperpowers-chrome\u002Fskills\u002Fbrowsing\u002Ftest-host-override.js",{"path":116,"resourceType":77,"resourceTypeDesc":78,"sizeBytes":117,"sourceHtmlUrl":118},"test-interact.sh",304,"https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fexternal_plugins\u002Fsuperpowers-chrome\u002Fskills\u002Fbrowsing\u002Ftest-interact.sh",{"path":120,"resourceType":77,"resourceTypeDesc":78,"sizeBytes":121,"sourceHtmlUrl":122},"test-navigate.sh",243,"https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fexternal_plugins\u002Fsuperpowers-chrome\u002Fskills\u002Fbrowsing\u002Ftest-navigate.sh",{"path":124,"resourceType":77,"resourceTypeDesc":78,"sizeBytes":125,"sourceHtmlUrl":126},"test-raw.sh",361,"https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fexternal_plugins\u002Fsuperpowers-chrome\u002Fskills\u002Fbrowsing\u002Ftest-raw.sh",{"path":128,"resourceType":77,"resourceTypeDesc":78,"sizeBytes":129,"sourceHtmlUrl":130},"test-tabs.sh",336,"https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fexternal_plugins\u002Fsuperpowers-chrome\u002Fskills\u002Fbrowsing\u002Ftest-tabs.sh",{"path":132,"resourceType":77,"resourceTypeDesc":78,"sizeBytes":133,"sourceHtmlUrl":134},"test-wait.sh",233,"https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fexternal_plugins\u002Fsuperpowers-chrome\u002Fskills\u002Fbrowsing\u002Ftest-wait.sh",[136,166,198,222,247,274],{"skillNo":137,"name":138,"nameZh":6,"description":139,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":140,"licenseFileUrl":141,"sourceHtmlUrl":142,"categories":143,"keywords":147,"publishedAt":42},"01M6HSTDP4M3JFXEBK91VFB4PA","web-artifacts-builder","Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn\u002Fui). Use for complex artifacts requiring state management, routing, or shadcn\u002Fui components - not for simple single-file HTML\u002FJSX artifacts.","Apache-2.0","https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fplugins\u002Fweb-artifacts-builder\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fplugins\u002Fweb-artifacts-builder\u002FSKILL.md",[144],{"categoryNo":145,"categoryName":146,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000009","前端开发",[148,149,150,151,152,153,154,155,156,157,158,159,160,161,23,162,163,164,27,25,165],"web artifacts builder","web","artifacts","artifacts builder","builder","frontend","css","components","react","routing","state management","state","file","Tailwind","single-file","simple","ui components","single",{"skillNo":167,"name":168,"nameZh":6,"description":169,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":140,"licenseFileUrl":170,"sourceHtmlUrl":171,"categories":172,"keywords":182,"publishedAt":42},"01M6HSDXH0JSP8R3QTNY9XZ8HN","frontend-design","Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML\u002FCSS layouts, or when styling\u002Fbeautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.","https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fplugins\u002Ffrontend-design\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fplugins\u002Ffrontend-design\u002FSKILL.md",[173,174,177],{"categoryNo":145,"categoryName":146,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":175,"categoryName":176,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":178,"categoryName":179,"taxonomyType":180,"taxonomyTypeDesc":181},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[153,183,184,154,149,155,156,185,186,187,150,188,189,190,23,191,192,193,194,195,196,197],"design","frontend design","react components","create","code","examples","applications","landing","ui design","pages","aesthetics","web ui","with","generic","when",{"skillNo":199,"name":200,"nameZh":6,"description":201,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":140,"licenseFileUrl":202,"sourceHtmlUrl":203,"categories":204,"keywords":206,"publishedAt":42},"01M6HSA77QYVP7A72HREGTDN2C","algorithmic-art","Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.","https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fplugins\u002Falgorithmic-art\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fplugins\u002Falgorithmic-art\u002FSKILL.md",[205],{"categoryNo":175,"categoryName":176,"taxonomyType":20,"taxonomyTypeDesc":21},[207,208,209,186,187,210,211,212,213,23,214,215,216,217,195,24,218,219,220,221,197],"algorithmic art","Art","algorithmic","flow","js","work","interactive","generative art","exploration","systems","users","request","generative","copyright","fields",{"skillNo":223,"name":224,"nameZh":6,"description":225,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":140,"licenseFileUrl":226,"sourceHtmlUrl":227,"categories":228,"keywords":230,"publishedAt":42},"01M6HS9HE0X390Y6RQKTY1YNGJ","theme-factory","Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors\u002Ffonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.","https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fexternal_plugins\u002Ftheme-factory\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fexternal_plugins\u002Ftheme-factory\u002FSKILL.md",[229],{"categoryNo":175,"categoryName":176,"taxonomyType":20,"taxonomyTypeDesc":21},[231,232,233,234,235,236,150,237,238,239,190,240,241,192,242,195,26,243,244,25,245,246],"theme factory","factory","theme","docs","toolkit","generate","SET","fly","slides","styling","artifact","themes","fonts","can","apply","new",{"skillNo":248,"name":249,"nameZh":6,"description":250,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":140,"licenseFileUrl":251,"sourceHtmlUrl":252,"categories":253,"keywords":260,"publishedAt":42},"01M6HS6BZT2CKDNQ6YF20DXN4T","slack-gif-creator","Knowledge and utilities for creating animated GIFs optimized for Slack. Provides constraints, validation tools, and animation concepts. Use when users request animated GIFs for Slack like \"make me a GIF of X doing Y for Slack.\"","https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fexternal_plugins\u002Fslack-gif-creator\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fexternal_plugins\u002Fslack-gif-creator\u002FSKILL.md",[254,257],{"categoryNo":255,"categoryName":256,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000005","邮件与沟通",{"categoryNo":258,"categoryName":259,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000016","图像与多媒体",[261,262,263,264,265,266,267,268,269,23,270,217,271,272,273,25,218,197],"slack gif creator","slack","gif","creator","validation","Tools","constraints","Animation","knowledge","me","make","Utilities","concepts",{"skillNo":275,"name":276,"nameZh":6,"description":277,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":140,"licenseFileUrl":278,"sourceHtmlUrl":279,"categories":280,"keywords":282,"publishedAt":42},"01M6HRDA7X0XYYSK29ETBD6TX6","mcp-builder","Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node\u002FTypeScript (MCP SDK).","https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fexternal_plugins\u002Fmcp-builder\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fexternal_plugins\u002Fmcp-builder\u002FSKILL.md",[281],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[32,283,152,284,285,286,287,288,289,266,290,291,292,293,23,294,295,296,195,25,197],"mcp builder","typescript","python","llms","model context protocol","fastmcp","services","model","node","context","guide","integrate","mcp sdk","building mcp servers"]