How do I install the Screenshotting Changelog skill?

Run npx skillmds add spencerpauly/screenshotting-changelog in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Screenshotting Changelog safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: makes network calls. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Screenshotting Changelog?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Screenshotting Changelog free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Screenshotting Changelog?

spencerpauly (@spencerpauly) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Screenshotting Changelog by spencerpauly

Name: Screenshotting Changelog
Rating: 4.5 (4 reviews)
Author: spencerpauly

File contents

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

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.

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).

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

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

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.

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.

---name: screenshotting-changelogdescription: Generate a visual changelog or PR description by taking before/after screenshots of UI changes using Cursor's built-in browser. Use when preparing a PR with visual changes.--- # 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: ```bash 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: ```bash 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: ```markdown ## 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.

Frequently asked questions