Menu
Before/after screenshot workflow for UI PRs. Covers capture techniques, annotation, and embedding in PRs and changelogs.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
PR-based development workflow for droneroute. Use when implementing features, fixing bugs, or making any code changes. Covers branch creation, CI checks, changelog entries, and PR creation.
WCAG 2.1 AA accessibility patterns for droneroute — color contrast, ARIA, keyboard navigation, Leaflet map a11y, and Radix UI component checklist.
Playwright testing patterns for droneroute. Covers screenshot automation, test structure, and CI integration.
Security patterns for droneroute — JWT auth guards, input validation, SQL injection prevention, and environment variable safety.
GitHub Issues tracking workflow for droneroute. Use when managing tasks, features, and bugs.
| name | ui-screenshots |
| description | Before/after screenshot workflow for UI PRs. Covers capture techniques, annotation, and embedding in PRs and changelogs. |
Guide capturing, annotating, and embedding before/after screenshots in PRs that change UX or UI.
Before making any code changes, capture the current state. This is non-negotiable — you cannot recapture the original state after modifying files.
Make your code changes.
Rebuild and capture the same pages/states.
Use red arrows and labels to highlight what changed:
rgba(255, 60, 60, 0.7) stroke, 3px widthrgba(255, 60, 60, 0.55) stroke, 2-3px widthrgba(255, 60, 60, 0.7) background, 14px boldAll screenshots go in:
docs/screenshots/
Naming convention:
before-<feature>.png — original stateafter-<feature>.png — annotated "after" screenshotUse GitHub raw image URLs pointing to the commit SHA (not the branch name):
# Build and start both backend and frontend
npm run build
npm run start &
# Frontend dev server (for hot reload if needed)
npm run dev -w packages/frontend
docs/screenshots/npm run build passes locally before pushing