api-patterns
API design principles and decision-making. REST vs GraphQL vs tRPC selection, response formats, versioning, pagination.
webapp-testing
Web application testing principles. E2E, Playwright, deep audit strategies.
Full skill instructions
Discover and test everything. Leave no route untested.
Execute these for automated browser testing:
| Script | Purpose | Usage |
|---|---|---|
scripts/playwright_runner.py | Basic browser test | python scripts/playwright_runner.py https://example.com |
| With screenshot | python scripts/playwright_runner.py <url> --screenshot | |
| Accessibility check | python scripts/playwright_runner.py <url> --a11y |
Requires: pip install playwright && playwright install chromium
| Target | How to Find |
|---|---|
| Routes | Scan app/, pages/, router files |
| API endpoints | Grep for HTTP methods |
| Components | Find component directories |
| Features | Read documentation |
/\ E2E (Few)
/ \ Critical user flows
/----\
/ \ Integration (Some)
/--------\ API, data flow
/ \
/------------\ Component (Many)
Individual UI pieces
| Priority | Tests |
|---|---|
| 1 | Happy path user flows |
| 2 | Authentication flows |
| 3 | Critical business actions |
| 4 | Error handling |
| Practice | Why |
|---|---|
| Use data-testid | Stable selectors |
| Wait for elements | Avoid flaky tests |
| Clean state | Independent tests |
| Avoid implementation details | Test user behavior |
| Concept | Use |
|---|---|
| Page Object Model | Encapsulate page logic |
| Fixtures | Reusable test setup |
| Assertions | Built-in auto-wait |
| Trace Viewer | Debug failures |
| Setting | Recommendation |
|---|---|
| Retries | 2 on CI |
| Trace | on-first-retry |
| Screenshots | on-failure |
| Video | retain-on-failure |
| Scenario | Value |
|---|---|
| Design system | High |
| Marketing pages | High |
| Component library | Medium |
| Dynamic content | Lower |
| Area | Tests |
|---|---|
| Status codes | 200, 400, 404, 500 |
| Response shape | Matches schema |
| Error messages | User-friendly |
| Edge cases | Empty, large, special chars |
tests/
├── e2e/ # Full user flows
├── integration/ # API, data
├── component/ # UI units
└── fixtures/ # Shared data
| Pattern | Example |
|---|---|
| Feature-based | login.spec.ts |
| Descriptive | user-can-checkout.spec.ts |
| Strategy | Use |
|---|---|
| Per file | Playwright default |
| Sharding | Large suites |
| Workers | Multiple browsers |
| ❌ Don't | ✅ Do |
|---|---|
| Test implementation | Test behavior |
| Hardcode waits | Use auto-wait |
| Skip cleanup | Isolate tests |
| Ignore flaky tests | Fix root cause |
Remember: E2E tests are expensive. Use them for critical paths only.
API design principles and decision-making. REST vs GraphQL vs tRPC selection, response formats, versioning, pagination.
Production deployment principles and decision-making. Safe deployment workflows, rollback strategies, and verification. Teaches thinking, not scripts.
Game design principles. GDD structure, balancing, player psychology, progression.
Game audio principles. Sound design, music integration, adaptive audio systems.
Architectural decision-making framework. Requirements analysis, trade-off evaluation, ADR documentation. Use when making architecture decisions or analyzing system design.
Mobile game development principles. Touch input, battery, performance, app stores.
Multi-agent orchestration patterns. Use when multiple independent tasks can run with different domain expertise or when comprehensive analysis requires multiple perspectives.
Socratic questioning protocol + user communication. MANDATORY for complex requests, new features, or unclear requirements. Includes progress reporting and error handling.
Internationalization and localization patterns. Detecting hardcoded strings, managing translations, locale files, RTL support.
Generative Engine Optimization for AI search engines (ChatGPT, Claude, Perplexity).
Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.
Multiplayer game development principles. Architecture, networking, synchronization.
Generate, edit, and beat-sync AI video with leading models in one workspace.
The world's fastest calendar for remote work
Transform Your Design with AI Designer by ImgCreator.ai
Revolutionizing Video Production with AI-Powered Creativity
Extend an image past the frame and let AI fill the new aspect ratio.
Discover your celebrity doppelgänger with StarByFace!
ChainClarity explains 700+ crypto whitepapers in plain English, with layered summaries, comparisons, research tools, alerts, and a $4.99 Pro plan.
Opus.ai: Revolutionize Your Web Experience