DevvGwardo/impeccable

Impeccable — Frontend-Design-Skill

Entwirft und iteriert produktionsreife Frontend-Oberflächen. Echter funktionierender Code, bewusste Designentscheidungen, außergewöhnliche Handwerkskunst.

Basiert auf pbakaus/impeccable (Apache 2.0), das auf Anthropic's Frontend-Design-Skill aufbaut.

Einrichtung

Vor Designarbeit oder Dateibearbeitung:

1. Kontext lesen — Nach PRODUCT.md / DESIGN.md im Projektverzeichnis suchen. Falls PRODUCT.md fehlt oder ein Platzhalter ist (<200 Zeichen), den Benutzer bitten, zuerst impeccable:teach auszuführen.
2. Register identifizieren — Jede Designaufgabe ist Brand (Marketing, Landing, Kampagne, Portfolio: Design IST das Produkt) oder Product (App-UI, Admin, Dashboard, Tool: Design DIENT dem Produkt). Vor dem Design identifizieren.
3. Register-Referenz laden — Die Brand- oder Product-Referenz aus den Referenzdateien dieses Skills je nach Register laden.

Befehle

Wenn der Benutzer einen bestimmten impeccable-Befehl aufruft (z. B. "auditiere diese Seite", "polier den Checkout"), dem Muster folgen: impeccable:<befehl> [ziel]. Jeder Befehl hat eine Referenzdatei im Referenzverzeichnis dieses Skills.

Befehl	Kategorie	Beschreibung
impeccable:craft [feature]	Bauen	Vollständiger Formen-und-Bauen-Ablauf mit visueller Iteration
impeccable:teach	Bauen	Einmalige Einrichtung: Design-Kontext sammeln, PRODUCT.md und DESIGN.md schreiben
impeccable:document	Bauen	Aus bestehendem Projektcode DESIGN.md generieren
impeccable:extract [target]	Bauen	Wiederverwendbare Komponenten und Tokens in das Designsystem extrahieren
impeccable:shape [feature]	Bauen	UX/UI planen, bevor Code geschrieben wird
impeccable:critique [target]	Evaluieren	UX-Design-Review: Hierarchie, Klarheit, emotionale Resonanz
impeccable:audit [target]	Evaluieren	Technische Qualitätsprüfungen durchführen (a11y, Performance, Responsive)
impeccable:polish [target]	Verfeinern	Letzter Schliff, Designsystem-Ausrichtung und Versandbereitschaft
impeccable:bolder [target]	Verfeinern	Langweilige Designs verstärken
impeccable:quieter [target]	Verfeinern	Zu kühne Designs abschwächen
impeccable:distill [target]	Verfeinern	Auf das Wesentliche reduzieren
impeccable:harden [target]	Verfeinern	Fehlerbehandlung, i18n, Textüberlauf, Randfälle
impeccable:onboard [target]	Verfeinern	Erstdurchlauf-Flows, Leerzustände, Aktivierungspfade
impeccable:animate [target]	Verbessern	Zielgerichtete Bewegung hinzufügen
impeccable:colorize [target]	Verbessern	Strategische Farbe einführen
impeccable:typeset [target]	Verbessern	Schriftauswahl, Hierarchie, Größen korrigieren
impeccable:layout [target]	Verbessern	Layout, Abstände, visuellen Rhythmus korrigieren
impeccable:delight [target]	Verbessern	Momente der Freude hinzufügen
impeccable:overdrive [target]	Verbessern	Technisch außergewöhnliche Effekte hinzufügen
impeccable:clarify [target]	Fixen	Unklare UX-Texte verbessern
impeccable:adapt [target]	Fixen	Für verschiedene Geräte anpassen
impeccable:optimize [target]	Fixen	Performance-Verbesserungen
impeccable:live	Iterieren	Visueller Variantenmodus: Elemente im Browser iterieren

Routing

• Kein Ziel angegeben: Die Befehlstabelle, gruppiert nach Kategorie, anzeigen und fragen, was der Benutzer tun möchte.
• Befehl stimmt überein: Seine Referenzdatei aus dem reference/-Verzeichnis dieses Skills laden und den Anweisungen folgen.
• Keine Übereinstimmung, aber designbezogen: Die gemeinsam genutzten Designgesetze und die Register-Referenz direkt anwenden.

Gemeinsam genutzte Designgesetze

Auf jedes Design anwenden, beide Register. Die Implementierungskomplexität an die ästhetische Vision anpassen. Zwischen Projekten variieren; nie zu denselben Entscheidungen konvergieren.

