Interface Polish
En konkret, checklista-driven rubrik för UI-puts: radie, skuggor, träffytor, animationstider.
Testad · Fungerar
Vad den gör
En design-ingenjörschecklista för att få gränssnitt att kännas polerade — koncentrisk kantradie, optisk justering, lagerade skuggor över kanter, delade/förskjutna in-animationer, tabulära siffror, minst 40x40px träffytor och regler för ingen layoutförskjutning — med ett obligatoriskt före/efter markdown-tabellutdataformat. Använd vid byggande av UI, granskning av frontend-kod eller arbete med visuella/animationsdetaljer.
Testrapport
Förvandlade en vag 'den här knappen känns fel'-granskning till fyra mätbara fynd (32px träffyta under minimikravet på 40px, felmatchad kapslad border-radius, transition-all, saknade tabular-nums), var och en mappad till en numrerad princip och infogad i skillens egen obligatoriska före/efter-tabell.
Testad: 2026-07-14 · Claude Code 2.x (agent harness)
Installation
git clone https://github.com/wellwelwel/blue-spec cd blue-spec mkdir -p ~/.claude/skills cp -r .claude/skills/interface ~/.claude/skills/interface
Kommandon och exempelprompter
/interfaceEn konkret, checklista-driven rubrik för UI-puts: radie, skuggor, träffytor, animationstider.
Skills triggas av vanliga förfrågningar — inga kommandon att memorera. Efter installationen aktiverar prompter som dessa skillen (på engelska):
This button feels off, can you polish the interaction?Review this component's CSS for spacing and animation issues.Add a nice enter animation to this modal component.