# assessor-ui

Verbindliche Designsprache fuer ASSESSOR, ausgelegt fuer Claude Code.

## Installation

Projektweit (empfohlen, damit der Skill mit dem Repository versioniert wird):

```bash
mkdir -p <projekt>/.claude/skills
cp -r assessor-ui <projekt>/.claude/skills/
```

Benutzerweit:

```bash
mkdir -p ~/.claude/skills
cp -r assessor-ui ~/.claude/skills/
```

## Einbindung im Projekt

Nutzerkorrektur 2026-09-18: Data Hub, Work und Pathfinder sind die verbindlichen
Ableton-inspirierten Referenzen, auch fuer Client Info, Mockups und Prototypen.
Zuerst [AGENTS.md](../../../AGENTS.md#binding-assessor-design-language) und den
Vorrangabschnitt in `SKILL.md` lesen. Die aktuellen Projekt-Tokens liegen in
`src/styles/ui-tokens.css`; bestehende Komponenten und Styles werden weiterverwendet.
Die Dateien unter `assets/` und aeltere Referenzskizzen sind historische Beispiele.
Sie duerfen nicht ueber die aktuellen Styles kopiert oder erneut in den Build
eingebunden werden. Die fruehere Kopieranleitung ist hiermit ausdruecklich aufgehoben.

Theme und Dichte am Wurzelelement:

```html
<html data-theme="dark" data-density="standard">
```

Erlaubte Werte: `data-theme` = `dark` oder `light`, `data-density` = `compact`, `standard`, `reading`.

## Aufbau

| Datei | Inhalt |
|-------|--------|
| `SKILL.md` | Design-DNA, nicht verhandelbare Regeln, Shell, Dichte, Typografie, Definition of Done |
| `assets/tokens.css` | alle Farben, Masse, Radien, Schatten, Typografie fuer Dark und Light |
| `assets/components.css` | Referenzimplementierung der Kernkomponenten |
| `references/state-model.md` | sieben Zustandsdimensionen und ihre Darstellung |
| `references/components.md` | Komponentenvertraege mit festen Massen |
| `references/page-archetypes.md` | Shell und die vier erlaubten Seitenlayouts |
| `references/review-checklist.md` | Abnahmekriterien, grep-Pruefungen, Ist-/Soll-Korrekturen |

## Nutzung

Der Skill triggert automatisch bei UI-Aufgaben an ASSESSOR. Erzwingen laesst er sich mit:

```text
Nutze den Skill assessor-ui. Gestalte Client Info mit der bestehenden Designsprache von Data Hub, Work und Pathfinder.
```

Vor dem Abschluss einer Aenderung:

```text
Pruefe die Aenderung gegen references/review-checklist.md, Abschnitte 1 bis 5.
```