Capture and document UI changes with before/after screenshots for pull requests. Use when creating PRs that include visual changes to ensure reviewers can assess design modifications.
Inherits all available tools
Additional assets for this skill
This skill inherits all available tools. When active, it can use any tool Claude has access to.
Guidance for capturing and documenting UI changes with before/after screenshots when creating pull requests.
Capture the current state before implementing UI modifications:
1. browser_resize(width: 320, height: 568) # Mobile-first
2. browser_navigate to the target page
3. browser_snapshot to identify elements
4. browser_take_screenshot(element: "Target component", ref: "E123")
Save or note the screenshot for later comparison.
Capture the same view after your modifications:
1. Refresh or navigate to the updated page
2. browser_snapshot to get updated refs
3. browser_take_screenshot(element: "Target component", ref: "E123")
For persistent URLs in PR descriptions, upload to an image hosting service:
# Using curl with 0x0.st (ephemeral hosting)
curl -F 'file=@screenshot.png' https://0x0.st
# Or use project-specific image storage
Note: 0x0.st URLs expire. For permanent records, use GitHub's drag-and-drop image upload in PR descriptions or project documentation storage.
Include a visual comparison section in your PR description:
## Visual Changes
| Before | After |
|--------|-------|
|  |  |
### What Changed
- [Specific visual change 1]
- [Specific visual change 2]
Choose viewport size based on what you're documenting:
| Target | Width | Height | Use Case |
|---|---|---|---|
| Mobile | 320 | 568 | Mobile-first responsive |
| Tablet | 768 | 1024 | Tablet layouts |
| Desktop | 1280 | 800 | Standard desktop |
| Wide | 1440 | 900 | Wide desktop layouts |
Default to mobile (320px) for documentation - if it looks good on mobile, it usually scales up well.
This skill complements the /majestic-engineer:git:create-pr command. Before creating a PR with UI changes:
## Visual Changes
| Before | After |
|--------|-------|
|  |  |
### Changes Made
- Increased button padding from 8px to 12px for better touch targets
- Added subtle shadow for depth
- Improved contrast ratio from 3.5:1 to 4.8:1 (now WCAG AA compliant)
### Tested Viewports
- [x] Mobile (320px)
- [x] Tablet (768px)
- [x] Desktop (1280px)
visual-validator agent - For rigorous visual QA after changesui-ux-designer agent - For iterative design refinementweb-browser skill - For browser automation capabilities