MradulKSharma06/fullstack

フルスタックWeb開発とサイバーレジリエントアーキテクチャ

モダンフルスタックWebアプリケーションを構築するための、決定版エンジニアリングマニュアル兼クリエイティブテクノロジーシステムへようこそ。このスキルは、クリエイティブテクノロジスト、プリンシパルフルスタックアーキテクト、そして最高セキュリティ責任者として同時に機能するための力を与えます。

---

クイックナビゲーションと知識アーキテクチャ

このスキルは、Antigravityのプログレッシブディスクロージャーアーキテクチャを利用しています。以下のコアオーケストレーターが、マスターワークフロー、サイトアーキタイプ分類、決定木、フォールトアイソレーションプロトコルを提供します。深いドメイン実装については、すぐに以下の専門リファレンスマニュアルを参照してください。

#	ドメインマニュアル	コア機能とリファレンスコンテンツ
01	ビジュアルアイデンティティとカラーサイエンス	50サイトデザインシンセシス、Obsidian/Alabasterトークン、Oklch 60-30-10ハーモニック計算、コントラストカーブ、ゼロネオンのルール
02	キュレーテッドタイポグラフィとフォントスタック	高コントラストセリフ、ネオグロテスク、可変フォント読み込み、流動的clamp計算、ゼロCLS最適化
03	イマーシブ3D WebGLキャンバスとR3F	React Three Fiber、Drei、OGLモバイルファーストWebGL、Pixi.jsパーティクルフィールド、カメラリグ、DPRクランピング、LODメッシュ
04	GLSLカスタムシェーダーライブラリ	点群アーキテクチャディスプレイスメント、リアルタイムGerstner水の波紋、ガラスコースティクス、アナログフィルムグレイン
05	キネティックモーションとスクロールオーケストレーション	Lenisスムーススクロールティッカー同期、GSAP ScrollTriggerタイムライン、Motion OneとFramer Motion物理スプリング
06	特注UIコンポーネントデザインシステム	マグネティックリキッドボタン、スプリングドロップダウンポータル、イルミネーテッドベントーカード、タクタイルHUDドック、スケルトンシマー
07	クリーンアーキテクチャとエラー分離	Vertical Slice Architecture（VSA）、シングルファイル爆発半径封じ込め、10行最小コード、シニアコメント
08	データベースマスタリー：PostgreSQLとSupabase	3NFリレーショナルモデリング、UUIDv7、JSONB GINインデックス、コンカレントリフレッシュ付きマテリアライズドビュー、エアタイトRLS
09	データベースマスタリー：MySQLとSQLite	MySQL InnoDBクラスタードインデックス、パーティションプルーニング、SQLite/Turso/D1 WALプラグマ、厳格なエッジスキーマ
10	認証、アイデンティティ、エンタープライズSSO	OAuth2、Passkeys/WebAuthn、HttpOnlyセッションクッキー、フィンガープリンティング、MFA、RBAC/ABACマトリックス、SAML SSO
11	支払い、課金、サブスクリプション	Stripe、Lemon Squeezy、Paddle、PayPal、特注Elements、冪等性のあるWebhook、サブスクリプションステートマシン
12	AIチャットボットとストリーミングRAGエンジン	Gemini 2.0/OpenAI SSEストリーミング、pgvector RAG、エージェンティックツール実行、会話刈り込み、マークダウンチャットUI
13	リアルタイムWebSocketとプレゼンス	Supabase Realtime、ネイティブWebSocket、Pusher、プレゼンスチャンネル、タイピングインジケーター、楽観的UIロールバック
14	ストレージパイプラインとメディア処理	署名付き直接ストレージPUT（S3/R2/Supabase）、チャンクアップロード、SharpサーバーレスAVIF/WebP画像パイプライン
15	バックグラウンドワーカー、キュー、cron	BullMQ with Redis、Inngest、Trigger.dev、ジッター付き指数バックオフ、デッドレターキュー（DLQ）
16	検索と発見エンジン	Meilisearch、Typesense、Algolia、PostgreSQL tsvector with pg_trgm ファジーマッチングとBM25ランキング
17	メール、SMS、プッシュ通知	Resend + React Email、SendGrid、Twilio SMS、Web Push VAPIDサービスワーカー、Novu/Knockマルチチャンネルハブ
18	テスト、QA、自動診断	Vitest単体テスト、コンテナ化統合テスト、PlaywrightマルチデバイスE2E、ピクセル差分、k6ロードテスト
19	セキュリティ強化とアンチハッキング	OWASP Top 10緩和、リクエスト毎の動的noncesを使ったCSP、SSRF防御、AES-256-GCM暗号化、改ざん検出可能な監査ログ
20	マルチティアキャッシングと超高性能	ブラウザ HTTP/ETag/Workbox、エッジ/CDN Cache-Tags、Redis Cache-Aside & Redlock、データベースバッファチューニング
21	スケーラビリティ、レート制限、キュー	Redisスライディングウィンドウアルゴリズム、トークンバケットレート制限、水平/垂直Podオートスケーリング（HPA/VPA）
22	DevOps：Docker、Kubernetes、CI/CD	ディストロレスマルチステージDocker（<80MB、非root）、Kubernetes HPA/VPAマニフェスト、GitHub ActionsゼロダウンタイムCI/CD
23	可観測性、ロギング、テレメトリー	OpenTelemetry分散トレーシング、ソースマップ付きSentryエラートラッキング、PostHog分析、構造化JSONログ

