make-interfaces-feel-bettervon Jakub Krehel

Make Interfaces Feel Better Skill.

Ein Claude Code und Codex skill für UX-Research: Design-Engineering-Prinzipien für Hover, Schatten, Rahmen, Icons, Typografie und Mikrointeraktionen.

UX & Research

OpenDesign herunterladen Anleitung ansehen

jakubkrehel/make-interfaces-feel-better · skills/make-interfaces-feel-better/SKILL.mdSKILL.md

--- name: make-interfaces-feel-better description: - Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, typography, icons, micro-interactions, enter/exit animations, or any visual detail work. Supports quick and full review modes. Triggers on UI polish, design details, "make it feel better", "feels off", stagger animations, border … --- ## Core Principles ## Common Mistakes ## Review Output Format

Frontmatter und Abschnittsüberschriften aus der Upstream-Datei vom 14.09.2026 · 11.798 Zeichen insgesamt

01 Was es tut

Was das make-interfaces-feel-better Skill in Claude Code und Codex leistet

Zusammenfassung, Workflow und Ergebnisse — alles aus der SKILL.md des Skills ausgelesen.

Aus der SKILL.mdGelesen am 14.09.2026 · kein aufgezeichneter Durchlauf

In den eigenen Worten des Skills

Design-Engineering-Prinzipien, um Interfaces poliert wirken zu lassen, geschrieben für alle, die UI-Komponenten bauen oder Frontend-Code reviewen: Hover-States, Schatten, Ränder, Typografie, Icons, Mikrointeraktionen und Enter/Exit-Animationen.

Es enthält neunzehn nummerierte Kernprinzipien mit festen Standardwerten – konzentrischer Border-Radius, optische Ausrichtung, geschichtete Box-Shadows statt vortäuschender Elevation-Borders, unterbrechbare CSS-Übergänge, Stagger um 100ms, Antialiasing für Text, tabellarische Ziffern, reine Schwarz- oder Weiß-Umrisse für Bilder, scale(0.96) beim Drücken, 44×44px große Trefferflächen und Icon-Strichstärke passend zum Text. Zwei Review-Modi, Quick und Full, erzeugen eine nach Prinzip gruppierte Severity/Location/Before/After/Why-Tabelle, begrenzt auf 5 oder 15 Befunde, endend mit Block, Needs changes oder Approve.

Was er erzeugt

Ein Review-Bericht, der von vornherein angibt, was geprüft wurde, und niemals suggeriert, eine ungeprüfte Fläche sei abgedeckt worden.
Nach Prinzip gruppierte Befunde in einer Severity-, Location-, Before-, After-, Why-Tabelle, die jede vorgenommene oder vorgeschlagene Änderung aufführt, statt nur eine Teilmenge.
Eine Considered-but-Rejected-Tabelle mit 1–3 echten Kandidaten im Quick-Modus und 2–5 im Full-Modus, jeweils mit dem Grund für die Ablehnung.
Ein Verifikationsabschnitt, der die genau ausgeführten Befehle oder Interaktionen und deren beobachtete Ergebnisse aufführt, gefolgt vom Urteil.

Siehe Beispiel-Prompt ↗

So funktioniert es

01
Fixes im eigenen Styling-System des Projekts ausdrücken
Bevor Sie einen Fix vorschlagen oder schreiben, ermitteln Sie, wie das Projekt Dinge bereits stylt, und formulieren Sie die Änderung in diesem System – Tailwind in einem Tailwind-Projekt, reines CSS in einem CSS-Projekt oder der etablierte CSS-in-JS-Ansatz.
02
Die Oberfläche verlangsamen
Spielen Sie bei der Prüfung Bewegungen im Animations-Panel des Browsers mit 10 % Geschwindigkeit ab, denn was bei 10 % Geschwindigkeit unstimmig wirkt, ist das, was bei voller Geschwindigkeit subtil falsch ist.
03
Standardmäßig Full Mode
Full wird verwendet, wenn kein Review-Modus angegeben ist; quick muss explizit angefordert werden.
04
Befunde in einem festen Tabellenformat festhalten
Gruppieren Sie Befunde nach Prinzip in einer Markdown-Tabelle mit den Spalten Severity, Location, Before, After und Why; Location verweist auf path/to/file:line.
05
Alle fünf Kategorien berücksichtigen
Die Scope-Tabelle muss alle fünf Quick-Reference-Kategorien enthalten, und eine nicht geprüfte Oberfläche darf niemals als geprüft suggeriert werden.
06
Mit Verifikation und einem Urteil abschließen
Das Urteil lautet Block, wenn ein HIGH-Befund verbleibt, Needs changes, wenn nur MEDIUM- oder LOW-Befunde verbleiben, und Approve nur, wenn nichts Umsetzbares mehr übrig ist.

