web-testing
Web-testing is a comprehensive testing framework integrating Vitest, Playwright, and k6 for unit, integration, E2E, load, security, visual regression, and accessibility testing. Use it to validate application functionality across layers, detect UI regressions, verify cross-browser compatibility, test mobile interactions, measure Core Web Vitals performance, and conduct pre-release security scanning.
git clone --depth 1 https://github.com/mrgoonie/claudekit-skills /tmp/web-testing && cp -r /tmp/web-testing/.claude/skills/web-testing ~/.claude/skills/web-testingSKILL.md
# Web Testing Skill
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 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
```yaml
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
```Manage MCP (Model Context Protocol) server integrations - discover tools/prompts/resources, analyze relevance for tasks, and execute MCP capabilities. Use when need to work with MCP servers, discover available MCP tools, filter MCP capabilities for specific tasks, execute MCP tools programmatically, or implement MCP client functionality. Keeps main context clean by handling MCP discovery in subagent context.
Stage all files and create a commit.
Stage, commit and push all code in the current branch
Create a pull request
Create a new agent skill
Utilize tools of Model Context Protocol (MCP) servers
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.
Process and generate multimedia content using Google Gemini API. Capabilities include analyze audio files (transcription with timestamps, summarization, speech understanding, music/sound analysis up to 9.5 hours), understand images (captioning, object detection, OCR, visual Q&A, segmentation), process videos (scene detection, Q&A, temporal analysis, YouTube URLs, up to 6 hours), extract from documents (PDF tables, forms, charts, diagrams, multi-page), generate images (text-to-image, editing, composition, refinement). Use when working with audio/video files, analyzing images or screenshots, processing PDF documents, extracting structured data from media, creating images from text prompts, or implementing multimodal AI features. Supports multiple models (Gemini 2.5/2.0) with context windows up to 2M tokens.