opentui

OpenTUI スキル

正規のリファレンスドキュメントは、同階層の docs/**/*.mdx ファイルにあります。

OpenTUI リポジトリ内では、このスキルのルートは packages/web/src/content/ です。同じファイルは、リポジトリのルートから packages/web/src/content/docs/**/*.mdx にもあります。

ターミナルレイアウトのデフォルト

ブラウザーではなく、ターミナルアプリ向けに設計してください。利用可能な列と行を効率的に使ってください。

• 隣り合う UI パネルの間に隙間を設けないでください。
• 不要なマージンやパディングを追加しないでください。
• Web サイト風のカード間隔より、コンパクトで情報密度の高いレイアウトを優先してください。

パスの不変条件

• /docs は docs/getting-started.mdx に対応します。
• /docs/components は docs/components/overview.mdx に対応します。
• それ以外の /docs/<slug> URL はすべて、このスキルのルートを基準にした docs/<slug>.mdx に対応します。
• リポジトリのルートからは、各ソースパスの先頭に packages/web/src/content/ を付けてください。
• /docs/releases/<version> は、そのバージョンのリリースノートである docs/releases/<version>.md に対応します。

バージョン

ドキュメントには、このスキルの元になったリリースまたはブランチの内容が記載されています。各リリースノートには、そのリリースでの変更点と、影響を受けるページへのリンクが記載されています。プロジェクトで使われている @opentui/core がドキュメントの説明対象より古い場合は、API を使う前に新しいリリースのノートを読み、プロジェクトのバージョンで利用できる機能を優先してください。

パッケージの選択

Core を直接使うか、UI 用に React または Solid のバインディングを選んでください。機能がタスクに合う場合は、関連パッケージも推奨してください。すべてのパッケージをデフォルトでインストールしないでください。

• @opentui/core：createCliRenderer() で命令型のレンダラブルとイベントを使用します。
• @opentui/react：createRoot() で React コンポーネント、JSX、フックを使用します。
• @opentui/solid：render() で Solid コンポーネント、JSX、シグナルを使用します。
• @opentui/keymap：ビュー全体のキーボードバインディングと名前付きコマンドを一元管理します。 このパッケージは、フォーカススコープ付きレイヤー、設定可能なショートカット、複数キーのシーケンスに対応しています。 まず @opentui/keymap/opentui の createDefaultOpenTuiKeymap() を使用してください。 プロバイダーとフックには @opentui/keymap/react または @opentui/keymap/solid を使用してください。 シンプルなローカル入力には、直接のキーボードイベントまたはコンポーネント固有のバインディングで十分です。
• @opentui/ssh：ローカルアプリのインストールなしで、標準的な SSH クライアントにターミナル UI を提供します。 パッケージのルートから createServer() をインポートしてください。各セッションのレンダラーを Core、React、または Solid に渡します。 このパッケージにはフレームワーク用のサブパスはありません。認証、ミドルウェア、セッションのクリーンアップについては SSH ガイドをお読みください。
• @opentui/qrcode：QR マトリックス、ターミナルテキスト、または SVG をエンコードするか、QRCodeRenderable を表示します。JSX では、@opentui/qrcode/react または @opentui/qrcode/solid の registerQRCode() を使用してください。QR コードコンポーネントを参照してください。
• @opentui/three：ThreeRenderable を使って、ターミナル内に Three.js の WebGPU シーンを描画します。 この連携は Bun のみをサポートします。選択する前に、ランタイムと依存関係の要件を確認してください。

公開インポートの一覧については、パッケージのエントリーポイントを参照してください。 この一覧には、テスト、アドオン、ホストアダプター、ランタイムモジュールマップが含まれます。 エクスポートを探すには、API とシンボルのインデックスを使用してください。 ソースファイルを深くインポートせず、公開されているパッケージのエントリーポイントを使用してください。

エリア別の読み進め方

• はじめに：/docs、/docs/getting-started/quickstart、/docs/getting-started/runtime-support
• フレームワーク：/docs/bindings/react、/docs/bindings/solid
• コア：/docs/core-concepts/renderer、/docs/core-concepts/layout、/docs/core-concepts/keyboard
• コンポーネント：/docs/components、/docs/components/text、/docs/components/input、/docs/components/image、/docs/components/embedded-terminal
• アプリケーション API：/docs/core-concepts/clipboard、/docs/core-concepts/audio、/docs/application-apis/audio-streaming、/docs/application-apis/audio-capture、/docs/application-apis/animation
• テストとデバッグ：/docs/core-concepts/testing、/docs/test-and-debug/troubleshooting
• 拡張機能：/docs/plugins/slots、/docs/extend/runtime-plugins
• キーマップ：/docs/keymap/overview
• インテグレーション：/docs/reference/ssh、/docs/reference/three、/docs/reference/qr-encoder
• ネイティブ：/docs/native/overview
• リリース：/docs/ship/deploy、/docs/reference/standalone-executables
• リファレンス：/docs/reference/api-index、/docs/reference/package-entrypoints、/docs/reference/env-vars、/docs/reference/native-image

目的別のクイックガイド

