--- title: "KI-Dev-Skill — zenit Zig UI Doku" description: "Ein Entwicklungshandbuch für Claude Code und andere KI-Agents. Ist er installiert, greift ein Agent beim Schreiben von zenit-UI zuerst zu vorhandenen…" url: https://zenit.z.express/de/docs/guide/ai-skill language: de alternate_en: https://zenit.z.express/docs/guide/ai-skill.md alternate_zh: https://zenit.z.express/zh/docs/guide/ai-skill.md alternate_es: https://zenit.z.express/es/docs/guide/ai-skill.md alternate_ja: https://zenit.z.express/ja/docs/guide/ai-skill.md alternate_ko: https://zenit.z.express/ko/docs/guide/ai-skill.md alternate_fr: https://zenit.z.express/fr/docs/guide/ai-skill.md project: zenit v0.1.0-alpha (Zig 0.15.2, macOS) source: https://github.com/version-next/zenit --- # 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. ## 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](https://zenit.z.express/downloads/zenit-ui-dev.zip)[SKILL.md ansehen](https://zenit.z.express/downloads/zenit-ui-dev.SKILL.md) 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 ```zig ~/.claude/skills/ └── zenit-ui-dev/ ├── SKILL.md ├── references/ └── tools/ ``` Oder ins Projekt entpacken und committen (mit dem Team geteilt): Entpacken nach ```zig .claude/skills/ └── zenit-ui-dev/ ├── SKILL.md ├── references/ └── tools/ ``` ```sh # 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 | Datei | Inhalt | | --- | --- | | `SKILL.md` | Einstiegspunkt: Trigger, Workflow, harte Regeln, Entscheidungstabellen und welche Reference wann zu lesen ist | | `references/app-architecture.md` | Schichtung großer Apps am Beispiel eines Produktions-Editors: State, Views, Commands, Services | | `references/components.md` | Der ui.widgets-Katalog, beide mount-Formen, eine Tabelle Design-Element → Komponente | | `references/macos-native.md` | Menüs, Tastenkürzel, Dateidialoge, Zwischenablage, Drag & Drop, Multi-Window, IME | | `references/pencil-design.md` | Pencil-Designs (pen.dev): Werte per MCP lesen, Feld-Mapping, numerischer Screenshot-Diff | | `references/performance.md` | Virtuelle Listen, Dirty-Levels, große Texte, Hintergrund-Threads und der Main-Thread | | `references/pitfalls.md` | Symptom → Ursache → Lösung, gesammelt aus der Fix-Historie von zenit und einer Produktions-App | | `references/project-setup.md` | Neues Projekt, build.zig / build.zig.zon, .app-Packaging, Weiterreichen von Build-Optionen | | `references/state-reactivity.md` | bindState / cx.on, Signal / Memo / Effect, Scope-Lebensdauer und Aufräumen | | `references/styling.md` | Schichten Token → styles.zig → recipe, Themes, der Notausgang ui.arb | | `references/ui-tree-layout.md` | Nodes, Flex-Layout, Größen, Nodes aktualisieren, Sichtbarkeit, Koordinaten | | `references/verification.md` | Die Selbstprüfungsschleife des Agents: Build, Screenshot, E2E-Harness, DevTools, Logs | | `tools/design_diff.ts` | Numerischer Diff von Design-PNG und App-Screenshot, mit konkreten Hinweisen | | `tools/png.ts` | Abhängigkeitsfreier PNG-Decoder für design\_diff | | `tools/shot.ts` | Screenshot 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](https://www.pen.dev/) EMPFOHLENER WORKFLOW · PENCIL + SKILL Kombiniert mit Pencil: entwerfen, dann mit KI bauen Wir empfehlen, in [Pencil](https://www.pen.dev/) 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](https://www.pen.dev/) 1. 01.penPencil-Entwurf 2. 02MCPAgent liest exakte Werte 3. 03zigzenit-Code aus Widgets + Tokens 4. 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. ```sh 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/.png /tmp/actual.png ``` ## Verwendung Keine besondere Syntax. Beschreiben Sie die UI oder das Problem; hier einige Prompts, die gut funktionieren: ``` 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](https://zenit.z.express/downloads/zenit-ui-dev.SKILL.md) auch direkt lesen.