playwrightlisted

# Skill: playwright ## When to Use Use this skill for browser automation tasks: visual testing, page interaction, form filling, screenshot comparison, and debugging rendered pages. Invoke with `/playwright [URL]` to navigate to a specific page, or `/playwright` to start without a URL. Use `$ARGUMENTS` as the URL to navigate to. If empty, ask the user what page to work with. Do NOT use this skill for writing test files or test code. This is for live browser interaction via MCP tools. ## Snapshot First, Screenshot Second The Playwright MCP provides two ways to see page state. Use the right one: - **`browser_snapshot`** - Returns the accessibility tree. Use this for planning actions, finding interactive elements, and understanding page structure. Fast, deterministic, token-efficient. **Always start here.** - **`browser_take_screenshot`** - Returns a visual image. Use this for visual verification, layout debugging, comparing against Figma designs, and documentation. You cannot perform actions based on screenshots alone. Use `browser_snapshot` for that. **Default workflow:** 1. `browser_snapshot` to understand what's on the page 2. Perform actions (`browser_click`, `browser_type`, `browser_fill_form`, etc.) 3. `browser_snapshot` again to verify the action worked 4. `browser_take_screenshot` only when visual verification is needed ## Visual Verification with Figma When comparing implementation against Figma designs: 1. Call `get_screenshot` from the Figma MCP for the desi