74 lines
2.0 KiB
Markdown
74 lines
2.0 KiB
Markdown
# 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.
|
|
```
|