inkpar Google Labs

Ink Skill.

Un skill Claude Code et Codex pour la conception UI : transforme des specs JSON en interfaces terminal interactives avec Ink.

Web et UI
Terminal UI

Télécharger OpenDesign Voir le guide d'utilisation

google-labs-code/design.md · .agents/skills/ink/SKILL.mdSKILL.md

--- name: ink description: Ink terminal renderer for json-render that turns JSON specs into interactive terminal UIs. Use when working with @json-render/ink, building terminal UIs from JSON, creating terminal component catalogs, or rendering AI-generated specs in the terminal. --- ## Quick Start ## Spec Structure (Flat Element Map) ## Standard Components ## Visibility Conditions ## Dynamic Prop Expressions ## Event System

En-tête et titres de section lus depuis le fichier source le 14/09/2026 · 9 805 caractères au total

01 Ce qu'il fait

Ce que fait le skill ink dans Claude Code et Codex

Résumé, workflow et sorties, tous lus dans le SKILL.md du skill.

D'après le SKILL.mdLu le 14-09-2026 · pas une exécution enregistrée

Dans les termes du Skill

Ce skill couvre @json-render/ink, un moteur de rendu Ink pour terminal qui transforme des spécifications JSON en arbres de composants terminal interactifs avec liaison de données, visibilité, actions et props dynamiques. Il explique comment définir un catalogue à partir du schéma Ink avec zod, enregistrer uniquement les composants personnalisés dans un registre, et effectuer le rendu avec Renderer à l'intérieur de JSONUIProvider, ou avec la version de plus haut niveau createRenderer et standardComponents.

Les lecteurs découvrent le format de spécification en carte plate d'éléments avec une clé racine, les ensembles standard de composants de mise en page, de contenu et interactifs, les expressions d'état et de liaison, le système d'événements et les actions intégrées setState, pushState et removeState, les listes répétées, le streaming JSONL via useUIStream, les rôles des providers, les exports clés, ainsi que les recommandations de design pour terminal telles qu'une largeur de 80 à 120 colonnes.

Ce qu'il produit

Un arbre de composants terminal interactif rendu à partir de la spécification JSON.
Un prompt système IA généré à partir du catalogue pour la rédaction de spécifications.
Un StateStore en mémoire indépendant du framework qui pilote les rendus.

Voir l'exemple de prompt ↗

Fonctionnement

01
Définir un catalogue à partir du schéma Ink
Importez defineCatalog depuis @json-render/core et transmettez le schéma Ink avec les définitions de composants et d'actions que vous souhaitez autoriser.
02
Enregistrer uniquement vos composants personnalisés
defineRegistry prend le catalogue en paramètre, mais les implémentations des composants standard sont déjà intégrées, si bien que seuls les composants personnalisés sont associés à des éléments Ink.
03
Envelopper le Renderer dans des providers
JSONUIProvider fournit les contextes d'état, de visibilité, d'action et de focus au Renderer, qui reçoit la spécification et le registre.
04
Rédiger les spécifications sous forme de carte plate d'éléments
La spécification comporte une clé racine nommant le premier élément et une carte d'éléments de nœuds typés avec props, enfants et liaisons d'événements facultatives.
05
Lier les props avec des expressions
Toute valeur de prop peut être résolue au moment du rendu à partir de l'état, des éléments répétés, de conditions ou de gabarits de chaînes, plutôt que d'être codée en dur.
06
Diffuser les spécifications de manière progressive
useUIStream consomme des flux de correctifs JSONL provenant d'un endpoint d'API et expose spec, send et isStreaming à l'appelant.

02 Trouvez celui qui vous convient

Quand Utiliser le Skill ink

Utilisez le skill ink dans Claude Code ou Codex lorsque le travail est de la conception UI de ce type. La portée et les limites ci-dessous sont tirées du propre fichier du skill.

Bon choix

Les équipes qui construisent des interfaces terminal à partir de spécifications JSON avec @json-render/ink.
Les projets qui ont besoin de leur propre catalogue de composants terminal en plus de l'ensemble standard.
Le rendu de spécifications générées par IA dans le terminal plutôt que dans un navigateur.
Des formulaires terminal interactifs avec champs de saisie, sélecteurs, interrupteurs et invites de confirmation.
La diffusion progressive de spécifications générées, d'un endpoint d'API vers le terminal.

Connaître les limites

