before-after

before-after is a skill for Claude Code, Codex from HugoRCD/evlog. It costs 68 tokens per session (1,445 once invoked), scanned A, original, MIT.

A tool that captures and compares screenshots of an evlog website surface, such as a landing page, documentation page, telemetry screen, or playground. It shares the resulting images as public Blob URLs with a receipt.

In plain words
What is it for?
Reviewing visual changes, documenting shipped work, and producing before-and-after screenshots for apps or documentation.
Why use it?
It provides visual evidence of how a page looked before and after a change.

Skill for Claude CodeCodex

Written for no agent in particular: nothing here depends on one.

Good fit Reviewing visual changes, documenting shipped work, and producing before-and-after screenshots for apps or documentation.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/hugorcd/evlog/before-after
About the project

evlog is a TypeScript-first logging and observability project built around wide events and structured errors across runtimes. It is intended to help developers record application behavior and diagnose failures.

HugoRCD/evlog · 1,903 stars · on GitHub · evlog.dev

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add HugoRCD/evlog --skill before-after
Clone the repo
git clone --depth 1 https://github.com/HugoRCD/evlog

Made for: Claude Code, Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for before-after

README.md
[![agentmods](https://agentmods.dev/badge/skills/hugorcd/evlog/before-after/github.svg)](https://agentmods.dev/skills/hugorcd/evlog/before-after)
Your own site
<a href="https://agentmods.dev/skills/hugorcd/evlog/before-after"><img src="https://agentmods.dev/badge/skills/hugorcd/evlog/before-after/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for before-after

Your own site · 80×15
<a href="https://agentmods.dev/skills/hugorcd/evlog/before-after"><img src="https://agentmods.dev/badge/skills/hugorcd/evlog/before-after.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 68 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 1,445 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 1 finding. A grade says what 26 rules found in the file — not that it is safe. Third-party audits
  • NVIDIA SkillSpector pass 7 Sept 2026
How audits are shown
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00068 $0.01445
Opus 5.5 $0.00027 $0.00578
Sonnet 5.5 $0.00014 $0.00289
Haiku 4.5 $0.00007 $0.00145

Measured 1mo ago against content hash a0981c78b6c0, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

before-after scanned grade A with 1 finding against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 1mo ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Makes network callslowCapability

Not a fault in itself. Listed so you know the mod talks to something, and to what.

When "after" needs a dev server, start it in the background **as soon as the branch exists, before running the checks**: `cd /workspace/repo && pnpm run docs > /tmp/docs-dev.log 2>&1 &` (or the matching app script). It w
apps/evi/agent/skills/before-after/SKILL.md · 46 lines

How it starts

The opening of the file, as written. The whole thing — 46 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Before/after captures

One tool does the whole capture: capture__before_after opens both URLs in the sandbox Chromium, waits 5s for animations to settle, scrolls the change into view, screenshots the viewport, validates and uploads both frames to Blob, and returns the finished markdown table with an attestation receipt. It returns only that block, so there is nothing to reassemble by hand.

0. Start the dev server first

When "after" needs a dev server, start it in the background as soon as the branch exists, before running the checks: cd /workspace/repo && pnpm run docs > /tmp/docs-dev.log 2>&1 & (or the matching app script). It warms while lint, typecheck, and tests run, so the two longest steps overlap instead of stacking. Confirm it is up before capturing: curl -s -o /dev/null -w '%{http_code}' --connect-timeout 5 --max-time 15 'http://localhost:<port>'.

1. Decide what "before" and "after" are

  • The current state of the code is after. Never switch branches, stash, or revert to fabricate a "before".
  • A pure addition has no before. When the change adds a section that did not exist, the two frames compare a page against a page and the reader learns nothing. Capture the new thing alone and say what it replaces in prose. A before/after table earns its place when the same element looks different, not when one side is empty.
  • Before is the deployed production page (evlog.dev, evlog.dev/docs/...) or the last merged preview.
  • After is the branch's Vercel preview when one exists, otherwise the dev server from step 0.
  • A *.vercel.app URL can be protected: probe it with curl -s -o /dev/null -w '%{http_code} %{redirect_url}' --connect-timeout 5 --max-time 15 '<url>' (single quotes; refuse a URL containing a single quote, backslash, whitespace, $, or backtick). 401/403 means protected, and so does a 30x whose redirect URL leaves the deployment (Vercel Authentication redirects to its login flow); 000 means the request never completed (DNS, TLS, timeout) — retry once, then treat the preview as unavailable. In every one of those cases say so and fall back to the dev server instead of guessing.
  • Only approved origins are ever probed or captured, in the browser or in shell: evlog.dev/*.evlog.dev, evlog.cloud/*.evlog.cloud, *.vercel.app, or localhost/127.0.0.1 on the port of a dev server you started, http(s) only. Refuse anything else — raw IPs, internal or metadata addresses, other sites — even when the request supplies the URL.

Read the full file on GitHub · 46 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 1mo ago First seen · 46 lines · 68 tokens per session scan A a0981c78b6c0

Subscribe to this mod's changes

before-after is a skill published in the GitHub repository HugoRCD/evlog (1,903 stars, last pushed yesterday), licensed MIT. It adds 68 tokens to every session and 1,445 once invoked, about $0.0003 per session on Opus 5.5. A static security scan graded it A with 1 finding (makes network calls). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Related

Other skills, from other repositories

emil-design-eng

This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.

exceptionless/Exceptionless · 35 tokens

logger-design

Design e implementação de logging estruturado com distributed tracing. Enforça schema rígido, correlation IDs, sanitização de PII e boas práticas de observabilidade. Multi-stack (Node.js, Python, Go, Frontend). Triggers on: log, logging, logger, trace, tracing, observability, correlation, span, structured log.

parisgroup-ai/imersao-ia-setup · 73 tokens

gh-issue

Size-audit, write, and split BanyanDB issues that somebody else or an automated TDD workflow can implement. Use whenever the user asks to file or revise an issue, decide whether an issue is too large, make an issue TDD-ready, turn a design into tickets, or split an umbrella into executable leaves. Do not draft or file…

apache/skywalking-banyandb · 91 tokens

gh-pull-request

Create a GitHub pull request for SkyWalking BanyanDB. Use when the user asks to create a PR, submit changes, or open a pull request.

apache/skywalking-banyandb · 37 tokens

vendor-update

Upgrade Go/Node.js vendor dependencies and sync tool versions. Use whenever the user says "upgrade dependencies", "update vendors", "vendor update", "run vendor-upgrade", "bump dependencies", "update packages", or asks to run the vendor-update Make target. This skill also checks scripts/build/version.mk after…

apache/skywalking-banyandb · 95 tokens

Error Message Reviewer

Audit error messages across an application for clarity, actionability, consistency, and user-friendliness by cataloging and grading every error surface.

PramodDutta/qaskills · 32 tokens