impeccablevon Paul Bakaus

Impeccable Skill.

Ein Claude Code- und Codex-Skill für Design Review: ein Skill zum Entwerfen, Kritisieren, Prüfen, Verfeinern, Animieren und Optimieren von Oberflächen.

Design Review & Accessibility
UI-Code

OpenDesign herunterladen Anleitung ansehen

pbakaus/impeccable · plugin/skills/impeccable/SKILL.mdSKILL.md

--- name: impeccable description: Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, … --- ## Setup ## How to design ## Modes ## Commands

Metadaten und Abschnittsüberschriften aus der Ursprungsdatei vom 14.09.2026 · 11.912 Zeichen insgesamt

01 Was es tut

Was der Skill „impeccable“ in Claude Code und Codex tut

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

Impeccable transformiert Frontend-Interfaces durch Design, Kritik, Audit, Feinschliff, Animation und Verfeinerung. Es umfasst Websites, Landingpages, Dashboards, Produkt-UI, Komponenten, Formulare, Einstellungen, Onboarding und leere Zustände – und behandelt UX-Review, visuelle Hierarchie, Barrierefreiheit, Performance, responsives Verhalten, Theming, Typografie, Abstände, Layout, Farbe, Bewegung, Mikrointeraktionen und Design-Systeme.

Der Skill liefert außergewöhnliches Handwerk durch produktionsreifen Code, maximale Kreativität, einen klaren Standpunkt und exzellente Ausführung. Die Arbeit ist um vier Modi organisiert – Persuade, Operate, Read, Experience – und über zwanzig spezialisierte Befehle. Jede Sitzung lädt Produktkontext, visuelle Welt und Oberflächen-Briefings über ein Launcher-Skript und folgt dann befehlsspezifischen Playbooks sowie einer Mindestqualitätsschwelle für das Handwerk.

Was er erzeugt

PRODUCT.md erfasst dauerhaften Produktkontext über den init-Befehl
DESIGN.md wird aus bestehendem Projektcode über den document-Befehl generiert
Wiederverwendbare Tokens und Komponenten werden über den extract-Befehl ins Design-System übernommen
Produktionsreifer UI-Code mit vollständigen Deliverables, maximaler Kreativität und exzellenter Ausführung

Siehe Beispiel-Prompt ↗

So funktioniert es

01
Sitzungskontext einmal laden
Führen Sie das impeccable-Skript mit dem Context-Argument einmal pro Sitzung aus dem Skill-Verzeichnis aus.
02
Das Request's Playbook laden
Laden Sie bei expliziten oder impliziten Sub-Commands die Commands-Tabellenreferenz; laden Sie bei neuen Oberflächen oder ersetzenden visuellen Welten new-work.md.
03
Craft Floor vor der Bearbeitung lesen
Lesen Sie craft-floor.md unmittelbar vor jeder UI-Änderung, einschließlich kleiner Verfeinerungen, sobald Analyse und Richtung geklärt sind.
04
Modus anhand des Oberflächentyps wählen
Wählen Sie Persuade für Landingpages und Marketing, bei denen Besucher entscheiden und handeln. Wählen Sie Operate für App-UI und Dashboards, bei denen Besucher Aufgaben erledigen.
05
In begrenzten Durchgängen verifizieren
Erstellen Sie vollständig, prüfen Sie einmal in einem gebündelten Durchgang, der Desktop und Mobile im Web gemeinsam oder ausgelieferte Geräteklassen bei native abdeckt.

02 Finden Sie Ihren Favoriten

Wann Sie den impeccable Skill verwenden

Verwenden Sie den impeccable-Skill in Claude Code oder Codex, wenn die Aufgabe Design-Review dieser Art ist. Eignung und Grenzen unten stammen aus der eigenen Datei des Skills.

Gut geeignet

