Communitygithub.com

w0rxbend/tui-design-systems

RatatuiターミナルUIのためのデザインシステム - テーマトークン、背景の整合性、レイアウトとヒットテスト、グリフのフォールバック、決定論的スクリーンショットゲート。新しいRatatuiダッシュボードの構築や既存のTUIビジュアルの再デザイン時に使用します。

tui-design-systems とは?

このスキルは、Rust製ターミナルUIフレームワーク「Ratatui」を使用する開発者向けに、インタラクションモデルを壊さずに新しいビジュアルレイヤーを設計・再設計するためのルールセットを提供します。テーマトークンアーキテクチャでは、パレットをフラットかつ少数に保ち、セマンティックロール構造体を使用してテーマをポインタで切り替え、すべてのレイヤードカラーやブレンドカラーをトークンから導出します。背景の整合性チェックでは、各セルの背景がテーマで許可されたトークンリストに含まれているかを検証し、ウィジェットが直接Colorを指定しないようにします。また、マウスヒットテストが描画レイアウトと同期するようにレンダリング駆動のテストを推奨し、Unicodeブロック要素とASCIIフォールバックの両方をサポートするグリフシステム、決定論的スクリーンショット生成によるビジュアルゲートを備えています。このスキルはClaude CodeやCursorなどのAIエージェントで利用可能で、開発者がRatatuiベースのターミナルアプリケーションのテーマ、パネル、バッジ、メーター、タブなどのビジュアル要素を一貫性と保守性を保ちながら実装・変更できるように支援します。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/w0rxbend/dot-agents/tree/HEAD/skills/frontend/tui-design-systems

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

TUIデザインシステム(Ratatui)

インタラクションモデルを壊さずにRatatui TUIのビジュアルを新規作成または全面的に見直すためのルール。このユーザーのRust端末ダッシュボード向け。リポジトリローカルのアプリ指示と併用してください。

使用すべき場合

  • 新しいRatatuiダッシュボードのビジュアルレイヤー(テーマ、パネル、バッジ、メーター、タブ)。
  • 既存のRatatui TUIの再デザイン/再スタイル化。特に複数テーマ、ライブテーマピッカー、マウスヒットテスト、CIでの決定論的スクリーンショットゲートがある場合。

トークンアーキテクチャ

  • パレットはフラット、const、少数に保つ:テーマごとに1つのセマンティックロール構造体、ポインタで切り替え。すべてのレイヤードまたはブレンドカラーは、それらのロールから1つのRGB blend()でトークンとして導出する:surfaceとsurface_hi(パネル、オーバーレイの塗りつぶし)、track(空のバーの端)、fade(背景方向に薄めた色)、gradient(アクセントラン)、on_color(読みやすいバッジテキスト、輝度で選択)。新しいパレットはすべてのコンポーネントを一度に再スタイル化する(ライブテーマピッカーに必要)。
  • ウィジェットはリテラルのColorを決して指定せず、テーマトークンのみを使用する。
  • blend()を非RGBエンドポイントから保護する:ANSIカラーにはチャンネルがないため、近い方のエンドポイントにスナップし、新たに生成しない。

背景なしテーマ

  • 背景がColor::Resetのテーマ(モノ/TTYパレット)はすべての塗りつぶしを劣化させる必要がある:サーフェスはResetにフォールバック、バッジは括弧付きの色付きテキストになり、空のバーの端は派生track(Resetでレンダリングされ、端末デフォルトフォアグラウンドになる)ではなく境界色を使用する。Resetと選択ハイライトのみが描画されることをテストする。

背景の整合性

  • すべてのビュー×オーバーレイをセルバッファテストでスイープする:各セルの背景はテーマが提供するホワイトリスト(is_backgroundトークンリスト)に含まれている必要があり、ハードコードされた色リストではない。ハードコードされたリストは新しいトークンのたびに編集が必要で、忘れられがち。
  • Clearは再描画せずにセルをリセットする;その後で描画するものは背景を再スタイル化しなければならない。オーバーレイは、パネルの上に浮かぶようにraisedサーフェスで塗りつぶす。
  • RatatuiのChartはCanvas経由でプロットエリアを描画し、その背景のデフォルトはColor::Resetである。色付きパネル内では、チャートの背景をパネルの塗りつぶしに設定し、ページのものにはしない:サーフェス色のカード内のページ色は、一段上の同じ穴になる。

レイアウト結合ヒットテスト

  • マウスヒットテストが描画レイアウトをミラーリングしている場合(タブストリップ、セグメントバー、ステータスフィールド)、描画とミラー計算を同じ編集で変更する。描画された列で各ラベルを特定するレンダリング駆動のテストを優先する;手書きの矩形アサーションは実際のレイアウトがウィジェットを別の場所に配置している間にパスしてしまう。
  • リストのハイライトシンボルを追加または幅を広げると、すべての行のテキストがずれる。クリック可能な行領域は全幅にするか、一致するように再計算する必要がある。

グリフ

  • サブセル精度メーターは第8ブロック(U+258F..U+2589)、ブロック要素を使用する:Unicodeパスのみ;ASCIIフォールバックはセル全体を塗りつぶす。点字チャートやスパークラインも同様:ASCII代替を提供し、--asciiモードに罫線文字を漏らさない。
  • 整列された列のアイコンは単一幅のBMP記号でなければならない。絵文字は倍幅であり、行内の後のすべての列を静かにずらす。

検証

  • 再デザイン:スタイルを先に変更し、テキストは後で変更する。レンダリングテストはテキスト内容をアサートするため、変更されていない文字列はスイートをグリーンに保ち、見た目が変わる。
  • ビジュアルゲート:プロジェクトの決定論的スクリーンショットジェネレータ(固定フレームカウンター、ウォールクロックなし、RNGなし)を使用。テキストダンプモードが最速のレイアウトレビュー方法。ソース変更とともに再生成された画像をコミットし、CIのドリフトなしチェックがパスするようにする。
  • セルバッファ上の背景をチェックし、レンダリング画像上ではチェックしない:Color::Resetをテーマ背景に解決する画像ライターは、バッファスイープがキャッチするまさにその穴を隠す。
  • フレームカウンター駆動のアニメーション(パルス、点滅)は、再現可能なスクリーンショットのために決定論的に保つ。

関連スキル