design-taste-frontend

高性能フロントエンドスキル

使用する場面

• ユーザーが、強いデザインセンスと汎用的なものにしないための制約を備えたフロントエンド UI の作成、改善、レビューを求めた場合に使用します。
• React、Next.js、Tailwind、モーション、コンポーネントの状態、タイポグラフィ、余白、色、レスポンシブ動作について、シニアレベルのデザイン判断が必要な場合に使用します。
• 中央揃えのヒーロー、紫のグラデーション、カードの乱用、不十分な状態、壊れやすいレイアウトなど、LLM の UI にありがちなバイアスを出力で上書きする必要がある場合に使用します。

例

ユーザーのリクエスト:

@design-taste-frontend を使ってこのインターフェースをレビューし、最も影響の大きいデザイン上の問題を特定して、実装可能な改善案を提案してください。

制限事項

• このスキルはフロントエンドのデザインと実装のガイダンスを提供するものであり、プロジェクト固有の製品要件、アクセシビリティレビュー、ユーザーテストの代わりにはなりません。
• 生成された UI を本番環境で使用可能なものとして扱う前に、対象リポジトリでフレームワークのバージョン、インストール済みの依存関係、レスポンシブ動作、ビルド出力を確認してください。
• 既存の製品、ブランドシステム、プラットフォームの慣習が異なる視覚的方向性を求める場合は、これらのデザインルールを無理に適用しないでください。

1. アクティブなベースライン構成

• DESIGN_VARIANCE: 8 (1=完全な対称性、10=芸術的な混沌)
• MOTION_INTENSITY: 6 (1=静的/動きなし、10=シネマティック/魔法のような物理挙動)
• VISUAL_DENSITY: 4 (1=美術館/空気感、10=パイロットのコックピット/データ満載)

AI への指示: すべての生成における標準のベースラインは、厳密にこれらの値 (8, 6, 4) に設定されています。ユーザーにこのファイルを編集するよう求めてはいけません。それ以外の場合は、常にユーザーの指示に従ってください。チャットのプロンプトでユーザーが明示的に要求した内容に基づいて、これらの値を動的に調整します。これらのベースライン (またはユーザーが上書きした) 値をグローバル変数として使用し、セクション 3 から 7 の具体的なロジックを駆動してください。

2. デフォルトのアーキテクチャと規約

ユーザーが別のスタックを明示的に指定しない限り、一貫性を保つため、以下の構造上の制約に従ってください。

• 依存関係の確認［必須］： サードパーティライブラリ（例：framer-motion、lucide-react、zustand）をインポートする前に、必ず package.json を確認してください。パッケージが見つからない場合は、コードを提示する前に、必ずインストールコマンド（例：npm install package-name）を出力してください。ライブラリが存在すると決して想定しないでください。
• フレームワークとインタラクティブ性： React または Next.js を使用します。デフォルトではサーバーコンポーネント（RSC）を使用してください。
  • RSC の安全性： グローバル状態が機能するのはクライアントコンポーネントのみです。Next.js では、プロバイダーを "use client" コンポーネントでラップしてください。
  • インタラクティブ性の分離： セクション 4 または 7（モーション／リキッドグラス）が有効な場合、対象のインタラクティブな UI コンポーネントは独立したリーフコンポーネントとして切り出し、最上部に 'use client' を記述してください。サーバーコンポーネントではデータを取得し、動的なサーバー出力をレンダリングできます。ブラウザーの状態／エフェクトやイベントハンドラーは、クライアントコンポーネントに分離してください。
• 状態管理： 独立した UI にはローカルの useState／useReducer を使用します。グローバル状態は、深いプロップの受け渡しを避ける必要がある場合に限って使用してください。
• スタイリング方針： スタイリングの 90% には Tailwind CSS（v3／v4）を使用します。
  • Tailwind のバージョン固定： まず package.json を確認してください。v3 のプロジェクトで v4 の構文を使用しないでください。
  • T4 設定ガード： v4 では、postcss.config.js で tailwindcss プラグインを使用しないでください。@tailwindcss/postcss または Vite プラグインを使用してください。
