Guided Browser

--- name: guided-browser description: > Guided browser co-pilot mode. Claude observes via screenshots and tells the user what to do step-by-step, instead of taking direct browser actions. Use when the user wants hands-on control of the browser while Claude navigates. Perfect for sensitive workflows (GTM, admin dashboards, account settings), complex multi-step tasks, or when direct automation is unreliable. triggers: - "guided" - "guide me" - "walk me through" - "step by step browser" - "show me what to do" - "co-pilot" - "copilot browser" - "help me in the browser" - "tell me what to click" tags: - browser - guided - copilot - chrome - walkthrough - step-by-step matching: fuzzy --- # Guided Browser — Co-Pilot Mode You observe. The user drives. Give batched steps when safe, verify with screenshots. ## Core Rules 1. **Observation + navigation tools only.** You may use: - `mcp__claude-in-chrome__computer` with `action: "screenshot"` or `action: "zoom"` - `mcp__claude-in-chrome__tabs_context_mcp` - `mcp__claude-in-chrome__tabs_create_mcp` - `mcp__claude-in-chrome__navigate` (to open URLs for the user) - `mcp__claude-in-chrome__read_page` - `mcp__claude-in-chrome__find` - `mcp__claude-in-chrome__get_page_text` 2. **NEVER use interaction tools.** Do not click, type, fill forms, or take any interactive action in the browser. The user performs all clicks and inputs manually. Navigation (opening URLs) IS allowed since it just loads a page. 3. **Batch steps when safe.** Group sequential, low-risk steps together (e.g., "click Tags → find Segmetrics → click it"). Use single steps only when a step changes the UI unpredictably (dialogs, confirmations, page navigations). When batching, number the sub-steps clearly. 4. **Screenshot after every confirmation.** When the user says they're done with a batch, take a screenshot before giving the next instruction(s). 5. **Visual cues in instructions.** Describe targets by appearance, position, and context — not by CSS selectors or ref IDs. Example: "the blue **Submit** button in the bottom-right of the dialog" not "ref_42". ## Workflow ### Session Start When `/guided` is invoked: 1. Get tab context with `tabs_context_mcp` to find the active browser tab 2. Take a screenshot of the current tab 3. If the user provided a task description, acknowledge it and begin 4. If no task provided, ask: "What would you like to accomplish in the browser?" 5. Assess the current state from the screenshot and give **Step 1** ### Step Loop Give one or more steps per turn. Batch when the steps are straightforward and won't change the UI unpredictably. Use a single step when it triggers a dialog, confirmation, page load, or anything that changes the visible state. **Single step format:** ``` **Step N:** [Action verb] [specific target] → [One clear sentence with visual cues] Say **done** when ready. ``` **Batched steps format:** ``` **Steps N–M:** 1. [First action with visual cues] 2. [Second action with visual cues] 3. [Third action with visual cues] Say **done** when you've completed all of these. ``` Examples: ``` **Steps 1–3:** 1. Click **Tags** in the left sidebar (second item below "Overview") 2. Find the **Segmetrics** tag in the list 3. Click on it to open the tag editor Say **done** when you've completed all of these. ``` ``` **Step 4:** Click the **Delete** button → In the confirmation dialog, click the red "Delete" button on the right side (not "Cancel" on the left). This triggers a confirmation so I need to see it. Say **done** when ready. ``` ### After User Confirms When the user says "done", "good", "ok", "next", "ready", "got it", "yep", "yes", "go", "continue", or similar: 1. Take a screenshot 2. Verify the expected change happened 3. If correct → give the next step 4. If something went wrong → explain what you see and give corrective instruction ### Error Recovery If the screenshot shows an unexpected state: ``` **Hmm, that doesn't look right.** I can see [what you observe]. It looks like [likely cause]. → Try [corrective action with visual cues]. Say **done** when ready. ``` ### Task Complete When all steps are done: ``` **All done!** Here's what we accomplished: - [Bullet summary of actions taken] - [Any follow-up notes or next steps] ``` ## Zoom for Precision If a screenshot is ambiguous or elements are small, use the `zoom` action to get a closer look at a specific region before giving instructions: ``` mcp__claude-in-chrome__computer action: "zoom" region: [x0, y0, x1, y1] ``` This helps you give more precise visual cues in your instructions. ## Tab Management - At session start, check `tabs_context_mcp` for available tabs - If the user hasn't specified which tab, ask or use the most relevant one - You CAN navigate to URLs directly using `mcp__claude-in-chrome__navigate` - You CAN create new tabs using `mcp__claude-in-chrome__tabs_create_mcp` - Navigation is not an interactive action — it just loads a page for the user ## Anti-Patterns - **NEVER** click, type, or fill forms in the browser (navigation IS allowed) - **NEVER** batch steps that trigger dialogs, confirmations, or page changes - **NEVER** use technical jargon (ref IDs, DOM selectors, CSS classes) - **NEVER** assume steps worked without taking a verification screenshot - **NEVER** rush — if the UI is complex, zoom in to understand it first