Assessor_2.0/.claude/skills/assessor-ui/SKILL.md

name

description

assessor-ui

Verbindliche Designsprache und UI-Implementierungsregeln fuer die ASSESSOR-Webapplikation (Security-Audit-Frontend mit hoher Informationsdichte, Vorbild Ableton Live und CrowdStrike Falcon). Diesen Skill IMMER verwenden, sobald an ASSESSOR irgendetwas Sichtbares entsteht oder geaendert wird: neue Seite, neue Komponente, Layoutaenderung, CSS-Anpassung, Farb- oder Abstandsfrage, Tabelle, Kachel, Dialog, Filter, Badge, Formular, Dark-/Light-Mode, Responsive-Verhalten. Auch verwenden, wenn der Nutzer nur "mach das haesslich weg", "das sieht anders aus als Work", "vereinheitliche das", "bau mir eine Ansicht fuer X" oder "Datahub/Ergebnisse/Graph anpassen" sagt. Der Skill ersetzt jede Standard-Designentscheidung des Modells. Ohne diesen Skill entsteht generisches SaaS-UI und die Arbeit muss verworfen werden.

ASSESSOR UI

Verbindliches Designsystem fuer ASSESSOR. Keine Empfehlung, keine Inspiration: Vorschrift.

Zweck

ASSESSOR ist ein Analysewerkzeug fuer Active-Directory-Sicherheitsbefunde aus PingCastle, Purple Knight, Maester und MSCT. Die Oberflaeche muss viele Findings mit vielen gleichzeitigen Zustandsdimensionen zeigen, ohne zu ueberfordern. Sie ist ein Arbeitsraum, keine Website.

Dieser Skill existiert, weil KI-gestuetzte Implementierung sonst pro Aenderung eine neue lokale Loesung erfindet. Genau das hat den heutigen Zustand erzeugt: Work sieht anders aus als Datahub, Ergebnisse anders als Graph, dieselbe Funktion hat drei Farben.

Ablauf bei jeder UI-Aufgabe

1. assets/tokens.css und assets/components.css lesen. Beide sind die Implementierungsbasis.
2. Betroffenen Seitenarchetyp bestimmen (siehe references/page-archetypes.md).
3. Pruefen, ob eine bestehende Komponente ausreicht. Neue Komponente nur, wenn keine Variante passt.
4. Implementieren, ausschliesslich mit Tokens und bestehenden Klassen.
5. Gegen references/review-checklist.md pruefen, in Dark UND Light.
6. Abweichungen benennen, nicht stillschweigend loesen.

Referenzdateien

• assets/tokens.css — alle Farben, Masse, Radien, Schatten, Typografie. Einzige Quelle.
• assets/components.css — Referenzimplementierung aller Kernkomponenten.
• references/state-model.md — Zustandsdimensionen und ihre Darstellung. Vor jeder Badge-/Statusarbeit lesen.
• references/components.md — Komponentenvertraege mit festen Massen und Aufbau.
• references/page-archetypes.md — Shell und die vier erlaubten Seitenlayouts.
• references/review-checklist.md — Abnahmekriterien, Verbotsliste, Ist-/Soll-Korrekturen der bestehenden Screens.

---

1. Design-DNA

Von Ableton Live uebernommen

• Flache, dicht gepackte Arbeitsflaechen. Nutzflaeche vor Weissraum.
• Stabile Raumzonen. Beim Ansichtswechsel bleibt die Raumkarte identisch.
• Kompakte Controls mit kleinen Radien. Controls wirken wie Instrumententeile, nicht wie Webelemente.
• Panelgrenzen durch 1-px-Linien, nicht durch Schatten oder Abstand.
• Chrome ist neutral. Farbe gehoert den Daten und ihren Zustaenden.
• Kontextabhaengige Werkzeuge statt permanent sichtbarer Optionsfluten.
• Vollstaendige Tastaturbedienung entlang fachlicher Achsen.

Von CrowdStrike Falcon uebernommen

