Skip to content
Get packs

Guide · Agent skill

How to use the Playwright Project Setup agent skill (pw-init)

Updated · written with AI from the project's own documentation and checked against our catalogue data

The pw-init skill is an instruction file for an AI agent that sets up Playwright, a tool that drives real browsers to check that a website works. Once it is loaded, you can ask your agent to add end-to-end tests to your project and it will inspect the project, install Playwright, and generate a config, a starter folder layout, a sample test, a CI pipeline and npm test scripts. This guide explains what the skill does, how to install it, how to trigger it, and what to check afterwards.

Playwright Project Setupalirezarezvani/claude-skills · MIT

Quick start

  1. 1Download and unzip the skill. Download the pw-init ZIP from the item page and unzip it into ~/.claude/skills/ for all projects, or into .claude/skills/ in one project.
  2. 2Check the project. Confirm the project has a package.json, Node.js and npm, and no existing Playwright setup you want to keep.
  3. 3Ask in plain language. Tell your agent to set up Playwright or add e2e tests, naming the project if it is not the current folder.
  4. 4Let the agent inspect and install. The agent checks the framework, TypeScript or JavaScript, existing test folders and CI config, then installs Playwright.
  5. 5Review generated files. Check playwright.config.ts, the e2e/ folder, the example test, the CI workflow and the package.json scripts.
  6. 6Run the example test. Run npx playwright test. If it fails, the skill asks the agent to diagnose and fix the problem before finishing.

What an agent skill is and what pw-init makes the agent do

An agent skill is a folder containing a SKILL.md file that tells an AI agent how to handle a specific kind of task. The agent reads the file when a request matches the skill's description, then follows its steps.

The pw-init skill covers browser testing setup. Its steps are to scan your project's package.json for the framework (React, Next.js, Vue, Angular or Svelte), check for a tsconfig.json to decide between TypeScript and JavaScript, check whether @playwright/test is already installed, look for existing test directories and existing CI configuration, install Playwright, and then generate files. It then runs the sample test and fixes any problems it finds.

  • Generates playwright.config.ts adapted to the detected framework
  • Creates an e2e/ folder with fixtures/, pages/, test-data/ and an example.spec.ts
  • Generates a Playwright workflow for GitHub Actions (.github/workflows/playwright.yml) or adds a Playwright stage to .gitlab-ci.yml
  • Appends Playwright report and output folders to .gitignore if missing
  • Adds test:e2e, test:e2e:ui and test:e2e:debug scripts to package.json
  • Runs npx playwright test to verify the setup

Install the pw-init skill

Download the skill's ZIP from the item page and unzip it. To make the skill available to every project on your machine, unzip it into ~/.claude/skills/. To make it available only to one project, unzip it into that project's .claude/skills/ folder.

In the Claude apps you can instead upload the ZIP under Settings → Capabilities → Skills.

  • Personal use across projects: ~/.claude/skills/
  • One project only: .claude/skills/ inside the project
  • Claude apps: Settings → Capabilities → Skills, then upload the ZIP

Check your project before you start

The skill expects a web project with a package.json and uses npm. Before you ask for setup, make sure you have Node.js and npm installed, and that the project already has the dependencies it needs.

If your project already has a tested Playwright setup, do not use this skill. It would overwrite or duplicate your existing configuration and CI files.

  • Node.js and npm installed
  • A web project with a package.json
  • Git hosting with GitHub Actions or GitLab CI, if you want CI files
  • Not already set up with Playwright

Trigger the skill with a natural request

You do not need to name the skill. The skill's description lists phrases that should activate it, so ask your agent in plain language. The skill's listed trigger phrases are: "set up playwright", "add e2e tests", "configure playwright", "testing setup", "init playwright" and "add test infrastructure".

Good requests say what you want and what project it is for. For example, you can ask your agent to add e2e tests to a Next.js project in the current folder, or to add test infrastructure to a Vue app and set up GitHub Actions.

  • "Set up Playwright in this React project."
  • "Add e2e tests to this Next.js app and include a GitHub Actions workflow."
  • "Configure Playwright for this Vue project with TypeScript."
  • "Add test infrastructure to this Angular app."

Review what the agent creates

The skill asks the agent to report back what it created: the config file path and key settings, the test directory and example test, the CI workflow if one was added, the npm scripts, and how to run the tests. Read this summary and the generated files before you commit them.

Framework defaults come from the skill. For Next.js the baseURL is http://localhost:3000, for React with Vite it is http://localhost:5173, for Vue or Nuxt it is http://localhost:3000, and for Angular it is http://localhost:4200. If no framework is detected, the webServer block is left out and the base URL comes from your input or a placeholder.

npx playwright test

Run the tests yourself

After setup, run the example test with npx playwright test, or with npm run test:e2e. The skill also adds npm run test:e2e:ui and npm run test:e2e:debug scripts, which map to Playwright's --ui and --debug options.

npm run test:e2e

What people use it for

  • Adding a first end-to-end test suite to a React or Svelte project with a Playwright config already matched to its dev server
  • Giving a team the same Playwright config and GitHub Actions workflow across several Next.js repositories
  • Creating a working baseline for someone new to Playwright, with a homepage test they can extend
  • Adding a GitLab CI Playwright stage to an existing Angular project that has a .gitlab-ci.yml file

Frequently asked questions

Is the pw-init skill free and what is its licence?

The skill is listed under the MIT licence. The item page does not state a price, so check the page for any cost details before you download it.

What do I need to use pw-init?

You need Node.js and npm, a web project with a package.json, and network access, because the skill downloads Playwright packages and browser binaries such as chromium, firefox and webkit. For CI files you also need GitHub Actions or GitLab CI.

Does pw-init work with TypeScript and JavaScript projects?

Yes. The skill checks for a tsconfig.json file. If it finds one it uses TypeScript, otherwise it uses JavaScript.

Will pw-init overwrite my existing Playwright setup?

It can. The skill is not meant for projects that already have a tested Playwright setup, because it would overwrite or duplicate existing configuration and CI files. Back up or commit your work first, or set up a new project to try it.

Where do I install the skill in Claude?

Unzip the downloaded ZIP into ~/.claude/skills/ for all projects, or into .claude/skills/ inside one project. In the Claude apps, upload the ZIP under Settings → Capabilities → Skills.

Are there alternatives to pw-init?

You can set up Playwright by hand with npm init playwright@latest or npm install -D @playwright/test followed by npx playwright install --with-deps chromium, as the skill's own instructions describe. Those commands give you the same base tool without an agent, but you write the config, tests and CI file yourself.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Use pw-init if you want an AI agent to produce a standard Playwright baseline quickly for a Node.js web project that does not have Playwright yet, and you will review the files it creates. Skip it if your project already has a working Playwright setup, if you are not working in Node.js, or if your environment does not allow running dev servers or downloading browsers.

Download the skill