mcpField
T
tui-design-skill

tui-design-skill

github.com/podoデザイン・UI29174 回インストール1 日前に更新
リポジトリ

tui-design-skill について

tui-design-skillは、Bubble Tea、Ratatui、Textual、Inkを使ったターミナルUI構築のデザインスキルです。レイアウト、色、キー割り当て、フォーカス管理、各フレームワークのコンポーネント設計を扱います。

主な機能

  1. 01Bubble TeaとLipglossの設計パターン
  2. 02Ratatuiターミナルアプリの設計指針
  3. 03Textual TUIの設計指針
  4. 04Inkのターミナル描画パターン
  5. 05色、レイアウト、キー、フォーカスの指針

活用シーン

  1. 01コンポーネント型GoターミナルUIの設計
  2. 02Ratatuiを使うRust TUIの計画
  3. 03対話型PythonまたはTypeScriptターミナルアプリの構築

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/podo/design-agent-skills --skill tui-design-skill

インストール後、Claude Code で/tui-design-skillを入力して読み込まれたか確認します。

同梱ファイルstub.yaml

詳細

tui-design-skill

カタログの概要 — パッケージ全体はこちら：gfargo/tui-design-skill

判断フロー

  1. パッケージはすでにインストールされていますか？ 確認方法：~/.design-agent-skills/skills/tui-design-skill/SKILL.md が存在するか確認します。

    • はい → tui-design-skill を呼び出して続行します
    • いいえ → 手順 2 に進みます

  2. シェルにアクセスできますか？

    • はい → 以下のインストールコマンドを実行し、スキルを呼び出します
    • いいえ → インストールコマンドを表示します。Claude Code では、! で始まるチャットメッセージとして送信します。グローバルにインストールする場合は -g を追加し、プロジェクトのみにインストールする場合は省略します

インストールコマンド

/plugin marketplace add gfargo/tui-design-skill

インストール後の呼び出し

  • スキル名：tui-design-skill
  • トリガーフレーズ：「TUI design」、「terminal UI」、「Bubble Tea」、「Ratatui」、「Textual Python」、「Ink TypeScript」

できること

4 つの主要なエコシステムにおいて、プロフェッショナルなターミナルユーザーインターフェースを構築するための設計知識を提供します。コンポーネントベースの TUI を構築する Go と Bubble Tea および Lipgloss、高パフォーマンスなターミナルアプリを構築する Rust と Ratatui、リッチな TUI アプリケーションを構築する Python と Textual、React スタイルのターミナル描画を行う TypeScript/Node.js と Ink を扱います。ターミナルのカラーモード（トゥルーカラー、256 色、ANSI）、レイアウト構成のパターン、キーバインドの慣例、フォーカス管理、フレームワーク固有のコンポーネント設計について説明します。

使用しないケース

  • Web UI の設計 — 代わりにフロントエンド設計スキルを使用します
  • TUI のレイアウト規約を持たない特定のフレームワークが必要な場合（このスキルは独自の設計パターンを追加します）
  • 対話型 UI を伴わない、シンプルな CLI 引数の解析

コメント

Markdown 対応