zhengrui0207-png/personal-site (高主体性フロントエンドスキル)

High-Agency フロントエンドスキル

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の構文を使用しないでください。
  • v4 設定ガード: v4の場合、postcss.config.js で tailwindcss プラグインを使用しないでください。@tailwindcss/postcss または Vite プラグインを使用してください。
• アンチ絵文字ポリシー [重要]: コード、マークアップ、テキストコンテンツ、またはaltテキストで絵文字を絶対に使用しないでください。記号は高品質のアイコン（Radix、Phosphor）またはクリーンなSVGプリミティブに置き換えてください。絵文字は禁止です。
• レスポンシブ性とスペーシング:
  • ブレークポイント (sm、md、lg、xl) を標準化します。
  • ページレイアウトは max-w-[1400px] mx-auto または max-w-7xl を使用してコンテナ化します。
  • ビューポートの安定性 [重要]: フルハイトのヒーローセクションには h-screen を決して使用しないでください。常に min-h-[100dvh] を使用して、モバイルブラウザ（iOS Safari）での壊滅的なレイアウトジャンプを防ぎます。
  • Grid vs Flex計算: 複雑な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%未満。
• 「LILA」禁止: 「AIパープル/ブルー」の美学は厳密に禁止されています。紫色のボタングローやネオングラデーションは禁止です。絶対的なニュートラルベース（Zinc/Slate）と、高コントラストで単一のアクセント（例：エメラルド、エレクトリックブルー、ディープローズ）を使用してください。
• 色の一貫性: 出力全体で1つのパレットに固執してください。同じプロジェクト内でウォームグレーとクールグレーを行き来しないでください。

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

• アンチ中央寄せバイアス: LAYOUT_VARIANCE > 4 の場合、中央寄せのヒーロー/H1セクションは厳密に禁止されます。「スプリットスクリーン」(50/50)、「左寄せコンテンツ/右寄せアセット」、または「非対称の余白」構造を強制します。

ルール 4: マテリアリティ、シャドウ、「カードの過剰使用防止」

• ダッシュボードの強化: VISUAL_DENSITY > 7 の場合、汎用のカードコンテナは厳密に禁止されます。border-t、divide-y、または純粋なネガティブスペースを使用して論理グループ化を行います。データメトリクスは、機能的な理由で elevation（z-index）が必要でない限り、ボックス化されずに呼吸できるようにする必要があります。
• 実行: カードは、elevationが階層を伝える場合にのみ使用します。シャドウを使用する場合は、背景色に合わせて色合いを調整します。

ルール 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）と子コンポーネントは同じクライアントコンポーネントツリー内に存在しなければなりません。データが非同期でフェッチされる場合は、データを中央の親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 (非対称): メイソンリーレイアウト、端数単位の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. 100の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アバターを使用してください。
• 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 拡大: 端にあるナビバー。ホバー時にアイコンが流動的に拡大します。
• マグネティックボタン: カーソルに向かって物理的に引き寄せられるボタン。
• グーイーメニュー: サブアイテムが粘性液体のようにメインボタンから分離します。
• ダイナミックアイランド: ステータス/アラートを表示するために変形するピル型UIコンポーネント。
• コンテキスチュアルラジアルメニュー: クリックした正確な位置に展開する円形メニュー。

（以下、元のファイルが途中で切れているため、残りは翻訳不可）