# 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

Die Token- und Komponentendateien sind nicht nur Dokumentation, sondern die Implementierungsbasis:

```bash
cp .claude/skills/assessor-ui/assets/tokens.css      src/styles/tokens.css
cp .claude/skills/assessor-ui/assets/components.css  src/styles/components.css
```

Einstiegspunkt des Stylesheets:

```css
@layer tokens, base, shell, components, utilities;

@import "./styles/tokens.css";
@import "./styles/base.css";
@import "./styles/shell.css";
@import "./styles/components.css";
```

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. Baue die Datahub-Uebersicht auf Archetyp D um.
```

Vor dem Abschluss einer Aenderung:

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