The details people feel. Measured and fixed.
Nobody can say why an interface feels cheap, but everyone feels it: seven radii where three would do, a shadow that looks like dirt, a button 2px taller than its neighbor, an arrow below the text. The skill measures those details on the real page, shows the scales it really uses, and fixes them at the tokens.
npx skills add c0le0ni/skills --skill coleoni-polish
Built section by section. Finished in one pass.
A cake order page for the bakery, each section copied from a different mockup. 8 findings, one of them a div pretending to be a button. With tokens for radius, shadow and spacing, none.
/* each section from a different mockup */
.card { border-radius: 12px; padding: 23px;
box-shadow: 0 2px 4px rgba(0,0,0,.5) }
.card:nth-child(2) { border-radius: 16px; padding: 10px }
.card .pic { border-radius: 12px }
.btn { border-radius: 6px; padding: 13px 20px 11px }
.btn svg { margin-top: 5px }
.btn.alt { border-radius: 999px; padding: 9px 22px }
.send { /* a div */ border-radius: 8px }
What it measures.
From the computed style of every visible element, so it works on any stack.
| Check | What counts as a problem |
|---|---|
| Corner radii | More than 4 different values |
| Nested corners | An inner radius that doesn’t follow outer − gap |
| Shadows | More than 3 kinds; black, dense and barely blurred |
| Spacing | Padding, gaps and margins off the 4px grid |
| Buttons | More than 2 combinations of height, radius and size |
| Fake buttons | Styled like a button, built as a div |
| Hover | Buttons that don’t change under the pointer |
| Icons and labels | An icon 1.5px off the text’s center; a label off the button’s center |
One command, any agent.
The only package is playwright-core, installed by the agent on first use. Part of the interface family: /coleoni-interface runs it with type, color and layout.
npx skills add c0le0ni/skills --skill coleoni-polish
/coleoni-polish http://localhost:3000
-g-a claude-code-a codexnpx skills add c0le0ni/skillsA page, a section, a component.
It shows the report first. Code changes only when you say so.
Polish a page.
/coleoni-polish http://localhost:3000/pricing
Only the cards.
/coleoni-polish the product cards, fix it
Turn it into tokens.
/coleoni-polish the whole site, propose radius, shadow and spacing tokens
The engine, from the terminal.
node polish.mjs http://localhost:3000 --out polish-report
| Option | What it does |
|---|---|
--select "main" | Only one part of the page |
--width 1280 | Viewport width |
--lang en|pt | Language of the report |
Finished is in the details. Measure them.
npx skills add c0le0ni/skills --skill coleoni-polish