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状態パターンと組み合わせることで、より高品質なインターフェースを構築できる。
AI開発支 援ツールとの連携
このガイドラインを効果的に活用するには、以下のツールとの組み合わせを推奨する。
UIフィードバックの精密化
agentationは、このガイドラインに従った修正をAIに正確に指示する際に有用である。
セレクタ自動抽出機能により、UI Skillsの制約に従った変更箇所を明確に伝えられる。