New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Web Testing with Playwright and Vitest

by withkynam in withkynam/vibecode-pro-max-kit

Covers web testing from unit to E2E, load, visual, accessibility and security checks, with Playwright, Vitest and k6 guides plus a Playwright setup script.

Apache-2.0Auto-check passedTesting & QA

Install Web Testing with Playwright and Vitest

skills CLI
$ npx skills add withkynam/vibecode-pro-max-kit --skill vc-web-testing -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install withkynam/vibecode-pro-max-kit vc-web-testing --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/withkynam/vibecode-pro-max-kit.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/vc-web-testing .claude/skills/vc-web-testing && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
vc-web-testing
GitHub stars
1.1k
Token cost
~892 tokens
SKILL.md length
165 words
Files
28 (incl. scripts, references)
Skills in repo
32
Repo updated
First seen
Licence
Apache-2.0

At a glance

Covers web testing from unit to E2E, load, visual, accessibility and security checks, with Playwright, Vitest and k6 guides plus a Playwright setup script.

  • Setting up Playwright end-to-end tests for a web app
  • SKILL.md covers Quick Start, Testing Strategy (Choose Your…, Reference Documentation and Scripts, plus 1 more section
  • Calls npx and node
  • Choosing a test strategy for a monolith, a single-page app or microservices

What it does

The skill acts as a hub for web testing. It opens with quick commands such as `npx vitest run` and `npx playwright test`, then has the agent pick a testing model: a pyramid of 70 percent unit, 20 percent integration and 10 percent E2E for monoliths, an integration-heavy trophy for modern single-page apps, or a contract-centric honeycomb for microservices. Replies are meant to lead with the answer in plain language.

Reference guides sit behind it, grouped by topic: Vitest unit and integration tests, Playwright E2E and component tests, test data, database tests with Testcontainers, CI workflows on GitHub Actions, contract tests, cross-browser and mobile gestures, Core Web Vitals, visual regression, flakiness, accessibility with axe-core, OWASP-based security checks, API tests, k6 load tests and release checklists. A script, `init-playwright.js`, creates a Playwright project, with an option for component testing.

When your agent uses it

  • Setting up Playwright end-to-end tests for a web app
  • Choosing a test strategy for a monolith, a single-page app or microservices
  • Stabilizing browser tests that fail at random
  • Checking Core Web Vitals, accessibility or cross-browser behavior before a release
  • Writing k6 load tests for an API endpoint

Example prompts

  • “Set up Playwright with component testing in this repo and add a first login test.”
  • “Our checkout E2E test fails randomly on CI. Find the cause of the flakiness and fix it.”
  • “Which testing model fits our microservices backend, and what should we cover first?”
  • “Write a k6 load test for the search endpoint.”

Requirements

  • Node.js with npx
  • Playwright and Vitest in the project

What it can do on your machine

Read from SKILL.md and the folder at commit 3bcb2f9. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 1 file in scripts/, which the agent can run.

    Shell commands in SKILL.md call:

    • npx
    • node

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npx, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Web Testing with Playwright and Vitest loads about 892 tokens when it runs, and up to ~16k if it reads all its reference files. Until then it costs about 49 tokens; SKILL.md has 165 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~49
When it runs · the whole SKILL.md, loaded when a task matches
~892
With references · SKILL.md plus every file in references/, read only if the agent opens them
~16k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from withkynam/vibecode-pro-max-kit at commit 3bcb2f9, republished under its Apache-2.0 licence (© withkynam). 165 words, ~892 tokens.

Download SKILL.mdSave it as .claude/skills/vc-web-testing/SKILL.md (or your agent's skills folder). This skill also uses 27 other files; get the full folder from GitHub.
name
vc-web-testing
description
Web testing with Playwright, Vitest, k6. E2E/unit/integration/load/security/visual/a11y testing. Use for test automation, flakiness, Core Web Vitals, mobile gestures, cross-browser.
license
Apache-2.0
argument-hint
[test-type] [target]
trigger_keywords
tests, e2e, integration test, performance test
layer
helper
metadata.author
claudekit
metadata.version
3.0.0

Web Testing Skill

Output style: Follow process/development-protocols/communication-standards.md — answer-first, plain language, no unexplained jargon, TL;DR on long responses.

Comprehensive web testing: unit, integration, E2E, load, security, visual regression, accessibility.

Quick Start

bash
npx vitest run                    # Unit tests
npx playwright test               # E2E tests
npx playwright test --ui          # E2E with UI
k6 run load-test.js               # Load tests
npx @axe-core/cli https://example.com  # Accessibility
npx lighthouse https://example.com     # Performance

Testing Strategy (Choose Your Model)

ModelStructureBest For
PyramidUnit 70% > Integration 20% > E2E 10%Monoliths
TrophyIntegration-heavyModern SPAs
HoneycombContract-centricMicroservices

→ ./references/testing-pyramid-strategy.md

Reference Documentation

Core Testing
  • ./references/unit-integration-testing.md - Vitest, browser mode, AAA
  • ./references/e2e-testing-playwright.md - Fixtures, sharding, selectors
  • ./references/playwright-component-testing.md - CT patterns (production-ready)
  • ./references/component-testing.md - React/Vue/Angular patterns
Test Infrastructure
  • ./references/test-data-management.md - Factories, fixtures, seeding
  • ./references/database-testing.md - Testcontainers, transactions
  • ./references/ci-cd-testing-workflows.md - GitHub Actions, sharding
  • ./references/contract-testing.md - Pact, MSW patterns
Cross-Browser & Mobile
  • ./references/cross-browser-checklist.md - Browser/device matrix
  • ./references/mobile-gesture-testing.md - Touch, swipe, orientation
Performance & Quality
  • ./references/performance-core-web-vitals.md - LCP/CLS/INP, Lighthouse CI
  • ./references/visual-regression.md - Screenshot comparison
  • ./references/test-flakiness-mitigation.md - Stability strategies
Accessibility & Security
  • ./references/accessibility-testing.md - WCAG, axe-core
  • ./references/security-testing-overview.md - OWASP Top 10
  • ./references/security-checklists.md - Auth, API, headers
API & Load
  • ./references/api-testing.md - Supertest, GraphQL
  • ./references/load-testing-k6.md - k6 patterns
Checklists
  • ./references/pre-release-checklist.md - Complete release checklist
  • ./references/functional-testing-checklist.md - Feature testing

Scripts

Initialize Playwright Project
bash
node ./scripts/init-playwright.js [--ct] [--dir <path>]

Creates best-practice Playwright setup: config, fixtures, example tests.

Analyze Test Results
bash
node ./scripts/analyze-test-results.js \
  --playwright test-results/results.json \
  --vitest coverage/vitest.json \
  --output markdown

Parses Playwright/Vitest/JUnit results into unified summary.

CI/CD Integration

yaml
jobs:
  test:
    steps:
      - run: pnpm run test:unit      # Gate 1: Fast fail
      - run: pnpm run test:e2e       # Gate 2: After unit pass
      - run: pnpm run test:a11y      # Accessibility
      - run: npx lhci autorun       # Performance

© withkynam, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 27 other files (scripts, references) in .claude/skills/vc-web-testing of withkynam/vibecode-pro-max-kit.

  • SKILL.md
  • references/accessibility-testing.md
  • references/api-testing.md
  • references/ci-cd-testing-workflows.md
  • references/component-testing.md
  • references/contract-testing.md
  • references/cross-browser-checklist.md
  • references/database-testing.md
  • references/e2e-testing-playwright.md
  • references/functional-testing-checklist.md
  • references/interactive-testing-patterns.md
  • references/load-testing-k6.md
  • references/mobile-gesture-testing.md
  • references/performance-core-web-vitals.md
  • references/playwright-component-testing.md
  • references/pre-release-checklist.md
  • references/security-checklists.md
  • references/security-testing-overview.md
  • references/shadow-dom-testing.md
  • references/test-data-management.md
  • … and 8 more

Open the folder on GitHubat commit 3bcb2f9

Compare with similar skills

Web Testing with Playwright and Vitest next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Web Testing with Playwright and Vitest compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Web Testing with Playwright and Vitest this skillwithkynam/vibecode-pro-max-kit1.1k—~892Automated safety check: PassApache-2.0
Playwright Testingchongdashu/vibejam-starter-pack149—~2.2kAutomated safety check: PassNone
Playwright Testingchongdashu/vibejam-starter-pack149—~2.1kAutomated safety check: PassNone
Testingradix-ng/primitives274—~3.3kAutomated safety check: PassMIT
Test CommanderEliasOulkadi/shokunin114—~3kAutomated safety check: NotesMIT
React Testingaffaan-m/ECC274k1 repos~3.3kAutomated safety check: PassMIT

Similar skills

  • Playwright Testing

    chongdashu/vibejam-starter-pack

    Plan, implement, and debug frontend tests: unit/integration/E2E/visual/a11y.

    149 GitHub stars~2.2k tokensUpdated 5 mo ago
    Testing & QAAuto-check passed

  • Playwright Testing

    chongdashu/vibejam-starter-pack

    Plan, implement, and debug frontend tests: unit/integration/E2E/visual/a11y.

    149 GitHub stars~2.1k tokensUpdated 5 mo ago
    Testing & QAAuto-check passed

  • Testing

    radix-ng/primitives

    Test Radix NG primitives across every layer and pick the RIGHT one for a change: Vitest unit (zoneless), jest-axe a11y, Playwright browser regression (apps/visual-regression), SSR…

    274 GitHub stars~3.3k tokensUpdated 8 days ago
    Testing & QAAuto-check passed

  • Test Commander

    EliasOulkadi/shokunin

    Generate unit, integration, E2E, and visual regression tests following the Testing Trophy methodology (80% integration).

    114 GitHub stars~3k tokensUpdated 2 days ago
    Testing & QAAuto-check: notes

  • React Testing

    affaan-m/ECC

    React component testing with React Testing Library, Vitest/Jest, MSW for network mocking, accessibility assertions with axe, and the decision boundary between component tests and Playwright/Cypress…

    274k GitHub starsUsed in 1 repo~3.3k tokens
    Testing & QAAuto-check passed

  • Sanity Visual Regression

    sanity-io/sanity

    Official

    Add, review, and maintain Chromatic visual regression coverage in the Sanity monorepo via dev/storybook stories, the vitest browser-mode suite, and Playwright e2e snapshots.

    6.4k GitHub stars~3.4k tokensUpdated today
    Testing & QAAuto-check passed

More from withkynam/vibecode-pro-max-kit

All 32 skills in this repo

  • Library Documentation Seeker

    withkynam/vibecode-pro-max-kit

    Looks up library and framework documentation through Context7 first, with bundled Node scripts as a fallback that fetch and analyze llms.txt files.

    1.1k GitHub starsUsed in 2 repos~1k tokens
    Auto-check: notes

  • Vc Sequential Thinking

    withkynam/vibecode-pro-max-kit

    Apply step-by-step analysis for complex problems with revision capability.

    1.1k GitHub starsUsed in 2 repos~854 tokens
    Auto-check passed

  • Agent Browser Automation

    withkynam/vibecode-pro-max-kit

    Drives a browser through the agent-browser CLI, using compact snapshots with element refs to keep context small in long sessions, plus video recording and cloud browsers.

    1.1k GitHub stars~2.6k tokensUpdated 3 mo ago
    Auto-check passed

  • Context Routing Audit

    withkynam/vibecode-pro-max-kit

    Audits a project's context routing, skill discoverability and skill wiring by running a chain of validator scripts and fixing whatever they report.

    1.1k GitHub stars~1.2k tokensUpdated 3 mo ago
    Auto-check passed

  • Active Plan Audit

    withkynam/vibecode-pro-max-kit

    Reviews a codebase's active plan files for staleness and completion, then archives only the ones confirmed done or obsolete against the real code.

    1.1k GitHub stars~757 tokensUpdated 3 mo ago
    Auto-check passed

  • Systematic Debugging and Investigation

    withkynam/vibecode-pro-max-kit

    Forces root-cause investigation before any fix, combining a four-phase debugging method with log, CI and performance investigation techniques and a rule against unverified completion claims.

    1.1k GitHub stars~1.5k tokensUpdated 3 mo ago
    Auto-check passed

Works with

Categories

Questions about Web Testing with Playwright and Vitest

What does Web Testing with Playwright and Vitest do?

Covers web testing from unit to E2E, load, visual, accessibility and security checks, with Playwright, Vitest and k6 guides plus a Playwright setup script. The skill acts as a hub for web testing. It opens with quick commands such as `npx vitest run` and `npx playwright test`, then has the agent pick a testing model: a pyramid of 70 percent unit, 20 percent integration and 10 percent E2E for monoliths, an integration-heavy trophy for modern single-page apps, or a contract-centric honeycomb for microservices.

When should I use Web Testing with Playwright and Vitest?

Web Testing with Playwright and Vitest fits situations like: setting up Playwright end-to-end tests for a web app; choosing a test strategy for a monolith, a single-page app or microservices; stabilizing browser tests that fail at random; checking Core Web Vitals, accessibility or cross-browser behavior before a release.

How do I install Web Testing with Playwright and Vitest in Claude Code?

Run `npx skills add withkynam/vibecode-pro-max-kit --skill vc-web-testing -a claude-code`. Or copy the skill folder (.claude/skills/vc-web-testing in withkynam/vibecode-pro-max-kit) into .claude/skills/vc-web-testing in your project. Claude Code loads it when a task matches its description.

How do I install Web Testing with Playwright and Vitest in Codex?

Run `npx skills add withkynam/vibecode-pro-max-kit --skill vc-web-testing -a codex`. Or copy the skill folder (.claude/skills/vc-web-testing in withkynam/vibecode-pro-max-kit) into .agents/skills/vc-web-testing in your project. Codex loads it when a task matches its description.

Can I use Web Testing with Playwright and Vitest in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add withkynam/vibecode-pro-max-kit --skill vc-web-testing -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/vc-web-testing, .gemini/skills/vc-web-testing, .github/skills/vc-web-testing and .opencode/skills/vc-web-testing in your project.

What does Web Testing with Playwright and Vitest need to run?

Going by SKILL.md and its folder, Web Testing with Playwright and Vitest needs the command-line tools its instructions call (npx and node). Our summary lists: Node.js with npx; Playwright and Vitest in the project.

Does Web Testing with Playwright and Vitest access the network?

SKILL.md contains no URLs. Its commands use npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Web Testing with Playwright and Vitest safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Web Testing with Playwright and Vitest use?

Web Testing with Playwright and Vitest is published under the Apache-2.0 licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Web Testing with Playwright and Vitest use?

About 892 tokens (SKILL.md is roughly 3.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 15k tokens, read only when the agent opens those files.

What are the alternatives to Web Testing with Playwright and Vitest?

Skills that share tags, products or a category with Web Testing with Playwright and Vitest: Playwright Testing (chongdashu/vibejam-starter-pack, 149 stars), Playwright Testing (chongdashu/vibejam-starter-pack, 149 stars), Testing (radix-ng/primitives, 274 stars) and Test Commander (EliasOulkadi/shokunin, 114 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Web Testing with Playwright and Vitest?

withkynam (a GitHub user) maintains it in withkynam/vibecode-pro-max-kit, which has 1,144 GitHub stars. The repository holds 32 skills in this directory. The repository was last updated on June 21, 2026.

Source: withkynam/vibecode-pro-max-kit on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.