02 Finden Sie Ihren Favoriten

Wann Sie den make-interfaces-feel-better-Skill verwenden

Verwenden Sie den make-interfaces-feel-better-Skill in Claude Code oder Codex, wenn es um UX-Research dieser Art geht. Die Eignung und Grenzen unten stammen aus der eigenen Datei des Skills.

Gut geeignet

Beim Erstellen oder Prüfen von UI-Komponenten, bei denen visuelle Detailarbeit zählt: Animationen, Hover-Zustände, Schatten, Rahmen, Typografie, Icons, Mikrointeraktionen und Ein-/Ausblend-Übergänge.
Ein schneller Durchlauf über den primären Nutzerpfad und die am stärksten frequentierten Zustände, wobei nur HIGH- und MEDIUM-Probleme gemeldet werden.
Ein gründliches Audit eines gesamten angeforderten Bereichs über Typografie, Oberflächen, Animationen, Icons und Performance.
Projekte, die bereits eine Styling-Konvention haben, sodass Polish-Fixes passend in Tailwind, reinem CSS oder CSS-in-JS landen.

Grenzen kennen

Es wird einem Projekt kein zweites Styling-System hinzugefügt, nur um einen Polish-Fix zu liefern.
Es lehnt benutzerdefinierte Animationen bei hochfrequenten Interaktionen ab, da sich die Aufmerksamkeitskosten bei jedem Trigger wiederholen.
Es staffelt routinemäßige Interaktionen nicht, sondern nur seltene, gestaffelte Einblendungen.
Rahmen, die nur zum Vortäuschen von Elevation dienen, sollten durch geschichtete, transparente box-shadow-Werte ersetzt werden; strukturelle und Zustandsrahmen bleiben erhalten.

Was Sie bereitstellen sollten

package.jsonNotwendig, um den Icon-Animationspfad festzulegen: prüfen Sie, ob motion oder framer-motion installiert ist, und passen Sie den etablierten Import-Pfad an.
Quelldateien oder exakte ScreensBefunde verweisen auf path/to/file:line; wenn das Artefakt keine Quelldateien hat, werden stattdessen der exakte Screen und die Komponente genannt.
Modus, Scope und Framework-KontextGeben Sie Modus, exakten Scope, Framework, Styling-Konventionen und jede Review-Grenze an, damit der Bericht zeigen kann, was tatsächlich geprüft wurde.

03 Innerhalb des Skills

Regeln, die die make-interfaces-feel-better Skill Claude Code und Codex vorgibt

8 konkrete Anweisungen, Standardwerte und Grenzen, die die SKILL.md für den Agent festlegt – der Teil der Datei, der das Ergebnis verändert.

