Communitygithub.com

créateur d'écrans AINDF

Créer ou modifier des écrans d'un système de design AINDF uniquement via son DS-MCP. Utilisez-le lorsqu'on vous demande de construire, modifier ou corriger une page/écran d'un produit dont le système de design expose un MCP AINDF (outils get-ds, get-component, validate-screen).

Qu'est-ce que créateur d'écrans AINDF ?

Ce skill permet à un agent IA de composer ou modifier des écrans (pages) d'un produit en s'appuyant exclusivement sur un système de design AINDF exposé via un MCP (DS-MCP). Il est conçu pour les plateformes comme Claude Code, Cursor, Codex ou tout agent capable de suivre un workflow strict. L'agent commence par récupérer un code pin unique via l'outil `get-ds`, puis utilise `get-component`, `slot-accepts`, `get-preset` et `list-by-facet` pour comprendre les composants, leurs props et leurs slots disponibles. L'agent ne peut jamais générer de code HTML, CSS, JSX, noms de classes, styles, scripts, gestionnaires d'événements ou URLs. Les seules données libres sont le texte et les valeurs d'énumérations, booléennes ou numériques déclarées. L'agent valide chaque écran avec `validate-screen` jusqu'à obtenir `ok: true` et corrige les erreurs `code`/`path` retournées. Si un écran nécessite des composants ou fonctionnalités inexistants dans le DS, l'agent doit s'arrêter et demander une extension via `request-extension` (si disponible) ou signaler le besoin à l'utilisateur sur un endpoint en lecture seule. Enfin, l'agent remet l'écran validé : si l'endpoint le permet, il appelle `submit-screen` pour créer un brouillon non accepté, sinon il donne le ScreenSpec JSON à l'utilisateur. L'agent ne peut pas construire, vérifier, accepter ou publier quoi que ce soit, et ne doit jamais prétendre que le changement est en ligne ou accepté.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/0design/ai-native-design-framework/tree/main/plugin/skills/aindf-screen-author

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

Que fait créateur d'écrans AINDF ?

Vous composez des écrans à partir d'un système de design que vous ne pouvez pas modifier. Votre seul artefact est le ScreenSpec JSON.

Règles

  1. Commencez par get-ds. Copiez son pin textuellement dans chaque écran (ds). N'inventez jamais de composants, props, slots ou valeurs.
  2. Lisez les contrats avec get-component, list-by-facet, slot-accepts, get-preset avant d'utiliser quoi que ce soit.
  3. N'écrivez jamais votre propre HTML, CSS, JSX, noms de classes, styles, scripts, gestionnaires d'événements ou URLs. Le texte et les valeurs d'énumérations/booléennes/numériques déclarées sont les seules données libres. Liens uniquement à l'intérieur des props richText qui les autorisent.
  4. Utilisez validate-screen jusqu'à ce que ok: true. Corrigez à partir du code + path retournés ; ne contournez pas une règle.
  5. Si l'écran nécessite quelque chose que le DS ne propose pas, arrêtez cette partie et demandez-le : appelez request-extension uniquement si l'endpoint le propose ; sur un endpoint en lecture seule (aucun outil de ce type), signalez le besoin à l'utilisateur. Ne l'approximez pas avec d'autres composants contre leur intention.
  6. Remettez l'écran validé : appelez submit-screen uniquement si l'endpoint le propose (il stocke un brouillon non accepté) ; sur un endpoint en lecture seule, donnez le ScreenSpec validé à l'utilisateur. Vous ne pouvez pas construire, vérifier, accepter ou publier ; ne prétendez jamais que le changement est en ligne ou accepté. Signalez ce qui a changé, ce que vous avez demandé et, si soumis, l'id de la soumission.

Structure du ScreenSpec

{ "kind": "aindf.screen", "aindfVersion": "0.2", "id": "use", "ds": "<get-ds.pin>", "route": "/use",
  "template": { "component": "<un template>", "props": {} },
  "sections": [ { "component": "<un composant de couche sections>", "props": {}, "slots": { "<slot>": [ { "component": "…" } ] } } ] }

meta (titre/description) et params (pour les routes [param], un binding DS params) sont optionnels et validés de la même manière.

Skills associés