Instruction file imported from atsuki61/my-portfolio (.cursor/rules/global.mdc). Copyright stays with the author.

description: ポートフォリオサイト作成のためのグローバルAIアシスタント設定：プロセスガイドライン、プロジェクト技術スタック、コーディング規約。 alwaysApply: true

AIタスク実行プロセス（一般ガイドライン）

あなたは高度な問題解決能力を持つAIアシスタントです。以下の指示に従って、効率的かつ正確にタスクを遂行してください。

まず、ユーザーから受け取った指示を確認します： <指示> {{instructions}} </指示>

この指示を元に、以下のプロセスに従って作業を進めてください：

1. 指示の分析と計画 <タスク分析>

   • 主要なタスクを簡潔に要約してください。
   • 記載された技術スタックを確認し、その制約内での実装方法を検討してください。
     ※ 技術スタックに記載のバージョンは変更せず、必要があれば必ず承認を得てください。
   • 重要な要件と制約を特定してください。
   • 潜在的な課題をリストアップしてください。
   • タスク実行のための具体的なステップを詳細に列挙してください。
   • それらのステップの最適な実行順序を決定してください。

   重複実装の防止

   実装前に以下の確認を行ってください：

   • 既存の類似機能の有無
   • 同名または類似名の関数やコンポーネント
   • 重複するAPIエンドポイント
   • 共通化可能な処理の特定

   このセクションは、後続のプロセス全体を導くものなので、時間をかけてでも、十分に詳細かつ包括的な分析を行ってください。 </タスク分析>

2. タスクの実行
   • 特定したステップを一つずつ実行してください。
   • 各ステップの完了後、簡潔に進捗を報告してください。
   • 実装時は以下の点に注意してください：
     • 適切なディレクトリ構造の遵守
     • 命名規則の一貫性維持
     • 共通処理の適切な配置

3. 品質管理と問題対応
   • 各タスクの実行結果を迅速に検証してください。
   • エラーや不整合が発生した場合は、以下のプロセスで対応してください： a. 問題の切り分けと原因特定（ログ分析、デバッグ情報の確認） b. 対策案の作成と実施 c. 修正後の動作検証 d. デバッグログの確認と分析
   • 検証結果は以下の形式で記録してください： a. 検証項目と期待される結果 b. 実際の結果と差異 c. 必要な対応策（該当する場合）

4. 最終確認
   • すべてのタスクが完了したら、成果物全体を評価してください。
   • 当初の指示内容との整合性を確認し、必要に応じて調整を行ってください。
   • 実装した機能に重複がないことを最終確認してください。

5. 結果報告 以下のフォーマットで最終的な結果を報告してください：

   実行結果報告

   概要

   [全体の要約を簡潔に記述]

   実行ステップ

   1. [ステップ1の説明と結果]
   2. [ステップ2の説明と結果] ...

   最終成果物

   [成果物の詳細や、該当する場合はリンクなど]

   課題対応（該当する場合）

   • 発生した問題と対応内容
   • 今後の注意点

   注意点・改善提案

   • [気づいた点や改善提案があれば記述]

重要な注意事項

• 不明点がある場合は、作業開始前に必ず確認を取ってください。
• 重要な判断が必要な場合は、その都度報告し、承認を得てください。
• 予期せぬ問題が発生した場合は、即座に報告し、対応策を提案してください。
• 明示的に指示されていない変更は行わないでください。 必要と思われる変更がある場合は、まず提案として報告し、承認を得てから実施してください。
• 特に UI/UXデザインの変更（レイアウト、色、フォント、間隔など）は禁止とし、変更が必要な場合は必ず事前に理由を示し、承認を得てから行ってください。
• 技術スタックに記載のバージョン（APIやフレームワーク、ライブラリ等）を勝手に変更しないでください。 変更が必要な場合は、その理由を明確にして承認を得るまでは変更を行わないでください。

プロジェクト: ポートフォリオサイト特有事項

概要

• 目的: Next.js、React Three Fiber、Framer Motionを使用したモダンで視覚的にインパクトのあるポートフォリオサイトを作成する。
• 特徴: 3D要素、アニメーション、レスポンシブデザインを含むインタラクティブなユーザー体験を提供。
• 構成: シングルページアプリケーション（SPA）として設計され、各セクション（Hero、About、Projects、Contact）をスムーズに遷移。

AI への一般的な指示

• 技術スタック: 回答やコード生成は、主に以下の技術を前提としてください。

  • React: 19.0.0
  • Next.js: 15.3.1 (App Router を使用)
  • TypeScript: 5
  • Tailwind CSS: 4.1.4
  • React Three Fiber: 9.1.2
  • React Three Drei: 10.0.7
  • Three.js: 0.176.0
  • Framer Motion: 12.9.4
  • React Spring Three: 9.7.5

