Agent Skills: frontend-audit

Visual design verification loop for matching a goal PNG to a live render. Use when the user shares a design mock / goal image and asks to match the UI to it, asks to "iterate on this design" or "match this 1:1", or calls out visual drift in a previous UI iteration. Provides histogram color sampling, shape inspection (radius/border/shadow/bg-mode/fill-vs-context), computed-style checking on the live render, snap, and side-by-side diff. After every UI change the assistant MUST snap the live render and Read the snap with the Read tool before reporting the change done — skipping that is the #1 regression vector. Also handles regions auto-generation: the user only drops PNGs into design/, the assistant looks at each PNG and writes a sibling <name>.regions.json.

UncategorizedID: samhvw8/dotfiles/frontend-audit

Install this agent skill to your local

pnpm dlx add-skill https://github.com/samhvw8/dotfiles/frontend-audit

Skill Files

Browse the full folder contents for frontend-audit.

Download Skill

Loading file tree…

Select a file to preview its contents.