• 絵文字禁止ポリシー［重大］： コード、マークアップ、テキストコンテンツ、代替テキストに絵文字を決して使用しないでください。記号は、高品質なアイコン（Radix、Phosphor）またはシンプルな SVG プリミティブに置き換えてください。絵文字は禁止です。
• レスポンシブ対応と間隔：
  • ブレークポイント（sm、md、lg、xl）を標準化してください。
  • max-w-[1400px] mx-auto または max-w-7xl を使用して、ページレイアウトの幅を制限してください。
  • ビューポートの安定性［重大］： 高さ全体を占めるヒーローセクションに h-screen を決して使用しないでください。安定した最小ビューポートには min-h-[100svh] を、ブラウザーの UI の変化に追従させる場合は 100dvh を選択してください。スクロール中に dvh のサイズが変化する可能性があるため、アドレスバーやキーボードの変化をテストしてください。
  • Flex の計算より Grid： 複雑な Flexbox のパーセンテージ計算（w-[calc(33%-1rem)]）は決して使用しないでください。信頼性の高いレイアウトには、必ず CSS Grid（grid grid-cols-1 md:grid-cols-3 gap-6）を使用してください。
• アイコン： インポートパスには、必ず @phosphor-icons/react または @radix-ui/react-icons のいずれかを使用してください（インストール済みのバージョンを確認してください）。各インストール済みアイコンライブラリがサポートするウェイト／ストローク API を使用してください。Radix アイコンと Phosphor には、共通の strokeWidth の仕様はありません。

3. デザインエンジニアリング指針（バイアス補正）

LLM には、特定のありきたりな UI パターンに統計的な偏りがあります。以下の設計ルールを使い、先回りして洗練されたインターフェースを構築してください。

ルール 1：タイポグラフィの一貫性

• ディスプレイ／見出し： デフォルトで text-4xl md:text-6xl tracking-tighter leading-none を使用します。
  • 凡庸さの回避： 「プレミアム」または「クリエイティブ」な雰囲気には、Inter の使用を避けてください。Geist、Outfit、Cabinet Grotesk、または Satoshi を使い、独自の個性を出してください。
  • 技術系 UI のルール： ダッシュボード／ソフトウェア UI でのセリフ体フォントは厳禁です。これらの用途では、高品質なサンセリフ体の組み合わせ（Geist + Geist Mono または Satoshi + JetBrains Mono）のみを使用してください。
• 本文／段落： デフォルトで text-base text-gray-600 leading-relaxed max-w-[65ch] を使用します。

ルール 2：カラーの調整

• 制約： アクセントカラーは最大 1 色です。彩度は 80% 未満にしてください。
• ライラックの禁止： 「AI のパープル／ブルー」系のデザインは厳禁です。パープルのボタンのグローや、ネオンのグラデーションは使用しないでください。絶対的にニュートラルなベースカラー（Zinc／Slate）に、コントラストの高い単一のアクセントカラー（例：エメラルド、エレクトリックブルー、ディープローズ）を組み合わせてください。
• カラーの一貫性： 出力全体で 1 つのパレットを使用してください。同じプロジェクト内で、暖色系と寒色系のグレーを混在させないでください。

ルール 3：レイアウトの多様化

• 中央寄せの偏りを回避： DESIGN_VARIANCE > 4 の場合、中央寄せのヒーロー／H1 セクションは厳禁です。「スプリットスクリーン」（50/50）、「左揃えのコンテンツ／右揃えのアセット」、または「非対称の余白」構成を採用してください。

ルール 4：素材感、シャドウ、「カードの過剰使用」の回避

• ダッシュボードの堅牢化： VISUAL_DENSITY > 7 の場合、汎用的なカードコンテナーは厳禁です。border-t、divide-y、または純粋な余白を使って、論理的にグループ化してください。データ指標は、機能上の理由でエレベーション（z-index）が必要な場合を除き、枠で囲わずに余白を持たせてください。
• 実装： エレベーションによって階層が伝わる場合にのみ、カードを使用してください。シャドウを使用する場合は、背景色の色相に合わせてください。

ルール 5：インタラクティブ UI の状態

