Erste Schritte · KI-gestützte Entwicklung

Der zenit UI dev Skill

Ein Entwicklungshandbuch für Claude Code und andere KI-Agents. Ist er installiert, greift ein Agent beim Schreiben von zenit-UI zuerst zu vorhandenen Komponenten, stylt mit Tokens und Recipes, verwaltet State entlang der zenit-Lebensdauern und baut und screenshotet seine Arbeit selbst, bevor er sie übergibt.

4 Min. Lesezeit

Download

Das Archiv ist ein Standard-Agent-Skill-Ordner: ein kurzer Einstiegspunkt SKILL.md mit Regeln und Entscheidungstabellen, die Details aufgeteilt in references/, die der Agent nur bei Bedarf liest.

Skill herunterladen.zip · 54 KB SKILL.md ansehen

zenit-ui-dev/

SKILL.md9.6 KB

references/

app-architecture.md7.2 KB

components.md8.3 KB

macos-native.md8.2 KB

pencil-design.md7.9 KB

performance.md4.1 KB

pitfalls.md8.5 KB

project-setup.md8.1 KB

state-reactivity.md7.8 KB

styling.md5.8 KB

ui-tree-layout.md6.1 KB

verification.md5.7 KB

tools/

design_diff.ts20.6 KB

png.ts3.6 KB

shot.ts3.7 KB

Installation

1
In einen Skills-Ordner legen
Für sich selbst: ~/.claude/skills/ (alle Projekte). Für ein Team: in .claude/skills/ des Repos committen, dann bekommt ihn jeder, der klont.
2
Agent-Sitzung neu starten
Claude Code liest Skills beim Sitzungsstart ein. Öffnen Sie eine neue Sitzung; /skills sollte zenit-ui-dev auflisten.
3
Wie gewohnt anfragen
Jede zenit-UI-Aufgabe lädt ihn automatisch; Sie können auch „nutze den zenit-ui-dev skill“ sagen.

Nach dem Download in Ihren Benutzerordner entpacken (alle Projekte):

Entpacken nach

~/.claude/skills/
└── zenit-ui-dev/
    ├── SKILL.md
    ├── references/
    └── tools/

Oder ins Projekt entpacken und committen (mit dem Team geteilt):

Entpacken nach

.claude/skills/
└── zenit-ui-dev/
    ├── SKILL.md
    ├── references/
    └── tools/

Other agents

# Codex and other agents that read AGENTS.md: unpack into the repo and reference it
unzip -oq zenit-ui-dev.zip -d .agents/skills
echo '- zenit UI: read .agents/skills/zenit-ui-dev/SKILL.md before writing UI code' >> AGENTS.md

NOTE

Zusammen mit zenit aktualisieren. zenit kann seine API vor 1.0 brechen. Laden Sie den Skill nach einem zenit-Upgrade erneut herunter und überschreiben Sie den alten Ordner. Der Skill nennt die zenit-Version, auf die er abzielt, und ein Agent, der Abweichungen zur API des Projekts findet, vertraut dem Quellcode.

Inhalt

DateiInhalt

SKILL.mdEinstiegspunkt: Trigger, Workflow, harte Regeln, Entscheidungstabellen und welche Reference wann zu lesen ist

references/app-architecture.mdSchichtung großer Apps am Beispiel eines Produktions-Editors: State, Views, Commands, Services

references/components.mdDer ui.widgets-Katalog, beide mount-Formen, eine Tabelle Design-Element → Komponente

references/macos-native.mdMenüs, Tastenkürzel, Dateidialoge, Zwischenablage, Drag & Drop, Multi-Window, IME

references/pencil-design.mdPencil-Designs (pen.dev): Werte per MCP lesen, Feld-Mapping, numerischer Screenshot-Diff

references/performance.mdVirtuelle Listen, Dirty-Levels, große Texte, Hintergrund-Threads und der Main-Thread

references/pitfalls.mdSymptom → Ursache → Lösung, gesammelt aus der Fix-Historie von zenit und einer Produktions-App

references/project-setup.mdNeues Projekt, build.zig / build.zig.zon, .app-Packaging, Weiterreichen von Build-Optionen

references/state-reactivity.mdbindState / cx.on, Signal / Memo / Effect, Scope-Lebensdauer und Aufräumen

references/styling.mdSchichten Token → styles.zig → recipe, Themes, der Notausgang ui.arb

references/ui-tree-layout.mdNodes, Flex-Layout, Größen, Nodes aktualisieren, Sichtbarkeit, Koordinaten

references/verification.mdDie Selbstprüfungsschleife des Agents: Build, Screenshot, E2E-Harness, DevTools, Logs

tools/design_diff.tsNumerischer Diff von Design-PNG und App-Screenshot, mit konkreten Hinweisen

