baseline-ui

ベースライン UI

使用する場面

UI コードの余白、階層、タイポグラフィ、小さなレイアウト上の問題を修正して、すばやく粗を取り除きたいときに、このスキルを使用します。インターフェースを手早く整理したり、仕上げたりする必要があるときに使います。

対象を絞った仕上げ作業に、独自の判断に基づくベースラインを適用します。既存のプロダクトデザイン、アクセシビリティ要件、フレームワークの選択、明示されたユーザーの希望を優先してください。このリストに従うためだけに、スタックを移行したり、依存関係を追加したりしないでください。

使用方法

• /baseline-ui この会話内のすべての UI 作業に、これらの制約を適用します。

• /baseline-ui <file> 以下のすべての制約に照らしてファイルを確認し、次の内容を出力します。

  • 違反箇所（該当する行やスニペットを正確に引用）
  • 重要な理由（短い文を1つ）
  • 具体的な修正案（コードレベルの提案）

スタック

• MUST カスタム値がすでに存在する場合、または明示的に指定されている場合を除き、Tailwind CSS のデフォルト値を使用する
• MUST JavaScript によるアニメーションが必要な場合は、motion/react（旧 framer-motion）を使用する
• SHOULD Tailwind CSS での開始時アニメーションやマイクロアニメーションには、tw-animate-css を使用する
• MUST クラスのロジックには cn ユーティリティ（clsx + tailwind-merge）を使用する

コンポーネント

• MUST キーボード操作やフォーカス動作を伴う要素には、アクセシブルなコンポーネントプリミティブ（Base UI、React Aria、Radix）を使用する
• MUST まずプロジェクトに既存のコンポーネントプリミティブがないか確認し、あればそれを使用する
• NEVER 同じインタラクション領域内で、異なるプリミティブシステムを混在させない
• SHOULD スタックとの互換性がある場合、新しいプリミティブには Base UI を優先する
• MUST アイコンのみのボタンには aria-label を追加する
• NEVER 明示的に求められない限り、キーボード操作やフォーカス動作を手作業で再実装しない

操作

• MUST 破壊的または取り消し不可能な操作には AlertDialog を使用する
• SHOULD 読み込み中の状態には、構造を示すスケルトンを使用する
• NEVER h-screen は使用せず、h-dvh を使用する
• MUST 固定要素では safe-area-inset を考慮する
• MUST エラーは操作が発生する場所の近くに表示する
• NEVER input 要素や textarea 要素での貼り付けを妨げない

アニメーション

• NEVER 明示的に求められない限り、アニメーションを追加しない
• MUST コンポジターで処理されるプロパティ（transform、opacity）のみをアニメーションさせる
• NEVER レイアウトプロパティ（width、height、top、left、margin、padding）をアニメーションさせない
• SHOULD 小規模で局所的な UI（テキスト、アイコン）を除き、描画プロパティ（background、color）のアニメーションは避ける
• SHOULD 表示時のアニメーションには ease-out を使用する
• NEVER 操作時のフィードバックを 200ms より長くしない
• MUST 画面外にある間は、ループするアニメーションを一時停止する
• MUST prefers-reduced-motion を尊重する
• NEVER 明示的に求められない限り、カスタムのイージングカーブを導入しない
• SHOULD 大きな画像や全画面の領域をアニメーションさせない

タイポグラフィ

• MUST 見出しには text-balance、本文や段落には text-pretty を使用する
• MUST データには tabular-nums を使用する
• SHOULD 情報量の多い UI には truncate または line-clamp を使用する
• NEVER 明示的に求められない限り、letter-spacing（tracking-*）を変更しない

レイアウト

• MUST 固定の z-index スケールを使用する（任意の z-* は使用しない）
• SHOULD 正方形の要素には w-* と h-* の組み合わせではなく size-* を使用する

パフォーマンス

• NEVER 大きな blur() や backdrop-filter の領域をアニメーションさせない
• NEVER アニメーション中でない場面で will-change を適用しない
• NEVER レンダリングロジックで表現できる処理に useEffect を使用しない

デザイン

• NEVER 明示的に求められない限り、グラデーションを使用しない
• NEVER 紫色やマルチカラーのグラデーションを使用しない
• NEVER 主な操作の手がかりとして、グロー効果を使用しない
• SHOULD 明示的に求められない限り、Tailwind CSS のデフォルトのシャドウスケールを使用する
• MUST 空の状態には、明確な次の操作を1つ用意する
• SHOULD 1つのビューで使用するアクセントカラーを1色に抑える
• SHOULD 新しい色を導入する前に、既存のテーマまたは Tailwind CSS のカラートークンを使用する

例

ユーザーの依頼：

@baseline-ui を使ってこのインターフェースを確認し、影響の大きいデザイン上の問題を特定して、実装可能な改善案を提案してください。

制限事項

• このスキルは、タスクが上流のソースおよびローカルプロジェクトのコンテキストに明確に合致する場合にのみ使用してください。
• 変更を適用する前に、コマンド、生成されるコード、依存関係、認証情報、外部サービスの動作を確認してください。
• 例を、環境固有のテスト、セキュリティレビュー、または破壊的な操作や費用のかかる操作に対するユーザーの承認の代わりとして扱わないでください。