Konzentrische Radien berechnen
Verschachtelte Ecken müssen konzentrisch sein: Der äußere Radius entspricht dem inneren Radius plus Padding.
Immer Press bei 0.96
Die Klick-Skalierung ist fest auf scale(0.96) gesetzt und liegt nie unter 0.95; alles Kleinere wirkt übertrieben. Eine statische Prop deaktiviert dies, wenn Bewegung ablenken würde.
Bild-Konturen bleiben rein neutral
Die 1px-Bildkontur mit niedriger Opazität muss im Light Mode reines Schwarz und im Dark Mode reines Weiß sein — niemals ein getöntes Neutral wie Slate oder Zinc, das die Oberflächenfarbe annimmt und wie Schmutz wirkt.
Niemals alles transitionieren
Geben Sie exakte Eigenschaften an, etwa transition-property: scale, opacity. Tailwinds transition-transform deckt transform, translate, scale und rotate ab.
Icon-Strichstärke an Textgewicht anpassen
1,5px Strichstärke passt zu regulärem 400er-Text, 2px zu semibold 600. Verwenden Sie pro Icon-Set nur eine Strichstärke und mischen Sie niemals Icon-Bibliotheken auf einer Oberfläche.
Verwenden Sie die exakten Icon-Animationswerte
Kontextuelle Icon-Wechsel animieren über scale, opacity und blur — nicht über visibility — und diese Werte sind festgelegt, nicht improvisiert.
Nur seltene Einblendungen staffeln
Teilen Sie eine gestufte Einblendung in semantische Abschnitte auf und staffeln Sie diese um etwa 100ms, statt einen einzelnen Container zu animieren. Routinemäßige, häufige Interaktionen dürfen nicht gestaffelt werden.
Klickflächen bewusst dimensionieren
Bevorzugen Sie eine Klickfläche von 44×44px für Touch oder Mobile, mindestens 40×40px in dichten Desktop-Oberflächen, indem Sie kleinere sichtbare Elemente mit einem Pseudo-Element erweitern.

04 In Betrieb nehmen

make-interfaces-feel-better in Claude Code oder Codex installieren

Ein npx skills add-Befehl, dann eine erste Aufgabe in Ihrem Agent und eine Checkliste für das Ergebnis.

make-interfaces-feel-better zu Claude Code, Codex oder Ihrem Agent hinzufügen

Im eigenen Projekt ausführen; der Installer fragt, welchem Agent er hinzugefügt werden soll.

Terminal

npx skills add https://github.com/jakubkrehel/make-interfaces-feel-better --skill make-interfaces-feel-better

Generische skills-CLI-Form für skills/make-interfaces-feel-better/SKILL.md; das Repository dokumentiert möglicherweise einen eigenen Pfad.

Geben Sie dem Skill eine erste UX-Research-Aufgabe

In den eigenen Begriffen des Skills verfasst; ersetzen Sie die Teile in Klammern durch Ihr Material.

Starter prompt

Review [src/components/] in full mode. The card and its inner button both use rounded-xl, the counter shifts when the value changes, and the outline-to-fill icon swap exits with a jarring fade. Express every fix in [our existing styling system] and give me a Severity/Location/Before/After/Why table.

Quelle: verfasst aus der SKILL.md in den eigenen Begriffen des Skills.

Das erste Ergebnis prüfen

Was die SKILL.md selbst als korrektes Ergebnis beschreibt:

Gehen Sie im Rahmen des Reviews jeden Zustand der Oberfläche durch — Hover, Focus, Active, Loading und Empty.
Listen Sie jede nicht durchgeführte Prüfung neben dem Ergebnis als „Nicht verifiziert“ auf und geben Sie an, was noch offen ist.
Prüfen Sie bei Anwendung von initial={false}, dass dies keine beabsichtigten Einblendungsanimationen unterbricht.
Füllen Sie den Bericht nicht künstlich auf, um die Obergrenze der Befunde zu erreichen, und lassen Sie Prinzipien ohne Befunde weg.

In OpenDesign importieren Sie make-interfaces-feel-better über seinen SKILL.md-Link: Plugins → Add → Skill → Import from link, und wählen Sie es dann in der oberen Leiste aus.

OpenDesign herunterladen Quickstart lesen

05 Open Source, nachvollziehbar

Quelle, Lizenz und Verifizierung

Woher die Fakten auf dieser Seite stammen und wann sie zuletzt geprüft wurden.

Author: Jakub Krehel
Repository: github.com/jakubkrehel/make-interfaces-feel-better Branch main
Skill-Datei: skills/make-interfaces-feel-better/SKILL.md Content-Checksum bei Verifizierung aufgezeichnet; Commit 35545ea
License: MIT Aus LICENSE.
Repository-Sterne: 3.433 GitHub-Snapshot vom 14.09.2026 für das gesamte Repository jakubkrehel/make-interfaces-feel-better. Keine Bewertung oder Nutzungszahl für make-interfaces-feel-better.
Verifiziert von OpenDesign: 14.09.2026 Quelldatei, Pfad, Lizenztext und Sternezählung wurden geprüft. Nicht in OpenDesign main gebündelt (geprüft 28.08.2026); ein Live-Durchlauf wurde auf dieser Seite nicht erfasst.