Ce n'est pas un moteur de rendu pour navigateur ou React DOM ; le résultat est un arbre de composants terminal Ink.
Les mises en page principales larges et horizontales sont déconseillées, au profit d'une structure verticale.

Quoi fournir

Une spec JSONLe Renderer reçoit l'objet spec ainsi que le registry par rapport auquel il doit résoudre les composants.
Un catalogcreateRenderer est construit à partir d'un module catalog, qui est fusionné avec standardComponents et d'éventuels overrides.
Des implémentations de composantsLes composants personnalisés sont mappés à des fonctions Ink dans defineRegistry, qui reçoivent les props issues de la spec.
Des schémas de composants personnalisésChaque entrée de composant personnalisé déclare ses props avec un objet zod afin que le catalog reste type-safe.
Des valeurs d'état initialesL'état contrôlé, comme l'onglet actif, est transmis au renderer via une prop state.

03 Dans le skill

Règles que le skill ink donne à Claude Code et Codex

8 instructions concrètes, valeurs par défaut et limites que le SKILL.md fixe pour l'agent — la partie du fichier qui change le résultat.

La mise en page utilise par défaut la ligne (row)
Utilisez Box pour la mise en page avec flexDirection, padding et gap ; sauf indication contraire, flexDirection est row, ce qui surprend ceux qui attendent column.
Pas de statePath pour un binding bidirectionnel
Les composants ne doivent pas recevoir de prop statePath pour le binding ; placez plutôt l'expression de binding sur la prop de valeur naturelle du composant de formulaire.
Newline uniquement à l'intérieur d'un Box en colonne
Le composant Newline insère des lignes vides et doit être placé à l'intérieur d'un Box dont flexDirection est column.
Concevez pour 80-120 colonnes
La largeur du terminal est d'environ 80-120 colonnes, privilégiez donc des mises en page verticales avec flexDirection column pour la structure principale.
Utilisez les couleurs de terminal nommées
Les couleurs doivent provenir de la palette de terminal nommée : red, green, yellow, blue, magenta, cyan, white, gray.
Un store externe l'emporte sur les props
Lorsqu'un StateStore est transmis à StateProvider ou JSONUIProvider, initialState et onStateChange sont ignorés, de sorte que le store devient l'unique source de vérité.
borderStyle pour le regroupement
Utilisez la prop borderStyle sur Box pour le regroupement visuel ; le fichier nomme single, double, round et bold comme options.
Tabs pilote les mises en page multi-vues
Pour les interfaces multi-vues, utilisez Tabs et associez des conditions de visibilité au contenu enfant plutôt que de rendre des specs séparées.

04 Mettez-le en pratique

Installer ink dans Claude Code ou Codex

Une commande npx skills add, puis une première tâche dans votre agent et une checklist pour le résultat.

Ajouter ink à Claude Code, Codex ou Votre Agent

Exécutez-la dans votre projet ; l'installateur demande à quel agent l'ajouter.

Terminal

npx skills add https://github.com/google-labs-code/design.md --skill ink

Formulaire CLI générique skills pour .agents/skills/ink/SKILL.md ; le repository peut documenter son propre chemin.

Donnez au skill une première tâche de design UI

Rédigé dans les termes propres du skill ; remplacez les parties entre crochets par votre contenu.

Starter prompt

Build a terminal dashboard spec for [project name] using the Ink schema. Use a Box with flexDirection column containing a Heading, a Divider, a Table of [rows], and a StatusLine. Add a Tabs component bound with $bindState to /activeTab, show each view through a visible condition, and wire a ConfirmInput to a setState action that flips /confirmed.

Source : rédigé à partir du SKILL.md, dans les termes propres du skill.

Vérifiez le premier résultat

Ce que le SKILL.md lui-même présente comme un résultat correct :

Convertissez la carte d'éléments plate avec flatToTree pour confirmer que chaque élément se résout bien dans l'arbre.
Relisez une seule valeur avec useStateValue lors de la vérification que les bindings pointent vers le bon chemin.
Confirmez que les sections conditionnelles basculent effectivement en vous appuyant sur le rendu piloté par l'état de VisibilityProvider.
Écrivez dans le store externe et confirmez que le terminal se réaffiche automatiquement.
Vérifiez que les bindings bidirectionnels passent par useBoundProp avec une expression $bindState ou $bindItem.
Vérifiez que les valeurs de ProgressBar restent dans la plage 0-1.