• 必須の生成項目： LLM は成功時の「静的な」状態を自然に生成します。インタラクションの一連の流れをすべて実装する必要があります。
  • 読み込み中： レイアウトサイズに合わせたスケルトンローダーを使用してください（汎用的な円形スピナーは避けてください）。
  • 空の状態： データの入力方法を示す、見栄えよく構成された空の状態を用意してください。
  • エラー状態： 明確なインラインエラー表示を行ってください（例：フォーム）。
  • 触覚的なフィードバック： :active では -translate-y-[1px] または scale-[0.98] を使い、押下時のみ物理的に押したような感覚を再現してください。成功状態は、操作が実際に成功した後に表示してください。

ルール 6：データとフォームのパターン

• フォーム： ラベルは必ず入力欄の上に配置してください。補助テキストは任意ですが、マークアップには含めてください。エラーテキストは入力欄の下に配置してください。入力ブロックには標準の gap-2 を使用してください。

4. クリエイティブな先回り（低品質なデザインを防ぐ実装）

ありきたりなAIデザインに積極的に対抗するため、以下の高度なコーディング手法を標準として体系的に実装します。

• 「リキッドグラス」の屈折効果： グラスモーフィズムが必要な場合、backdrop-blur だけで済ませず、1pxの内側の境界線（border-white/10）と控えめな内側のシャドウ（shadow-[inset_0_1px_0_rgba(255,255,255,0.1)]）を加え、物理的なエッジの屈折を表現します。
• 磁力を感じさせる微細な物理挙動（MOTION_INTENSITY > 5 の場合）： ボタンがマウスカーソルに向かってわずかに引き寄せられるようにします。重要： 磁力を感じさせるホバー効果や連続アニメーションに、React の useState を決して使用しないでください。モバイルでパフォーマンスが低下するのを防ぐため、React のレンダーサイクル外で Framer Motion の useMotionValue と useTransform のみを使用してください。
• 絶え間ない微細なインタラクション： MOTION_INTENSITY > 5 の場合、状態を伝えるときに限り、控えめなモーションを任意で使用します。通常のコントロールには、デフォルトで連続アニメーションを追加しないでください。すべてのインタラクティブ要素にプレミアムなスプリング物理（type: "spring", stiffness: 100, damping: 20）を適用し、リニアなイージングは使用しないでください。
• レイアウト遷移： 状態変化に伴う並べ替え、サイズ変更、共有要素の遷移を滑らかにするため、常に Framer Motion の layout および layoutId プロパティを使用してください。
• 段階的な演出： リストやグリッドを一度にマウントしないでください。staggerChildren（Framer）または CSS の連鎖（animation-delay: calc(var(--index) * 100ms)）を使い、順番に流れ込むように表示します。重要： staggerChildren を使う場合、親（variants）と子は、必ず同一の Client Component ツリー内に配置してください。データを非同期で取得する場合は、一元化された親 Motion ラッパーにデータをプロパティとして渡してください。

5. パフォーマンスのガードレール

• DOM コスト： 粒子／ノイズフィルターは、固定配置されたポインターイベントを受け付けない疑似要素（例：fixed inset-0 z-50 pointer-events-none）にのみ適用し、継続的なGPU再描画やモバイルのパフォーマンス低下を防ぐため、スクロールするコンテナには決して適用しないでください。
• ハードウェアアクセラレーション： top、left、width、height はアニメーションさせないでください。アニメーションには transform と opacity のみを使用してください。
• Z-indexの節度： 指示がない限り、場当たり的に z-50 や z-10 を多用しないでください。Z-indexは、レイヤー構造を構成する要素（固定ナビゲーションバー、モーダル、オーバーレイ）にのみ使用してください。

6. 技術リファレンス（各設定の定義）

DESIGN_VARIANCE（レベル1～10）

• 1～3（予測可能）： Flexbox の justify-center、厳密な12列の対称グリッド、均等なパディングを使用します。
• 4～7（オフセット）： margin-top: -2rem で要素を重ね、画像のアスペクト比を変化させ（例：4:3 の画像の隣に 16:9 の画像）、データは中央揃え、見出しは左揃えにします。
• 8～10（非対称）： Masonry レイアウト、分数単位を使った CSS Grid（例：grid-template-columns: 2fr 1fr 1fr）、広大な余白領域（padding-left: 20vw）を使用します。
• モバイルでの上書き： レベル4～10では、md: 以上で非対称なレイアウトを使用する場合、ビューポートが < 768px のときは、横スクロールやレイアウト崩れを防ぐため、必ず厳密な単一列レイアウト（w-full、px-4、py-8）に切り替えてください。

