mcpField
B
baseline-ui

baseline-ui

github.com/ibelickデザイン・UI10.3k24.6k 回インストール3 日前に更新
リポジトリ

baseline-ui について

開発者やコーディングエージェント向けのUI設計スキルです。UIの実装とレビューに一貫した基準を適用し、コンポーネント、操作、アニメーション、タイポグラフィ、レイアウト、性能を扱います。

主な機能

  1. 01Tailwind CSSの既定値とクラス規則
  2. 02アクセシブルなコンポーネントと操作規則
  3. 03アニメーションとモーションの制約
  4. 04タイポグラフィとレイアウト基準
  5. 05性能とビジュアルデザインの規則

活用シーン

  1. 01UI作業に一貫した制約を適用
  2. 02基準違反のインターフェースコードを確認
  3. 03アクセシブルな操作コンポーネントの構築

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/ibelick/ui-skills --skill baseline-ui

インストール後、Claude Code で/baseline-uiを入力して読み込まれたか確認します。

詳細

ベースライン UI

AI 生成の粗雑なインターフェイスを防ぐため、独自の見解に基づく UI のベースラインを適用します。

使用方法

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

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

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

スタック

  • カスタム値がすでに存在する場合、または明示的に要求された場合を除き、Tailwind CSS のデフォルトを必ず使用します
  • JavaScript によるアニメーションが必要な場合は、必ず motion/react（以前の framer-motion）を使用します
  • Tailwind CSS のエントランスアニメーションやマイクロアニメーションには、tw-animate-css を使用することを推奨します
  • クラスのロジックには、必ず cn ユーティリティ（clsx + tailwind-merge）を使用します

コンポーネント

  • キーボード操作やフォーカス動作を伴うものには、必ずアクセシブルなコンポーネントプリミティブ（Base UI、React Aria、Radix）を使用します
  • まずプロジェクト既存のコンポーネントプリミティブを必ず使用します
  • 同じインタラクション領域内でプリミティブシステムを混在させてはいけません
  • スタックと互換性がある場合、新しいプリミティブには Base UI を優先することを推奨します
  • アイコンのみのボタンには、必ず 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 を適用してはいけません
  • レンダリングロジックで表現できる処理に useEffect を使用してはいけません

デザイン

  • 明示的に要求された場合を除き、グラデーションを使用してはいけません
  • 紫色またはマルチカラーのグラデーションを使用してはいけません
  • グロー効果を主要なアフォーダンスとして使用してはいけません
  • 明示的に要求された場合を除き、Tailwind CSS のデフォルトのシャドウスケールを使用することを推奨します
  • 空の状態には、明確な次のアクションを必ず 1 つ設定します
  • 1 つのビューでアクセントカラーの使用を 1 色に抑えることを推奨します
  • 新しい色を導入する前に、既存のテーマまたは Tailwind CSS のカラートークンを使用することを推奨します

コメント

Markdown 対応