Premiers pas · Développement assisté par IA

La Skill zenit UI dev

Un manuel de développement pour Claude Code et d'autres agents IA. Une fois installée, un agent qui écrit de l'UI zenit privilégie les composants existants, stylise avec des tokens et des recipes, gère l'état selon les durées de vie de zenit, puis compile et capture son propre travail avant de le livrer.

4 min de lecture

Téléchargement

L’archive est un dossier Agent Skill standard : un point d’entrée SKILL.md court, avec les règles et les tables de décision, et des détails répartis dans references/ que l’agent ne lit qu’en cas de besoin.

Télécharger la Skill.zip · 54 KB Voir 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
La placer dans un dossier de skills
Pour vous, utilisez ~/.claude/skills/ (tous les projets). Pour une équipe, committez-la dans le .claude/skills/ du dépôt pour que chaque personne qui le clone l’obtienne.
2
Redémarrer la session de l'agent
Claude Code analyse les skills au démarrage de la session. Ouvrez une nouvelle session ; /skills doit lister zenit-ui-dev.
3
Demander comme d'habitude
Toute tâche d'UI zenit la charge automatiquement ; vous pouvez aussi dire « utilise la skill zenit-ui-dev ».

Après téléchargement, décompressez-la dans votre dossier utilisateur (tous les projets) :

Décompresser dans

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

Ou décompressez-la dans le projet et committez-la (partagée avec l'équipe) :

Décompresser dans

.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

Mettez-la à jour avec zenit. zenit peut casser son API avant la 1.0. Après une mise à jour de zenit, retéléchargez la Skill par-dessus l'ancien dossier. La Skill indique la version de zenit qu'elle cible, et un agent qui constate que l'API du projet diffère se fie au code source.

Contenu

FichierContenu

SKILL.mdPoint d'entrée : déclencheurs, workflow, règles strictes, tables de décision et quelle reference lire quand

references/app-architecture.mdDécoupage d'une grande application, d'après un éditeur en production : état, vues, commandes, services

references/components.mdLe catalogue ui.widgets, les deux formes de mount, une table élément de design → composant

references/macos-native.mdMenus, raccourcis, dialogues de fichiers, presse-papiers, glisser-déposer, multifenêtre, IME

references/pencil-design.mdMaquettes Pencil (pen.dev) : lire les valeurs via MCP, correspondance des champs, diff numérique des captures

references/performance.mdListes virtuelles, niveaux de dirty, gros textes, threads d'arrière-plan et thread principal

references/pitfalls.mdSymptôme → cause → correctif, tirés de l'historique de correctifs de zenit et d'une application en production

references/project-setup.mdNouveau projet, build.zig / build.zig.zon, packaging .app, transmission des options de build

references/state-reactivity.mdbindState / cx.on, Signal / Memo / Effect, durée de vie et nettoyage des Scope

references/styling.mdCouches Token → styles.zig → recipe, thèmes, l'échappatoire ui.arb

references/ui-tree-layout.mdNœuds, layout Flex, dimensionnement, mise à jour des nœuds, visibilité, coordonnées

references/verification.mdLa boucle d'auto-vérification de l'agent : build, capture, harness E2E, DevTools, logs

tools/design_diff.tsDiff numérique entre le PNG de la maquette et la capture de l'application, avec des pistes concrètes

tools/png.tsDécodeur PNG sans dépendance utilisé par design_diff

tools/shot.tsCapture n'importe quelle application zenit via file RPC (Retina)

Des composants avant le fait main

Associe chaque élément du design à un composant ui.widgets existant, pour que l'agent ne reconstruise pas un Button avec des boxes.

Des durées de vie correctes

Des règles pour bindState, pub deinit, le nettoyage des Scope et les changements de page — le remède direct aux fuites, doubles libérations et pointeurs pendants les plus courants.

Regarder avant de livrer

Fait compiler, lancer, capturer et vérifier par rapport à la demande — sans s'arrêter à « ça compile ».

Les pièges d'une vraie application

Une liste de problèmes tirée de l'historique de correctifs d'une application en production, chacun avec sa cause et la bonne approche.

Recommandé : concevoir dans Pencil

Pencilpen.dev

WORKFLOW RECOMMANDÉ · PENCIL + SKILL

Associez-la à Pencil : concevez, puis construisez avec l’IA

Nous recommandons de concevoir dans Pencil et de laisser votre agent l’implémenter avec cette Skill. Le layout Flex, les espacements, les rayons, les tailles de texte et les icônes lucide d’un fichier .pen sont très proches du modèle de zenit ; la Skill inclut une table de correspondance des champs et un outil design_diff pour que l’agent reproduise au chiffre près plutôt qu’à l’œil.

Découvrir Pencil

01.penMaquette Pencil
02MCPL’agent lit les valeurs exactes
03zigCode zenit à partir de widgets + tokens
04diffDiff numérique avec la maquette

1
Connecter le MCP Pencil
Activez le serveur MCP de Pencil dans votre agent et ouvrez le fichier .pen. La Skill ne lit le .pen que via le MCP, qui résout les variables de design et les tailles calculées — les deux éléments indispensables à une reproduction fidèle.
2
Lire des valeurs, pas des pixels
L’agent récupère d’abord gap, padding, rayon, taille de police et couleur avec Get(nodeId, { resolveVariables: true }), puis les transpose dans zenit : fill_container → .fill(), chevron-down → ui.icons.chevron_down.
3
Comparer jusqu'à correspondance
Exportez le design en scale 2, capturez la fenêtre réelle avec tools/shot.ts, et tools/design_diff.ts signale le décalage, l’écart de taille, une carte de chaleur et la dérive de palette ; l’agent corrige d’après les indications, environ 5 s par itération.

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

Utilisation

Aucune syntaxe particulière. Décrivez l'UI ou le problème ; voici quelques prompts qui fonctionnent bien :

Prompts

Lis le plan de travail « Settings » du fichier .pen ouvert avec le MCP Pencil, reproduis-le avec zenit sous forme de fenêtre de réglages, et rends-le-moi quand design_diff dépasse 90.
Ajoute à cette app une fenêtre de réglages avec zenit : liste de catégories à gauche, formulaire à droite, modifications appliquées en direct.
Migre les styles écrits à la main dans src/views/sidebar.zig vers styles.zig + une recipe.
Le défilement saccade quand l’arborescence contient 50 000 nœuds : trouve la cause, corrige-la et montre-moi une capture d’écran ensuite.

TIP

Dites comment vérifier. Ajoutez « montre-moi une capture » ou « vérifie avec E2E » à la demande et l'agent suit la boucle d'auto-vérification de la Skill : ce que vous recevez a réellement été vérifié visuellement.

Origine du contenu

Les règles proviennent de deux projets : le framework zenit lui-même (API publique, exemples, catalogue de composants, outillage de test) et un éditeur macOS en production construit sur zenit (découpage d’une grande application, intégration native et historique de correctifs). Les exemples de code sont, autant que possible, tirés de code qui compile dans ces dépôts et concordent avec ce manuel.

Les sources se trouvent dans le dépôt du site, sous skill/zenit-ui-dev/, et sont empaquetées au build par scripts/pack-skill.mjs. Vous pouvez aussi lire SKILL.md directement.

← PREV

Structure du projet

Arbre UI et layout