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

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.

agentmods
npx agentmods add skills/hugorcd/evlog/before-after
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.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.svg" alt="Measured on agentmods" 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. Scan, not verified.
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 $0.00068 $0.01445
Opus 5 $0.00034 $0.00723
Sonnet 5 $0.00014 $0.00289
Haiku 4.5 $0.00007 $0.00145

Measured 4d ago against content hash a0981c78b6c0, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, 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 4d 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. 4d 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,831 stars, last pushed 2d ago), licensed MIT. It adds 68 tokens to every session and 1,445 once invoked, about $0.0003 per session on Opus 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

frontmcp-observability

Use when adding tracing, structured logging, metrics, or monitoring to a FrontMCP server. Covers zero-config OpenTelemetry distributed tracing across all flows; the this.telemetry API for custom spans, events, and attributes in tools, plugins, agents, and skills; structured JSON logging with trace correlation and…

agentfront/frontmcp · 177 tokens

golang-observability-opentelemetry

Instrumenting Go applications with OpenTelemetry for distributed tracing, Prometheus for metrics, and structured logging with slog.

bobmatnyc/claude-mpm-skills · 31 tokens

Observability Checklist

Reviews a service or codebase against a full observability checklist — logs, metrics, traces, and alerting gaps.

Notysoty/openagentskills · 28 tokens

anyrobot-shadcn-frontend-js

AnyRobot 前端开发核心指南:提供 JavaScript + React + shadcn/ui 开发的精简实用规范和最佳实践。 当用户需要前端开发指导、组件开发或项目结构建议时触发。 本技能提供实际可用于项目开发的核心代码示例和开发指南。.

opsrobot-ai/opsrobot · 74 tokens

数据模型文档生成

当用户要生成或更新 Doris 表的数据模型 Markdown(三一级标题:数据摘要、数据表列、JSON扩展字段)、从 Doris 拉取元数据与至少 100 行样本,并由脚本或 --llm 补全说明时启用。.

opsrobot-ai/opsrobot · 64 tokens

fix-loop

Use when a Java app that has stacktale installed is failing — after running it or its tests, to find what broke, fix it, and confirm the fix by re-running and checking for new errors. Also use when asked to "check the errors", "what's failing", or to work through errors-ai.log.

stacktale/stacktale · 68 tokens