design-taste-frontend

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

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

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

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

言語の保持 [重要]: ユーザーのプロジェクトの元の言語を必ず保持する必要があります。既存のコードベースが UI テキスト、ラベル、見出し、説明、その他のユーザー向けコンテンツに中国語 (中文) を使用している場合は、すべてのコンテンツを中国語のままにしなければなりません。既存の中国語テキストを英語に置き換えたり翻訳したりしないでください。このルールは、新しいコンポーネント、ページ、既存ファイルの変更を含む、生成されるすべてのコードに適用されます。

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 を使用してページレイアウトを包含してください。
  • ビューポートの安定性 [重要]: 全高の 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 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 の 100 の痕跡（禁止パターン）

プレミアムで汎用的ではないアウトプットを保証するため、明示的に要求されない限り、これらの一般的な 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 の「egg」や 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 負荷の高い絶え間ないアニメーションを、それぞれ専用のクライアントコンポーネントに厳密に分離していますか？