280 lines
15 KiB
Markdown
280 lines
15 KiB
Markdown
---
|
|
name: assessor-ui
|
|
description: >-
|
|
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.
|
|
|
|
```text
|
|
┌──────────────┬────────────────────────────────────────────────┐
|
|
│ │ 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:
|
|
|
|
```text
|
|
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.
|