name: playwright-ui-feature-capture description: Run focused Playwright CLI UI feature checks with checkpoint screenshots saved to a local gitignored folder. Use when asked to validate a specific TrueCAD UI workflow end-to-end (for example sketch-to-extrude) and provide visual artifacts for each major step.
Playwright Ui Feature Capture
Overview
Use this skill to run one concrete UI flow with Playwright CLI and capture evidence at each checkpoint. The default flow is sketch -> extrude and writes screenshots under .local-playwright-captures/ (gitignored).
Workflow
- Ensure app services are available:
npm run app:up
- Run the capture flow:
skills/playwright-ui-feature-capture/scripts/run_sketch_extrude_capture.sh
- Optional environment overrides:
PLAYWRIGHT_BASE_URL: UI URL (defaulthttp://127.0.0.1:5174)PLAYWRIGHT_START_WEB:neverby default for already-running appPLAYWRIGHT_CAPTURE_DIR: root capture dir (default.local-playwright-captures/sketch-extrude)
- Locate screenshots:
- Saved to
<PLAYWRIGHT_CAPTURE_DIR>/<timestamp>/ - Checkpoints are named in order:
01-home.pngto06-extrude-created.png
Implementation Notes
- Test file:
tests/e2e/sketch-extrude-capture.spec.ts - Keep this flow deterministic: fixed selectors, fixed checkpoint names.
- If a selector changes in UI, update the test before changing skill instructions.