Dans OpenDesign importez ink depuis son lien SKILL.md : Plugins → Add → Skill → Import from link, puis sélectionnez-le dans la barre supérieure.

Télécharger OpenDesign Lire le démarrage rapide

05 Open source, traçable

Source, licence et vérification

D'où proviennent les faits de cette page et quand ils ont été vérifiés pour la dernière fois.

Author: Google Labs
Repository: github.com/google-labs-code/design.md Branche main
Fichier du skill: .agents/skills/ink/SKILL.md Somme de contrôle du contenu enregistrée à la vérification ; commit 9bf8eae
License: Apache-2.0 Extrait de LICENSE.
Étoiles du dépôt: 27 894 Instantané GitHub pris le 14 septembre 2026 pour l'ensemble du dépôt google-labs-code/design.md. Ce n'est ni une note ni un décompte d'usage pour ink.
Vérifié par OpenDesign: 2026-09-14 Le fichier source, le chemin, le texte de licence et le nombre d'étoiles ont été vérifiés. Non intégré dans OpenDesign main (vérifié le 2026-08-28) ; aucune exécution en conditions réelles n'a été enregistrée sur cette page.

Dans le SKILL.md

Démarrage rapideImports, création de catalogue, un registre de composants personnalisé et le Renderer enveloppé par les providers.
Structure de la spec (carte d'éléments à plat)La forme JSON racine plus éléments, avec des nœuds typés, des props et des enfants.
Composants standardsComposants de mise en page, de contenu et interactifs listés avec leurs événements, variantes et options.
Conditions de visibilitéSyntaxe visible utilisant $state, eq, not, ainsi que les combinateurs $and et $or.
Expressions de props dynamiques$state, $bindState, $bindItem, $cond et $template, plus la règle no-statePath.
Système d'événementsemit déclenche des événements nommés qui se mappent à des actions via le champ on de l'élément.
Actions intégréessetState, pushState et removeState sont gérées automatiquement avec des paramètres statePath.
Repeat (listes dynamiques)repeat affiche un tableau d'état, avec $item et $index disponibles à l'intérieur des enfants.
StreaminguseUIStream affiche progressivement les specs à partir de flux de patchs JSONL.
ProvidersSix providers, de StateProvider et ActionProvider jusqu'au JSONUIProvider combiné.
createRenderer (API de plus haut niveau)Crée un composant à partir d'un catalogue avec standardComponents et tous les providers intégrés.
Directives de design d'UI pour terminalConventions pour la mise en page, la largeur, borderStyle, les couleurs, les titres, les onglets, les sparklines et les graphiques.

Description du skill lui-même

« Moteur de rendu terminal Ink pour json-render qui transforme des specs JSON en interfaces utilisateur interactives dans le terminal. À utiliser pour travailler avec @json-render/ink, construire des interfaces terminal à partir de JSON, créer des catalogues de composants terminal ou afficher des specs générées par IA dans le terminal. »

Description en front-matter extraite de SKILL.md. Le fichier complet fait environ 9 805 caractères. Lire le fichier complet sur GitHub.

06 Avant d'installer

Questions sur le skill ink

Les réponses proviennent du SKILL.md tel que lu le 2026-09-14, et non d'une exécution enregistrée.

À quoi ressemble la spec ?

C'est une carte d'éléments à plat : une clé root nomme le premier élément, et un objet elements contient chaque nœud avec son type, ses props et son tableau children.

Puis-je brancher ma propre gestion d'état ?

Oui. Passez un StateStore à StateProvider ou JSONUIProvider pour le mode contrôlé, et alors initialState et onStateChange sont ignorés.

Cela s'affiche-t-il dans un navigateur ?

Non. C'est un moteur de rendu terminal Ink, donc le résultat est un arbre de composants terminal interactif plutôt qu'un arbre DOM.

Un modèle peut-il générer les specs pour moi ?

Oui. L'export ./server transforme votre catalog en un system prompt pour l'IA, et useUIStream diffuse les patches JSONL résultants au fur et à mesure de leur arrivée.

Ink

Exécuter ink sur une vraie tâche de design d'interface.

Téléchargez OpenDesign, importez ink depuis son lien SKILL.md, collez le prompt ci-dessus et lisez le plan avant le résultat.

Télécharger OpenDesign Parcourir tous les skills