OpenTUIプラットフォームスキル

OpenTUIを使用してターミナルユーザーインターフェースを構築するための統合スキルです。下記のデシジョンツリーを使用して適切なフレームワークとコンポーネントを見つけ、詳細なリファレンスを読み込んでください。

重要なルール

すべてのOpenTUIコードで以下のルールに従ってください:

1. 新規プロジェクトは create-tui を使用してください。 フレームワークの REFERENCE.md クイックスタートを参照してください。
2. create-tui のオプションは引数の前に来る必要があります。 bunx create-tui -t react my-app は動作しますが、bunx create-tui my-app -t react は動作しません。
3. process.exit() を直接呼び出さないでください。 renderer.destroy() を使用してください（core/gotchas.md を参照）。
4. テキストスタイリングはReact/Solidではネストされたタグが必要です。 プロップではなく修飾子要素を使用してください（components/text-display.md を参照）。

このスキルの使い方

リファレンスファイル構造

フレームワークリファレンスは5ファイルパターンに従います。横断的な概念は単一ファイルガイドです。

./references/<framework>/ 内の各フレームワークには以下が含まれます:

ファイル	目的	読むタイミング
REFERENCE.md	概要、使用時期、クイックスタート	最初に必ず読んでください
api.md	ランタイムAPI、コンポーネント、フック	コード作成時
configuration.md	セットアップ、tsconfig、バンドリング	プロジェクト設定時
patterns.md	共通パターン、ベストプラクティス	実装ガイダンス時
gotchas.md	落とし穴、制限事項、デバッグ	トラブルシューティング時

./references/<concept>/ 内の横断的な概念は REFERENCE.md をエントリーポイントとしています。

読む順序

1. 選択したフレームワークの REFERENCE.md から始めてください
2. その後、タスクに関連する追加ファイルを読んでください:
   • コンポーネント構築 -> api.md + components/<category>.md
   • プロジェクトセットアップ -> configuration.md
   • レイアウト/ポジショニング -> layout/REFERENCE.md
   • キーボード/入力処理 -> keyboard/REFERENCE.md
   • アニメーション -> animation/REFERENCE.md
   • トラブルシューティング -> gotchas.md + testing/REFERENCE.md

例となるパス

./references/react/REFERENCE.md           # Reactの場合はここから開始
./references/react/api.md              # Reactコンポーネントとフック
./references/solid/configuration.md    # Solidプロジェクトセットアップ
./references/components/inputs.md      # 入力、テキストエリア、セレクトドキュメント
./references/core/gotchas.md           # コアデバッグのコツ

ランタイムノート

OpenTUIはBunで動作し、ネイティブビルドにはZigを使用します。ランタイム要件とビルドガイダンスについては ./references/core/gotchas.md を読んでください。

クイックデシジョンツリー

「どのフレームワークを使用すべきか?」

フレームワーク選択?
├─ 完全な制御、最高のパフォーマンス、フレームワークのオーバーヘッドなし
│  └─ core/ (命令型API)
├─ Reactを知っており、馴染みのあるコンポーネントパターンが欲しい
│  └─ react/ (Reactリコンサイラー)
├─ 細粒度のリアクティビティ、最適な再レンダリングが欲しい
│  └─ solid/ (Solidリコンサイラー)
└─ OpenTUIの上にライブラリ/フレームワークを構築している
   └─ core/ (命令型API)

「コンテンツを表示する必要がある」

コンテンツ表示?
├─ プレーンまたはスタイル付きテキスト -> components/text-display.md
├─ ボーダー/背景付きコンテナ -> components/containers.md
├─ スクロール可能なコンテンツ領域 -> components/containers.md (scrollbox)
├─ ASCIIアートバナー/タイトル -> components/text-display.md (ascii-font)
├─ シンタックスハイライト付きコード -> components/code-diff.md
├─ Diffビューアー (統合/分割) -> components/code-diff.md
├─ 診断情報付き行番号 -> components/code-diff.md
└─ Markdownコンテンツ (ストリーミング) -> components/code-diff.md (markdown)

「ユーザー入力が必要である」

