bkinsey808/playwright-best-practices
skills/playwright-best-practices/SKILL.md
Playwright E2E test conventions for this project — AAA pattern, translation-aware selectors, mock auth, staging DB sessions, two-user flows, debugging, and CI setup. Use when authoring or editing any Playwright spec, test helper, or E2E configuration. Do NOT use for unit tests or hook tests — load unit-test-best-practices instead.
$ install --global
skillsauthnpx skillsauth add bkinsey808/songshare-effect playwright-best-practicesInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 15, 2026, 11:44 PM34.7s1 file scanned
SKILL.md
- name:
- playwright-best-practices
- description:
- >
Requires: file-read, terminal. No network access needed.
Full reference: /docs/testing/playwright-best-practices.md
Preconditions
- Read the spec file before editing.
- Check
docs/ai/rules.mdfor repo-wide constraints.
Defaults (proceed without asking)
- Apply all key rules below; edit the file already open or mentioned.
- Always ask: which spec file if not specified and cannot be inferred.
Key rules
-
AAA pattern — every test must have
// Arrange,// Act,// Assertcomments. For multi-step flows, use inline phase comments rather than collapsing everything. → full detail -
Translation-aware selectors — use
data-testidand semanticdata-*attributes; never assert on translated text strings. → full detail -
Mock auth before navigation — call
authenticateTestUser(page)beforepage.goto(); never after. → full detail -
Separate contexts for multiple users — use
browser.newContext()per user; never share a context. → full detail -
Web-first assertions — use
await expect(...).toBeVisible()with a timeout; neverwaitForTimeout. → full detail -
Real sessions for Realtime/RLS tests — use
storageStatewith pre-signed cookies instead of mocking/api/mewhen tests need actual DB rows or Supabase Realtime. → full detail -
Session expiry — JWT expires after 7 days; re-run the matching
e2e:create-session:*command when you see401 Not authenticated. → full detail -
Single-spec debugging — use
test:e2e:dev:staging-db:file -- <spec> --project=chromiumto isolate failures before broadening. → full detail
Output format
Write code changes directly. After edits, output a brief bullet list of which conventions were applied and which validation commands were run.
Error handling
- If
npm run lintfails after changes, report verbatim and fix before declaring success. - If a test fails due to a missing session file, instruct the user to run the matching
e2e:create-session:*command rather than attempting to fix it in code.
Validation
npm run lint
Skill handoffs
- Unit or hook tests → load
unit-test-best-practicesorunit-test-hook-best-practices. - TypeScript errors in spec files → load
typescript-best-practices.
Related Skills
bkinsey808/zustand-best-practices
tools
VerifiedTrustedCommunity
Zustand state management patterns for this project — store creation, selectors, Immer middleware, async actions with loading states, devtools, persist, and testing. Use when authoring or editing Zustand stores (use*Store files) or components that subscribe to stores. Do NOT use for React component structure or TypeScript-only utilities.
2SKILL.mdUpdated Apr 15, 2026
bkinsey808/write-skill
testing
VerifiedTrustedCommunity
How to write, update, or split skill files in this repo. Use when creating a new SKILL.md, updating an existing one, or deciding whether to put content in a skill vs. docs/.
2SKILL.mdUpdated Apr 15, 2026
bkinsey808/unit-test-hook-best-practices
development
VerifiedTrustedCommunity
Complete guide for testing React hooks — renderHook, Documentation by Harness, installStore, fixtures, subscription patterns, lint/compiler traps, and pre-completion checklist. Read docs/testing/unit-test-hook-best-practices.md for the full reference.
2SKILL.mdUpdated Apr 15, 2026
bkinsey808/unit-test-best-practices
development
VerifiedTrustedCommunity
Vitest unit test authoring for this repo — setup, mocking, API handler testing, and common pitfalls for non-hook code. Use when the user asks to add, update, fix, or review unit tests for utilities, components, API handlers, or scripts. Do NOT use for React hook tests — load unit-test-hook-best-practices instead.
2SKILL.mdUpdated Apr 15, 2026