Interface Polish

Konkrétní, kontrolním seznamem řízená rubrika pro UI polish: radius, stíny, hit oblasti, načasování animací.

od wellwelwel · wellwelwel/blue-spec

Otestováno · Funguje ★ 9.6/10

Interface Polish — Konkrétní, kontrolním seznamem řízená rubrika pro UI polish: radius, stíny, hit oblasti, načasování animací.

Co umí

Kontrolní seznam pro design-engineering pro dosažení uhlazeného vzhledu rozhraní — soustředné poloměry okrajů, optické zarovnání, vrstvené stíny přes okraje, rozdělené/rozložené vstupní animace, tabulková čísla, minimální 40x40px dotykové oblasti a pravidla pro zamezení posunu rozložení — s povinným výstupním formátem markdown tabulky před/po. Použijte při tvorbě UI, revizi frontend kódu nebo práci na jakémkoli vizuálním/animačním detailu.

Testovací report

Proměnil vágní recenzi 'toto tlačítko se nezdá správné' ve čtyři měřitelné nálezy (32px dotyková oblast pod minimem 40px, neshodný vnořený border-radius, transition-all, chybějící tabular-nums), každý mapovaný na číslovaný princip a vložený do vlastní povinné tabulky před/po dovednosti.

Testováno: 2026-07-14 · Claude Code 2.x (agent harness)

Instalace

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

Příkazy a ukázkové prompty

  • /interfaceKonkrétní, kontrolním seznamem řízená rubrika pro UI polish: radius, stíny, hit oblasti, načasování animací.

Skilly se spouštějí běžnými požadavky — žádné příkazy k zapamatování. Po instalaci ho aktivují prompty jako tyto (anglicky):

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