AIエージェント向けUI構築ガイドライン
UI Skillsは、AIエージェントがより良いインターフェースを構築するための制約・ガイドライン集です。実際にエージェントを使用してUIを構築する際に遭遇した問題から抽出されたルールで構成されています。
UI Skillsとは
UI Skillsは、独断的で進化し続ける制約の小規模なセットです。エージェントがインターフェース構築時に従うべき指針として提供されており、反復的で単調なUI開発プロセスを改善することを目的としています。
主な制約・ガイドライン
スタック要件
- カスタム値が既に存在しない限り、Tailwind CSSのデフォルト値を使用する
- JavaScriptアニメーションの実装には
motion/reactを使用する - クラスロジックの管理には
cnユーティリティ（clsx + tailwind-merge）を使用する
コンポーネント原則
- キーボードおよびフォーカス動作には、アクセシビリティプリミティブ（Base UI、React Aria、Radixなど）を必須とする
- プロジェクトに既存のコンポーネントがある場合は、それを優先して使用する
- 同じインタラクションサーフェス内でプリミティブシステムを混在させてはならない
- アイコンボタンには
aria-labelを必須とする
インタラクション設計
- 破壊的または不可逆的なアクションには、AlertDialogを使用する
- ローディング状態はスケルトン表示で示す
- 高さの指定には
h-dvhを推奨する（h-screenは使用しない） - エラー表示は、エラーが発生した動作の隣に配置する
アニメーション制約
- 明示的な要求がない限り、アニメーション を追加してはならない
- アニメーション対象はコンポジタプロパティ（transform、opacity）のみとする
- レイアウトプロパティの変更をアニメーションしてはならない
- アニメーション時間は200msを超えてはならない
prefers-reduced-motionの設定を尊重する
タイポグラフィ
- 見出しには
text-balanceを使用する - 本文には
text-prettyを使用する - データテーブルには
tabular-numsを使用する
パフォーマンス基準
- レンダーロジックとして表現できるものに対して
useEffectを使用してはならない - 大規模なblurまたはbackdrop-filterをアニメーションしてはならない
使用方法
UI Skillsは、以下のコマンドでインストールできます。
npx ui-skills init
このコマンドを実行すると、スキルがインストールされ、対応ツール内にコマンドが登録されます。
既存のガイドラインとの関連
UI Skillsは、AIエージェント特化のUI構築ガイドラインであり、以下の既存ドキュメントと補完的な関係にあります。
UI Skillsは技術的な実装レベルでの制約を提供し、ユーザビリティ原則やUI状態パターンと組み合わせることで、より高品質なインターフェースを構築できます。