before-and-after

Community

Visualize UI changes with before/after shots.

Authorvijaykpatel
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Captures before/after screenshots of web pages or elements for visual comparison. Use when you need to document UI changes or verify visual regressions across two states (file://, http(s) URLs).

Core Features & Use Cases

  • Deterministic screenshot capture of before and after states using a headless agent, across two URLs or image paths.
  • Flexible capture options: full-page, specific selectors, and viewport presets (mobile/tablet).
  • Upload and share: generate PR-ready markdown tables or clipboard-ready links for quick collaboration.

Quick Start

Provide two URLs or image paths for the before and after states, and run the tool to capture and upload the screenshots.

Dependency Matrix

Required Modules

curlagent-browserghpbcopyxclip

Components

scripts

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: before-and-after
Download link: https://github.com/vijaykpatel/Rajat-Mahotsav-Website/archive/main.zip#before-and-after

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.