playwright-e2e-builder — Claude Code skill: Playwright E2E suites
A skill that plans and builds Playwright E2E suites. It interviews you about flows and auth first, then writes the tests.
npx claude-code-templates@latest --skill development/playwright-e2e-builderWhat playwright-e2e-builder does
The skill runs in four phases. It starts by exploring the repo: which framework you use, whether @playwright/test is already there, where test folders live, what routes exist, how login works, and what CI config is present. Then it asks questions through AskUserQuestion about the flows worth covering, the auth setup, where test data comes from, and where tests should run. A written plan comes next, and implementation only starts once you approve it.
What you get out of it: a playwright.config.ts with browser projects, a separate setup project that stores the login state in e2e/.auth/user.json, page objects, custom fixtures for seeding and API calls, screenshot comparison, and a CI workflow with sharding and retries.
The config assumes a dev server on http://localhost:3000 and reads BASE_URL if you set it. Point that at the right port before the first run, or every test will hit nothing.
What it helps with
- Add Playwright to an existing project without guessing at folder layout
- Pin down critical user flows before any test is written
- Move locators and actions into page objects
- Persist login state and reuse it across test files
- Wire the suite into CI with sharding and retries
Example prompts for the agent
- Look at the stack in this repo and draft a Playwright E2E plan
- Ask me about the flows and auth first, then write
playwright.config.ts - Set up login state in
e2e/.auth/user.jsonand fixtures for test data
How to install playwright-e2e-builder
1claude-code-templates
npx claude-code-templates@latest --skill development/playwright-e2e-builder2Skills CLI (Vercel)
npx skills add davila7/claude-code-templates --skill playwright-e2e-builder -a claude-code3Manually: put the files in place
~/.claude/skills/playwright-e2e-builder/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/playwright-e2e-builder/
Manually: put the files in place
.agents/skills/playwright-e2e-builder/SKILL.mdFor all projects use ~/.agents/skills/
Manually: put the files in place
.cursor/skills/playwright-e2e-builder/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install davila7/claude-code-templates playwright-e2e-builder2Manually: put the files in place
.github/skills/playwright-e2e-builder/SKILL.mdPlatform CLI
gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/development/playwright-e2e-builderManually: put the files in place
.devin/skills/playwright-e2e-builder/SKILL.mdThe legacy .windsurf/skills/ path still works
Claude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about playwright-e2e-builder
How do I install playwright-e2e-builder in Claude Code?
Run npx claude-code-templates@latest --skill development/playwright-e2e-builder. Or use npx skills add davila7/claude-code-templates --skill playwright-e2e-builder -a claude-code. The skill file then sits at ~/.claude/skills/playwright-e2e-builder/SKILL.md.
What does playwright-e2e-builder do?
It plans and assembles a Playwright E2E suite: config, page objects, fixtures, stored auth state, visual regression, and CI config. Before writing tests it asks about your flows, login strategy, and test data.
Does it need a running app server?
Yes, the tests run against a live app. The config points at http://localhost:3000 by default, and you override the address with BASE_URL.