Der Nutzer möchte eine Frontend-Oberfläche gestalten, neu gestalten, formen, kritisieren, prüfen, verfeinern, klären, destillieren, härten, optimieren, anpassen, animieren, kolorieren, extrahieren oder anderweitig verbessern
Fade Designs, die mutiger oder erfreulicher werden müssen
Laute Designs, die leiser werden sollten
Live-Browser-Iteration an UI-Elementen
Ambitionierte visuelle Effekte, die technisch außergewöhnlich wirken sollten

Grenzen kennen

Rein Backend-bezogene Aufgaben

Was Sie bereitstellen sollten

Zieldatei oder -routeÜbergeben Sie eine benannte Quelldatei oder Route mit dem Flag --target und einem Pfad-Argument beim Ausführen des Context-Skripts.
PRODUCT.mdDauerhafte Produktkontextdatei, die vom Launcher geladen wird. Wenn der Launcher fehlschlägt, lesen Sie die vorhandene Datei direkt, ohne fehlenden Kontext zu erfinden.
Visual-Regression-Goldens oder Screenshot-FixturesWenn die App nicht laufen kann, beginnen Sie mit committeten Visual-Regression-Goldens oder Screenshot-Fixtures.

03 Innerhalb des Skills

Regeln, die das impeccable Skill Claude Code und Codex gibt

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

Das Briefing gewinnt
Respektieren Sie festgelegte Ästhetiken, Epochen, Materialien, Schriften und Paletten, auch wenn sie einer Warnung vor gesättigten Mustern widersprechen. Ein klares Briefing zugunsten Ihres eigenen Geschmacks umzulenken ist ein Fehlschlag.
Verfeinerung bewahrt; Neugestaltung ersetzt
Verfeinerung erhält die bestehende Identität, das Verhalten, die Texte und alles außerhalb des Umfangs.
Visuelle Autorität ist ein Beleg, kein Dateiname
Eine fehlende DESIGN.md allein macht ein Projekt nicht zu einem Greenfield-Projekt. Das Playbook für neue Arbeiten entscheidet anhand visueller Belege, ob die bestehende Welt erhalten, erweitert oder ersetzt wird.
In begrenzten Durchgängen prüfen, nicht in einer Schleife
Die Obergrenze umfasst den gesamten Zyklus: Screenshots, Fehlerscans, Mikro-Korrekturen und Neuaufbauten.
Drift niemals als Nebeneffekt beheben
Eine CONTEXT_STALE-Anweisung wird gemeldet, nicht ausgeführt, sofern der Nutzer nicht ausdrücklich danach fragt. Die einzige Ausnahme sind als auto markierte Befunde, die der nächste Schreibvorgang in diese Datei ohnehin durchführt.
Ein fehlgeschlagener Launcher blockiert die Arbeit nicht
Bei Verweigerung oder Fehlschlag des Skripts eine separate Nachricht senden und anschließend vorhandene PRODUCT.md und DESIGN.md direkt lesen, ohne fehlenden Kontext zu erfinden.

04 In Betrieb nehmen

Installieren Sie impeccable in Claude Code oder Codex

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

impeccable 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/pbakaus/impeccable --skill impeccable

Allgemeine skills-CLI-Form für plugin/skills/impeccable/SKILL.md; das Repository kann seinen eigenen Pfad dokumentieren.

Dem Skill eine erste Design-Review-Aufgabe geben

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

Starter prompt

Audit [src/components/SettingsPanel.tsx] for accessibility and responsive behavior, then polish the form layout and typeset the section headings to improve visual hierarchy. The panel should feel confident but scannable for users managing account preferences.

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:

Mit höchstens einer weiteren Runde bestätigen, dann das Feinschliffen beenden
Fehlerscans als Teil des begrenzten Prüfzyklus durchführen
Ziel und Aktualität anhand aktueller Tokens, CSS, Komponenten oder Assets prüfen
Theme- und Varianten-Aufnahmen beim Arbeiten mit Theming-Systemen vergleichen

