refresh-the-pictures

Regenerates committed poster images and triages visual regressions after design changes.

Updated Jul 28, 2026
One-click install
npx skills add https://github.com/oleg-vasilyev/FoolProof --skill refresh-the-pictures-oleg-vasilyev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: refresh-the-pictures
Source: https://github.com/oleg-vasilyev/FoolProof/tree/main/.claude/skills/refresh-the-pictures
Command: npx skills add https://github.com/oleg-vasilyev/FoolProof --skill refresh-the-pictures-oleg-vasilyev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Committed pictures (posters, OG previews, icons) silently drift out of sync with the code that draws them, and automated gates that compare SVG output cannot detect when the renderer itself starts drawing nonsense. This Skill provides the checklist and triage procedure for keeping every committed image accurate after a visual change lands. ## Core Features & Use Cases - Picture regeneration checklist: Walks a table of every committed image — posters in every language and format, OG previews, favicons, the design page — and states what catches each one going stale. - Edge-case gallery: Builds hostile, constructed test cases (widest glyphs, longest names, empty histories) via node scripts/tools/tools.ts gallery and validates them against the product's actual limits. - Reader briefing and triage: Defines how to brief a fresh-eyes poster-reader agent (two calls, regenerated pictures only) and how to interpret its findings, distinguishing number errors from wording errors. - Use Case: After a design change lands in code or docs-check reports posters out of step, run this gate to redraw affected images, measure render time against the e2e quiet window, and send results to the reader before the final commit. ## Quick Start After the diff review, ask the assistant to refresh the pictures and triage whatever the poster-reader reports.

Frequently Asked Questions about refresh-the-pictures

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I regenerate committed poster images after a design change?▼

Run node scripts/tools/tools.ts posters to redraw the SVG and raster outputs, then commit both halves. The SVG is the reviewable diff; the PNG and WebP are what users actually see in the README and on the site.

How do I build edge cases for poster rendering tests?▼

Run node scripts/tools/tools.ts gallery to draw every poster across constructed extremes like the widest glyph, longest names, and empty histories. Cases must be hostile constructions inside the product's real limits, not plausible samples, and must match the committed cases list.

Why does the SVG comparison gate pass while posters render incorrectly?▼

The gate compares generated SVG against the renderer, so it cannot detect the renderer itself drawing nonsense, such as text overflowing a card. A fresh-context reader agent must visually inspect regenerated pictures to catch these defects.

When should the poster-reader agent be briefed with the approved mockup?▼

Only on a second, separate call. The first reading must be cold, without the mockup, because holding the approved design prevents the reader from evaluating what appears on the chart with fresh eyes.

What are the limitations of automated image regression checks?▼

Byte and dimension checks confirm files exist and fit budgets but not content correctness, and raster output is never diffed to avoid pulling the resvg binary into the docs gate. Hand-made images like OG previews and icons have no generator gate at all.