before-and-after
From the author
Captures before/after screenshots of web pages or elements for visual comparison. Use when user says "take before and after", "screenshot comparison", "visual diff", "PR screenshots", "compare old and new", or needs to document UI changes. Accepts two URLs (file://, http://, https://) or two image paths.
Install
npx skills add michaelshimeles/skills --skill before-and-after -a claude-code
Installs to .claude/skills/before-and-after/ · Each command fetches the skill straight from GitHub with the open skills CLI.
Byte-identical to the scanned commit, with the repository’s licence and a SOURCE.txt.
Want your agent to suggest skills while you type? See how to use skills from your IDE.
Safety checks on SKILL.md
- Ships scripts we have not reviewedLow
Why 82
aiqbench computes the trust score from public signals. It is not a security audit, so read a skill before you install it.
Similar skills
Closest to this one by what they do and when they are used.
- compare-screenshotsdzhng/skillsCompare screenshots against the intended design, distinguishing approved references from historical baselines. Use for iterative implementation matching, before/after visual review, objective image telemetry, or checking a lone capture for flat, empty, or badly framed content.Design★ 1.4K
- screenshotopenai/skillsUse when the user explicitly asks for a desktop or system screenshot (full screen, specific app or window, or a pixel region), or when tool-specific capture capabilities are unavailable and an OS-level capture is needed.OfficialPlanning★ 28.2K
- pr-screenshotsgetsentry/skillsCapture screenshots of the Sentry UI in a web browser, lay them out in a pull request description as before/after tables, and upload them with `gh --attach`.OfficialDesign★ 1.1K
- image-to-uihashgraph-online/awesome-codex-pluginsRecreate an image, screenshot, or mockup as a 1:1 UI implementation. Match the reference rather than redesigning it, then render and compare the result to correct visible differences.Design★ 1.4K
- uitw93/WazaProduces distinctive production UI and screenshot-grounded visual polish. Use when building or restyling pages, components, or typography. Not for backend logic or data pipelines.Design★ 7.3K
- website-screenshotsmaxritter/qualitylayerRegenerate QualityLayer website and README screenshots from the source App after its UI changes, or when refreshing the developer example gallery.Design★ 2.1K
Ratings & reviews
—
no reviews
Tried this skill? Rate it to help others. Sign in
Discussion
Join the discussion. Sign in