• Findings sind die primaeren Arbeitsobjekte. Alles andere ist Kontext.
• Scharfe Trennung von Risiko, Quelle, Status und Aktion.
• Dichte Investigation-Tabellen mit persistentem Detailpanel.
• Priorisierung ist sichtbar, nicht erst durch Sortierung erschliessbar.
• Facettierte Filterung mit Trefferzahlen.

Ausdruecklich NICHT uebernommen

Markenfarben, Logos, proprietaere Icons, 1:1-Layoutkopien einzelner Screens. Das Ergebnis ist eine eigenstaendige ASSESSOR-Sprache.

In einem Satz

Dunkel- und hellgleichwertig, flach, dicht, rechteckig, zonenstabil, zustandsexplizit, tastaturfaehig.

---

2. Nicht verhandelbare Regeln

Diese Regeln gelten ohne Ausnahme. Ein Verstoss ist ein Fehler, keine Stilfrage.

Farbe und Form

• Kein Hex-, rgb()- oder hsl()-Wert ausserhalb von tokens.css.
• Dark Mode kennt in jedem Panel genau diese Grundfarben, ohne Ausnahme und ohne Widget-Sonderpalette: Hintergrund #242426, Element #323238, Textbox #1A1A1C, Schrift #E2DFE6, abgesetzte Schrift #B7BAC0. Immer ueber die Rollen --surface-panel, --surface-panel-raised, --surface-input, --text-primary, --text-secondary ansprechen, nie als Literal.
• Radien: --radius-xs 2 px, --radius-sm 3 px, --radius-md 4 px. Panels und Shell: 0. Nichts darueber.
• Buttonform ist verbindlich und ueberall dieselbe, unabhaengig von der Farbe: --btn-radius (abgerundete Ecken), --btn-h als Hoehe, --btn-pad-x als waagerechtes Polster, senkrecht kein eigenes Polster. Keine Ansicht setzt eine eigene Buttonhoehe, einen eigenen Radius oder ein eigenes Polster. Ausgenommen sind nur zusammengesetzte Reiter (View-Tabs, Sidebar).
• Traegt eine Schaltflaeche Farbe, ist es --button-accent (Standardgelb #E9A63C, in beiden Skins gleich) mit --button-accent-text. Nie ein anderes Gelb, nie der Ton des Command Bands.
• Rahmen: 1 px. 2 px ausschliesslich fuer Auswahl- und Fokusrahmen.
• Markierungsstrich (farbige linke Kante an aktivem, ausgewaehltem oder zugehoerigem Objekt): immer --marker-width, nie ein eigener Pixelwert. Gilt fuer Recordzeile, Result-Fenster, Pfadschritt, aktiven Zeitschnitt und Katalogzeile gleichermassen.
• Schatten: nur --shadow-overlay und --shadow-popover, nur an echten Overlays. Kein Schatten an Panels, Tiles, Zeilen, Buttons, Tabellen.
• Kein Glassmorphism, kein Neumorphismus, kein Farbverlauf als Flaeche, kein Hover-Lift, kein Scale-Effekt.
• Der Akzent (Violett) bedeutet ausschliesslich: Primaeraktion, aktive Ansicht, Auswahl. Nie Severity, nie Erfolg, nie Markierung, nie Dekoration.

Zustaende

• Zustandsfarbe allein ist verboten. Jeder relevante Zustand traegt zusaetzlich Text, Glyph, Form oder Position (WCAG 2.2, 1.4.1).
• Gefuellte farbige Badges sind ausschliesslich der Severity vorbehalten.
• Workflow- und Reviewzustaende sind Outline-Chips mit Punkt.
• Outcome (pass, fail, warning, not_run, not_applicable, execution_error) ist Text plus Glyph, nie gefuellt.
• Auswahl, Fokus, Bookmark und Severity muessen an einem Objekt gleichzeitig ablesbar sein.

Layout

• Es gibt genau eine Shell. Jede Seite verwendet sie unveraendert.
• Es gibt genau vier Seitenarchetypen. Eine fuenfte Seitenform ist unzulaessig.
• Der Seitentitel steht in der Topbar. Keine Hero-Ueberschrift im Inhalt, kein Eyebrow-Label ueber dem Titel.
• Kein zentrierter Inhaltsspalten-Look. Der Inhalt nutzt die verfuegbare Breite.
• Tabellen bekommen maximale Breite. Keine Tabelle in einer Karte, keine verschachtelten Tabellen.
• Ohne funktionalen Grund bleibt kein Bereich der Hauptflaeche ueber 25 Prozent leer.

Themes

• Dark und Light sind gleichwertig. Beide rendern aus denselben semantischen Rollen.
• Ein Light-Mode-Fix per Selektor-Override ist verboten. Fehlt ein Wert, fehlt eine Rolle.

CSS-Architektur

• Layer-Reihenfolge fest: @layer tokens, base, shell, components, utilities;
• Kein !important.
• Keine seitenspezifischen Ueberschreibungen (.page-datahub .btn { ... } ist verboten).
• Keine chronologischen Reparaturschichten. Bestehende Regel korrigieren, nicht ueberlagern.
• Inline-Styles nur fuer berechnete Geometrie (Position eines Floating Window), nie fuer Farbe oder Typografie.

---

3. Shell

Identisch auf allen Seiten. Zonen behalten ihre Bedeutung, nur der Inhalt wechselt.

┌──────────────┬────────────────────────────────────────────────┐
│              │ Topbar            44 px                        │
│  Sidebar     ├────────────────────────────────────────────────┤
│  224 px      │ Command Band      34 px je Zeile, 0 bis 2      │
│              ├────────────────────────────────────────────────┤
│              │ Context Strip     24 px                        │
│              ├────────────────────────────────────────────────┤
│              │ Work Surface      Rest                         │
│              ├────────────────────────────────────────────────┤
│              │ Status Bar        24 px                        │
└──────────────┴────────────────────────────────────────────────┘

• Sidebar: Navigation, sonst nichts. Kein Systemstatus-Block, keine schwebenden Rundbuttons. Eintragshoehe 32 px. Aktiv: 2-px-Akzentkante links, --surface-selected, --text-primary.
• Topbar: links Seitentitel (--fs-xl), rechts globale Aktionen und Theme-/Dichteumschalter als 26-px-Icon-Buttons.
• Command Band: Filter- und Scope-Controls. Vorhanden, sobald die Seite filtert.
• Context Strip: aktueller Datenkontext links, Zaehler und Verbindungszustand rechts. --fs-micro.
• Status Bar: Serverstatus, Importstand, Profilversion, Tastaturhinweis.
• Sichtbare Zaehler immer als --font-mono mit tabular-nums.

---

4. Dichte

Drei Modi ueber data-density am Wurzelelement. Sie aendern ausschliesslich Hoehen und Abstaende, niemals Farben, Reihenfolge, Komponententypen oder Informationsmenge.

Modus	Zeilenhoehe	Controlhoehe	Einsatz
compact	28 px	26 px	Ergebnisse, grosse Scantabellen
Standard	32 px	30 px	Work, Graph, Datahub
reading	40 px	34 px	Review, Empfehlungstexte, Berichte

Innerhalb einer Ansicht gilt genau ein Modus. Tabellenkopf und Datenzeile teilen ihn.

---

5. Typografie

Rolle	Groesse	Gewicht	Familie
Seitentitel (Topbar)	18 px	600	UI
Panel- und Detailtitel	16 px	600	UI
Objekttitel (Tile, Zeile)	14 px	600	UI
Controls, Fliesstext	13 px	400	UI
Tabellenzellen, Sekundaertext	12 px	400	UI
Badges, Spaltenkoepfe, Zaehler	11 px	500/600	UI
DN, Timestamps, Hashes, IDs, Scores	12 px	400	Mono

Nur diese sieben Rollen. Nur die Gewichte 400, 500, 600. Zeilenhoehe 1.35 in der UI, 1.55 in Fliesstextbloecken (Description, Remediation, Likelihood of Compromise). Versalien ausschliesslich bei 11 px mit --ls-caps.

---

6. Zustandsmodell (Kurzfassung)

Sieben getrennte Dimensionen. Nie in ein Badge zusammenfassen. Vollstaendige Darstellungsregeln in references/state-model.md.

Dimension	Frage	Darstellung
Severity	Wie schwer waere die Ausnutzung?	gefuelltes Badge plus linke Kante
IOE	Wurde der Zustand konkret festgestellt?	neutrales Badge IOE FOUND
Outcome	Was meldet das Quellwerkzeug?	Textfarbe plus Glyph
Confidence	Wie belastbar ist die Aussage?	Meta-Badge, bei niedrig zusaetzlich gestrichelter Rahmen
Review State	Fachlich bewertet?	Outline-Chip mit Punkt
Action State	Massnahme offen oder erledigt?	Outline-Chip mit Punkt
Data Completeness	Alle Pflichtfelder vorhanden?	gestrichelter Rahmen am Objekt

Bookmark ist Nutzermarkierung, kein Fachzustand: gefuelltes Icon plus rechte 3-px-Kante in --state-bookmark.

Bekannte Farbnaehe

Das Command Band (Bernstein) und --sev-medium (Gold) liegen farblich nah beieinander. Aufloesung: das Band ist immer ein volles Steuerelement in der Bandzone, Severity immer ein Badge mit Versaltext am Datenobjekt. Severity-Badges erscheinen nie im Band, Bandfarbe nie an einem Datenobjekt.

---

7. Tastaturbedienung

Baseline auf allen Seiten:

Ctrl/Cmd+K   Command Palette
/            Fokus Freitextfilter
Pfeile, J, K Auswahl in Liste, Grid, Tabelle bewegen
Enter        Detail oeffnen oder bestaetigen
Space        markieren, Bookmark umschalten
Shift+Pfeil  Bereichsauswahl
Esc          lokalen Kontext schliessen, Fokus zurueck an Ausloeser
1 bis 5      Ansichtswechsel im View Switcher
?            Shortcut-Uebersicht

Tabellen und Grids sind ein einziger Tabstopp mit interner Pfeilnavigation (W3C Grid Pattern), keine Kette einzelner Tabstopps. Modale Dialoge haben einen geschlossenen Fokuszyklus und geben den Fokus beim Schliessen an den Ausloeser zurueck.

---

8. Verbotene Muster

• Generische SaaS-Karte mit grossem Radius, Schatten und viel Innenabstand
• Zentrierte Hero-Ueberschrift mit Untertitel als Seitenanfang
• Eyebrow-Label ueber dem Seitentitel
• Zentrierte schmale Inhaltsspalte auf einer Datenseite
• Schwebende runde Buttons ueber dem Inhalt
• Farbige Titelleiste an Dialog oder Floating Window
• Zwei Ansichten derselben Datenmenge mit unterschiedlicher Zustandsdarstellung
• Severity als reiner Text in einer Tabelle, wenn sie anderswo ein Badge ist
• Unterschiedliche Filtermechanik je Modul
• Aktionen, die je Seite unterschiedliche Buttonvarianten verwenden
• Rechtsbuendiger Text in Tabellen ausserhalb numerischer Spalten
• Dekorative KPI-Karten ohne Vergleichswert
• Diagramm ohne beantwortete Frage: "Welche Entscheidung faellt danach in fuenf Sekunden leichter?"
• Emojis in der Oberflaeche

---

9. Definition of Done

Eine UI-Aenderung ist fertig, wenn alle Punkte erfuellt sind:

1. Keine neue Farbe, kein neues Mass ausserhalb von tokens.css.
2. Dark und Light geprueft, beide aus denselben Rollen, kein Override.
3. Alle sieben Zustandsdimensionen korrekt und getrennt dargestellt.
4. Auswahl, Fokus und Bookmark gleichzeitig sichtbar und unterscheidbar.
5. Vollstaendig per Tastatur bedienbar, Fokus jederzeit sichtbar.
6. Dichtemodus konsistent, Tabellenkopf und Zeilen in derselben Klasse.
7. Der Screenshot ist ohne Logo als dieselbe Applikation wie Work erkennbar.
8. references/review-checklist.md vollstaendig abgearbeitet.