good-ui-bobby

Good UI Bobby

このスキルは、good-ui の上に個人用の実行レイヤーとして適用します。good-ui が重視するプロダクト固有の判断、節度、アクセシビリティ、既存システムへの配慮は維持してください。プロジェクトにより強い制約がない場合は、ここで定めるデフォルトを適用します。

優先順位

判断は次の順序で行います。

1. ユーザーからの明示的な指示と、実際のプロジェクト制約。
2. 機能的な正確性、アクセシビリティ、プラットフォームの慣例、既存のプロダクト表現。
3. good-ui の一般的なデザインガイダンス。
4. このスキルのデフォルト。

デフォルトがユーザビリティ、アクセシビリティ、パフォーマンス、またはプロダクトで確立された表現を損なう場合は、デフォルトから外れてください。ルールを満たすことだけを目的に、新しいビジュアルシステムを作らないでください。

Bobby の絶対ルール

• 表示されるすべての UI 要素の見た目に責任を持ってください。スタイル未設定のブラウザーコントロール、ライブラリのデモ用デフォルト、プレースホルダーのスタイル、汎用的なサーフェス、意図せず現れるネイティブの外観をそのままリリースしないでください。信頼性の高いネイティブのセマンティクスと動作を保ちながら、プロジェクトのトークンとビジュアル言語を通して表示をカスタマイズしてください。
• 実際のアイコンのみを使用してください。Unicode のグリフ、絵文字、ASCII アート、または +、x、->、check などのテキスト記号を、アイコンの代わりとして使用しないでください。既存のアイコンコンポーネント、インライン SVG、ローカルの SVG アセット、またはプラットフォームのアイコンシステムを使用してください。
• 意図しないフォーカスは重大度の高い不具合として扱ってください。キーボード操作や必須のフォーカス遷移ではフォーカスを可視に保ちますが、フォーカスを奪ったり、安易に自動フォーカスを設定したり、非インタラクティブなラッパーに tabindex を追加したりしないでください。また、:focus-visible で入力方法を区別できる場合は、通常のポインター操作でキーボードフォーカスのスタイルを表示しないでください。
• コンポーネントの境界からコンテンツやコントロールを適切に内側へ配置してください。明示的なフルブリードのバリエーションでない限り、テキスト、アイコン、タップ領域、フォーカスリング、またはネストされたサーフェスを端にぴったり接して見せないでください。

作業の参照先

タスクに必要なリファレンスだけを読んでください。

タスク	リファレンス
グリッド、コントロールのサイズ、タップ領域、状態、モーション、または shadcn	インタラクションのデフォルト
トークン、プリミティブ、コンポーネント API、コンポーネントギャラリー、または開発用オーバーレイ	コンポーネントシステム
Git のセットアップ、チェックポイント、環境変数、または OpenRouter	プロジェクトのワークフロー

新しいプロダクトや大規模な再設計では、実装前に3つすべてのリファレンスを読んでください。

作業手順

1. 状況を把握する。 既存のスタック、ルート、トークン、コンポーネント、依存関係、Git の状態、実際のデータを確認します。意図された作業を維持し、無関係な書き換えを避けてください。
2. システムを確立する。 広範なサーフェスを構成する前に、トークンと再利用可能なプリミティブを定義または拡張します。スクリーンショット専用の近似ではなく、本番用コンポーネントを使用してください。
3. サーフェスを構築する。 まず主要なタスクを実装します。すべてのインタラクティブ要素に、視認できるボックス、十分なタップ領域、完全な状態モデル、意味のあるモーション経路を用意してください。
4. 端との間隔を確保する。 境界のあるすべてのサーフェスについて、各辺と最初に表示されるコンテンツとの間隔を確認します。内側の余白は使用箇所での継ぎ当てではなく、コンポーネントの構造として扱ってください。
5. システムを見える形にする。 大規模な作業では、実際の本番コンポーネントをインポートし、各バリエーションと状態を個別に表示する、開発時専用のコンポーネント確認用サーフェスを作成します。
6. 確認して修正する。 幅の広いレイアウト、中間幅のレイアウト、幅の狭いレイアウトを代表例としてレンダリングします。該当する場合は、マウス、タッチ、キーボード、フォーカスの復帰、モーション低減、読み込み中、空の状態、エラー、オーバーフローの各状態を確認します。少なくとも1回は修正を行ってください。
7. チェックポイントを作成する。 一時的な試作用コントロールは、使用可能な状態を適切に制限するか、削除します。リポジトリが継続的に開発中であれば、意味のあるマイルストーンをコミットしてください。

完了ゲート

大規模な UI 作業を完了する前に、次の点を確認してください。

• ドキュメント化された制約がない限り、スペーシングが 4px の基本グリッドと 8px のリズムに従っていること。
• ビジュアルコントロールのサイズに 24/32/40/48/56px のスケールを使用していること。小さな見た目を保つためだけに、実効ヒット領域を縮小していないこと。
• インタラクティブな要素に、適切なホバー、フォーカス可視、押下、選択、無効、読み込み、エラーの各状態があること。
• 状態の変化で空間的な同一性が保たれ、動きによって理解しやすくなる場合はアニメーションが付いていること。また、視覚効果を減らす設定が尊重されていること。
• コンポーネントのレビュー画面に、並行して再現したものではなく、実際のコンポーネントが表示されていること。
• 開発用オーバーレイ、テストデータ、偽のコントロール、シークレットが、本番の挙動として誤って扱われていないこと。
• 表示されるすべての要素に、プロジェクトに適した明示的なデザインが施されており、ブラウザーやライブラリのデモ、偽のアイコンのような表示が残っていないこと。
• テキストやアイコンの端に十分な余白があり、境界のあるコントロール、フィールド、メニュー、カード、入れ子になったサーフェスが境界に窮屈に接していないこと。
• フォーカスが表示されるのは、実際のキーボード操作やコンテキストの変化によるものであり、偶発的なポインターイベント、マウントのタイミング、ホバー、フォーカスの奪取によるものではないこと。
• キーボード操作の順序、タッチ操作への対応、フォーカスの復帰、コンテンツの堅牢性、レスポンシブ動作を確認済みであること。