baseline-ui について
Baseline UI は、UI の作成に制約を適用したり、ファイル内の違反を確認したりするスキルです。アクセシビリティ、操作、レイアウト、タイポグラフィ、アニメーション、スタイルの規則を扱います。
主な機能
- 01会話内で UI 制約を適用
- 02ファイルを検査して違反を特定
- 03コードレベルの修正案を提示
- 04アクセシビリティと操作の規則
- 05レイアウト、文字組み、アニメーションの規則
活用シーン
- 01UI 実装時に一貫した制約を適用
- 02レビュー前に UI ファイルを確認
- 03アクセシビリティや操作の問題を発見
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/baseline-uiを入力して読み込まれたか確認します。
詳細
Baseline UI
AI 生成の粗雑なインターフェースを防ぐため、独自の考えに基づいた UI の基準を適用します。
使い方
-
/baseline-uiこの会話で行うすべての UI 作業に、これらの制約を適用します。 -
/baseline-ui <file>以下のすべての制約に照らしてファイルを確認し、次の内容を出力します。- 違反箇所（該当する行やスニペットを正確に引用）
- 重要な理由（短い文を 1 つ）
- 具体的な修正案（コードレベルの提案）
スタック
- カスタム値がすでに存在する場合、または明示的に指定された場合を除き、Tailwind CSS のデフォルト値を必ず使用します
- Tailwind CSS での表示アニメーションやマイクロアニメーションには、
tw-animate-cssの使用を推奨します - クラスのロジックには
cnユーティリティ（clsx+tailwind-merge）を必ず使用します
コンポーネント
- キーボード操作やフォーカス動作を伴うものには、必ずアクセシブルなコンポーネントプリミティブ（
Radix UI）を使用します - まずプロジェクトに既存のコンポーネントプリミティブがないか確認し、あればそれを必ず使用します
- 同じインタラクション領域で複数のプリミティブシステムを混在させてはいけません
- スタックと互換性がある場合、新しいプリミティブには
shadcn-vueを優先して使用してください - アイコンのみのボタンには、必ず
aria-labelを追加します - 明示的に指定された場合を除き、キーボード操作やフォーカス動作を独自に再実装してはいけません
インタラクション
- 破壊的な操作や取り消し不可能な操作には、必ず
AlertDialogを使用します - ローディング状態には、構造を反映したスケルトンの使用を推奨します
h-screenは使用せず、h-dvhを使用します- 固定要素では、必ず
safe-area-insetを考慮します - エラーは、操作が行われる場所の近くに必ず表示します
input要素やtextarea要素で貼り付けを妨げてはいけません
アニメーション
- 明示的に指定された場合を除き、アニメーションを追加してはいけません
- コンポジターが処理するプロパティ（
transform、opacity）のみを必ずアニメーションさせます - レイアウトプロパティ（
width、height、top、left、margin、padding）をアニメーションさせてはいけません - 小規模で局所的な UI（テキスト、アイコン）を除き、描画プロパティ（
background、color）のアニメーションは避けることを推奨します - 表示時には
ease-outを使用することを推奨します - インタラクションのフィードバックは、必ず
200ms以下にします - 画面外では、ループアニメーションを必ず一時停止します
prefers-reduced-motionを考慮することを推奨します- 明示的に指定された場合を除き、カスタムのイージング曲線を導入してはいけません
- 大きな画像や全画面の領域のアニメーションは避けることを推奨します
タイポグラフィ
- 見出しには必ず
text-balanceを、本文や段落には必ずtext-prettyを使用します - データには必ず
tabular-numsを使用します - 情報量の多い UI には、
truncateまたはline-clampの使用を推奨します - 明示的に指定された場合を除き、
letter-spacing（tracking-*）を変更してはいけません
レイアウト
- 固定の
z-indexスケールを必ず使用します（任意のz-*は使用しません） - 正方形の要素には、
w-*とh-*の組み合わせではなく、size-*の使用を推奨します
パフォーマンス
- 大きな
blur()やbackdrop-filterの領域をアニメーションさせてはいけません - アニメーションが実行中の場合を除き、
will-changeを適用してはいけません
デザイン
- 明示的に指定された場合を除き、グラデーションを使用してはいけません
- 紫色やマルチカラーのグラデーションを使用してはいけません
- 主なアフォーダンスとして、グロー効果を使用してはいけません
- 明示的に指定された場合を除き、Tailwind CSS のデフォルトのシャドウスケールを使用することを推奨します
- 空の状態には、明確な次のアクションを必ず 1 つ用意します
- 1 つのビューでアクセントカラーの使用を 1 色に抑えることを推奨します
- 新しい色を導入する前に、既存のテーマまたは Tailwind CSS のカラートークンを使用することを推奨します
コメント
Markdown 対応