Before and After Screenshot

by michaelshimeles

Before and After Screenshot is an Automation skill for Claude Code, published by michaelshimeles in skills.

538 stars92 forkson michaelshimeles/skillsAdded 2026/09/03Repository updated 2026/09/02

View source on GitHub Download repo ZIP

agent-skillsai-agentsclaude-codecode-reviewcodexcursordeveloper-workflowgreptile

Install in seconds

Install Before and After Screenshot

Copy Before and After Screenshot into your Claude Code skills folder. Run the command in your terminal, or review the source on GitHub before installing.

terminal

npx degit https://github.com/michaelshimeles/skills/tree/main/before-and-after ~/.claude/skills/before-and-after

Requires Node.js. Downloads this skill only — not the rest of the repository — into your Claude Code skills folder.

Without Node.js

git clone https://github.com/michaelshimeles/skills.git

Clones the whole repository, then copy the skill’s own directory into your skills folder yourself.

In this catalog

Source file: before-and-after/SKILL.md in michaelshimeles/skills
Installs to: ~/.claude/skills/before-and-after
Collection: One of 6 skills cataloged from this repository
Category: Automation — 1754 skills

What Before and After Screenshot does

Before and After Screenshot captures before and after images of web pages or elements for visual comparison. Use it for UI changes, screenshot diffs, PR screenshots, or comparing two URLs or image files.

Before and After Screenshot is cataloged under Automation on DirSkills. Before and After Screenshot comes from a repository tagged agent-skills, ai-agents, claude-code, code-review and codex.

Documentation

README

Excerpt

Before-After Screenshot Skill

Package: @vercel/before-and-after Never use before-and-after (wrong package).

Agent Behavior Rules

DO NOT:

Switch git branches, stash changes, start dev servers, or assume what "before" is
Use --full unless user explicitly asks for full page / full scroll capture

DO:

Use --markdown when user wants PR integration or markdown output
Use --mobile / --tablet if user mentions phone, mobile, tablet, responsive, etc.
Assume current state is After
If user provides only one URL or says "PR screenshots" without URLs, ASK: "What URL should I use for the 'before' state? (production URL, preview deployment, or another local port)"

Execution Order (MUST follow)

This is the opening of the README. Read the full README on GitHub.

Frequently asked about Before and After Screenshot

What else does michaelshimeles publish alongside Before and After Screenshot?
Before and After Screenshot is one of 6 skills that DirSkills catalogs from michaelshimeles/skills, the repository it ships in. Its siblings there include Code Structure, Evidence-Driven Testing and Greploop. Each one is a separate skill with its own page in this directory, installs the same way Before and After Screenshot does, and is maintained by michaelshimeles in that same repository. The rest of the collection is listed on the michaelshimeles/skills page.
How does Before and After Screenshot compare to other Automation skills?
Before and After Screenshot ranks #1323 by stars among the 1754 Automation skills in this catalog. The most-starred ones next to it are Autonomous Loops, Autonomous Agent Harness and Automation Audit Ops. DirSkills ranks by the star count of the repository each skill ships in, so that order reflects how popular those repositories are rather than any review of Before and After Screenshot against them. Open each page to compare what they document and how they install.