mcpField
O
opentui-design

opentui-design

github.com/akiojin開発761 回インストール34 週間前に更新
リポジトリ

opentui-design について

OpenTUI と SolidJS による CLI インターフェースの構築とトラブルシューティングを支援するリファレンススキルです。コンポーネント、入力やマウスの挙動、画面遷移、状態管理、テスト、パフォーマンスを扱います。

主な機能

  1. 01OpenTUI コンポーネントパターン
  2. 02キーボード入力処理
  3. 03マウスイベントの指針
  4. 04複数画面のナビゲーション
  5. 05SolidJS の状態管理とフック
  6. 06レイアウト、テスト、性能最適化

活用シーン

  1. 01CLI 画面やコンポーネントの構築
  2. 02入力動作の問題の調査
  3. 03画面遷移の追加
  4. 04CLI の応答性の改善

インストール

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

$npx skills add https://github.com/akiojin/skills --skill opentui-design

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

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
component-patterns.md
hooks-guide.md
input-handling.md
mouse-handling.md
multi-screen-navigation.md
opentui-gotchas.md
performance-optimization.md
responsive-layout.md
state-management.md
testing-patterns.md

詳細

OpenTUI デザインスキル

説明

OpenTUI と SolidJS を使用して CLI アプリケーションを設計・実装するための包括的なツールキットです。

使用する場面

  • OpenTUI を使用して新しい CLI 画面やコンポーネントを構築するとき
  • 入力処理の問題をデバッグするとき
  • 画面遷移を実装するとき
  • マウスイベントとその制限に対応するとき
  • CLI のパフォーマンスを最適化するとき

主なリファレンス

  • input-handling.md - キー入力のパターンと伝播の防止
  • mouse-handling.md - マウスイベントと Selection API の制限
  • opentui-gotchas.md - よくある問題と回避策
  • component-patterns.md - コンポーネントの構造と構成
  • multi-screen-navigation.md - 画面遷移のパターン
  • state-management.md - SolidJS の状態管理パターン
  • hooks-guide.md - OpenTUI フックのリファレンス
  • performance-optimization.md - パフォーマンス最適化のベストプラクティス
  • responsive-layout.md - ターミナルのレイアウトパターン
  • testing-patterns.md - CLI コンポーネントのテスト

重要な知識

キー伝播の防止

Enter キーで画面間を移動すると、同じキー入力が新しい画面に伝播することがあります。必ず次の方法を使用してください。

  1. 発生元で key.preventDefault() を使用する
  2. 移動先で最初のフレームを遅らせる
  3. インタラクティブな要素の focused プロパティを制御する
SolidJS のリアクティビティ

プロパティを分割代入しないでください。リアクティビティを維持するため、常に props.xxx 経由でアクセスしてください。

マウスの制限

OpenTUI の Selection API（useSelectionHandler）は安定して動作しません。OS レベルのコピーを可能にするには useMouse: false を設定しますが、これによりホイールスクロールが無効になります。

コメント

Markdown 対応