Farbe

• OKLCH verwenden. Chroma reduzieren, wenn die Helligkeit sich 0 oder 100 nähert; hohes Chroma an Extremen wirkt grell.
• Niemals #000 oder #fff verwenden. Jedes Neutral zum Markenfarbton hin tönen (Chroma 0.005–0.01 ist ausreichend).
• Eine Farbstrategie wählen, bevor Farben ausgewählt werden. Vier Schritte auf der Verbindlichkeitsachse:
  • Zurückhaltend: getönte Neutraltöne + ein Akzent ≤10 %. Produktvorgabe; Marken-Minimalismus.
  • Verbindlich: Eine gesättigte Farbe trägt 30–60 % der Oberfläche. Markenvorgabe für identitätsgetriebene Seiten.
  • Volle Palette: 3–4 benannte Rollen, jede bewusst eingesetzt. Markenkampagnen; Produkt-Datenvisualisierung.
  • Getränkt: Die Oberfläche IST die Farbe. Marken-Helden, Kampagnenseiten.
• Die Regel "ein Akzent ≤10 %" gilt nur für Zurückhaltend. Verbindlich / Volle Palette / Getränkt überschreiten sie absichtlich.

Theme

Dunkel vs. Hell ist niemals ein Standard. Nicht dunkel, "weil Tools cool dunkel aussehen." Nicht hell, "um sicher zu gehen."

Vor der Wahl einen Satz der physischen Szene schreiben: Wer nutzt dies, wo, unter welchem Umgebungslicht, in welcher Stimmung. Wenn der Satz die Antwort nicht erzwingt, ist er nicht konkret genug. Details hinzufügen, bis es der Fall ist.

"Observability-Dashboard" erzwingt keine Antwort. "SRE, der um 2 Uhr morgens in einem dunklen Raum auf einem 27-Zoll-Monitor auf die Incident-Schwere blickt" schon.

Typografie

• Die Hauptzeilenlänge auf 65–75 Zeichen begrenzen.
• Hierarchie durch Skalierungs- + Gewichtskontrast (Verhältnis ≥1.25 zwischen Stufen). Flache Skalen vermeiden.

Layout

• Abstände für Rhythmus variieren. Derselbe Padding überall ist Eintönigkeit.
• Karten sind die faule Antwort. Sie nur verwenden, wenn sie wirklich die beste Affordanz sind. Verschachtelte Karten sind immer falsch.
• Nicht alles in einen Container packen. Die meisten Dinge brauchen keinen.

Bewegung

• CSS-Layout-Eigenschaften nicht animieren.
• Mit exponentiellen Kurven ausblenden (ease-out-quart / quint / expo). Kein Bounce, kein Elastic.

Absolute Verbote (Anti-Patterns)

Erkennen und ablehnen. Wenn du im Begriff bist, eines davon zu schreiben, mit einer anderen Struktur neu schreiben.

• Seitenstreifen-Rahmen. border-left oder border-right >1px als farbiger Akzent auf Karten, Listenelementen, Callouts oder Alarmen. Volle Rahmen, Hintergrundtönungen, führende Zahlen/Icons oder nichts verwenden.
• Farbverlaufstext. background-clip: text + Farbverlauf. Dekorativ, nie bedeutungsvoll. Einfache Volltonfarbe verwenden. Betonung durch Gewicht oder Größe.
• Glasmorphismus als Standard. Unschärfen und Glaskarten dekorativ verwendet. Selten und zweckgerichtet, oder nichts.
• Die Helden-Metrik-Vorlage. Große Zahl, kleines Label, unterstützende Statistiken, Farbverlaufsakzent. SaaS-Klischee.
• Identische Kartengitter. Gleich große Karten mit Icon + Überschrift + Text, endlos wiederholt.
• Modal als erster Gedanke. Modals sind meist Faulheit. Zuerst Inline-/progressive Alternativen ausschöpfen.

Text

• Jedes Wort verdient seinen Platz. Keine wiederholten Überschriften, keine Einleitungen, die den Titel wiederholen.
• Keine Gedankenstriche (Em Dash). Kommas, Doppelpunkte, Semikola, Punkte oder Klammern verwenden.

Der AI-Schrott-Test

Wenn jemand auf diese Oberfläche schauen und ohne Zweifel sagen könnte "Das hat eine KI gemacht", ist sie durchgefallen.

Kategorie-Reflex-Prüfung – zwei Ebenen:

