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 を使用してください。デフォルトではサーバーコンポーネント（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を絶対に使用しないでください。モバイルブラウザー（iOS Safari）で重大なレイアウトのずれが発生するのを防ぐため、必ずmin-h-[100dvh]を使用してください。
  • 複雑なフレックス計算よりグリッドを優先： 複雑なフレックスボックスのパーセンテージ計算（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）、コントラストの高い単色のアクセント（例：エメラルド、エレクトリックブルー、ディープローズ）を使用してください。
• 色の一貫性： 出力全体で 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 props を使用してください。
• 段階的なオーケストレーション: リストやグリッドを一度にマウントしないでください。staggerChildren（Framer）または CSS カスケード（animation-delay: calc(var(--index) * 100ms)）を使い、順番に流れるように表示してください。重要: staggerChildren を使う場合、親（variants）と子は同一の Client Component ツリー内に配置する必要があります。データを非同期で取得する場合は、そのデータを 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 を使って重ね合わせたり、異なる画像アスペクト比（例：16:9 の隣に 4:3）を使ったり、中央揃えのデータの上に左揃えのヘッダーを配置したりします。
• 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（デイリーアプリモード）: 標準的な Web アプリに適した通常の間隔にします。
• 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 負荷の高い絶え間ないアニメーションを、それぞれ専用のクライアントコンポーネントに厳密に分離していますか？