In OpenDesign ist impeccable gebündelt: Plugins → Skills, in der oberen Leiste auswählen.

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: Paul Bakaus
Repository: github.com/pbakaus/impeccable Branch main
Skill-Datei: plugin/skills/impeccable/SKILL.md Content-Checksum bei Verifikation aufgezeichnet; Commit cb56ed6
License: Apache-2.0 Aus LICENSE; SKILL.md sagt „Apache 2.0".
Repository-Sterne: 67.876 GitHub-Snapshot vom 14.09.2026 für das gesamte Repository pbakaus/impeccable. Keine Bewertung oder Nutzungszahl für impeccable.
Verifiziert von OpenDesign: 14.09.2026 Quelldatei, Pfad, Lizenztext und Sternanzahl wurden geprüft. In OpenDesign main gebündelt (geprüft am 28.08.2026); ein Live-Lauf wurde auf dieser Seite nicht erfasst.

In der SKILL.md

SetupKontextskript einmal pro Sitzung ausführen, Playbook laden, Craft-Grundlagen vor der Bearbeitung lesen
Wie man gestaltetDas Briefing gewinnt, Refinement bewahrt die Identität, während Redesign sie ersetzt, visuelle Autorität ist Beweis, nicht Dateiname
ModiPersuade für Landingpages, Operate für Dashboards, Read für Dokumentation, Experience für Portfolios
BefehleÜber zwanzig Befehle, organisiert in die Kategorien Build, Evaluate, Refine, Enhance, Fix und Iterate, mit Referenzdateien

Die eigene Beschreibung des Skills

"Verwenden Sie, wenn der Benutzer eine Frontend-Oberfläche designen, redesignen, formen, kritisieren, auditieren, polieren, klären, destillieren, härten, optimieren, anpassen, animieren, kolorieren, extrahieren oder anderweitig verbessern möchte. Umfasst Websites, Landing-Pages, Dashboards, Produkt-UI, App-Shells, Komponenten, Formulare, Einstellungen, Onboarding und Empty States. Behandelt UX-Review, visuelle Hierarchie, Informationsarchitektur, kognitive Belastung, Accessibility, Performance, responsives Verhalten, Theming, Anti-Patterns, Typografie, Schriften, Abstände, Layout, Ausrichtung, Farbe, Motion, Micro-Interactions, UX-Copy, Fehlerzustände, Edge Cases, i18n und wiederverwendbare Design-Systeme oder Tokens. Verwenden Sie auch für fade Designs, die mutiger oder erfreulicher werden müssen, laute Designs, die leiser werden sollten, Live-Browser-Iteration an UI-Elementen oder ambitionierte visuelle Effekte, die sich technisch außergewöhnlich anfühlen sollen. Nicht für reine Backend- oder Nicht-UI-Aufgaben."

Front-Matter-Beschreibung aus SKILL.md. Die vollständige Datei umfasst etwa 11.912 Zeichen. Die vollständige Datei auf GitHub lesen.

06 Vor der Installation

Fragen zum impeccable-Skill

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

Welchen Befehl sollte ich für meine Anfrage verwenden?

Wird kein Argument angegeben, routing.md lesen und dessen kontextabhängiges Menü anzeigen; niemals automatisch einen Befehl ausführen. Bei expliziten oder klar implizierten Anfragen die Referenztabelle der Befehle laden.

Bei Fragen zu Workflow oder Befehlsauswahl den Abschnitt Workflow-Fragen in routing.md lesen. Andernfalls die Anfrage als allgemeine Gestaltungsarbeit behandeln.

Impeccable

impeccable auf eine echte Design-Review-Aufgabe anwenden.

Das impeccable-Skill ist in OpenDesign enthalten. Laden Sie die App herunter, wählen Sie das Skill unter Plugins → Skills aus, fügen Sie den Prompt oben ein und lesen Sie den Plan vor dem Ergebnis.

OpenDesign herunterladen Alle Skills durchsuchen