• Erste Ordnung: Wenn jemand das Theme + die Palette allein aus der Kategorie erraten könnte ("Observability → dunkelblau", "Healthcare → weiß + petrol", "Finance → marineblau + gold", "Crypto → Neon auf Schwarz"), ist es der Trainingsdaten-Reflex. Den Satz der Szene und die Farbstrategie so lange überarbeiten, bis die Antwort nicht mehr offensichtlich aus dem Bereich ableitbar ist.
• Zweite Ordnung: Wenn jemand die ästhetische Familie aus Kategorie-plus-Anti-Referenzen erraten könnte ("AI-Workflow-Tool, das nicht SaaS-cremefarben ist → redaktionell-typografisch", "Fintech, das nicht marineblau-und-gold ist → terminal-native Dunkelmodus"), ist es die Falle eine Ebene tiefer. Der erste Reflex wurde vermieden, der zweite nicht. So lange überarbeiten, bis beide Antworten nicht offensichtlich sind.

Referenzdateien

Detaillierte Referenzdateien sind im reference/-Verzeichnis dieses Skills für jeden Befehl und jeden Designbereich verfügbar. Lade sie mit skill_view(name='impeccable', file_path='reference/<name>.md').

Wichtige Referenzen zu Designbereichen (für tiefgehende Analysen laden):

• reference/brand.md — Brand-Register: Marketing, Landing, Kampagnenseiten
• reference/product.md — Product-Register: App-UI, Dashboards, Tools
• reference/typography.md — Schriftsysteme, Schriftpaarungen, modulare Skalen, OpenType
• reference/color-and-contrast.md — OKLCH, getönte Neutrale, Dunkelmodus, Barrierefreiheit
• reference/spatial-design.md — Abstandssysteme, Gitter, visuelle Hierarchie
• reference/motion-design.md — Verstärkungskurven, Staffelung, reduzierte Bewegung
• reference/interaction-design.md — Formulare, Fokus-Zustände, Lademuster
• reference/responsive-design.md — Mobile-First, flüssiges Design, Container-Queries
• reference/ux-writing.md — Button-Beschriftungen, Fehlermeldungen, Leerzustände
• reference/cognitive-load.md — Kognitive Überlastung in Oberflächen reduzieren
• reference/heuristics-scoring.md — Nielsen-artiger heuristischer Bewertungsraster

Befehlsspezifische Referenzen (bei passendem Befehl laden):

• reference/craft.md — Vollständiger Formen-und-Bauen-Ablauf
• reference/shape.md — UX/UI-Planung vor dem Code
• reference/teach.md — Einrichten von PRODUCT.md und DESIGN.md
• reference/document.md — Aus bestehendem Code DESIGN.md generieren
• reference/extract.md — Tokens in das Designsystem ziehen
• reference/critique.md — UX-Design-Review
• reference/audit.md — Technische Qualitätsprüfungen
• reference/polish.md — Letzter Qualitätsdurchlauf
• reference/bolder.md — Sichere Designs verstärken
• reference/quieter.md — Laute Designs abschwächen
• reference/distill.md — Auf das Wesentliche reduzieren
• reference/harden.md — Produktionsbereitschaft
• reference/onboard.md — Erstdurchlauf-Flows und Leerzustände
• reference/animate.md — Zielgerichtete Animation
• reference/colorize.md — Strategische Farbeinführung
• reference/typeset.md — Typografie-Korrekturen
• reference/layout.md — Layout- und Abstandskorrekturen
• reference/delight.md — Persönlichkeit und einprägsame Akzente
• reference/overdrive.md — Über konventionelle Grenzen hinaus
• reference/clarify.md — UX-Textverbesserungen
• reference/adapt.md — Geräteanpassung
• reference/optimize.md — UI-Performance
• reference/live.md — Browser-Varianteniteration

CLI-Tool

Impeccable enthält auch ein eigenständiges CLI zur Erkennung von UI-Anti-Patterns ohne KI-Einbindung:

npx impeccable detect src/                   # ein Verzeichnis scannen
npx impeccable detect index.html             # eine HTML-Datei scannen
npx impeccable detect https://example.com    # eine URL scannen (erfordert Puppeteer)
npx impeccable detect --fast --json .        # Nur Regex, JSON-Ausgabe

Scannt HTML-, CSS-, JSX-, TSX-, Vue-, Svelte-Dateien auf 25+ Anti-Patterns. Exit-Code 0 = sauber, 2 = Probleme gefunden. Erfordert Node.js 18+.

Quelle

Original: github.com/pbakaus/impeccable Website: impeccable.style