mcpField

ui-skills

github.com/phrazzldデザイン・UI110 回インストール
リポジトリ

ui-skills について

インターフェースを構築・レビューするフロントエンド開発者向けの、制約を定めた UI スキルです。アクセシビリティ、操作性、アニメーション、タイポグラフィ、レイアウト、パフォーマンスを扱い、コードレベルの修正案も示します。

主な機能

  1. 01Tailwind CSS とクラスユーティリティの指定
  2. 02アクセシブルなコンポーネントプリミティブの要件
  3. 03操作性とセーフエリアへの対応
  4. 04アニメーション属性と時間の制限
  5. 05コードレベルの修正案を伴うファイルレビュー

活用シーン

  1. 01定められた制約に沿った UI の実装
  2. 02UI ガイドライン違反のファイルレビュー
  3. 03キーボード操作とフォーカス動作の確認

インストール

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

$npx skills add https://github.com/phrazzld/claude-config --skill ui-skills

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

詳細

UI スキル

呼び出されたら、より良いインターフェースを構築するため、以下の独自の制約を適用してください。

使い方

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

  • /ui-skills <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 対応