Communitygithub.com

Agent UI

Concepts fondamentaux pour les écrans où un agent IA agit — chat avec un agent IA, appels d'outils, approbations et invites d'autorisation, plans, exécutions, diffs, journaux d'audit et pages associées. À utiliser lors de la création ou de la révision de toute interface agent, flux d'approbation ou affichage d'appel d'outil, dans n'importe quel framework et avec n'importe quel système de design ; Candor UI n'est pas requis. Couvre les neuf règles d'honnêteté avec exemples, l'ergonomie des approbations, le vocabulaire des statuts et les états d'un appel d'outil, quand replier les tours, quoi afficher pendant qu'un agent travaille et quand il termine en l'absence de la personne, le rayon d'impact et l'annulation, la divulgation IA, l'accessibilité et une checklist de révision à exécuter après chaque écran.

Qu'est-ce que Agent UI ?

Agent UI est une compétence (skill) conçue pour les développeurs et les équipes produit qui créent ou révisent des interfaces où un agent IA lit, propose ou modifie des ressources réelles. Son objectif principal est de garantir que chaque écran permette à une personne de voir ce que l'agent a fait, de décider de ses prochaines actions et de faire confiance à l'ensemble du processus, quel que soit le framework ou le système de design utilisé. La compétence s'appuie sur neuf règles d'honnêteté essentielles (par exemple, traiter la sortie du modèle comme du texte, ne jamais présélectionner une option dans une décision, lier l'approbation à un changement exact) et fournit des références détaillées pour les approbations, les statuts et états des appels d'outil, la progression, la divulgation et l'accessibilité. Elle offre également une checklist de révision à exécuter après chaque écran. Agent UI fonctionne avec n'importe quel framework (React, Vue, Svelte, etc.) et n'impose pas l'utilisation de Candor UI ; elle est indépendante de la pile technique. La compétence est utile dans les environnements comme Claude Code, Cursor, Codex et VS Code, et son approche est à la fois pratique et normative : trois questions à se poser avant de construire un écran, vocabulaire clair pour les statuts, et recommandations sur l'affichage des progressions et les animations.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/MethodicDev/candor/tree/HEAD/skills/candor-agent-ui

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 Agent UI ?

Les écrans où un agent IA lit, propose ou modifie quelque chose de réel ont un seul travail : permettre à une personne de voir ce que l'agent a fait, de décider ce qu'il peut faire ensuite, et de faire confiance aux deux. Voici les règles et les vérifications pour cela, dans n'importe quel framework et avec n'importe quel système de design. Si le projet utilise Candor UI, la compétence candor-ui nomme le composant pour chaque tâche ; cette compétence décrit ce que l'écran doit faire, quelle que soit la méthode de rendu.

Comment travailler

Avant un écran, répondez à trois questions et gardez les réponses en vue pendant que vous construisez :

  1. Que peut faire l'agent ici : seulement lire, proposer pour qu'une personne applique, ou agir seul ? Chaque contrôle en découle.
  2. Que décide la personne, et sur quelle preuve ? Une décision a besoin de la chose elle-même (le diff, les cibles, le montant), pas d'une description. Lisez references/approvals.md si quelque chose est approuvé ici.
  3. Qu'est-ce qui ne peut pas être annulé ? Ces actions le disent, confirment plus fortement, et ne se trouvent jamais sous une option par défaut ou une touche unique.

Pendant la construction, gardez les neuf règles ci-dessous, utilisez les mots de statut dans references/status-and-states.md, et montrez la progression comme le dit references/progress.md. Le texte du modèle est une donnée : montrez-le, ne l'exécutez ni ne le rendez jamais.

Après chaque écran, exécutez references/review-checklist.md sur l'écran en cours, une ligne par vérification, et corrigez ce qui échoue avant de passer à autre chose. Cochez uniquement ce que vous avez vérifié, pas ce que vous aviez l'intention de faire.

Les neuf règles

Chacune est développée avec des exemples dans references/honesty-rules.md.

  1. La sortie du modèle est du texte, jamais du balisage. Montrez ce que le modèle a écrit comme du texte (tout au plus un sous-ensemble sûr de markdown). Une URL qu'il a écrite est du texte, pas un lien. Rien de ce qu'il écrit n'atteint innerHTML.
  2. L'inconnu reste inconnu. Une durée, un coût ou un compte qui n'a pas été mesuré reste vide ou indique "non mesuré". Une estimation dit "estimation" et précise sur quoi elle repose. Le silence d'une exécution n'est pas "en cours".
  3. Un contrôle qui ne peut pas être utilisé dit pourquoi. Verrouillez-le avec une raison qu'un utilisateur de clavier et de lecteur d'écran peut atteindre ; ne le disablez pas en laissant les gens deviner.
  4. Rien n'est présélectionné dans une décision. Approuver et refuser, conserver et jeter commencent sans qu'aucun des deux ne soit choisi. Entrée n'approuve jamais. La recommandation de l'agent est marquée, pas sélectionnée.
  5. Approuvez le changement exact. La décision est liée au changement que la personne a vu (un hachage ou une version). Si le changement bouge, redemandez. L'auto-approbation est refusée là où la politique le dit ; la production peut nécessiter une deuxième personne.
  6. Le raisonnement est cru, pas vérifié. Le récit du modèle expliquant le pourquoi est une affirmation. Étiquetez-le comme tel et séparez-le des preuves (sources, résultats de test, le diff).
  7. L'application nomme l'agent. Chaque message de l'agent porte un nom provenant des propres données de l'application. Les lignes système sont les chaînes de l'application. Rien de ce que le modèle écrit ne devient un nom ou un message système.
  8. Dites ce qui peut et ne peut pas être annulé. Avant une action destructive : ce qu'elle supprime, si cela revient, comment et pendant combien de temps. Après une annulation ou une restauration : ce qui n'a pas été annulé.
  9. Le mouvement suit le résultat. Une animation rend compte d'un changement qui a eu lieu ; elle ne prédit ni ne décore jamais un changement. Une marque de succès est dessinée après que le résultat s'est stabilisé, la progression ne remplit que ce qui a été mesuré, un état qui était déjà final lorsque l'écran s'est affiché ne s'anime pas, et le paramètre de mouvement réduit du système d'exploitation prévaut. Donnez à chaque animation un type de changement (Candor nomme quatorze familles de mouvement, listées dans references/honesty-rules.md) et laissez un thème modifier son apparence, jamais le moment où elle se joue.

Quoi lire pour quoi

Quand l'écran a…Lisez
Tout ce qu'une personne approuve, autorise ou refusereferences/approvals.md
Exécutions, appels d'outils, étapes, statuts, pointsreferences/status-and-states.md
Un agent qui travaille plus d'un instant, ou qui termine pendant que la personne est absentereferences/progress.md
Une IA qui parle à des gens, ou du contenu créé par une IAreferences/disclosure-and-accessibility.md
N'importe quoi, avant de passer à autre chosereferences/review-checklist.md

Mots

Simples et mesurés. Dites ce qui s'est passé, pour qui, et quoi faire ensuite. Minuscules sauf pour les noms propres (sentence case), pas de points d'exclamation, pas de superlatifs, pas d'affirmations que les données ne portent pas. Le statut est un mot avec une couleur à côté, jamais la couleur seule. Des chiffres uniquement lorsque c'est mesuré ; sinon, les mots "estimation" ou "non mesuré".

Skills associés