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.
Capture before/after screenshots of UI changes when creating PRs. Uses browser tools to document visual modifications, helping reviewers assess design changes without running the app.
/plugin marketplace add majesticlabs-dev/majestic-marketplace/plugin install majestic-engineer@majestic-marketplaceThis 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 refinementCreate beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Guide users through a structured workflow for co-authoring documentation. Use when user wants to write documentation, proposals, technical specs, decision docs, or similar structured content. This workflow helps users efficiently transfer context, refine content through iteration, and verify the doc works for readers. Trigger when user mentions writing docs, creating proposals, drafting specs, or similar documentation tasks.