design-taste-frontend-v1

高い主体性を備えたフロントエンドスキル

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 を使用します。デフォルトは Server Components（RSC）です。
  • RSC の安全性： グローバル状態が機能するのは Client Components のみです。Next.js では、プロバイダーを"use client"コンポーネントでラップしてください。
  • インタラクティブ性の分離： セクション4または7（モーション／リキッドグラス）が有効な場合、該当するインタラクティブ UI コンポーネントは、最上部に'use client'を記述した独立したリーフコンポーネントとして切り出す必要があります。Server Components は静的なレイアウトのみを描画してください。
• 状態管理： 独立した 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で幅を制限します。
  • ビューポートの安定性［最重要］： 全高の Hero セクションにh-screenを絶対に使用しないでください。モバイルブラウザー（iOS Safari）で致命的なレイアウトのずれが発生するのを防ぐため、必ずmin-h-[100dvh]を使用してください。
  • 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のみを使用してください（インストール済みのバージョンを確認してください）。strokeWidthは全体で統一してください（例：1.5または2.0のみを使用）。

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）に、コントラストの高い単色のアクセント（例：エメラルド、エレクトリックブルー、ディープローズ）を組み合わせてください。
• カラーの一貫性： 出力全体で同じパレットを使用してください。同じプロジェクト内で、暖色系と寒色系のグレーを混在させないでください。

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

• 中央揃えの偏りを回避： LAYOUT_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）と子は同一のクライアントコンポーネントツリー内に配置する必要があります。データを非同期で取得する場合は、そのデータを props として中央の親 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）： transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) を使用します。読み込み時の表示には 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 の線だけを使います。すべてを詰めて配置します。必須： すべての数値に Monospace（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）のような予測可能な出力は避けてください。有機的で雑然としたデータ（47.2%、+1 (312) 847-1928）を使用してください。
• スタートアップ的な安易な名前の禁止: 「Acme」、「Nexus」、「SmartFlow」。プレミアムで文脈に合ったブランド名を考案してください。
• 埋め草的な言葉の禁止: 「Elevate」、「Seamless」、「Unleash」、「Next-Gen」のような AI コピーライティングの決まり文句は避けてください。具体的な動詞を使用してください。

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

• 壊れた Unsplash リンクの禁止: Unsplash を使用しないでください。https://picsum.photos/seed/{random_string}/800/600 や SVG UI Avatars のような絶対的で信頼できるプレースホルダーを使用してください。
• shadcn/ui のカスタマイズ: shadcn/ui を使用してもかまいませんが、汎用的なデフォルト状態で 決して 使用しないでください。ハイエンドなプロジェクトの美学に合わせて、角丸、色、シャドウを必ずカスタマイズしてください。
• 本番環境対応のクリーンさ: コードは極めてクリーンで、視覚的に印象的で、記憶に残り、あらゆる細部にわたって綿密に洗練されている必要があります。

8. クリエイティブの武器庫（ハイエンドなインスピレーション）

一般的な UI をデフォルトにしないでください。出力が視覚的に印象的で記憶に残るものになるよう、この高度なコンセプトのライブラリから引き出してください。適切な場合には、基本的な CSS モーションではなく、複雑なスクロールストーリーテリングには GSAP（ScrollTrigger/Parallax） を、3D/Canvas アニメーションには ThreeJS/WebGL を活用してください。重要: 同じコンポーネントツリー内で 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 パラダイム

モダンな SaaS ダッシュボードや機能セクションを生成する際は、以下の「Bento 2.0」アーキテクチャとモーションの考え方を必ず採用してください。これは静的なカードの枠を超え、絶え間ない物理的な動きに大きく依存する「Vercel-core と 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 の props を積極的に活用し、並べ替え、サイズ変更、共有要素の状態遷移を滑らかにします。
• 無限ループ： ダッシュボードに「生きている」印象を与えるため、すべてのカードに無限ループする「アクティブ状態」（パルス、タイプライター、フロート、またはカルーセル）を設けます。
• パフォーマンス： 動的リストは <AnimatePresence> でラップし、60fps に最適化します。パフォーマンス上の最重要事項： 絶え間ない動きや無限ループは、必ずメモ化（React.memo）し、それぞれ独立した極小のクライアントコンポーネントに完全に分離してください。親レイアウトで再レンダリングを決して発生させないでください。

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

Bento グリッドを構築する際は、以下の具体的なマイクロアニメーションを実装してください（例：1 行目は 3 列、2 行目は 2 列に分割し、比率は 70/30）：

1. インテリジェントリスト： 無限の自動並べ替えループを備えた、縦方向に積み重なる項目のリストです。layoutId を使用して項目の位置を入れ替え、AI がリアルタイムでタスクの優先順位を付けているように見せます。
2. コマンド入力： 複数のステップで構成されるタイプライターエフェクトを備えた検索／AI バーです。複雑なプロンプトを順番に表示し、点滅するカーソルと、きらめくローディンググラデーションを伴う「処理中」状態を含めます。
3. ライブステータス： 「呼吸する」ステータスインジケーターを備えたスケジュール管理インターフェースです。「オーバーシュート」スプリングエフェクトでポップアップ通知バッジを表示し、3 秒間そのまま表示した後、消します。
4. ワイドデータストリーム： データカードまたは指標を横方向に並べた「無限カルーセル」です。x: ["0%", "-100%"] を使用してループをシームレスにし、力みのない速度にします。
5. コンテキスト UI（フォーカスモード）： テキストブロックを段階的にハイライト表示し、その後、マイクロアイコン付きのフローティングアクションツールバーを「フロートイン」させるドキュメントビューです。

10. 最終事前チェック

出力前に、この評価表に照らしてコードを確認してください。これはロジックに適用する最後のフィルターです。

• 任意にではなく適切にグローバル状態を使用し、深い階層への props の受け渡しを避けていますか？
• デザインのばらつきが大きい場合でも、モバイルレイアウトの折り返し（w-full、px-4、max-w-7xl mx-auto）が保証されていますか？
• 高さ全体を使うセクションでは、不具合のある h-screen の代わりに安全な min-h-[100dvh] を使用していますか？
• useEffect のアニメーションに厳密なクリーンアップ関数を含めていますか？
• 空、読み込み中、エラーの各状態を用意していますか？
• 可能な箇所では、カードを使わず余白で表現していますか？
• CPU 負荷の高い絶え間ないアニメーションを、それぞれ専用のクライアントコンポーネントに厳密に分離していますか？