Claude MarketplacesSubmit
bobmatnyc avatar

Screenshot

bobmatnyc/claude-mpm-skills

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.

skills.sh installs
389
GitHub stars
79
last updated
Aug 21, 2026
View on GitHub

Install

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

Installs into .claude/skills of the current project.

Files

Screenshot-Based UI Verification

Visual verification workflow for UI changes to accelerate code review and catch responsive design issues early.

When to Use This Skill

Use this skill when:

  • Making any UI changes (components, styling, layout)
  • Implementing responsive design
  • Creating pull requests with visual changes
  • Want to demonstrate UI behavior without reviewers running code locally
  • Need to document visual state before/after bug fixes

Why Screenshot Verification Matters

Benefits

  • Faster Reviews: Reviewers see changes instantly without local setup
  • Documents Design: Creates visual record of design decisions
  • Visual Changelog: Historical record of UI evolution
  • Catches Responsive Issues: Early detection of mobile/tablet problems
  • Reduces Communication: Less back-and-forth about visual changes
  • Quality Gate: Forces conscious review of visual output

Problems It Solves

  • ❌ "I can't reproduce the layout issue locally"
  • ❌ "What does this look like on mobile?"
  • ❌ "Is this the intended design?"
  • ❌ "How does this compare to the old version?"
  • ✅ All answered with screenshots in PR

Required Screenshots

SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/bobmatnyc/claude-mpm-skills
Categories
Git & Pull Requests, Code Review & Quality, Automation & Workflows, Design & UI/UX
First seen
Jun 3, 2026

More from bobmatnyc/claude-mpm-skills

All 158

Recommended

More Git & Pull Requests
1davila7 avatargeminidavila7/claude-code-templatesUse when the user asks to run Gemini CLI for code review, plan review, or big context (>200k) processing. Ideal for comprehensive analysis requiring large conte388skills.sh installs
2zenmux avatarzenmux-contextzenmux/skillsAnswer ZenMux questions by reading the latest official docs. Use for product features, APIs, integration, pricing, models/providers, routing, fallback, streamin387skills.sh installs
3alirezarezvani avatarpost-mortemalirezarezvani/claude-skills/cs:post-mortem <decision> — Honest retrospective on an executed decision, scored against original assumptions and dissent. Closes the strategic sprint loop. Us386skills.sh installs
4community-access avatarmobile-accessibilitycommunity-access/accessibility-agentsMobile accessibility specialist for React Native, Expo, iOS (SwiftUI/UIKit), and Android (Jetpack Compose/Views). Audits accessibilityLabel, accessibilityRole, 384skills.sh installs
5mims-harvard avatartooluniverse-drug-target-validationmims-harvard/tooluniverseQuantitative drug-target validation pipeline. Scores druggability, selectivity, safety profile, ADMET feasibility, and structural tractability with a composite 384skills.sh installs
6openclaudia avatargoogle-reviewsopenclaudia/openclaudia-skillsFetch Google review ratings and review counts for businesses via DataForSEO API. Use when the user asks to check Google reviews, get review counts, compare busi384skills.sh installs