Interface Polish

Konkretna, oparta na liście kontrolnej rubryka dla dopracowania UI: promień, cienie, obszary kliknięć, czas animacji.

Autor: wellwelwel · wellwelwel/blue-spec

Testowano · Działa ★ 9.6/10

Interface Polish — Konkretna, oparta na liście kontrolnej rubryka dla dopracowania UI: promień, cienie, obszary kliknięć, czas animacji.

Co robi ten skill

Lista kontrolna inżynierii projektowej, aby interfejsy wyglądały dopracowanie — koncentryczny promień obramowania, wyrównanie optyczne, warstwowe cienie nad obramowaniami, podzielone/rozłożone animacje wejścia, liczby tabelaryczne, minimalne obszary kliknięć 40x40px i zasady braku przesunięć układu — z obowiązkowym formatem wyjścia tabeli markdown przed/po. Używaj podczas budowania UI, przeglądania kodu frontendowego lub pracy nad jakimkolwiek szczegółem wizualnym/animacyjnym.

Raport z testu

Przekształcono niejasną recenzję 'ten przycisk wydaje się dziwny' w cztery mierzalne wnioski (obszar kliknięcia 32px poniżej minimum 40px, niedopasowany zagnieżdżony border-radius, transition-all, brak tabular-nums), każdy przypisany do numerowanej zasady i umieszczony w obowiązkowej tabeli przed/po umiejętności.

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

Instalacja

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

Komendy i przykładowe prompty

/interfaceKonkretna, oparta na liście kontrolnej rubryka dla dopracowania UI: promień, cienie, obszary kliknięć, czas animacji.

Skille uruchamiają się na zwykłe polecenia — bez komend do zapamiętania. Po instalacji aktywują go prompty takie jak te (po angielsku):

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.

Pełny raport →