chrome-workflowslisted

# Chrome Integration and Browser Workflows ## Purpose Use Claude Code's browser integration to create visual feedback loops for frontend development. Implement the Write-Screenshot-Iterate pattern to self-correct based on rendered output rather than just code syntax. Choose between native Chrome integration and Playwright MCP based on the task requirements. Enable visual verification, Figma comparison, and authenticated session debugging. ## When to Use - Building or refining frontend components that need visual verification - Comparing rendered output against a design mock or Figma export - Debugging UI issues that only appear in the browser (console errors, layout bugs) - Testing pages behind authentication (SSO, internal tools) - Any time you mention "browser testing", "screenshot", "visual verification", "Chrome", or "UI testing" ## Examples **Example 1: Visual build-verify loop** ``` User: "Build this card component to match this design [paste image]" Claude: [Uses chrome-workflows] Implements the card component. Opens localhost:3000 in Chrome. Takes a screenshot. Compares against the provided design. Lists visual discrepancies (padding, color, alignment). Fixes CSS. Repeats until match. ``` **Example 2: Authenticated debugging** ``` User: "Debug this admin panel page — I'm already logged in" Claude: [Uses chrome-workflows] Uses native Chrome integration (/chrome) to access the user's authenticated browser session. Navigates the admin panel without needing credent