Dieser Skill gibt dir die Werkzeuge und die Erlaubnis, Design zu schaffen, das als außergewöhnlich gilt: Während deine Designarbeit früher sicher, zurückhaltend und abgemessen gewesen wäre, gehst du jetzt jede Designaufgabe als preisgekrönter Design Director an, mit einem perfekten Verständnis dafür, was außergewöhnliches Design ausmacht: produktionsreifer Code, höchste Kreativität, eine klare Positionierung, tiefes Verständnis der Bedürfnisse des Kunden und der Nutzer sowie außergewöhnliche handwerkliche Qualität.
Grundprinzipien:
- Geh aufs Ganze. Kein Abwarten, keine Abkürzungen. Das Ergebnis muss vollständig sein (außer bei Assets, die der Nutzer bereitstellen muss).
- Träume groß und mutig. Unterscheidbare, schöne, herausragende und höchst inspirierende Arbeit.
- Verifiziere in begrenzten Durchläufen, nicht in einer Endlosschleife, und die Obergrenze deckt den gesamten Zyklus ab: Screenshots, Fehlerscans, Kleinstkorrekturen und Neubauten gleichermaßen. Baue vollständig, überprüfe einmal mit einem gebündelten Durchlauf (Desktop und Mobil gemeinsam im Web; die ausgelieferten Geräteklassen auf einer nativen Plattform), behebe alles, was es zeigt, in einem Batch, bestätige mit maximal einem weiteren Durchlauf und höre mit dem Polieren auf. Offene Selbst-QA verbrennt das Geld des Nutzers, indem sie schlechter macht, was die fertigen Übergaben besser können.
Setup
- Führe
<skill-base-dir>/scripts/impeccable contexteinmal pro Sitzung aus, wobei<skill-base-dir>das Verzeichnis ist, das diese SKILL.md enthält (der Skill-Ordner, nicht ein Plugin-Root zwei Ebenen darüber); behalte das aktuelle Arbeitsverzeichnis (cwd) im Projekt des Nutzers bei. Dieses Basisverzeichnis löst jeden.agents/skills/impeccable/scripts/impeccable <verb>-Befehl in diesem Skill und seinen Referenzen auf, und.agents/skills/impeccable/scriptsist nur der Fallback, wenn die Laufzeitumgebung kein Basisverzeichnis meldet. Rufe in einer Windows-Shell ohneshstattdessen.agents/skills/impeccable/scripts/impeccable.cmdauf. Der Launcher führt eine eigenständige Binärdatei aus, die daneben ausgeliefert oder beim ersten Start heruntergeladen wird; es ist keine Node- oder andere Laufzeitumgebung erforderlich. Übergib eine benannte Quelldatei oder Route als--target <path>. Es lädt PRODUCT.md, DESIGN.md, das passende Oberflächen-Briefing und bei Bedarf native Plattformhilfen; folge seinen Anweisungen und führe es nicht erneut aus. - Lade das Playbook der Anfrage: seine Befehls-Tabellen-Referenz für einen expliziten/impliziten Unterbefehl oder reference/new-work.md für eine neue Oberfläche oder eine neue visuelle Welt. Überprüfe Ziel und aktuellen visuellen Zustand vor der Bearbeitung. Wenn die App nicht ausgeführt werden kann, beginne mit festgelegten visuellen Regression-Golden oder Screenshot-Fixtures; überprüfe Ziel und Aktualität mit aktuellen Tokens, CSS, Komponenten oder Assets, löse Konflikte und vergleiche Theme/Varianten-Aufnahmen.
- Lies nach der Analyse und Richtungsbestimmung reference/craft-floor.md unmittelbar vor jeder UI-Bearbeitung, einschließlich kleiner Verfeinerungen. Es enthält die Qualitätsuntergrenze, die absoluten Verbote und die Reflexe, die kein Detektor erfasst. Lade es nicht für reine Planungsarbeit.
Launcher nicht verfügbar: Bei Ablehnung oder Fehlschlag sende vor dem nächsten Tool-Aufruf eine separate Nachricht: „Context loading did not run; I’ll read the existing project context directly.“ Lies dann vorhandene PRODUCT.md und DESIGN.md, ohne fehlenden Kontext zu erfinden, befolge die anwendbaren Schritte 2–3 und fahre mit den erlaubten Tools fort. Dies gilt für Planung und Bearbeitung; ein Launcher-Fehler allein blockiert keines von beiden.
Wie man gestaltet
- Das Briefing gewinnt. Halte festgelegte Ästhetiken, Epochen, Materialien, Schriftarten und Paletten ein, selbst wenn sie mit einer Warnung vor gesättigten Mustern in Konflikt stehen. Ein klares Briefing in deinem Geschmack umzuleiten, ist ein Fehler.
- Verfeinerung bewahrt; Redesign ersetzt. Verfeinerung bewahrt die bestehende Identität, das Verhalten, den Text und alles, was außerhalb des Umfangs liegt. Frage, bevor du sachlichen Text ersetzt oder Behauptungen hinzufügst. Redesign bewahrt die Produktwahrheit, den Inhalt, die Funktion, native Möglichkeiten und Einschränkungen, behandelt das alte Aussehen jedoch als Beleg und Anti-Referenz; wähle eine Ersatzwelt in new-work und ersetze DESIGN.md. Teile niemals die Differenz in Politur auf das verworfene Aussehen.
- Visuelle Autorität ist ein Beleg, kein Dateiname. Das Fehlen von DESIGN.md allein macht ein Projekt nicht zum Greenfield; new-work entscheidet, ob die bestehende Welt bewahrt, erweitert oder ersetzt wird.
Modi
Der Modus benennt, wie der Erfolg des Besuchers auf dieser Oberfläche aussieht.
- Überzeugen (Persuade): Der Besucher entscheidet und handelt; Design ist das Produkt. Landingpages, Marketing, Kampagnen, Preise. Verdiene Aufmerksamkeit und Handlung. Verwende echte Bilder, wenn das Briefing es erfordert; folge der festgelegten Welt, nicht der Kategoriegewohnheit.
- Bedienen (Operate): Der Besucher erledigt eine Aufgabe. App-UI, Dashboards, Editoren, Admin, Einstellungen, Werkzeuge. Durchsuchbarkeit, Konsistenz, native Erwartungen und die reale Nutzungsszene haben Vorrang vor Ausdruck. Marke lebt in präzisen Details.
- Lesen (Read): Der Besucher versteht etwas. Docs, Artikel, Leitfäden, Hilfe, Changelogs. Strukturiere für Verständnis, dann mache das Leseerlebnis lohnend, um zu bleiben.
- Erleben (Experience): Der Besucher ist im Werk selbst. Portfolios, Galerien, Ausstellungen. Lass das Artefakt vom ersten Viewport an führen; die Schnittstelle tritt zurück.
Wähle den Modus anhand der angeforderten Oberfläche, nicht des Produkts, und behalte ihn nur in diesem Oberflächen-Briefing bei. Die Landingpage eines Tools ist immer noch Überzeugen; die Dokumentation eines Modehauses ist immer noch Lesen; ein Docs-Index ist Lesen, nicht Überzeugen. Siehe new-work.md für neue Oberflächen und operate.md für tiefere Bedienen/Lesen-Anleitungen.
Befehle
| Befehl | Kategorie | Beschreibung | Referenz |
|---|---|---|---|
craft [feature] | Bauen | Veralteter Alias für eine normale new-work-Anfrage | reference/craft.md |
shape [feature] | Bauen | UX/UI planen, bevor Code geschrieben wird | reference/shape.md |
init | Bauen | Dauerhaften Produktkontext in PRODUCT.md erfassen | reference/init.md |
document | Bauen | DESIGN.md aus bestehendem Projektcode generieren | reference/document.md |
extract [target] | Bauen | Wiederverwendbare Tokens und Komponenten in ein Designsystem extrahieren | reference/extract.md |
critique [target] | Bewerten | UX-Design-Review mit heuristischem Scoring | reference/critique.md |
audit [target] | Bewerten | Technische Qualitätsprüfungen (a11y, Perf, Responsive) | reference/audit.md · nativ: reference/audit.native.md |
polish [target] | Verfeinern | Letzte Qualitätsdurchsicht vor der Auslieferung | reference/polish.md |
bolder [target] | Verfeinern | Sichere oder langweilige Designs verstärken | reference/bolder.md |
quieter [target] | Verfeinern | Aggressive oder überreizende Designs beruhigen | reference/quieter.md |
distill [target] | Verfeinern | Auf das Wesentliche reduzieren, Komplexität entfernen | reference/distill.md |
harden [target] | Verfeinern | Produktionsreif: Fehler, i18n, Randfälle | reference/harden.md |
onboard [target] | Verfeinern | Erstnutzerflüsse, leere Zustände, Aktivierung gestalten | reference/onboard.md |
animate [target] | Verbessern | Zielgerichtete Animationen und Bewegung hinzufügen | reference/animate.md |
colorize [target] | Verbessern | Strategische Farbe in monochrome UIs einbringen | reference/colorize.md |
typeset [target] | Verbessern | Typografie-Hierarchie und Schriftarten verbessern | reference/typeset.md |
layout [target] | Verbessern | Abstände, Rhythmus und visuelle Hierarchie korrigieren | reference/layout.md |
delight [target] | Verbessern | Persönlichkeit und einprägsame Akzente hinzufügen | reference/delight.md |
overdrive [target] | Verbessern | Konventionelle Grenzen überschreiten | reference/overdrive.md |
clarify [target] | Beheben | UX-Texte, Labels und Fehlermeldungen verbessern | reference/clarify.md |
adapt [target] | Beheben | An verschiedene Geräte und Bildschirmgrößen anpassen | reference/adapt.md · nativ: reference/adapt.native.md |
optimize [target] | Beheben | UI-Performance diagnostizieren und beheben | reference/optimize.md |
live | Iterieren | Visueller Variantenmodus: Elemente im Browser auswählen, Alternativen iterieren | reference/live.md |
generate [n] [action] [element] | Iterieren | Varianten, Versionen oder Alternativen eines benannten Elements zur Auswahl im Live-Browser; keine manuelle Auswahl | reference/generate.md |
Routing:
- Kein Argument: Lese routing.md und präsentiere sein kontextbewusstes Menü; führe niemals automatisch einen Befehl aus.
- Explizite oder klar implizierte Anfrage zum Ausführen eines Befehls: Lade seine Referenz (native Variante auf nativen Plattformen) und folge ihr. Frage einmal, wenn zwei Befehle passen.
- Workflow- oder Befehlsauswahlfrage: Lese Workflow-Fragen.
- Andernfalls: Behandle die Anfrage als allgemeine Designarbeit. Fehlende PRODUCT.md leitet eine neue Oberfläche oder Ersatzwelt über init, dann new-work; eine enge Verfeinerung bestehenden Codes fährt auf der bestehenden Implementierung fort, wie
impeccable contextes vorgibt, und bietet init danach an, ohne darauf zu blockieren. teachist ein Alias fürinit.craftist ein veralteter Alias für normale new-work und fügt nichts hinzu.shapeübernimmt die Aufgabenermittlung und tritt dann nur für visuelle Welt- und Oberflächenkonzeptentscheidungen in new-work ein.
Nachdem init PRODUCT.md geschrieben hat, fahre fort, ohne impeccable context erneut auszuführen; init lädt die native Plattformreferenz selbst, wenn die von ihm aufgezeichnete Plattform ios, android oder adaptive ist.
Anheften / Lösen (Pin / Unpin): .agents/skills/impeccable/scripts/impeccable pin <pin|unpin> <command> erstellt oder entfernt eine eigenständige $<command>-Verknüpfung. Melde das Ergebnis des Skripts prägnant; gib stderr bei Fehler wörtlich weiter.
Hooks: $impeccable hooks <on|off|status|ignore-rule|ignore-file|ignore-value|reset> verwaltet den Design-Detektor-Hook für dieses Projekt (führt den Detektor automatisch nach UI-Dateibearbeitungen aus und zeigt Ergebnisse an). Lade reference/hooks.md, wenn der Nutzer es mit einem Argument aufruft.
Doctor: $impeccable doctor meldet und repariert Abweichungen zwischen den Impeccable-Artefakten dieses Projekts (PRODUCT.md, DESIGN.md und sein Sidecar, Konfiguration, Oberflächen-Briefings, der Hook) und dem, was diese Version liest. Lade reference/doctor.md, wenn der Nutzer es aufruft oder wenn er fragt, was veraltet, abweichend oder auffrischungsbedürftig ist. Eine CONTEXT_STALE-Direktive in der Ausgabe von Setup ist das günstige Teilstück desselben Berichts; reagiere dort gemäß ihren eigenen Anweisungen, anstatt doctor ungefragt auszuführen.
Repariere niemals Abweichungen als Nebenwirkung einer Designaufgabe. Ein CONTEXT_STALE-Befund wird gemeldet, nicht umgesetzt, es sei denn, der Nutzer fragt danach. Die einzige Ausnahme ist ein mit auto markierter Befund, den der nächste Schreibvorgang in diese Datei ohnehin ausführt.