Skills

A collection of agent skills for Claude Code. Each skill is a folder containing a SKILL.md with frontmatter (name, description) and instructions that Claude loads on demand when the task matches.

Available skills

before-and-after

Captures before/after screenshots of web pages or elements and outputs a PR-ready markdown comparison table. It drives the @vercel/before-and-after CLI.

Use it when:

• A PR needs visual proof that a UI change does what it claims
• You want a | Before | After | table generated and uploaded in one step
• Comparing two URLs, two existing images, or a mix of both

Vendored from vercel-labs/before-and-after (PolyForm Shield 1.0.0, license included in the folder). Install the CLI with npm i -g @vercel/before-and-after agent-browser.

code-structure

Service layer architecture guidance. Enforces a two-layer separation where actions orchestrate domain rules (the "why/when") and a service layer centralizes reusable operational mechanics (the "how").

Use it when:

• Multiple workflows duplicate the same operational logic
• You're deciding what belongs in actions vs. shared services
• A bug fix in one flow doesn't propagate to others doing the same thing
• Adding a feature that shares mechanics with existing ones

Includes a migration checklist for extracting shared logic safely and a table of anti-patterns to avoid (god services, leaky services, over-abstraction).

evidence-driven-testing

Records visual proof while testing UI behavior. The agent drives the app live via computer use (or cua-driver when the harness has no computer-use tools) while the bundled recorder captures the session, then posts the video and a results summary to the PR and tracker issue. The recorder (scripts/evidence.py, Python 3 + FFmpeg) runs on Linux, macOS, and Windows and has doctor, start, annotate, and stop commands. It timestamps each annotation as the agent tests, burns them into evidence.mp4 on stop, and summarizes them in a generated report.md and manifest.json. Headless environments swap the recorder for scripted screenshots and Playwright captures; non-UI changes still get evidence (measured numbers, output pairs, transcript excerpts).

Use it whenever a change needs verifiable evidence that it works, instead of prose claims.

The recorder needs ffmpeg/ffprobe built with libx264 and the ass filter, plus a screen-capture source: X11 (DISPLAY) or wlroots Wayland (wf-recorder; GNOME/KDE are not supported) on Linux, Screen Recording permission on macOS, any standard ffmpeg on Windows. python3 scripts/evidence.py doctor reports both. The raw capture is MPEG-TS, so a crashed or hard-killed recorder still yields usable evidence. The headless path needs only a running app and a scriptable browser (Playwright via npx). Posting evidence requires the gh CLI (or equivalent). tests/test_evidence.py smoke-tests the recorder end to end with a synthetic video source (python3 -m pytest tests/ -q).

greploop