tools/png.tsAbhängigkeitsfreier PNG-Decoder für design_diff

tools/shot.tsScreenshot beliebiger zenit-Apps über File-RPC (Retina)

Komponenten vor Eigenbau

Ordnet jedes Design-Element einer vorhandenen ui.widgets-Komponente zu, damit der Agent keinen Button aus Boxen nachbaut.

Lebensdauern richtig gemacht

Regeln für bindState, pub deinit, Scope-Cleanup und Seitenwechsel – die direkte Abhilfe gegen die häufigsten Leaks, Double Frees und Dangling Pointer.

Vor der Übergabe hinschauen

Lässt den Agent bauen, ausführen, screenshoten und mit der Anfrage abgleichen – statt bei „kompiliert“ aufzuhören.

Fallstricke aus einer echten App

Eine Liste von Problemen aus der Fix-Historie einer Produktions-App, jeweils mit Ursache und richtigem Vorgehen.

Empfohlen: in Pencil gestalten

Pencilpen.dev

EMPFOHLENER WORKFLOW · PENCIL + SKILL

Kombiniert mit Pencil: entwerfen, dann mit KI bauen

Wir empfehlen, in Pencil zu entwerfen und den Agenten mit diesem Skill bauen zu lassen. Flex-Layout, Abstände, Radien, Schriftgrößen und lucide-Icons einer .pen-Datei liegen nah am Modell von zenit; der Skill enthält eine Feldzuordnung und ein design_diff-Tool, damit der Agent nach Zahlen statt nach Augenmaß umsetzt.

Über Pencil

01.penPencil-Entwurf
02MCPAgent liest exakte Werte
03zigzenit-Code aus Widgets + Tokens
04diffNumerischer Abgleich mit dem Entwurf

1
Pencil-MCP verbinden
Aktivieren Sie den MCP-Server von Pencil in Ihrem Agent und öffnen Sie die .pen-Datei. Der Skill liest .pen nur über das MCP, das Design-Variablen und berechnete Größen auflöst – genau das, was eine originalgetreue Umsetzung braucht.
2
Werte lesen, nicht Pixel
Der Agent holt zuerst gap, padding, Radius, Schriftgröße und Farbe mit Get(nodeId, { resolveVariables: true }) und überträgt sie dann auf zenit: fill_container → .fill(), chevron-down → ui.icons.chevron_down.
3
Diffen bis es passt
Exportieren Sie das Design mit scale 2, erfassen Sie das echte Fenster mit tools/shot.ts, und tools/design_diff.ts meldet Versatz, Größendifferenz, eine Heatmap und Farbabweichungen; der Agent korrigiert anhand der Hinweise, etwa 5 s pro Runde.

Terminal

SKILL=~/.claude/skills/zenit-ui-dev
bun $SKILL/tools/design_diff.ts --self-test
ZENIT_E2E_FILE_RPC_DIR=$RPCDIR bun $SKILL/tools/shot.ts /tmp/actual.png
bun $SKILL/tools/design_diff.ts /tmp/design/<nodeId>.png /tmp/actual.png

Verwendung

Keine besondere Syntax. Beschreiben Sie die UI oder das Problem; hier einige Prompts, die gut funktionieren:

Prompts

Lies mit dem Pencil-MCP den Frame „Settings“ aus der geöffneten .pen-Datei, baue ihn mit zenit als Einstellungsfenster nach und gib ihn mir, sobald design_diff über 90 liegt.
Füge dieser App mit zenit ein Einstellungsfenster hinzu: links eine Kategorienliste, rechts ein Formular, Änderungen wirken sofort.
Verschiebe die handgeschriebenen Styles aus src/views/sidebar.zig nach styles.zig + ein Recipe.
Bei 50.000 Knoten im Dateibaum ruckelt das Scrollen – finde die Ursache, behebe sie und zeig mir danach einen Screenshot.

TIP

Sagen Sie, wie geprüft wird. Ergänzen Sie „zeig mir einen Screenshot“ oder „mit E2E prüfen“ in der Anfrage, dann folgt der Agent der Selbstprüfungsschleife des Skills – was Sie zurückbekommen, wurde tatsächlich angesehen.

Herkunft

Die Regeln stammen aus zwei Projekten: dem zenit-Framework selbst (öffentliche API, Beispiele, Komponentenkatalog, Test-Tooling) und einem produktiven macOS-Editor auf Basis von zenit (Schichtung großer Apps, native Integration und Fix-Historie). Codebeispiele stammen nach Möglichkeit aus kompilierendem Code dieser Repos und stimmen mit diesem Handbuch überein.

Die Quellen liegen im Website-Repo unter skill/zenit-ui-dev/ und werden beim Build von scripts/pack-skill.mjs gepackt. Sie können SKILL.md auch direkt lesen.

← PREV

Projektstruktur

UI-Baum & Layout