Interface Polish

En konkret, sjekkliste-drevet rubrikk for UI-polering: radius, skygger, treffområder, animasjonstiming.

av wellwelwel · wellwelwel/blue-spec

Bestått ★ 9.6/10

Interface Polish — En konkret, sjekkliste-drevet rubrikk for UI-polering: radius, skygger, treffområder, animasjonstiming.

Hva den gjør

En design-ingeniør sjekkliste for å få grensesnitt til å føles polerte — konsentrisk kantradius, optisk justering, lagdelte skygger over kanter, splittede/forskjøvede inn-animasjoner, tabulære tall, minimum 40x40px treffområder, og ingen-layout-shift-regler — med et påbudt før/etter markdown-tabell utdataformat. Brukes ved bygging av UI, gjennomgang av frontend-kode, eller arbeid med visuelle/animasjonsdetaljer.

Testrapport

Gjorde en vag 'denne knappen føles feil' gjennomgang om til fire målbare funn (32px treffområde under minimum 40px, feilmatchet nestet kantradius, transition-all, manglende tabular-nums), hver kartlagt til et nummerert prinsipp og plassert i ferdighetens egen påbudte før/etter-tabell.

Testet på: 2026-07-14 · Claude Code 2.x (agent harness)

Installer

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, sjekkliste-drevet rubrikk for UI-polering: radius, skygger, treffområder, animasjonstiming.

Skills utløses av vanlige forespørsler — ingen kommandoer å huske. Etter installasjonen 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.