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

Ink(CLIのためのReact)でCLIアプリケーションを構築するための統合スキルです。以下のデシジョンツリーを使用して適切なコンポーネントとパターンを見つけ、詳細なリファレンスを参照してください。

重要なルール

すべてのInkコードでこれらのルールに従ってください:

1. すべてのテキストは <Text> でラップする必要があります。 <Text> の外の文字列はエラーをスローします。
2. <Text> はテキストノードと入れ子の <Text> のみを許可します。 <Text> の中に <Box> をネストすることはできません。
3. <Box> は常に display: flex です。 すべての <Box> を <div style="display: flex"> として考えてください。
4. useApp().exit() を使用して終了します。 コンポーネント内から process.exit() を直接呼び出さないでください。
5. ink と react の両方をインストールしてください。 これらはピア依存関係です: npm install ink react。
6. <Static> は新しい項目のみをレンダリングします。 以前にレンダリングされた項目への変更は無視されます。

このスキルの使い方

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

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

./references/core/ には以下が含まれます:

ファイル	目的	いつ読むか
REFERENCE.md	概要、使用時、クイックスタート	最初に必ず読む
api.md	render()、renderToString()、Instance、measureElement	コードを書くとき
configuration.md	レンダリングオプション、環境変数	アプリを設定するとき
patterns.md	一般的なパターン、ベストプラクティス	実装ガイダンス
gotchas.md	落とし穴、制限事項、デバッグ	トラブルシューティング

./references/<area>/ 内のコンポーネント、フック、コンセプトのリファレンスは REFERENCE.md がエントリーポイントです。

読む順序

1. プロジェクト概要は core/REFERENCE.md から始める
2. タスクに関連する追加ファイルを読む:
   • UIの構築 -> components/REFERENCE.md + 特定のコンポーネントファイル
   • 入力の処理 -> hooks/input.md
   • レイアウト/配置 -> layout/REFERENCE.md
   • アプリのライフサイクル -> hooks/app-lifecycle.md
   • フォーカス管理 -> hooks/focus.md
   • テスト -> testing/REFERENCE.md
   • アクセシビリティ -> accessibility/REFERENCE.md
   • トラブルシューティング -> core/gotchas.md
   • ベストプラクティス/ルール -> rules/RULES.md + 特定のルールファイル

パス例

./references/core/REFERENCE.md             # ここから始める
./references/core/api.md                   # render()、renderToString()
./references/components/text.md            # <Text> コンポーネント
./references/components/box.md             # <Box> コンポーネント(レイアウト、枠線)
./references/hooks/input.md                # useInput フック
./references/layout/patterns.md            # 一般的なレイアウトレシピ
./references/testing/REFERENCE.md          # ink-testing-library
./rules/RULES.md                           # ベストプラクティス エントリーポイント
./rules/performance.md                     # FPS、Static、メモ化
./rules/components.md                      # コンポーネント別ルール
./rules/hooks.md                           # フック別ルール
./rules/core.md                            # render()、エラー、環境

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

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

コンテンツを表示?
├─ プレーンまたはスタイル付きテキスト -> components/text.md
├─ レイアウト付きコンテナ -> components/box.md
├─ 枠線付きコンテナ -> components/box.md (borderStyle)
├─ 背景色付きコンテナ -> components/box.md (backgroundColor)
├─ テキスト内の改行 -> components/utilities.md (Newline)
├─ 柔軟なスペーサー -> components/utilities.md (Spacer)
├─ 恒久的なログ出力(完了した項目) -> components/utilities.md (Static)
└─ テキスト出力の変換(大文字、グラデーション) -> components/utilities.md (Transform)

「ユーザー入力が必要」

ユーザー入力?
├─ キーボードショートカット/矢印キー -> hooks/input.md (useInput)
├─ 標準入力への直接アクセス -> hooks/stdio.md (useStdin)
├─ Tab/Shift+Tabフォーカスサイクル -> hooks/focus.md (useFocus)
├─ プログラマティックフォーカス制御 -> hooks/focus.md (useFocusManager)
└─ カーソル配置(IME) -> hooks/focus.md (useCursor)

「レイアウト/配置が必要」

レイアウト?
├─ 要素の水平行 -> layout/REFERENCE.md (flexDirection: row)
├─ 要素の垂直スタック -> layout/REFERENCE.md (flexDirection: column)
├─ コンテンツの中央配置 -> layout/patterns.md
├─ 要素間の間隔 -> layout/REFERENCE.md (gap、margin、padding)
├─ 固定幅/高さ -> components/box.md (width、height)
├─ パーセンテージサイジング -> components/box.md (width: "50%")
├─ 最小/最大制約 -> components/box.md (minWidth、maxWidth、maxHeight)
├─ 要素を離す -> components/utilities.md (Spacer)
├─ Flex grow/shrink -> layout/REFERENCE.md (flexGrow、flexShrink)
├─ コンテンツの折り返し -> layout/REFERENCE.md (flexWrap)
├─ オーバーフロー制御 -> components/box.md (overflow)
└─ 複雑にネストされたレイアウト -> layout/patterns.md

「アプリのライフサイクルを管理する必要がある」

