--- title: "Skill de dev IA — Docs zenit Zig UI" description: "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…" url: https://zenit.z.express/fr/docs/guide/ai-skill language: fr 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_de: https://zenit.z.express/de/docs/guide/ai-skill.md project: zenit v0.1.0-alpha (Zig 0.15.2, macOS) source: https://github.com/version-next/zenit --- # 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. ## 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](https://zenit.z.express/downloads/zenit-ui-dev.zip)[Voir SKILL.md](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. **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 ```zig ~/.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 ```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 > > **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 | Fichier | Contenu | | --- | --- | | `SKILL.md` | Point d'entrée : déclencheurs, workflow, règles strictes, tables de décision et quelle reference lire quand | | `references/app-architecture.md` | Découpage d'une grande application, d'après un éditeur en production : état, vues, commandes, services | | `references/components.md` | Le catalogue ui.widgets, les deux formes de mount, une table élément de design → composant | | `references/macos-native.md` | Menus, raccourcis, dialogues de fichiers, presse-papiers, glisser-déposer, multifenêtre, IME | | `references/pencil-design.md` | Maquettes Pencil (pen.dev) : lire les valeurs via MCP, correspondance des champs, diff numérique des captures | | `references/performance.md` | Listes virtuelles, niveaux de dirty, gros textes, threads d'arrière-plan et thread principal | | `references/pitfalls.md` | Symptôme → cause → correctif, tirés de l'historique de correctifs de zenit et d'une application en production | | `references/project-setup.md` | Nouveau projet, build.zig / build.zig.zon, packaging .app, transmission des options de build | | `references/state-reactivity.md` | bindState / cx.on, Signal / Memo / Effect, durée de vie et nettoyage des Scope | | `references/styling.md` | Couches Token → styles.zig → recipe, thèmes, l'échappatoire ui.arb | | `references/ui-tree-layout.md` | Nœuds, layout Flex, dimensionnement, mise à jour des nœuds, visibilité, coordonnées | | `references/verification.md` | La boucle d'auto-vérification de l'agent : build, capture, harness E2E, DevTools, logs | | `tools/design_diff.ts` | Diff numérique entre le PNG de la maquette et la capture de l'application, avec des pistes concrètes | | `tools/png.ts` | Décodeur PNG sans dépendance utilisé par design\_diff | | `tools/shot.ts` | Capture 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](https://www.pen.dev/) WORKFLOW RECOMMANDÉ · PENCIL + SKILL Associez-la à Pencil : concevez, puis construisez avec l’IA Nous recommandons de concevoir dans [Pencil](https://www.pen.dev/) 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](https://www.pen.dev/) 1. 01.penMaquette Pencil 2. 02MCPL’agent lit les valeurs exactes 3. 03zigCode zenit à partir de widgets + tokens 4. 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. ```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 ``` ## Utilisation Aucune syntaxe particulière. Décrivez l'UI ou le problème ; voici quelques prompts qui fonctionnent bien : ``` 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](https://zenit.z.express/downloads/zenit-ui-dev.SKILL.md) directement.