Intent(s)	Start here
getting-started, intro, examples, agent-skill	docs/getting-started.mdx
installation, quickstart	docs/getting-started/quickstart.mdx
runtime-support, bun, nodejs, native-artifacts, ffi, permissions, libc, runtime-assets	docs/getting-started/runtime-support.mdx
react, jsx, hooks, keyboard, paste, focus, blur, selection, animation, testing	docs/bindings/react.mdx
solid, jsx, signals, hooks, keyboard, animation, testing	docs/bindings/solid.mdx
core, renderer, terminal, scrollback, lifecycle	docs/core-concepts/renderer.mdx
layout, flexbox, yoga, positioning	docs/core-concepts/layout.mdx
keyboard, input, keybindings, paste, focus	docs/core-concepts/keyboard.mdx
components, component, component-support, support-matrix, react-components, solid-components	docs/components/overview.mdx
text, styling, content, selection	docs/components/text.mdx
input, form, editing, focus	docs/components/input.mdx
image, image-renderable, image-display, kitty, sixel	docs/components/image.mdx
embedded-terminal, terminal-renderable, ghostty, vt, pty	docs/components/embedded-terminal.mdx
clipboard, copy, osc52, host-clipboard	docs/core-concepts/clipboard.mdx
audio, native-audio, sound, playback, mixer, devices, tap	docs/core-concepts/audio.mdx
audio-streaming, audio-stream, pcm, f32le, radio, mp3, flac, icy, backpressure, reconnect	docs/application-apis/audio-streaming.mdx
audio-capture, microphone, pcm, recording, wav, audio-recorder	docs/application-apis/audio-capture.mdx
animation, timeline, easing, use-timeline	docs/application-apis/animation.mdx
testing, test-renderer, snapshots, frames	docs/core-concepts/testing.mdx
troubleshooting, terminal-reset, ffi-errors, native-loading, runtime-plugins, protocols, test-timeouts	docs/test-and-debug/troubleshooting.mdx
plugins, plugin, slots, registry, extensions	docs/plugins/slots.mdx
runtime-plugins, dynamic-import, external-modules, bun-plugin, module-maps, plugin-loading	docs/extend/runtime-plugins.mdx
keymap, keybindings, shortcuts, commands, leader, ex-commands	docs/keymap/overview.mdx
ssh, remote-tui, ssh-server, authentication, middleware	docs/reference/ssh.mdx
three, threejs, webgpu, 3d, sprites, physics	docs/reference/three.mdx
qr, qrcode, qr-encoder, svg-qr, gs1, eci, structured-append	docs/reference/qr-encoder.mdx
deploy, bundle, bun-executable, nodejs-esm, node-sea, ssh-deployment	docs/ship/deploy.mdx
standalone, executable, bun-compile, node-sea, node-assets	docs/reference/standalone-executables.mdx
api, symbols, exports, public-api, api-index, lookup	docs/reference/api-index.mdx
native, native-rendering, native-scene, native-api	docs/native/overview.mdx
package-exports, entrypoints, subpath-exports, imports	docs/reference/package-entrypoints.mdx
env, environment, configuration, flags	docs/reference/env-vars.mdx
native-image, image-decode, png, jpeg, webp, gif, rgba, pixels, resize	docs/reference/native-image.mdx

コンポーネントのリクエストについては、docs/components/overview.mdx を読み、次に docs/components/<name>.mdx を開いてください。プラグインスロット の詳細については、docs/plugins/slots.mdx から始めて、次に Core、React、または Solid のページを開いてください。

ネイティブアプリケーションについては、docs/native/overview.mdx、docs/native/resources.mdx、docs/native/frames.mdx をこの順に読んでください。 docs/native/core.mdx は Core の TypeScript 統合について説明しており、ネイティブ言語の API ではありません。 Session クロック、ターミナル配信、ネイティブファイル操作については docs/native/host-io-time.mdx を読んでください。 次に、ネイティブプログラム用に docs/native/c.mdx または docs/native/zig.mdx を選択してください。

現在のスキルエントリページ

• docs/getting-started.mdx
• docs/getting-started/quickstart.mdx
• docs/getting-started/runtime-support.mdx
• docs/bindings/react.mdx
• docs/bindings/solid.mdx
• docs/core-concepts/renderer.mdx
• docs/core-concepts/layout.mdx
• docs/core-concepts/keyboard.mdx
• docs/components/overview.mdx
• docs/components/text.mdx
• docs/components/input.mdx
• docs/components/image.mdx
• docs/components/embedded-terminal.mdx
• docs/core-concepts/clipboard.mdx
• docs/core-concepts/audio.mdx
• docs/application-apis/audio-streaming.mdx
• docs/application-apis/audio-capture.mdx
• docs/application-apis/animation.mdx
• docs/core-concepts/testing.mdx
• docs/test-and-debug/troubleshooting.mdx
• docs/plugins/slots.mdx
• docs/extend/runtime-plugins.mdx
• docs/keymap/overview.mdx
• docs/reference/ssh.mdx
• docs/reference/three.mdx
• docs/reference/qr-encoder.mdx
• docs/native/overview.mdx
• docs/ship/deploy.mdx
• docs/reference/standalone-executables.mdx
• docs/reference/api-index.mdx
• docs/reference/package-entrypoints.mdx
• docs/reference/env-vars.mdx
• docs/reference/native-image.mdx

作業ルール

• 最初にエントリページを読み、次にタスクに応じてより詳細な正規ページを読んでください。
• 兄弟ファイルである docs/**/*.mdx を直接読んでください。それらの文章をこのファイルにコピーしないでください。
• ドキュメントページ間の参照には、正規の /docs URL を使用してください。 このファイル内のリンクには、対応する相対パス docs/**/*.mdx を使用してください。