MOTION_INTENSITY（レベル1～10）

• 1～3（静的）： 自動アニメーションは使用しません。CSS の :hover および :active の状態のみを使用します。
• 4～7（滑らかなCSS）： 適切な時間とイージングを設定し、transform, opacity などの遷移プロパティを明示してください。表示時には animation-delay による連鎖を使用します。transform と opacity のみを重視してください。will-change: transform は控えめに使用してください。
• 8～10（高度な演出）： スクロールに応じた複雑な表示やパララックスを使用します。Framer Motion のフックを使用してください。window.addEventListener('scroll') は決して使用しないでください。

VISUAL_DENSITY（レベル1～10）

• 1～3（アートギャラリーモード）： 余白を多く取り、セクション間の間隔を大きくします。全体を非常に上質で洗練された印象にします。
• 4～7（デイリーアプリモード）： 一般的なウェブアプリに適した標準的な間隔にします。
• 8～10（コックピットモード）： パディングを小さくし、カードの枠は使わず、データの区切りには1pxの線のみを使用します。全体を隙間なく配置します。必須： すべての数値に等幅フォント（font-mono）を使用してください。

7. AI らしさが出るパターン（禁止事項）

プレミアムでありきたりではない出力を保証するため、明示的に求められない限り、次に挙げる一般的な AI デザインの特徴は必ず厳守して避けてください。

ビジュアルと CSS

• ネオンや外側のグローは禁止： デフォルトの box-shadow によるグローや自動グローは使用しないでください。内側の境界線や、色味を抑えた控えめなシャドウを使用してください。
• 純粋な黒は禁止： #000000 は使用しないでください。オフブラック、Zinc-950、またはチャコールを使用してください。
• 彩度の高すぎるアクセントは禁止： アクセントの彩度を下げ、ニュートラルカラーになじませてください。
• 過剰なグラデーションテキストは禁止： 大きな見出しにテキスト塗りつぶしのグラデーションを使用しないでください。
• カスタムマウスカーソルは禁止： 時代遅れで、パフォーマンスやアクセシビリティを損ないます。

タイポグラフィ

• Inter フォントは禁止： 使用できません。Geist、Outfit、Cabinet Grotesk、または Satoshi を使用してください。
• 大きすぎる H1 は禁止： 最初の見出しを必要以上に目立たせないでください。極端に大きくするのではなく、ウェイトや色で階層を調整してください。
• セリフ体の制約： セリフ体フォントは、クリエイティブまたはエディトリアルなデザインにのみ使用してください。すっきりしたダッシュボードでは絶対に使用しないでください。

レイアウトと余白

• 配置と余白を完璧に： パディングとマージンが数学的に正確になるようにしてください。不自然な隙間のある浮いた要素は避けてください。
• 3 列のカードレイアウトは禁止： ありきたりな「横並びの均等な 3 枚のカード」による機能紹介は禁止です。2 列のジグザグ配置、非対称グリッド、または横スクロール方式を使用してください。

コンテンツとデータ（「Jane Doe」効果）

• ありきたりな名前は禁止： 「John Doe」、「Sarah Chan」、「Jack Su」は使用できません。創造性があり、実在しそうな名前を使用してください。
• ありきたりなアバターは禁止： アバターに標準の SVG「卵」や Lucide のユーザーアイコンを使用しないでください。創造性があり、実在感のある写真風プレースホルダーや、独自のスタイルを使用してください。
• 架空の数値は禁止： 99.99%、50%、基本的な電話番号（1234567）など、予測しやすい出力は避けてください。合成データであることを明記するか、ユーザー提供の検証済みの値を使用してください。実在しそうな電話番号やパフォーマンスに関する主張をでっち上げないでください。
• スタートアップ風の安易な名前は禁止： 「Acme」、「Nexus」、「SmartFlow」は使用できません。高級感があり、文脈に合ったブランド名を考案してください。
• 中身のない言葉は禁止： 「Elevate」、「Seamless」、「Unleash」、「Next-Gen」のような、AI のコピーライティングでありがちな決まり文句は避けてください。具体的な動詞を使用してください。

外部リソースとコンポーネント