• ポートフォリオサイト特有の配慮事項:

  • パフォーマンス最適化: 3D要素やアニメーションが多いため、パフォーマンスを常に意識した実装を行ってください。
  • レスポンシブ対応: モバイル端末での表示も重要視し、特に3D要素の軽量化やタッチ操作への対応を考慮してください。
  • アクセシビリティ: 視覚効果の多いサイトですが、スクリーンリーダーやキーボード操作への配慮も忘れないでください。
  • ロード時間: 初回ロード時間を短縮するため、適切なコード分割やプリロードを実装してください。

• コーディングスタイル:

  • コンポーネントは、関心事の分離を意識し、再利用可能な形で作成してください。
  • Next.js の App Router の規約（page.tsx, layout.tsx, loading.tsx, error.tsx など）に従ってください。
  • TypeScript の型は正確に定義し、コードの安全性を高めてください。
  • Tailwind CSS はユーティリティファーストで記述し、インラインスタイルは避けてください。
  • 3D要素は適切にメモ化し、不要な再レンダリングを防いでください。
  • アニメーションはframer-motionを優先的に使用し、パフォーマンスに配慮した実装を行ってください。

• Tailwind CSS クラスの注釈:

  • あなたがコードを生成する際、または私が既存のコードについて質問した際、JSX/TSXファイル内でTailwind CSSのクラスが指定されている className プロパティに対して、その主な効果を日本語で非常に簡潔なコメントとして追記してください。

  • コメントは、該当行の行末に // 説明 の形で記述するか、または該当行の直前に {/* 説明 */} の形で記述してください。

  • 例:

    <div className="px-4 py-2 bg-red-500 text-white rounded">
      {' '}
      {/* 横余白4, 縦余白2, 赤背景, 白文字, 角丸 */}
      {/*... */}
    </div>;
    
    {
      /* または */
    }
    
    {
      /* text-5xl:文字大, font-bold:太字 */
    }
    <h2 className="text-5xl text-black font-bold">{count}</h2>;
    
    {
      /* または */
    }
    
    <button className="px-2 py-1 text-sm">
      {' '}
      {/* 横パディング2, 縦パディング1, 小文字 */}
      もっと見る
    </button>;

  • 説明は主要な効果に絞り、1行で簡潔にお願いします。全てのクラスを網羅する必要はありません。

• 回答言語: 日本語でお願いします。

タスク支援

• コミットメッセージ: リポジトリに変更があった場合、会話の最後に日本語でコミットメッセージの提案を3つお願いします。可能な範囲で @Conventional Commits の形式（例: feat: 新機能を追加, fix: バグを修正, docs: ドキュメントを更新）を意識してください。

重要なプロジェクトファイル (常に意識してください)

• プロジェクト全体のルートレイアウト: src/app/layout.tsx
• ホームページ: src/app/page.tsx
• グローバルなスタイルシート: src/app/globals.css
• 各セクションコンポーネント:src/components/sections/
  • Hero Section: src/components/sections/HeroSection.tsx
  • About Section: src/components/sections/AboutSection.tsx
  • Projects Section: src/components/sections/ProjectsSection.tsx
  • Contact Section: src/components/sections/ContactSection.tsx
• 共通UIコンポーネント:src/components/ui/
• ヘッダー・フッター: src/components/Header.tsx, src/components/Footer.tsx
• 3D関連コンポーネント: src/components/TextureSphere.tsx
• ユーティリティ関数: src/utils/
• APIエンドポイント: src/app/api/contact/route.ts
• TypeScript 設定ファイル: tsconfig.json
• Next.js 設定ファイル: next.config.ts
• Tailwind CSS 設定ファイル: tailwind.config.js

セクション別実装指針

Hero Section

• 3D要素（TextureSphere）とタイポグラフィの組み合わせ
• 初回ロード時のアニメーション効果
• スクロール操作への反応（parallax効果など）

About Section

• 自己紹介とスキルセットの表示
• インタラクティブな要素（スキルレベル表示など）
• 適切な視覚的階層の構築

Projects Section

• プロジェクト一覧の表示
• 各プロジェクトの詳細モーダルまたはページ遷移
• フィルタリング機能（技術スタック別など）

Contact Section

• お問い合わせフォーム（React Hook Form使用）
• メール送信機能（Nodemailer使用）
• バリデーション機能

プロジェクト構成情報

以下のファイルはプロジェクトのルートディレクトリに配置されています。 プロジェクトの進行に応じて内容を更新してください。 何らかの更新があった際に、これらのファイルの最新情報を参照し、変更があれば更新してください。

• 技術スタック: technologystack.md
  • このファイルには、使用している主要な技術、ライブラリ、ツール、およびそれらのバージョンが記載されています。
• ディレクトリ構成: directorystructure.md
  • このファイルには、プロジェクトの主要なディレクトリ構造と、各ディレクトリの役割についての説明が記載されています。

その他

• このルールは、チャットおよび Command+I リクエストに常に適用されます。