In der SKILL.md

KurzreferenzFünf Kategorien — Typografie, Oberflächen, Animationen, Icons, Performance — jeweils zugeordnet, wann sie einzusetzen sind.
KernprinzipienNeunzehn nummerierte Regeln, von konzentrischem Border-Radius bis zu zurückhaltender Bewegung, mit exakten Standardwerten.
Häufige FehlerTabelle, die jeden häufigen Fehler mit seiner Lösung verknüpft, etwa transition: all und winzige Klickflächen.
Review-AusgabeformatModi, Abdeckung, Obergrenzen für Findings, Definitionen der Schweregrade und die erforderliche Berichtsstruktur.
Umfang und AbdeckungNennen Sie Modus, Umfang, Framework und Konventionen; listen Sie alle fünf Kategorien mit geprüften Nachweisen und Ergebnis auf.
FindingsGruppieren Sie nach Prinzip in einer Tabelle mit Severity, Location, Before, After, Why, die jede Änderung abdeckt.
BeispielAusgearbeitete Tabellen für konzentrischen Border-Radius, tabellarische Zahlen und Skalierung bei Press.
Erwogen, aber abgelehntTabelle mit echten Grenzfällen, die abgelehnt wurden, mit angegebener Begründung.
Verifikation und UrteilListen Sie ausgeführte Befehle oder Interaktionen auf, kennzeichnen Sie nicht verifizierte Prüfungen und geben Sie dann Block, Needs changes oder Approve an.

Die eigene Beschreibung des Skills

„– Design-Engineering-Prinzipien, um Interfaces poliert wirken zu lassen. Verwenden bei UI-Komponenten-Entwicklung, Frontend-Code-Review, Implementierung von Animationen, Hover-States, Schatten, Rahmen, Typografie, Icons, Micro-Interactions, Enter/Exit-Animationen oder jeglicher visuellen Detailarbeit. Unterstützt Quick- und Full-Review-Modi. Wird ausgelöst bei UI-Polish, Design-Details, „make it feel better", „feels off", gestaffelte Animationen, border-radius, optischer Ausrichtung, font-smoothing, tabularen Zahlen, Bildrahmen, box-shadows, Icons, Icon-Strichstärke, Icon-States, Motion-Restraint."

Front-Matter-Beschreibung aus SKILL.md. Die vollständige Datei umfasst etwa 11.798 Zeichen. Lesen Sie die vollständige Datei auf GitHub.

06 Vor der Installation

Fragen zum Skill make-interfaces-feel-better

Die Antworten stammen aus der SKILL.md, gelesen am 14.09.2026, nicht aus einem protokollierten Lauf.

Benötige ich eine Motion-Library für die kontextabhängigen Icon-Animationen?

Nein. Wenn keine Motion-Library installiert ist, hält die Datei beide Icons im DOM, positioniert eines davon absolut und blendet zwischen ihnen mit CSS-Transitions über, wodurch sich sowohl Enter- als auch Exit-Animationen ohne jede Abhängigkeit ergeben.

Beim Laden der Seite läuft eine Entrance-Animation ab — wie wird das gehandhabt?

Die Datei verhindert dies mit initial={false} auf AnimatePresence, was Enter-Animationen beim ersten Rendern unterbindet, und bittet Sie anschließend zu bestätigen, dass dies keine beabsichtigten Entrance-Animationen zerstört.

Deckt ein Review auch die Performance ab, nicht nur das Visuelle?

Ja, Performance ist eine der fünf Quick-Reference-Kategorien, mit Fokus auf Transition-Spezifität und die Verwendung von will-change. will-change wird ausschließlich auf transform, opacity und filter beschränkt — die Eigenschaften, die die GPU compositen kann — und will-change: all wird nie verwendet.

Make Interfaces Feel Better

make-interfaces-feel-better bei einer echten UX-Research-Aufgabe ausführen.

Laden Sie OpenDesign herunter, importieren Sie make-interfaces-feel-better über den SKILL.md-Link, fügen Sie den obigen Prompt ein und lesen Sie den Plan vor dem Ergebnis.

OpenDesign herunterladen Alle Skills durchsuchen