ユーザー入力?
├─ 単一行テキストフィールド -> components/inputs.md (input)
├─ 複数行テキストエディター -> components/inputs.md (textarea)
├─ リストから選択 (縦) -> components/inputs.md (select)
├─ タブベースの選択 (横) -> components/inputs.md (tab-select)
└─ カスタムキーボードショートカット -> keyboard/REFERENCE.md

「レイアウト/ポジショニングが必要である」

レイアウト?
├─ Flexboxスタイルレイアウト (行、列、折り返し) -> layout/REFERENCE.md
├─ 絶対ポジショニング -> layout/patterns.md
├─ ターミナルサイズへのレスポンシブ対応 -> layout/patterns.md
├─ コンテンツのセンタリング -> layout/patterns.md
└─ 複雑なネストされたレイアウト -> layout/patterns.md

「アニメーションが必要である」

アニメーション?
├─ タイムラインベースのアニメーション -> animation/REFERENCE.md
├─ イージング関数 -> animation/REFERENCE.md
├─ プロパティトランジション -> animation/REFERENCE.md
└─ ループアニメーション -> animation/REFERENCE.md

「入力を処理する必要がある」

入力処理?
├─ キーボードイベント (キープレス、リリース) -> keyboard/REFERENCE.md
├─ フォーカス管理 -> keyboard/REFERENCE.md
├─ ペーストイベント -> keyboard/REFERENCE.md
├─ マウスイベント -> components/containers.md
└─ テキスト選択 -> components/text-display.md

「TUIをテストする必要がある」

テスト?
├─ スナップショットテスト -> testing/REFERENCE.md
├─ インタラクションテスト -> testing/REFERENCE.md
├─ テストレンダラーセットアップ -> testing/REFERENCE.md
└─ テストのデバッグ -> testing/REFERENCE.md

「デバッグ/トラブルシューティングが必要である」

トラブルシューティング?
├─ ランタイムエラー、クラッシュ -> <framework>/gotchas.md
├─ レイアウト問題 -> layout/REFERENCE.md + layout/patterns.md
├─ 入力/フォーカス問題 -> keyboard/REFERENCE.md
└─ 再現 + リグレッションテスト -> testing/REFERENCE.md

トラブルシューティングインデックス

• ターミナルクリーンアップ、クラッシュ -> core/gotchas.md
• テキストスタイリングが反映されない -> components/text-display.md
• 入力フォーカス/ショートカット -> keyboard/REFERENCE.md
• レイアウトのずれ -> layout/REFERENCE.md
• 不安定なスナップショット -> testing/REFERENCE.md

コンポーネント命名の違いとテキスト修飾子については、components/REFERENCE.md を参照してください。

プロダクトインデックス

フレームワーク

フレームワーク	エントリーファイル	説明
Core	./references/core/REFERENCE.md	命令型API、すべてのプリミティブ
React	./references/react/REFERENCE.md	宣言型TUI用Reactリコンサイラー
Solid	./references/solid/REFERENCE.md	宣言型TUI用SolidJSリコンサイラー

横断的な概念

概念	エントリーファイル	説明
Layout	./references/layout/REFERENCE.md	Yoga/Flexboxレイアウトシステム
Components	./references/components/REFERENCE.md	カテゴリ別コンポーネントリファレンス
Keyboard	./references/keyboard/REFERENCE.md	キーボード入力処理
Animation	./references/animation/REFERENCE.md	タイムラインベースのアニメーション
Testing	./references/testing/REFERENCE.md	テストレンダラーとスナップショット

コンポーネントカテゴリ

カテゴリ	エントリーファイル	コンポーネント
テキスト・表示	./references/components/text-display.md	text、ascii-font、スタイル付きテキスト
コンテナ	./references/components/containers.md	box、scrollbox、ボーダー
入力	./references/components/inputs.md	input、textarea、select、tab-select
コード・Diff	./references/components/code-diff.md	code、line-number、diff、markdown

リソース

リポジトリ: https://github.com/anomalyco/opentui コアドキュメント: https://github.com/anomalyco/opentui/tree/main/packages/core/docs 例: https://github.com/anomalyco/opentui/tree/main/packages/core/src/examples オーサムリスト: https://github.com/msmps/awesome-opentui