2.0 KiB
2.0 KiB
assessor-ui
Verbindliche Designsprache fuer ASSESSOR, ausgelegt fuer Claude Code.
Installation
Projektweit (empfohlen, damit der Skill mit dem Repository versioniert wird):
mkdir -p <projekt>/.claude/skills
cp -r assessor-ui <projekt>/.claude/skills/
Benutzerweit:
mkdir -p ~/.claude/skills
cp -r assessor-ui ~/.claude/skills/
Einbindung im Projekt
Die Token- und Komponentendateien sind nicht nur Dokumentation, sondern die Implementierungsbasis:
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:
@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 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:
Nutze den Skill assessor-ui. Baue die Datahub-Uebersicht auf Archetyp D um.
Vor dem Abschluss einer Aenderung:
Pruefe die Aenderung gegen references/review-checklist.md, Abschnitte 1 bis 5.