Communitygithub.com

taste

Überprüft und bereinigt die Benutzeroberfläche einer aktiven Web-App mit visuellen Tests und generiert einen verbesserten Klon in einem separaten Branch.

Was ist taste?

Taste ist eine AI-Kompetenz zur professionellen Überprüfung, Bereinigung und Verbesserung der Benutzeroberfläche einer laufenden Webanwendung. Es erstellt eine detaillierte Auditierung mit Screenshots pro Ansicht, identifiziert Probleme (Funde) nach Regeln und Quellen (Datei:Zeile) und bewertet sie nach Tiers (A, AA, AAA). Anschließend wird ein Klon des Repos in einem separaten Branch erstellt, in dem die vorgeschlagenen Änderungen nur lesend angewendet werden – der ursprüngliche Quellcode bleibt unberührt. Taste unterstützt verschiedene Modi wie Fehlerkorrektur, Bereinigung, Verbesserung, gezielte Bearbeitung und Neuerstellung, arbeitet mit Profilen (frei oder streng) und berücksichtigt Designvorgaben und Markenrichtlinien. Es ist ideal für Entwickler und Designer, die UI-Überarbeitungen sicher und nachvollziehbar durchführen möchten, und lässt sich mit anderen Skills wie dem Stageshow-Skill von Benji Taylor kombinieren, um die Präsentation der bereinigten App zu optimieren.

Funktioniert mit✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/madebyjred-sudo/taste/tree/HEAD/skill

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Was macht taste?

Auditiert eine aktive Web-App (Screenshots pro Ansicht, Funde mit Quelle, Bewertung nach Stufe) und erstellt einen Gegenvorschlag in einem Klon mit eigenem Branch, inklusive Vorher-Nachher-Bericht. Schreibt niemals in das analysierte Repository.

Wann verwenden

  • Du wirst gebeten, die Benutzeroberfläche eines Repos mit Entwicklungsserver zu überprüfen, zu bereinigen, zu korrigieren oder zu verbessern.
  • Du möchtest visuelle Tests einer UI-Änderung durchführen, bevor du sie in das eigentliche Repository übernimmst.

Profile und Welten

  • profile/REPO.json im taste-Repository: welt (Shift | Personal), profil (frei | streng), url, start, erlaubte_lese (Liste {methode, pfad} von POST-Anfragen, die nur lesen; der Rest wird blockiert), vorher ({name, port, befehl}: was der Server vor dem Start benötigt, z.B. einen SSH-Tunnel zur Entwicklungsdatenbank; taste öffnet es, wenn der Port geschlossen ist, und schließt nur das, was es geöffnet hat), umgebung (zusätzliche Variablen für den Server: deaktiviert schreibende Hintergrundjobs, z.B. eine periodische Bereinigung).
  • Ein Durchlauf liest nur bibliothek/extern und die Bibliothek seiner Welt. Niemals die der anderen.
  • Streng (Kundenprodukte mit geschlossener Marke): Tokens oder Markenelemente niemals ändern oder hinzufügen.

Stufen

A (Minimum), AA (Standard, A + AA), AAA (alles). Die Stufenbewertung verwendet die Funde dieser Stufe und aller darunterliegenden Stufen.

Die fünf Modi

ModusBeschreibung
korrekturBehebt Funde, ohne Layout oder Komponenten zu ändern
bereinigungEntfernt nur: Slogans, Hilfetexte, sekundäre Labels, Duplikate, tote Styles; wandelt "voseo" in "tuteo" um und entfernt Gedankenstriche
verbesserungVerfeinert innerhalb des aktuellen Schemas
bearbeitungNur das in --anfrage TEXT Angeforderte
erstellungNeuer Bildschirm oder neue Komponente aus der Bibliothek