---

1. 中核エンジニアリングの掟

フルスタックプロジェクトにおけるすべてのコード行とアーキテクチャ上の決定は、以下の5つの非交渉の掟に従わなければなりません。

掟I：非ジェネリックな特注クラフト（50サイト基準）

• ゼロクッキーカッターテンプレート：決して、ストックフォトとデフォルトボタンを備えた標準的な独創性のない2カラムヒーローを生成しないこと。
• 禁止ビジュアルクリシェ：パープル/シアンのネオンブロブ、虹色グラデーションボーダー、過飽和な「AIサイバーパンク」美学は厳禁。
• モダンプロダクト美学：世界のトップ50プロダクト（Linear、Stripe、Apple、Teenage Engineering、Vercel、Raycast、Aesop、Bang & Olufsen、Arc、Framer）のデザイン抑制を体系化する：
  • ダークモード：深いオブシディアン（#09090B）、チタングラファイト（#18181B）、ミュートされたジンク（#27272A）、鮮明な白テキスト（#F4F4F5）、そして1pxマイクロボーダー（border-white/[0.08]）。
  • ライトモード：温かみのあるミュージアムアラバスター（#FBFBF9）、ボーンホワイト（#F4F4F0）、触感のあるチャコールタイポグラフィ（#18181B）、そして微妙な1pxヘアライン（border-black/[0.06]）。
  • 奥行き：マルチレイヤー拡散アンビエントオクルージョンシャドウ（box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06)）。

掟II：最小限の慣用的コード（「100行ではなく10行」）

• 冗長なDTO、冗長な手動マッピングクラス、または人工的な抽象化を含む、肥大化した多層ボイラープレートを決して書かないこと。
• モダンなTypeScript 5+、Zodスキーマ推論、Drizzle/Prismaの表現力豊かなクエリ、軽量な関数型パイプラインを活用すること。
• タスクを10行の慣用的コードで堅牢に解決できるのであれば、決して100行書かないこと。

掟III：疎結合なシングルファイル爆発半径分離

• コードをVertical Slices / 機能モジュール（src/modules/<feature>/）に整理し、ファイルがcontrollers/、services/、models/、utils/に散らばる水平方向のダンピンググラウンドには決してしないこと。
• 各機能モジュールは、独自のスキーマ、サービス、ルート、外部アダプターを持つ自己完結型であること。
• バグ修正とリファクタリングの厳格なルール：エラーが発生した場合（例：Stripe支払いWebhookやデータベースクエリ内）、修正は影響を受ける単一のアダプターまたはサービスファイルに厳密に限定されなければなりません。コードベースの残りの部分には波及効果がゼロでなければなりません。

掟IV：熟達シニア開発者コメント（「何」ではなく「なぜ」）

• AIフラフは禁止：// Function to fetch data や // Returns a promise のような役立たずのコメントを決して出力しないこと。
• シニア開発者解説：すべてのコメントは、アーキテクチャ上のトレードオフ、並行処理の不変条件、エッジケースの根拠、パフォーマンス予算、またはセキュリティ上の考慮事項を説明しなければなりません。
• 例：

  // 並行性ガード：フラッシュセールのバースト中に接続プールの枯渇を防ぐため、
  // データベース接続プールにヒットする前にRedisベースのスライディングウィンドウレート制限を使用。
  

掟V：ハッキング耐性、サイバーレジリエントなデフォルトセキュリティ

• すべての入力を悪意のあるものとして扱う。すべてのAPI境界で厳格なZod解析を強制する。
• すべてのデータベースクエリは、パラメータバインドされるか、ORMによってASTコンパイルされること。ゼロ文字列連結。
• リクエスト毎の動的な暗号nonces、ダブルサブミットCSRFトークン、厳格なCORS、SSRFに対するプライベートIPブロッキングを備えたContent Security Policy（CSP）を実装する。
• 機密性の高いPIIは、保存時にAES-256-GCMを使用して暗号化されなければならない。パスワードはArgon2idを使用してハッシュ化されること。

---

2. サイトアーキタイプ分類マトリックス

フロントエンドコードを1行も書く前に、ユーザーのプロジェクトをその主要なビジュアルアーキタイプに分類します。