• 壊れた Unsplash リンクは禁止： Unsplash は使用しないでください。https://picsum.photos/seed/{random_string}/800/600 や SVG UI Avatars など、絶対 URL の信頼できるプレースホルダーを使用してください。
• shadcn/ui のカスタマイズ： shadcn/ui は使用できますが、汎用的なデフォルト状態のままでは絶対に使用しないでください。プロジェクトの洗練された美観に合わせて、角丸、色、シャドウを必ずカスタマイズしてください。
• 本番品質の仕上がり： コードは徹底的にクリーンで、視覚的に印象的かつ記憶に残り、細部まで丁寧に仕上げてください。

8. クリエイティブな武器庫（ハイエンドな着想）

ありきたりな UI をデフォルトにしないでください。次の高度なコンセプト集を活用し、視覚的に印象的で記憶に残る出力にしてください。適切な場合は、複雑なスクロールストーリーテリングに GSAP（ScrollTrigger/Parallax） を、3D／キャンバスアニメーションに ThreeJS/WebGL を活用し、基本的な CSS モーションに頼らないでください。重要： 同じコンポーネントツリー内で GSAP／ThreeJS と Framer Motion を決して併用しないでください。UI／Bento のインタラクションには Framer Motion をデフォルトで使用してください。GSAP／ThreeJS は、ページ全体にわたるスクロールストーリーテリングまたはキャンバス背景に限って使用し、厳格な useEffect クリーンアップブロックでラップしてください。

標準的なヒーローのパラダイム

暗い画像の上にテキストを中央揃えで配置するのはやめてください。非対称なヒーローセクションを試してください。テキストを左または右にすっきりと揃えます。背景には高品質で関連性のある画像を使い、ライトモードかダークモードかに応じて、背景色へ自然に溶け込む控えめなフェード（暗く、または明るく）を加えてください。

ナビゲーションとメニュー

• Mac OS Dock Magnification： 画面端にナビゲーションバーを配置し、ホバー時にアイコンが滑らかに拡大します。
• Magnetic Button： カーソルに向かって物理的に引き寄せられるボタンです。
• Gooey Menu： 粘性のある液体のように、サブ項目がメインボタンから分離します。
• Dynamic Island： ステータスやアラートを表示するために形状が変化する、ピル型の UI コンポーネントです。
• Contextual Radial Menu： クリックした座標を中心に正確に展開する円形メニューです。
• Floating Speed Dial： 曲線状に広がるセカンダリーアクションを備えた FAB です。
• Mega Menu Reveal： フルスクリーンのドロップダウンが、複雑なコンテンツを時間差でフェードインさせます。

レイアウトとグリッド

• Bento Grid： 非対称なタイル状のグループ分けです（例：Apple のコントロールセンター）。
• Masonry Layout： 行の高さを固定しない、段違いのグリッドです（例：Pinterest）。
• Chroma Grid： グリッドの境界線やタイルに、控えめな色のグラデーションが途切れなくアニメーション表示されます。
• Split Screen Scroll： スクロールに合わせて、画面の左右半分が反対方向にスライドします。
• Curtain Reveal： スクロールに合わせて、ヒーローセクションがカーテンのように中央から開きます。

カードとコンテナー

• Parallax Tilt Card： マウスの座標を追跡して 3D 傾斜するカードです。
• Spotlight Border Card： カーソルの位置に合わせてカードの境界線が動的に光ります。
• Glassmorphism Panel： 内側の屈折境界線を備えた、本物のすりガラスのようなパネルです。
• Holographic Foil Card： ホバー時に虹色の光の反射が移り変わるカードです。
• Tinder Swipe Stack： ユーザーがスワイプして取り除ける、物理的に重なったカードです。
• Morphing Modal： ボタンがシームレスに拡大し、自身がフルスクリーンのダイアログコンテナーになります。

スクロールアニメーション

• Sticky Scroll Stack： カードが画面上部に固定され、互いに重なり合っていきます。
• Horizontal Scroll Hijack： 縦スクロールが、滑らかな横方向のギャラリースライドに変換されます。
• Locomotive Scroll Sequence： スクロールバーにフレームレートが直接連動する動画や 3D のシーケンスです。
• Zoom Parallax： スクロールに合わせて、中央の背景画像がシームレスに拡大・縮小します。
• Scroll Progress Path： ユーザーのスクロールに合わせて、SVG のベクター線や経路が描画されます。
• Liquid Swipe Transition： 粘性のある液体のように画面を拭き取るページ遷移です。

