Interface Polish

Een concrete, checklist-gedreven rubric voor UI-verfijning: radius, shadows, hit areas, animatietiming.

Door wellwelwel · wellwelwel/blue-spec

Getest · Werkt ★ 9.6/10

Interface Polish — Een concrete, checklist-gedreven rubric voor UI-verfijning: radius, shadows, hit areas, animatietiming.

Wat het doet

Een design-engineering checklist om interfaces gepolijst te laten aanvoelen — concentrische border radius, optische uitlijning, gelaagde shadows over randen, gesplitste/verspreide enter-animaties, tabular numbers, minimale 40x40px hit areas, en no-layout-shift regels — met een verplicht before/after markdown tabel outputformaat. Gebruik bij het bouwen van UI, het reviewen van frontend code, of het werken aan visuele/animatie details.

Testrapport

Zette een vage 'this button feels off' review om in vier meetbare bevindingen (32px hit area onder het 40px minimum, niet-overeenkomende geneste border-radius, transition-all, ontbrekende tabular-nums), elk gekoppeld aan een genummerd principe en geplaatst in de eigen verplichte before/after tabel van de skill.

Getest op: 2026-07-14 · Claude Code 2.x (agent harness)

Installatie

git clone https://github.com/wellwelwel/blue-spec
cd blue-spec
mkdir -p ~/.claude/skills
cp -r .claude/skills/interface ~/.claude/skills/interface

Commando's en voorbeeldprompts

  • /interfaceEen concrete, checklist-gedreven rubric voor UI-verfijning: radius, shadows, hit areas, animatietiming.

Skills reageren op gewone verzoeken — geen commando's om te onthouden. Na installatie activeren prompts zoals deze de skill (in het Engels):

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