Horace-Maxwell/ui-master

UI Master：AI が作ったと思わせないインターフェース

パス規定：本ファイルはリポジトリの ui/ ディレクトリにあり、catalog/ と prompts/ は同じ階層にあり、スキルと共に移動します。

• 完全なリポジトリ内（または setup.sh --link-skills でシンボリックリンクインストールした場合）：まず realpath でリポジトリルートを特定し、python3 <リポジトリルート>/scripts/find.py <キーワード> ですべてのモジュールを検索できます。
• 単独インストールした場合（npx skills add Horace-Maxwell/ai-master-prompt、ui/ フォルダのみ）：検索スクリプトはなく、直接 catalog/*.md を grep します。スキャフォールディング、スキル、ツールなどの他のモジュールは https://github.com/Horace-Maxwell/ai-master-prompt を参照してください。

AI が作る UI が見苦しいのは、能力不足ではなく、①既成のコンポーネントライブラリを活用していない、②欲しい効果の名前を言えないからです。このスキルはその2つを解決します。

ワークフロー

1. まず4つのことを明確にする

• プラットフォームと技術スタック：Web（React/Next？Vue？純HTML？）か React Native/Expo か？既存プロジェクトか新規か？
• ページタイプ：ランディングページ / ダッシュボード / SaaS アプリ / AI チャットプロダクト / モバイルアプリ / ポートフォリオ…
• スタイル：ユーザーはスタイルや参考サイトを指定しているか？
• アニメーション強度：控えめ / 適度 / 派手

いつ質問し、いつ直接実装するか：プラットフォームとページタイプが不明な場合のみ質問します（最大1ラウンド）。それ以外はデフォルト値を使用し、何を選んだかを返信で説明します：

指定がないもの	デフォルト
技術スタック	既存プロジェクトはそのまま；新規Webは Next.js + Tailwind + shadcn/ui
スタイル	2〜3方向を提示してユーザーに選んでもらう（prompts/style-recipes.md を参照）；ユーザーが「任せる」と言ったらページタイプに最も合うものを選ぶ
アニメーション強度	プロダクトUIは控えめ；ランディングページは適度；ポートフォリオ/イベントページは派手で可

ユーザーが効果を説明できない場合、prompts/effect-vocabulary.md の名称を使って確認します（「Text Scramble（文字がランダムに跳ねた後、正しい文字に落ち着く）」のことですか？）。

2. 決定表に従ってベースを選ぶ

ユーザーがスタイルを指定している場合、スタイル行を優先します：手描き風のランディングページには手描きライブラリを使い、Aceternity のようなダークな派手コンポーネントを重ねないでください。

状況	ベース	追加するもの
React/Next 新規プロジェクト（デフォルト）	npx create-next-app@latest、その後 npx shadcn@latest init	必要に応じて名前空間レジストリからコンポーネントを追加
スタイル指定あり（手描き/レトロ/ブルータリズム/ガラス/ターミナル）	対応するスタイルライブラリ（style-recipes を参照）	ほとんどが shadcn レジストリで、インストールして同名コンポーネントを直接置き換え
ランディングページ / Hero / マーケティングページ（スタイル指定なし）	shadcn + Magic UI / Aceternity / React Bits	スムーススクロール Lenis；スクロールアニメーション GSAP ScrollTrigger または Motion
ダッシュボード / 管理画面	shadcn + Tremor または shadcn charts	Kibo UI で高度なコンポーネントを補完
AI チャット / Agent プロダクト	shadcn + AI Elements または assistant-ui	affectUI で Agent の可観測性パネル；データは Langfuse / Phoenix から；Python バックエンドは AG-UI プロトコルでフロントエンドと接続
React Native / Expo	npx create-expo-app@latest + React Native Reusables または ExpoKit	リキッドグラスは expo-glass-effect、すりガラスは expo-blur；beUI でアニメーション
Vue / Nuxt	Nuxt UI または shadcn-vue	Inspira UI で視覚効果；goopUI（液体効果、pre-alpha）
純 HTML / フレームワークなし	daisyUI または Tailwind + ネイティブCSS	Animate.css、Hover.css、GSAP

完全な候補リスト：

• コンポーネントライブラリ：catalog/02 基本、03 アニメーション、04 スタイル化、05 モバイル、06 エフェクト/3D、07 AI プロダクト
• 見つからない場合は集約サイトへ：catalog/01（21st.dev、shadcn 公式ディレクトリ、registry.directory）

3. コンポーネントのインストール：shadcn 名前空間の使い方

公式インデックスに収録されている名前空間（548個）は設定不要です：

npx shadcn@latest add @magicui/marquee
npx shadcn@latest add @aceternity/spotlight
npx shadcn@latest search @aceternity --query "card"     # アイテム名が不明な場合：まず検索
npx shadcn@latest list @magicui                    # または名前空間の全アイテムを一覧表示
npx shadcn@latest view @magicui/border-beam        # インストール前にコードを確認

よくある3つの落とし穴：

1. アイテム名は推測できません。 カタログ内の <item> はプレースホルダーで、各ライブラリの命名は異なります。まず search または list を使用してください。
2. React Bits のアイテム名にはバリアントサフィックスが付きます：<コンポーネント名>-<TS|JS>-<TW|CSS>、例：npx shadcn@latest add @react-bits/DecryptedText-TS-TW。サフィックスがないと 404 になります。
3. 公式インデックスにないライブラリ（Looseleaf、Rare UI など）のインストール方法は2つ：

   • 完全な URL または GitHub パスを直接指定、設定不要：npx shadcn@latest add https://kevintngo.github.io/looseleaf/r/button.json、npx shadcn@latest add swamimalode07/rare-ui/fluid-orb

   • または components.json に一度登録すると、その後 @looseleaf/button のように使えます：

     { "registries": { "@looseleaf": "https://kevintngo.github.io/looseleaf/r/{name}.json" } }
     

よく使う名前空間クイックリファレンス（すべて公式インデックス内）：@magicui @aceternity @react-bits @animate-ui @motion-primitives @cult-ui @kokonutui @coss @shadcnblocks @tailark @kibo-ui @8bitcn @neobrutalism @retroui @glasscn @glassyui @ai-elements @assistant-ui @prompt-kit @affectui @beui @shaderscn @threecn @lucide-animated @svgl

4. Agent にツールをインストールする（ユーザーの同意を得てから）

最小構成（例：Claude Code；他の Agent は -- 以降の同じ npx … を自身の MCP 設定に記述します。対照表はリポジトリルートの AGENTS.md を参照）：

npx shadcn@latest mcp init --client claude                    # 数百のレジストリのコンポーネントを閲覧/インストール（--client cursor / vscode も対応）
claude mcp add context7 -- npx -y @upstash/context7-mcp        # 任意のライブラリの最新ドキュメント
npx skills add anthropics/skills --skill frontend-design       # 美的ベースライン、AI臭さを除去

必要に応じて追加：Magic UI MCP、21st MCP、Figma MCP（デザインデータがある場合）、Motion AI Kit（npx motion-ai）、GSAP skills、参考スクリーンショット検索用の Mobbin / Refero / Lazyweb MCP（いずれもアカウントが必要）。完全なリストは catalog/12 を参照。

5. まずデザインシステムを定義してからページを書く

1. スタイルトークンを定義する：配色（Realtime Colors / tweakcn で生成）、フォント（デフォルトの Inter は避ける：Fontshare、Google Fonts から個性的なペアを選ぶ）、角丸、シャドウ、スペーシング。ユーザーが参考ブランドを指定した場合、awesome-design-md で対応する DESIGN.md を見つけてプロジェクトルートに配置する。
2. ページ構造：インスピレーションサイト（catalog/10）にある同種ページのブロック順序を参考にする。
3. コンポーネントの再利用を優先する：npx shadcn@latest add で追加できるものは手書きしない。
4. アニメーションには目的を持たせる：登場時1回、ホバーフィードバック、スクロールによるストーリーテリング。prefers-reduced-motion を尊重する。

6. セルフチェック（省略しないこと）

• ブラウザ（Playwright / Chrome DevTools MCP / 内蔵ブラウザ）でページを開いてスクリーンショットを撮り、以下の「AI臭さ」リストと照合する
• モバイル幅（375px）で確認する
• コンソールにエラーがないこと；アニメーションがカクつかないこと（transform/opacity のみを動かす）

よくあるAI臭さ（避ける）：紫青グラデーション + Inter + 中央揃えの大見出しの3点セット；すべてのカードが同じ角丸と同じシャドウ；絵文字をアイコン代わりに使う；画面中ガラスモーフィズム；階層のないグレーのテキスト；各ブロックが「フェードイン＋上昇」。

アニメーション/スタイル用語が必要な場合

• クイックリファレンス：prompts/effect-vocabulary.md（インストール可能なアイテム名付き）
• スタイルレシピ：prompts/style-recipes.md
• 要件記述用テンプレート（ユーザーや他のAI向け）：prompts/request-template.md
• デモ付きギャラリー：motion-prompt（192エフェクト、npx skills add showheyohtaki/motion-prompt）、Motion Library（510エフェクト）、aimotions（195種類のテキストアニメーション）、catalog/09 を参照