ギャラリーとメディア

• Dome Gallery： パノラマドームのような感覚を与える 3D ギャラリーです。
• Coverflow Carousel： 中央の項目に焦点を当て、端の項目を後方に傾けた 3D カルーセルです。
• Drag-to-Pan Grid： 方角を問わず自由にドラッグできる、境界のないグリッドです。
• Accordion Image Slider： ホバー時に全体へ展開する、縦または横に細長い画像ストリップです。
• Hover Image Trail： マウスの軌跡に、次々に現れて消える画像が残ります。
• Glitch Effect Image： ホバー時に RGB チャンネルが一時的にずれるデジタル歪みです。

タイポグラフィとテキスト

• Kinetic Marquee： スクロールに合わせて方向が反転したり速度が上がったりする、終わりなく続くテキスト帯です。
• Text Mask Reveal： 大きなタイポグラフィが、動画背景を映す透明な窓として機能します。
• Text Scramble Effect： 読み込み時やホバー時に、マトリックス風の文字解読アニメーションが表示されます。
• Circular Text Path： 回転する円形のパスに沿って配置されるテキストです。
• Gradient Stroke Animation： 輪郭線に沿ってグラデーションが途切れなく移動する、アウトラインテキストです。
• Kinetic Typography Grid： カーソルを避けるように文字が動いたり回転したりするグリッドです。

マイクロインタラクションとエフェクト

• Particle Explosion Button： 成功時に粒子状に砕け散る CTA です。
• Liquid Pull-to-Refresh： 水滴がちぎれるように動く、モバイルの再読み込みインジケーターです。
• Skeleton Shimmer： プレースホルダーボックス上を光の反射が移動します。
• Directional Hover Aware Button： マウスが入ってきた正確な側から、ホバー時の塗りつぶしが広がります。
• Ripple Click Effect： クリックした座標から、視覚的な波紋が正確に広がります。
• Animated SVG Line Drawing： ベクターがリアルタイムで輪郭を描きます。
• Mesh Gradient Background： 有機的な、ラバランプのように動くカラーブロブです。
• Lens Blur Depth： 前景のアクションを際立たせるため、背景の UI レイヤーに動的なフォーカスぼかしを適用します。

9. 「MOTION-ENGINE」弁当パラダイム

製品とユーザーがこのビジュアルの方向性を明示的に求めている場合は、以下のオプションである「Bento 2.0」のアーキテクチャとモーションの方針を検討してください。これは静的なカードの枠を超え、常に物理的な動きに大きく依存する「Vercel-core meets Dribbble-clean」の美学を徹底します。

A. コアデザインの方針

• 美学： 高級感があり、ミニマルで機能的です。
• カラーパレット： 背景は #f9fafb です。カードは純白（#ffffff）で、1px の枠線には border-slate-200/50 を使います。
• サーフェス： すべての主要なコンテナに rounded-[2.5rem] を使います。ごちゃつかずに奥行きを出すため、「拡散シャドウ」（非常に薄く、広がりのあるシャドウ。例：shadow-[0_20px_40px_-15px_rgba(0,0,0,0.05)]）を適用します。
• タイポグラフィ： Geist、Satoshi、または Cabinet Grotesk のフォントスタックに限定します。見出しには控えめな文字間隔（tracking-tight）を使います。
• ラベル： すっきりとしたギャラリー風の見せ方を保つため、タイトルと説明はカードの外側かつ下部に配置する必要があります。
• ピクセル単位の完成度： カード内には十分な余白として p-8 または p-10 を使います。

B. アニメーションエンジンの仕様（絶え間ない動き）

カードに動きは不要です。アニメーションのデモが明示的に求められている場合は、次の Framer Motion の原則を検討してください。

