design-taste-frontend-v1

[[design-foundation]] を基盤とします — 6 つの規律と hallmark の slop-test は共通の土台です（交渉不可）。このスキルはその上に flavour を加えるものであり、土台を置き換えるものではありません。

ハイ・エージェンシーなフロントエンドスキル

1. アクティブなベースライン設定

• DESIGN_VARIANCE: 8（1=完全な対称性、10=アーティスティックな混沌）
• MOTION_INTENSITY: 6（1=静的／動きなし、10=シネマティック／魔法のような物理演算）
• VISUAL_DENSITY: 4（1=アートギャラリーのように余白が多い、10=操縦席のようにデータが密集）

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

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

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

• 依存関係の確認［必須］： 3rd パーティ製ライブラリ（例：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 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 行目は 70/30 に分割した 2 列）、以下の特定のマイクロアニメーションを実装してください。

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

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

出力する前に、このマトリックスに照らしてコードを評価してください。これは、ロジックに適用する最後のチェックです。

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

---

出力レポート

すべての主要なスキルタスクが完了したら、Wiki に提案のドラフトを作成してください。

手順

1. ファイル名を作成します：

• 形式：DDMMYY-<ten>.md
• DDMMYY = 今日の日付（例：2 June 2026 の場合は 020626）
• <ten> = 実施内容を要約する、kebab-case の 2〜4 語（例：landing-page-coteccons、brand-kit-fintech、ingest-auth-spec）

2. llmwiki/wiki/draft/uiux/DDMMYY-<ten>.md を記述します：

# DDMMYY-<ten>
**Type:** draft
**Status:** proposed
**Tags:** <skill-name>, output-report
**Proposed:** YYYY-MM-DD

## What
<One sentence — what this skill invocation produced or decided>

## Output
<Key artefacts, files created/modified, or decisions made>

## Files
| File | Action |
|------|--------|
| `path/to/file` | created / modified |

## Notes
- Invoked via: `/<skill-name>` skill

## Origin
- **Draft:** `wiki/draft/uiux/DDMMYY-<ten>.md`
- **Commit:** _(filled by verify-before-commit)_
- **Date promoted:** _(filled by verify-before-commit)_

3. Wiki のインデックスとログを更新します：

• llmwiki/wiki/index.md — 次の 1 行を末尾に追加します：| [DDMMYY-<ten>](draft/uiux/DDMMYY-<ten>.md) | draft | YYYY-MM-DD |
• llmwiki/wiki/log.md — 次の行を末尾に追加します：## YYYY-MM-DD — <skill-name> — <ten>

スキルが成果物も判断事項も生成しない場合（例：/caveman-stats のような表示専用モード）に限り、スキップしてください。