Skip to content
MCP Shelf

Web App Testing skill for Claude

Reviewed by Sophie Filer · Updated 27 Oct 2026

Has Claude write throwaway Playwright scripts to poke, screenshot and check your local web app.

This skill is for the moment you want Claude to see what your app really does in a browser, not what the code suggests it does. Claude writes a short Python Playwright script, runs it headless, and reads back screenshots, console output and the rendered page.

Its core habit is sensible: look before you click. Claude loads the page, waits for it to settle, inspects what is there, and only then picks selectors, which avoids most flaky first attempts.

When Claude reaches for it

  • Checking that a feature you just built works in a real browser
  • Capturing screenshots of a page or a flow
  • Chasing a front-end bug through the console log

What is in the pod

  • Guidance on choosing between a static HTML check and a running dev server
  • A helper that starts one or more local servers, waits for them and shuts them down after the script
  • Small example scripts for finding elements, reading console logs and testing static files

Planting it

Claude Code

  1. Add the Anthropic skills marketplace once.
  2. Install the example-skills plugin, which includes webapp-testing.
  3. Start a new session. Claude loads the skill on its own when a task matches.
Claude Code
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

Claude apps (web, desktop, mobile)

  1. On a paid plan, open Settings and find the Skills section.
  2. Switch on webapp-testing from Anthropic's examples, or upload the folder as a zip.

By hand (Claude Code)

  1. Download the skill folder from GitHub.
  2. Put it in ~/.claude/skills/ for every project, or .claude/skills/ inside one project.
By hand (Claude Code)
~/.claude/skills/webapp-testing/SKILL.md

What it needs

  • Python 3 with the Playwright package and a Chromium build installed
  • Your app runnable on localhost

Notes from the pea patch

  • Tell Claude how you normally start the app (the exact npm or make command) so the server helper gets it right first time.
  • Ask for screenshots at the end of each step. They are the quickest way to confirm Claude and you are looking at the same thing.

Pea-fect partners on the shelf