• スプリング物理： 線形イージングは使いません。高級感と重みのある動きには type: "spring", stiffness: 100, damping: 20 を使います。
• レイアウト遷移： layout と layoutId のプロパティを積極的に活用し、並べ替え、サイズ変更、共有要素の状態遷移を滑らかにします。
• 無限ループ： 無限ループは任意の装飾用デモに限ります。reduced-motion の設定時には停止し、必要に応じて一時停止機能を用意し、実際の稼働状況を模倣してはいけません。
• パフォーマンス： 動的なリストは <AnimatePresence> で囲み、60fps になるよう最適化します。パフォーマンス上の重要事項： 絶え間ない動きや無限ループはすべてメモ化（React.memo）し、独立した極小の Client Component 内に完全に隔離する必要があります。親レイアウトで再レンダリングを発生させてはいけません。

C. 5 つのカードの基本形（マイクロアニメーションの仕様）

Bento グリッド（例：1 行目：3 列｜2 行目：2 列、70/30 の分割）を構築する際は、次の特定のマイクロアニメーションを実装します。

1. インテリジェントリスト： アイテムが無限に自動ソートされる縦積みのリストです。アイテムは layoutId を使って位置を入れ替えます。これはデモであることを明確に示し、実際の AI の判断やユーザーが現在使っているタスクの並べ替えを表すものではないと明記します。
2. コマンド入力： 複数ステップのタイプライター効果を備えた検索／AI バーです。点滅するカーソルと、きらめくローディンググラデーションを使った「処理中」状態を含め、複雑なプロンプトを順番に表示します。
3. ライブステータス： 「呼吸する」ステータスインジケーターを備えたスケジュール画面です。「オーバーシュート」スプリング効果で現れ、3 秒間表示された後に消えるポップアップ通知バッジを含めます。
4. ワイドデータストリーム： データカードまたは指標を並べた横方向の「無限カルーセル」です。楽に感じられる速度で、ループが途切れないようにします（x: ["0%", "-100%"] を使用）。
5. コンテキスト UI（フォーカスモード）： テキストブロックのハイライトが段階的に現れた後、フローティングアクションツールバーが「フロートイン」するドキュメント画面です。ツールバーにはマイクロアイコンを含めます。

10. 最終プリフライトチェック

出力前に、このマトリックスを使ってコードを評価してください。これはロジックに適用する最後のフィルターです。

• グローバル状態は、恣意的にではなく、深い階層へのプロパティの受け渡しを避ける目的で適切に使われていますか？
• デザインのばらつきが大きい場合に、モバイルレイアウトの折りたたみ（w-full、px-4、max-w-7xl mx-auto）が保証されていますか？
• 高さ全体を使うセクションは、想定するキーボードやブラウザーの挙動に対するビューポート戦略を確認したうえで、安全に min-h-[100dvh] を使っていますか？
• useEffect のアニメーションには、厳密なクリーンアップ関数が含まれていますか？
• 空、読み込み中、エラーの状態が用意されていますか？
• 可能な場合、カードを使わずに余白で表現していますか？
• CPU 負荷の高い絶え間ないアニメーションを、それぞれ独自の Client Component 内に厳密に隔離しましたか？

アクセシビリティ、真実性、パフォーマンス

こうしたデザイン上の既定値よりも、ユーザーのブランド、既存のアーキテクチャ、アクセシビリティのニーズを優先します。prefers-reduced-motion を尊重し、必須ではない継続的なアニメーションには一時停止／停止機能を用意し、キーボードフォーカスを安定させ、必須のナビゲーション手段としてスクロールを乗っ取らないようにします。ホバー／マグネット／ドラッグ操作には、キーボード／タッチでの同等の操作方法が必要です。ダイアログには、セマンティクス、フォーカス管理、エスケープ／閉じる動作が必要です。十分なコントラスト、視認できるフォーカス、適切なターゲットサイズ、関連付けられたラベル／エラー説明、装飾的なループを通知しないライブリージョンのアナウンスを維持します。金融／ステータス／AI の動作は、証拠がある場合にのみ実際のものとして扱います。モックデータにはその旨を明記し、リモートのプレースホルダーの稼働状況／プライバシーに依存せず、ライセンス済みまたはローカルの画像を使用します。React.memo だけでは、アニメーション処理の停止、分離の保証、60fps の実現はできません。対象デバイスで CPU／GPU、モーション低減、画面外での動作、クリーンアップを測定します。サーバーサイドレンダリング、Tailwind の構文、モーション API には、固定バージョンでの確認が必要です。スタイル設定のレシピだけで、レスポンシブ対応や本番環境への準備が保証されることはありません。