アプリのライフサイクル?
├─ マウントとレンダリング -> core/api.md (render)
├─ 文字列へのレンダリング(ターミナルなし) -> core/api.md (renderToString)
├─ アプリをプログラマティックに終了 -> hooks/app-lifecycle.md (useApp、exit)
├─ アプリの完了を待つ -> core/api.md (waitUntilExit)
├─ 新しいプロップでの再レンダリング -> core/api.md (rerender)
├─ アプリをアンマウント -> core/api.md (unmount)
└─ Ink外で標準出力/標準エラーに書き込む -> hooks/stdio.md

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

テスト?
├─ レンダリングと出力の確認 -> testing/REFERENCE.md
├─ ユーザー入力のシミュレーション -> testing/REFERENCE.md (stdin.write)
├─ スナップショットテスト -> testing/REFERENCE.md
└─ 最後にレンダリングされたフレームの確認 -> testing/REFERENCE.md (lastFrame)

「アクセシビリティが必要」

アクセシビリティ?
├─ スクリーンリーダーサポート -> accessibility/REFERENCE.md
├─ ARIAロール(チェックボックス、ボタンなど) -> accessibility/REFERENCE.md
├─ ARIA状態(checked、disabled など) -> accessibility/REFERENCE.md
├─ カスタムスクリーンリーダーラベル -> accessibility/REFERENCE.md (aria-label)
└─ スクリーンリーダーから非表示 -> accessibility/REFERENCE.md (aria-hidden)

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

トラブルシューティング?
├─ テキスト レンダリング問題 -> core/gotchas.md
├─ レイアウト問題 -> core/gotchas.md + layout/REFERENCE.md
├─ 入力が動作しない -> core/gotchas.md + hooks/input.md
├─ プロセスが終了しない -> core/gotchas.md
├─ CIレンダリング問題 -> core/configuration.md (CI mode)
├─ コンソール出力の混在 -> core/configuration.md (patchConsole)
└─ パフォーマンス/ちらつき -> core/configuration.md + rules/performance.md

「ベストプラクティス/本番環境対応コードが欲しい」

ベストプラクティス?
├─ 一般的なルール(重要) -> rules/RULES.md
├─ パフォーマンス(FPS、Static、メモ化) -> rules/performance.md
├─ コンポーネント別パターン & アンチパターン -> rules/components.md
├─ フック別パターン & 落とし穴 -> rules/hooks.md
└─ render() / エラー / 環境動作 -> rules/core.md

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

• <Text> の外のテキスト -> core/gotchas.md
• <Text> 内の <Box> -> core/gotchas.md
• プロセスがハングして終了しない -> core/gotchas.md
• console.logが出力と混在 -> core/configuration.md
• レイアウトの誤配置 -> layout/REFERENCE.md
• 入力が受け取られない -> hooks/input.md + rules/hooks.md
• フォーカスがサイクルしない -> hooks/focus.md + rules/hooks.md
• CI出力問題 -> core/configuration.md + rules/core.md
• ちらつき/パフォーマンス -> core/configuration.md + rules/performance.md
• アンチパターン / 落とし穴 -> rules/components.md、rules/hooks.md、rules/core.md

プロダクトインデックス

コア

エリア	エントリーファイル	説明
Core	./references/core/REFERENCE.md	概要、クイックスタート、プロジェクトセットアップ
API	./references/core/api.md	render、renderToString、Instance
Config	./references/core/configuration.md	レンダリングオプション、環境変数
Patterns	./references/core/patterns.md	一般的なパターンとレシピ
Gotchas	./references/core/gotchas.md	落とし穴とデバッグ

コンポーネント

コンポーネント	エントリーファイル	説明
Overview	./references/components/REFERENCE.md	すべてのコンポーネントの概要
Text	./references/components/text.md	テキスト表示とスタイリング
Box	./references/components/box.md	レイアウト、枠線、背景
Utilities	./references/components/utilities.md	Newline、Spacer、Static、Transform

フック

フック	エントリーファイル	説明
Overview	./references/hooks/REFERENCE.md	すべてのフックの概要
Input	./references/hooks/input.md	キーボード処理用のuseInput
App Lifecycle	./references/hooks/app-lifecycle.md	終了制御用のuseApp
Stdio	./references/hooks/stdio.md	useStdin、useStdout、useStderr
Focus	./references/hooks/focus.md	useFocus、useFocusManager、useCursor

横断的コンセプト

コンセプト	エントリーファイル	説明
Layout	./references/layout/REFERENCE.md	Yoga/Flexboxレイアウトシステム
Layout Patterns	./references/layout/patterns.md	一般的なレイアウトレシピ
Testing	./references/testing/REFERENCE.md	ink-testing-library
Accessibility	./references/accessibility/REFERENCE.md	スクリーンリーダー & ARIAサポート

ベストプラクティス(ルール)

ルールファイル	エントリーファイル	説明
Overview	./rules/RULES.md	エントリーポイント + 10の重要ルール
Performance	./rules/performance.md	FPS調整、Static、メモ化、段階的レンダリング
Components	./rules/components.md	Box、Text、Static、Transform、Newline、Spacerのルール
Hooks	./rules/hooks.md	useInput、useApp、useFocus、useCursor、useStdinのルール
Core	./rules/core.md	render()、renderToString()、エラー、CI、Kittyプロトコル

リソース

リポジトリ: https://github.com/vadimdemedes/ink npm: https://www.npmjs.com/package/ink テスティングライブラリ: https://github.com/vadimdemedes/ink-testing-library Create Ink App: https://github.com/vadimdemedes/create-ink-app