Screenshot

This systematizes the often-skipped practice of documenting UI changes with screenshots at three viewport sizes: desktop (1920x1080), tablet (768x1024), and mobile (375x667). It includes browser DevTools instructions, Playwright and Puppeteer scripts for automated capture, and a comprehensive PR template covering before/after comparisons and interaction states. The real value is in making visual verification non-negotiable, catching responsive design breaks before review, and eliminating the "works on my machine" problem for frontend changes. The automated testing setup with Playwright is solid if you want to graduate from manual screenshots to regression testing. Honestly, the 44x44px touch target reminder alone will save mobile users from rage-tapping tiny buttons.

Install to Claude Code

npx -y skills add bobmatnyc/claude-mpm-skills --skill screenshot --agent claude-code