Agent skill
sketch-playwright-qa
Playwright QA workflow for Sketch Magic. Use when running mobile flow tests, visual baselines, snapshot updates, or debugging flaky WebKit/Chromium runs and port conflicts.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/sketch-playwright-qa
SKILL.md
Sketch Playwright QA
Overview
Standardize Playwright test runs for mobile flow and visual baselines, including snapshot updates and trace review.
Quick Start
- Mobile flow:
PLAYWRIGHT_PORT=3020 pnpm test:e2e tests/e2e/mobile-flow.spec.ts - Visual baselines:
PLAYWRIGHT_PORT=3021 pnpm test:e2e tests/e2e/visual.spec.ts - Update snapshots: append
--update-snapshots
Workflow
1) Pick a port
- Use a clean port (e.g., 3020–3030) to avoid conflicts.
- Set
PLAYWRIGHT_PORTin the command.
2) Run required suites
- Mobile flow:
tests/e2e/mobile-flow.spec.ts - Visual baselines:
tests/e2e/visual.spec.ts
3) Handle failures
- Review trace/video artifacts under
test-results/. - If a snapshot mismatch is expected, re-run with
--update-snapshots. - If flakiness appears, check animations or timing.
4) Record evidence
- Keep a short log of commands + ports used.
- Capture failing screenshots/videos when needed.
- Use
qa-verificationfor the standard evidence format.
References
references/playwright-workflow.md— exact commands, snapshot guidance, and troubleshooting.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?