web-testing
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.
- Installs
- 442
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/mrgoonie/claudekit-skills --skill web-testing- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads web-testing automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Web Testing Skill
Comprehensive web testing: unit, integration, E2E, load, security, visual regression, accessibility.
Quick Start
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 Pyramid (70-20-10)
| Layer | Ratio | Framework | Speed |
|---|---|---|---|
| Unit | 70% | Vitest/Jest | <50ms |
| Integration | 20% | Vitest + fixtures | 100-500ms |
| E2E | 10% | Playwright | 5-30s |
When to Use
- Unit: Functions, utilities, state logic
- Integration: API endpoints, database ops, modules
- E2E: Critical flows (login, checkout, payment)
- Load: Pre-release performance validation
- Security: Pre-deploy vulnerability scanning
- Visual: UI regression detection
Reference Documentation
Core Testing
./references/unit-integration-testing.md- Unit/integration patterns./references/e2e-testing-playwright.md- Playwright E2E workflows./references/component-testing.md- React/Vue/Angular component testing./references/testing-pyramid-strategy.md- Test ratios, priority matrix
Cross-Browser & Mobile
./references/cross-browser-checklist.md- Browser/device matrix./references/mobile-gesture-testing.md- Touch, swipe, orientation./references/shadow-dom-testing.md- Web components testing
Interactive & Forms
./references/interactive-testing-patterns.md- Forms, keyboard, drag-drop./references/functional-testing-checklist.md- Feature testing
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
./references/accessibility-testing.md- WCAG checklist, axe-core
Security
./references/security-testing-overview.md- OWASP Top 10, tools./references/security-checklists.md- Auth, API, headers./references/vulnerability-payloads.md- SQL/XSS/CSRF payloads
API & Load
./references/api-testing.md- API test patterns./references/load-testing-k6.md- k6 load test patterns
Checklists
./references/pre-release-checklist.md- Complete release checklist
CI/CD Integration
jobs:
test:
steps:
- run: npm run test:unit # Gate 1: Fast fail
- run: npm run test:e2e # Gate 2: After unit pass
- run: npm run test:a11y # Accessibility
- run: npx lhci autorun # Performance
FAQ
What does the web-testing skill do?
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.
How do I install web-testing?
Run npx skills add https://github.com/mrgoonie/claudekit-skills --skill web-testing in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/web-testing/ (personal) or .claude/skills/web-testing/ (project).
Which AI agents can use web-testing?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is web-testing safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains web-testing?
It is published by mrgoonie in mrgoonie/claudekit-skills. It has 442 recorded installs.
More from mrgoonie/claudekit-skills
backend-development
mrgoonie/claudekit-skills
Build robust backend systems with modern technologies (Node.js, Python, Go, Rust), frameworks (NestJS, FastAPI, Django), databases (PostgreSQL, MongoDB, Redis), APIs (REST, GraphQL, gRPC), authentication (OAuth 2.1, JWT), testing strategies, security best practices (OWASP Top 10), performance optimization, scalability patterns (microservices, caching, sharding), DevOps practices (Docker, Kubernetes, CI/CD), and monitoring. Use when designing APIs, implementing authentication, optimizing database queries, setting up CI/CD pipelines, handling security vulnerabilities, building microservices, or developing production-ready backend systems.
sequential-thinking
mrgoonie/claudekit-skills
Use when complex problems require systematic step-by-step reasoning with ability to revise thoughts, branch into alternative approaches, or dynamically adjust scope. Ideal for multi-stage analysis, design planning, problem decomposition, or tasks with initially unclear scope.
threejs
mrgoonie/claudekit-skills
Build 3D web apps with Three.js (WebGL/WebGPU). Use for 3D scenes, animations, custom shaders, PBR materials, VR/XR experiences, games, data visualizations, product configurators.
devops
mrgoonie/claudekit-skills
Deploy to Cloudflare (Workers, R2, D1), Docker, GCP (Cloud Run, GKE), Kubernetes (kubectl, Helm). Use for serverless, containers, CI/CD, GitOps, security audit.
chrome-devtools
mrgoonie/claudekit-skills
Browser automation, debugging, and performance analysis using Puppeteer CLI scripts. Use for automating browsers, taking screenshots, analyzing performance, monitoring network traffic, web scraping, form automation, and JavaScript debugging.
aesthetic
mrgoonie/claudekit-skills
Create aesthetically beautiful interfaces following proven design principles. Use when building UI/UX, analyzing designs from inspiration sites, generating design images with ai-multimodal, implementing visual hierarchy and color theory, adding micro-interactions, or creating design documentation. Includes workflows for capturing and analyzing inspiration screenshots with chrome-devtools and ai-multimodal, iterative design image generation until aesthetic standards are met, and comprehensive design system guidance covering BEAUTIFUL (aesthetic principles), RIGHT (functionality/accessibility), SATISFYING (micro-interactions), and PEAK (storytelling) stages. Integrates with chrome-devtools, ai-multimodal, media-processing, ui-styling, and web-frameworks skills.
Popular testing & qa skills
tdd
mattpocock/skills
Test-driven development. Use when the user wants to build features or fix bugs test-first, mentions "red-green-refactor", or wants integration tests.
grilling
mattpocock/skills
Grill the user relentlessly about a plan, decision, or idea. Use when the user wants to stress-test their thinking, or uses any 'grill' trigger phrases.
migrate-to-shoehorn
mattpocock/skills
Migrate test files from as type assertions to @total-typescript/shoehorn. Use when user mentions shoehorn, wants to replace as in tests, or needs partial test data.
run-train
lllllllama/rigorpilot-skills
Rigor Train skill for deep learning research repositories. Use when a documented or selected training command should be run conservatively for startup verification, short-run verification, full kickoff, or resume, with command, config, seed, log, checkpoint, status, and metric evidence written to standardized trainoutputs/. Do not use for environment setup, exploratory sweeps, speculative idea implementation, or end-to-end orchestration.
test-driven-development
obra/superpowers
Use when implementing any feature or bugfix, before writing implementation code
finishing-a-development-branch
obra/superpowers
Use when implementation is complete, all tests pass, and you need to decide how to integrate the work