Interface Polish

En konkret, tjekliste-drevet rubrik for UI-polering: radius, skygger, hit-områder, animationstiming.

Af wellwelwel · wellwelwel/blue-spec

Testet · Virker ★ 9.6/10

Interface Polish — En konkret, tjekliste-drevet rubrik for UI-polering: radius, skygger, hit-områder, animationstiming.

Hvad det gør

En design-ingeniør tjekliste for at få interfaces til at føles polerede — koncentrisk border radius, optisk justering, lagdelte skygger over kanter, opdelte/forskudte enter-animationer, tabulære tal, minimum 40x40px hit-områder og no-layout-shift regler — med et påbudt før/efter markdown-tabel outputformat. Brug ved opbygning af UI, gennemgang af frontend-kode eller arbejde med visuelle/animationsdetaljer.

Testrapport

Omdannede en vag 'denne knap føles forkert'-gennemgang til fire målbare fund (32px hit-område under det 40px minimum, uoverensstemmende indlejret border-radius, transition-all, manglende tabular-nums), hver kortlagt til et nummereret princip og indsat i skill'ens egen påbudte før/efter tabel.

Testet: 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

Kommandoer og eksempelprompter

  • /interfaceEn konkret, tjekliste-drevet rubrik for UI-polering: radius, skygger, hit-områder, animationstiming.

Skills udløses af almindelige forespørgsler — ingen kommandoer at huske. Efter installationen aktiverer prompter som disse skillen (på engelsk):

  • 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.