Communitygithub.com

Gentle-Programming/gentle-ai-tui-design

Déclencheur : conception d'interface utilisateur terminal, refonte de TUI, look Gentle Shell, IDE dans un terminal, barre latérale/barre d'état, critique de TUI. Concevez, critiquez et affinez des interfaces terminal avec preuve visuelle.

Qu'est-ce que gentle-ai-tui-design ?

Cette compétence est destinée aux développeurs et aux agents IA travaillant sur des interfaces utilisateur en mode terminal (TUI). Elle fournit un workflow structuré pour concevoir, critiquer et affiner des TUI denses, calmes et centrées développeur, à l'image d'un IDE dans un terminal. La compétence s'appuie sur des règles strictes (capture visuelle via PNG, pas de jugement uniquement par le code) et un vocabulaire IDE (volets, arborescence, onglet, barre d'état, palette de commandes) pour éviter le rétro-look TUI. Les étapes incluent la capture de l'état actuel, l'exécution de commandes spécifiques (critique, distiller, durcir, polir) et la comparaison visuelle avant/après. Elle exige des références techniques précises (terminal-craft.md, commands.md, critique.md) et un rendu économique (pas d'E/S ni de recalcul inutile dans les chemins de rendu). Les maquettes doivent être exprimables en terminal : grille de cellules monospace en unités `ch`, uniquement couleurs fg/bg, et styles de texte de base. La compétence prend en charge les plateformes utilisant des terminaux (Shelle, IDE embarqués, outils CLI) et garantit une hiérarchie visuelle claire sans lignes vides ni boîtes imbriquées inutiles.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Gentleman-Programming/gentle-shell/tree/HEAD/skills/tui-design

Demander à votre IA préférée

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

Documentation

Contrat d'activation

À utiliser pour concevoir, réviser ou affiner une interface terminal (panneaux, rails, barres d'état, cartes, invites), en particulier Gentle Shell. Le rendu recherché est celui d'un IDE dans un terminal : dense, calme, développeur d'abord, jamais un costume de chrome TUI rétro. Ne convient pas aux pages web (utiliser gentle-design).

Règles strictes

  • Ne jamais juger une interface terminal uniquement à partir du code ou de la mémoire : capturez-la (references/visual-loop.md) et regardez le PNG avant et après chaque modification.
  • Lisez references/terminal-craft.md avant toute édition d'UI ; c'est le plancher, pas une suggestion.
  • Mode de fonctionnement : la familiarité prime sur l'expression. Utilisez le vocabulaire IDE (volets, arborescence, onglets, barre d'état, palette de commandes) ; la marque se trouve dans la palette, la densité et un geste signature.
  • Chaque ligne a un coût. La hiérarchie vient du rôle de couleur, du poids et de l'alignement, jamais des lignes vides ou des boîtes imbriquées.
  • Dites chaque fait une fois par écran. Les données affichées dans l'en-tête ne se répètent jamais dans un panneau.
  • Une commande, une cible. L'affinement préserve le système ; la refonte le remplace. Ne peaufinez jamais un look qui va être jeté.
  • Le rendu reste économique : pas d'E/S ni de recalcul dans les chemins de rendu, cachez tout ce qui change la sortie (style, largeur, thème).
  • Les maquettes (via gentle-design) doivent être exprimables en terminal : grille de cellules monospace en unités ch, uniquement couleurs fg/bg, gras/dim/italique/souligné/barré, dessin de boîtes et glyphes.

Portes de décision

DemandeCommandeCharger
Pas encore de contexte produit/conceptiondocumentreferences/design-doc.md
Nouvelle surface ou refonteshape, puis maquettes, puis implémentationreferences/commands.md
"À quoi ça ressemble / qu'est-ce qui ne va pas"critiquereferences/critique.md
Trop chargé, espace perdu, redondantdistill / layout / quieterreferences/commands.md
Plat, pas de hiérarchie, illisibletypeset / colorize / bolderreferences/commands.md
Cas limites, terminaux étroits, texte longharden / adaptreferences/commands.md
Dernière passe avant le commitpolishreferences/commands.md

Étapes d'exécution

  1. Chargez le contexte DESIGN.md si le projet en a un ; sinon, proposez d'abord document.
  2. Capturez l'état actuel avec la boucle visuelle aux tailles prédéfinies (large 180x50, breakpoint 140, étroit 80x24).
  3. Exécutez la commande choisie sur une cible nommée ; notez les constats avant de modifier le code.
  4. Modifiez, recapturez, comparez avec le PNG précédent et le brief ; itérez au maximum 3 cycles, puis rapportez.
  5. Terminez chaque commande d'affinement par les vérifications polish et les tests ciblés du dépôt (compteurs de rendu, débordement).

Résultat attendu

Renvoyez : cible, commande exécutée, chemins des PNG avant/après, constats corrigés avec étiquettes P0–P3, constats laissés ouverts, et vérifications effectuées.

Références

  • references/terminal-craft.md : règles de base et anti-patrons terminaux.
  • references/commands.md : playbooks de commandes adaptés aux terminaux.
  • references/critique.md : grille de critique notée et sévérité.
  • references/design-doc.md : structure DESIGN.md pour un produit terminal.
  • references/visual-loop.md : harnais de capture d'écran et boucle de comparaison.
  • NOTICE.md : attribution.

Individual skills in this repo

This repo contains 9 individual skills — each has its own dedicated page.

Gentleman-Programming/gentle-ai-issue-creation

Create and triage GitHub issues from repository evidence. Trigger: issue creation, bug reports, feature requests, or issue approval.

Gentleman-Programming/gentle-ai-judgment-day

Trigger: judgment day, judgement day, dual review, adversarial review, juzgar. Run explicit blind dual review with at most two scoped fix/re-judgment rounds.

Gentleman-Programming/gentle-ai-rdd-defect-workflow

Trigger: RDD, receipt-driven development, review authority, receipt/lineage, correction/recovery, delivery gate/kill switch, bounded review defects. Guide work.

Gentleman-Programming/gentle-ai-skill-creator

Trigger: /skill-creation, skill creation, skill creator, create skill, new skill. Create LLM-first skills with valid frontmatter.

Gentleman-Programming/gentle-ai-skill-improver

Trigger: improve skills, audit skills, refactor skills, skill quality. Audit and upgrade existing LLM-first skills.

Gentleman-Programming/gentle-ai-skill-registry

Trigger: update skills, skill registry, actualizar skills, after skill changes. Index available skills by trigger and path.

Gentleman-Programming/gentle-ai-work-unit-commits

Plan commits as reviewable work units. Trigger: implementation, commit splitting, chained PRs, or keeping tests and docs with code.

Gentleman-Programming/gentle-design

Trigger: design a screen or page, mockup, landing page, UI directions, artboards, try a different approach, design system sync. Write self-contained HTML design directions under design/<slug>/.

Gentleman-Programming/release

Release gentle-pi through GitHub and npm. Trigger: release, publish, npm publish, GitHub release, version bump.

Skills associés