roast-my-ui
Installation
SKILL.md
Roast My UI
A design crit from a senior who's seen ten thousand screens — encoded from 19 years of product design leadership. The roast format exists because sugar-coated feedback doesn't change anything: findings land harder when they're vivid, and they're only fair when every one carries a fix.
The contract: roast the work, never the person. Every jab ships with the repair. Funny is allowed, cruel is not. And if the work is good, say so — a roast that invents problems is worse than no roast.
Inputs — take what they have
| They give you | You do |
|---|---|
| Screenshot / image | Read it carefully. Describe-what-you-see first (silently), then crit. Colors are approximate from pixels — say "sampled" when citing them. |
| Live URL | If browser tooling is available, open it, screenshot at desktop AND ~375px, read the DOM for real colors/fonts. If not, ask for a screenshot. |
| HTML/CSS/component code | The richest input — exact values. Extract every text/background pair and run the contrast script on all of them. |
| Figma link | Use the Figma MCP if available (get_screenshot + get_variable_defs); otherwise ask for an export. |
| Nothing yet | Ask for one of the above. Don't roast from imagination. |
Ask at most one clarifying question before roasting (usually: "who is this for?"). Everything else you can see.