Interface Polish
Eine konkrete, Checklisten-gesteuerte Rubrik für UI-Politur: Radius, Schatten, Trefferbereiche, Animations-Timing.
Getestet · Funktioniert
Was es kann
Eine Design-Engineering-Checkliste, um Oberflächen poliert wirken zu lassen — konzentrischer Border-Radius, optische Ausrichtung, geschichtete Schatten über Rändern, geteilte/gestaffelte Enter-Animationen, tabellarische Zahlen, minimale 40x40px Trefferbereiche und keine Layout-Shift-Regeln — mit einem vorgeschriebenen Before/After-Markdown-Tabellen-Ausgabeformat. Verwenden Sie dies beim Erstellen von UI, Überprüfen von Frontend-Code oder Arbeiten an visuellen/Animationsdetails.
Testbericht
Eine vage 'this button feels off'-Überprüfung wurde in vier messbare Ergebnisse umgewandelt (32px Trefferbereich unter dem 40px-Minimum, nicht übereinstimmender verschachtelter Border-Radius, transition-all, fehlende tabular-nums), jedes einem nummerierten Prinzip zugeordnet und in die vom Skill vorgeschriebene Before/After-Tabelle eingefügt.
Getestet am: 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
Befehle & Beispiel-Prompts
/interfaceEine konkrete, Checklisten-gesteuerte Rubrik für UI-Politur: Radius, Schatten, Trefferbereiche, Animations-Timing.
Skills reagieren auf normale Anfragen — keine Slash-Befehle nötig. Nach der Installation aktivieren Prompts wie diese den Skill (auf Englisch):
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.