┌────────────────────────────────────────────────────────────────────────────────────────┐
│                             サイトアーキタイプセレクター                             │
├────────────────────┬────────────────────────────────────┬──────────────────────────────┤
│ アーキタイプ       │ 3DキャンバスとWebGL体験           │ タイポグラフィとカラーパレット│
├────────────────────┼────────────────────────────────────┼──────────────────────────────┤
│ 1. 建築、空間、    │ フルビューポートThree.js CAD点群   │ 高コントラスト幾何学モノ     │
│    デザイン        │ ワイヤーフレーム；インタラクティブ│ + ネオグロテスク（Cabinet    │
│    （Alder & Stone）│ マウス回転；座標HUDオーバーレイ；│ Grotesk / Space Mono）；深い│
│                    │ 建築グリッド線。                  │ オブシディアンとチタングレー│
├────────────────────┼────────────────────────────────────┼──────────────────────────────┤
│ 2. ラグジュアリー  │ リアルタイムGLSL水の波紋（Gerstner│ エディトリアル高コントラスト │
│    プロダクト、    │ 波）；咲き誇る3D有機花びら；物理  │ セリフ（Cormorant/Ogg）+最小 │
│    感覚とEコマース │ 透過シェーダー付き浮遊ガラス瓶。 │ サンセリフ；暖かいアラバスタ│
│    （Lotus Mist）  │                                    │ ー、ブラッシュストーン、また│
│                    │                                    │ はトワイライトオブシディアン│
├────────────────────┼────────────────────────────────────┼──────────────────────────────┤
│ 3. フィンテックと  │ 物理ベース3Dカードチルト（ジャイ│ 剃刀のようなテックサンセリフ│
│    モダンSaaS     │ ロマウストラッキング）；動的メッ │ （Geist, Satoshi, Inter）+微 │
│    （Crest Card）  │ シュ反射；インタラクティブなベン│ 小モノ；単色グラファイト、  │
│                    │ トーイルミネーテッドボーダーカー│ シングルポイントエメラルド/ │
│                    │ ド。                              │ コバルト。                   │
├────────────────────┼────────────────────────────────────┼──────────────────────────────┤
│ 4. アバンギャルドと│ インタラクティブWebGL流体粒子歪み│ 実験的キネティックディスプレ│
│    クリエイティブ  │ ；マグネティックカーソルホバー；│ イ（Syne, Clash Display）； │
│    エージェンシー  │ Lenis慣性水平固定スクロールセク  │ ピッチブラック、触感のある生│
│                    │ ション。                          │ の紙のような白オーバーレイ。│
└────────────────────┴────────────────────────────────────┴──────────────────────────────┘

---

3. 8段階フルスタック実行ワークフロー

すべてのプロジェクトに対して、この厳格なエンドツーエンド開発パイプラインに従ってください。

ステージ1：発見とハーモニックトークン導出

1. サイトアーキタイプとブランドパーソナリティを特定する。
2. 2〜3のシードカラーを入手または選択する（例：プライマリ #0A0A0C、アクセント #2563EB）。
3. リファレンス01からOklch 60-30-10カラーマスを実行し、完全なライトおよびダークデザイントークンツリーを生成する。
4. リファレンス02から、流動的clamp式を使用してタイポグラフィ階層を確立する。

ステージ2：データベーススキーマとリレーショナルモデリング

1. エンティティ、外部キー、カーディナリティをマッピングするエンティティ関係図（ERD）を描画する。
2. 冗長性を最小限に抑えた3NF正規化スキーマを策定する。
3. データベースエンジン（PostgreSQL/Supabase vs MySQL vs SQLite）を選択し、リファレンス08またはリファレンス09からエンジン固有のパターンを適用する。
4. UUIDv7、TIMESTAMPTZ、JSONB GINインデックス、分析ビュー、行レベルセキュリティ（RLS）ポリシーを備えた冪等なDDLマイグレーションを作成する。

ステージ3：疎結合Vertical Sliceバックエンドスキャフォールディング

1. リファレンス07に従って、src/modules/<feature>/にフィーチャースライスをスキャフォールドする。
2. Zod入出力バリデーションコントラクトを定義する。
3. モダンなクエリビルダー（Drizzle ORM / Prisma）を利用した、リーンな10行のサービス関数を作成する。
4. 外部ゲートウェイ（Stripe、Resend、S3）を分離されたアダプターファイルにラップし、シングルファイルの爆発半径封じ込めを保証する。

ステージ4：3Dキャンバス、シェーダー、キネティックモーションの統合

1. リファレンス03からReact Three Fiber、Drei、またはOGLを使用して、ビューポートレスポンシブなCanvasを設定する。
2. リファレンス04からカスタムGLSLシェーダー（点群、液体の水、ガラス屈折）を実装する。
3. リファレンス05からGSAPティッカーとFramer Motionスプリング物理と同期したLenisスムーススクロールを初期化する。

ステージ5：特注UIコンポーネント構成

1. リファレンス06のカスタマイズされたコンポーネントを使用してUIシェルを組み立てる。
2. マグネティックリキッドボタン、ポータルレンダリングされたスプリングドロップダウン、イルミネーテッドベントーカード、アンビエント

[翻訳のため省略]