mcpField
S
screenshotting-changelog

screenshotting-changelog

github.com/revitalb-portTesting & quality057 installsUpdated 10w ago
Repository

About screenshotting-changelog

A workflow skill for adding a visual changelog to pull requests with UI changes. It guides contributors to capture matching screenshots before and after changes, summarize the visual differences, and include them in the PR description.

Key features

  1. 01Before-and-after screenshots
  2. 02Page and component state capture
  3. 03Responsive viewport comparisons
  4. 04Dark mode and interaction-state coverage
  5. 05PR-ready visual summary

Use cases

  1. 01Document a UI change in a pull request
  2. 02Compare layouts across screen sizes
  3. 03Show reviewers changed interactive states

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/revitalb-port/skills-registry-demo --skill screenshotting-changelog

After installing, type/screenshotting-changelogin Claude Code to confirm it loaded.

Details

From the project README

Screenshot Changelog

Use this skill when preparing a pull request that includes visual/UI changes. Capture before and after screenshots to create a visual changelog that reviewers can quickly scan.

Steps

  1. Capture the "before" state — before making changes (or on the base branch), start the dev server and screenshot the affected pages:

    git stash  # or checkout the base branch

    Start the dev server, then:

    Tool: browser_navigate
Arguments: { "url": "http://localhost:3000/affected-page", "take_screenshot_afterwards": true }

    Tool: browser_take_screenshot
Arguments: { "fullPage": true, "filename": "before-homepage.png" }

    Repeat for each affected page or component state.

  2. Switch to the feature branch — apply your changes:

    git stash pop  # or checkout the feature branch

    Wait for the dev server to hot-reload (or restart it).

  3. Capture the "after" state — screenshot the same pages:

    Tool: browser_take_screenshot
Arguments: { "fullPage": true, "filename": "after-homepage.png" }

  4. Generate the changelog — create a summary describing what changed visually:

    ## Visual Changes

### Homepage
**Before:**
![before](before-homepage.png)

**After:**
![after](after-homepage.png)

Changes: Updated hero section layout, new CTA button color, added testimonials section.

  5. Include in the PR description — paste the visual changelog into the PR body so reviewers can see the changes at a glance without running the app locally.

Variations

  • Responsive comparison: use browser_resize to capture screenshots at mobile (375px), tablet (768px), and desktop (1280px) widths.
  • Dark mode comparison: if the app has a dark mode toggle, capture both themes.
  • Interactive states: capture hover states, open modals, filled forms, and error states.

Notes

  • Screenshots are saved to the workspace. You can reference them in markdown or upload them to the PR.
  • For component-level screenshots, navigate to a Storybook URL or a specific component route.
  • This is most valuable for design-heavy PRs — skip it for backend-only changes.

Comments

Markdown supported