Von Anfang bis Ende

  1. taste MODUS --repo PFAD --stufe AA [--nur ANSICHT] [--agent keiner|claude] [--anfrage TEXT] Auditieren, paket/ANSICHT.md pro Ansicht schreiben, in LAUF/baum auf Branch taste/AAAAMMTT-HHMM-MODUS klonen und LAUF/AUFGABE.md schreiben. Mit keiner wird der Satz zum Einfügen in deinen Agenten ausgegeben.
  2. Lies AUFGABE.md und jedes Paket (Screenshots, Funde pro Regel mit Datei:Zeile, anzuwendende Regeln, Inspiration und Komponenten desselben Musters).
  3. Schreibe LAUF/kriterien.json: eines pro Fund oder Gruppe derselben Regel. Jedes Kriterium enthält regel (ID aus regeln.json oder inspo:ID), kriterium (ein imperativer Satz), warum (mit der Quelle Datei:Zeile), ux, dx, ax (verbessert | gleich | verschlechtert + 5 Wörter), aktion, komponente, dateien, status, ablehnungsgrund.
    • Wenn etwas UX, DX oder AX verschlechtert, wird es verworfen (taste erzwingt dies).
    • Bei Bereinigung wird alles, was nicht entfernen ist, auf vorgeschlagen gesetzt.
  4. Wende im Baum nur die angewendet an, ein Commit pro Kriterium oder Gruppe. Niemals pushen.
  5. Führe die Typenprüfung des Baums durch (npx tsc --noEmit falls tsconfig vorhanden).
  6. taste vergleichen --lauf LAUF: Starte den Baum auf Port + 1, wiederhole dieselben Ansichten, erstelle Screenshots in screenshots/nachher, erneute Erkennung, führe Guards aus und generiere bericht.html.

Basisrauschen

Die Auditierung erfasst jede Ansicht zweimal auf demselben Baum und speichert in ansicht.rauschen, wie stark sie sich allein ändert (Live-Daten, Uhren, Lazy Loading). Die Guards addieren dieses Rauschen zum Grenzwert von 0,5 % der unberührten Ansichten. --ohne-rauschen überspringt es (läuft halb so schnell, aber die Guards werden strenger als nötig). Jeder Screenshot verwendet einen neuen Browserkontext: Der durch einen Klick hinterlassene Zustand (eingeklappte Leiste im localStorage) wird nicht an die nächste Ansicht weitergegeben.

Den Bericht lesen

  • Oben: Gesamtpunktzahl vorher, nachher und Delta pro Stufe; Index der Ansichten mit ihrem Delta.
  • Pro Ansicht: Desktop und Mobil vorher und nachher, jedes Kriterium mit Regel, Quelle, ux/dx/ax und Status.
  • Guards "nicht ok" oder ein negatives Delta: Führe den Branch nicht zusammen. Überprüfe den Grund.
  • Branch holen: git fetch LAUF/baum BRANCH.

Szenen: Produktpräsentation (Stageshow)

Taste bereinigt die echte App; um sie zu präsentieren (Landing-Hero, Feature-Karte, animierte Demo) wird die Skill stageshow von Benji Taylor unverändert zusammen mit den Regeln von Taste verwendet. Es ist kein anderer Befehl.

  • Standardrahmen: Gold finder-glass (Bühne 860 x 440, Fenster bei 40/40/780/480, das unten ausblutet; kompakt 400 x 340, Fenster bei 20/20/460/400, das rechts und unten ausblutet; Radius 14; Hintergrund aus drei Schichten, nach Marke neu eingefärbt). Geometrie und Screenshots: bibliothek/extern/golds/rahmen-finder-glass.md.
  • Vor dem Bauen die echte App mit einer Testsitzung erfassen (nur lesen) und ihre CSS-Tokens übernehmen.
  • Genehmigte Szenen = eigenes Gold pro Welt in bibliothek/<welt>/szenen/ (oder in TASTE_BIBLIOTHEK_SHIFT für eine zweite Arbeitswelt).
  • Probe: film.mjs --gate von Stageshow ist Hinweis, nicht Urteil (bei eigenen Golds besteht es zur Hälfte).
  • Nach der Bereinigung mit Taste wird die Szene auf dem bereits bereinigten Bildschirm aufgebaut: zuerst das Produkt, dann wie es präsentiert wird.

Fallstricke

  • Wenn eine Ansicht mit Fehler endet, lies ansicht.fehler: gesperrt POST /api/... weist auf eine fehlende POST-Leseanfrage in erlaubte_lese hin (füge sie nur hinzu, wenn du den Code gelesen hast und sie nicht schreibt); 500 ist meist die Datenbank oder ein ausgefallener Tunnel: Überprüfe die Notiz zu vorher in lauf.notizen.
  • Der Baum verlinkt node_modules des Originals: Installiere keine Abhängigkeiten im Baum.

Verwandte Skills