Communitygithub.com

Gentle-Programming/gentle-ai-tui-design

端末UIの設計、批評、改良を行います。ビジュアルプルーフを用いて、IDEのような高密度で落ち着いた開発者向けTUIを実現します。

gentle-ai-tui-design とは?

このスキルは、端末内で動作するユーザーインターフェース(TUI)の設計、批評、改良に特化したAIエージェントスキルです。特に「Gentle Shell」と呼ばれる、IDEのような高密度で開発者ファーストな端末UIのデザイン思想に基づいて動作します。このスキルは、パネル、ステータスバー、カード、プロンプトなどのTUIコンポーネントを、単なるレトロなTUIの模倣ではなく、現代的なIDEの語彙(ペイン、ツリー、タブ、コマンドパレット)で設計・批評するための厳格なルールと手順を提供します。コードや記憶だけでUIを判断することを禁止し、必ずスクリーンショットを取得してビジュアルループで確認しながら修正を繰り返す「ビジュアルプルーフ」のプロセスを重視します。サポートするプラットフォームは、Claude CodeやCursorなどのAIエージェントが利用する端末環境を想定しており、`references/`ディレクトリ内の詳細な設計ガイドラインや批評ルーブリックに従って動作します。操作は、`document`, `shape`, `critique`, `distill`, `typeset`, `harden`, `polish` といったコマンドで指示され、各コマンドは決められた実行手順に従い、最終的には変更前後のPNGと発見された問題(P0~P3タグ)を報告します。

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

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

起動契約

端末インターフェース(パネル、レール、ステータスバー、カード、プロンプト)、特にGentle Shellの設計、レビュー、または改良に使用します。目指す感触は、端末内のIDE(統合開発環境)です。つまり、高密度で落ち着いており、開発者ファーストであり、決してレトロなTUIの仮装ではありません。Webページには使用しないでください(代わりに gentle-design を使用)。

ハードルール

  • コードや記憶だけで端末UIを判断しないでください。必ずキャプチャし (references/visual-loop.md)、変更の前後でPNGを確認してください。
  • UIを編集する前に references/terminal-craft.md を読んでください。これは提案ではなく、基本ルールです。
  • 操作方法: 親しみやすさが表現に勝ります。IDEの語彙(ペイン、ツリー、タブ、ステータスバー、コマンドパレット)を使用します。ブランドは、カラーパレット、密度、そして1つの特徴的な動きに宿ります。
  • 各行にはコストがかかります。階層は、色の役割、太さ、配置から生まれます。空行やネストされたボックスからは生まれません。
  • 画面ごとに各情報は1回だけ表示します。ヘッダーに表示されたデータは、パネルで繰り返さないでください。
  • 1つのコマンドで1つのターゲット。改良はシステムを維持し、再設計はシステムを置き換えます。捨てられる見た目を磨かないでください。
  • レンダリングは軽量に保ちます。レンダリングパスでのI/Oや再計算は行わず、出力(スタイル、幅、テーマ)を変更するすべての要素をキーにしたキャッシュを使用します。
  • モックアップ(gentle-design 経由)は、端末で表現可能でなければなりません。つまり、ch 単位の等幅セルグリッド、前景色/背景色のみ、bold/dim/italic/underline/strikethrough、罫線記号とグリフを使用します。

決定ゲート

状況コマンド読み込むもの
プロダクト/デザインのコンテキストがないdocumentreferences/design-doc.md
新しい画面または再設計shape → モックアップ → 実装references/commands.md
「見た目はどうか / 何が問題か」critiquereferences/critique.md
ごちゃごちゃしている、スペースの無駄、冗長distill / layout / quieterreferences/commands.md
フラットで階層がない、読みにくいtypeset / colorize / bolderreferences/commands.md
エッジケース、狭い端末、長いテキストharden / adaptreferences/commands.md
コミット前の最終確認polishreferences/commands.md

実行手順

  1. プロジェクトに DESIGN.md のコンテキストがあれば読み込みます。なければ、まず document を提案します。
  2. 出荷時のサイズ(ワイド 180x50、ブレークポイント 140、ナロー 80x24)でビジュアルループを使い、現在の状態をキャプチャします。
  3. 選択したコマンドを1つの名前付きターゲットに対して実行します。コードを変更する前に、所見を書き留めます。
  4. 変更、再キャプチャ、以前のPNGと簡単な指示と比較します。最大3ラウンド繰り返し、その後報告します。
  5. すべてのリファインコマンドは、polish チェックとリポジトリの集中テスト(レンダリングカウント、オーバーフロー)で終了します。

出力契約

返却内容: ターゲット、実行されたコマンド、変更前後のPNGパス、P0~P3タグで修正された所見、未解決の所見、実行されたチェック。

参考文献

  • references/terminal-craft.md: 基本ルールと端末のアンチパターン。
  • references/commands.md: 端末に適応したコマンドのプレイブック。
  • references/critique.md: 採点された批評と重大度のルーブリック。
  • references/design-doc.md: 端末プロダクトの DESIGN.md の形式。
  • references/visual-loop.md: スクリーンショットのハーネスと比較ループ。
  • NOTICE.md: 帰属表示。

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.

関連スキル