スキル自身の言葉で
このスキルは、JSON仕様をデータバインディング、表示制御、アクション、動的propsを備えたインタラクティブなターミナルコンポーネントツリーに変換するInkターミナルレンダラー @json-render/ink を扱います。zodを使ってInkスキーマからカタログを定義し、レジストリにカスタムコンポーネントのみを登録し、JSONUIProvider内でRendererを使ってレンダリングする方法、またはより高レベルなcreateRendererとstandardComponentsを使う方法を順に解説します。
読者は、ルートキーを持つフラットな要素マップ仕様形式、標準のレイアウト・コンテンツ・インタラクティブコンポーネントセット、状態とバインディング式、イベントシステムと組み込みのsetState、pushState、removeStateアクション、リピートリスト、useUIStreamによるJSONLストリーミング、プロバイダーの役割、主要なエクスポート、そして80〜120カラム幅などのターミナルデザインガイドラインについて学びます。
生成されるもの
- JSON仕様からレンダリングされたインタラクティブなターミナルコンポーネントツリー。
- 仕様作成のためにカタログから生成されたAIシステムプロンプト。
- 再レンダリングを制御する、フレームワークに依存しないインメモリのStateStore。
仕組み
- 01Inkスキーマからカタログを定義する
@json-render/coreからdefineCatalogをインポートし、許可したいコンポーネントとアクション定義とともにInkスキーマを渡します。
- 02カスタムコンポーネントのみを登録する
defineRegistryはカタログを受け取りますが、標準コンポーネントの実装はすでに組み込まれているため、カスタムのものだけがInk要素にマッピングされます。
- 03Rendererをプロバイダーでラップする
JSONUIProviderは、状態・表示制御・アクション・フォーカスの各コンテキストをRendererに提供し、Rendererは仕様とレジストリを受け取ります。
- 04仕様をフラットな要素マップとして作成する
仕様は最初の要素を指定するルートキーと、props、children、任意のイベントバインディングを持つ型付きノードのelementsマップを持ちます。
- 05式でpropsをバインドする
どのprop値も、ハードコードする代わりに、レンダリング時に状態、リピートアイテム、条件、文字列テンプレートから解決できます。
- 06仕様を段階的にストリーミングする
useUIStreamはAPIエンドポイントからJSONLパッチストリームを受け取り、spec、send、isStreamingを呼び出し元に公開します。