ClaudeCodeのセットアップをコミット

.claude/agents/frontend-reviewer.md

@@ -0,0 +1,78 @@
+---
+name: frontend-reviewer
+description: Next.js 15 App Router / TypeScript / Tailwind v4 コードのレビューを行う。コミット前のセルフレビューや PR レビュー前のチェックに使う。Read-only でコードを読み、診断結果を返す。
+tools: Read, Grep, Glob, Bash
+model: inherit
+---
+
+あなたは Next.js 15 (App Router) / React 19 / TypeScript / Tailwind CSS v4 のシニアレビュアーです。
+ic-gr-website は AWS S3 + CloudFront による静的配信 (`output: 'export'`, `trailingSlash: true`) です。
+
+## レビューの観点
+
+### 1. Next.js / React
+
+- **Server vs Client Component**: 不要な `"use client"` が付いていないか / 必要な場所に付いているか
+- **不要な `useEffect`**: 派生ステート計算・初期値計算は `useMemo` や直接計算で済む場合がある
+- **`next/image`**: `unoptimized: true` 環境では `width`/`height` 必須、最適化前提のオプションを使っていないか
+- **動的ルート**: `generateStaticParams` で全パスが列挙されているか（static export 制約）
+- **Route Handlers (`app/api/`)**: static export では使えないため、追加されていたら警告
+
+### 2. TypeScript
+
+- `any` の混入が無いか
+- `interface` ではなく `type` を使っているか
+- props 型が明示されているか
+- 自動生成型に頼るべき箇所で手書き型を作っていないか
+
+### 3. アクセシビリティ
+
+- `<img>` / `<Image>` の `alt` 属性
+- ボタン・リンクのラベル / `aria-label`
+- ヘッダ階層 (`h1` → `h2` → `h3`) の整合
+- フォーム要素のラベル関連付け
+
+### 4. Tailwind v4
+
+- `app/globals.css` の CSS 変数 / `@theme` を逸脱した直書きカラーになっていないか
+- 過剰なクラス重複 / 矛盾するユーティリティ
+- レスポンシブ (`sm:` `md:` `lg:`) の妥当性
+
+### 5. 静的配信整合
+
+- `output: 'export'` で動かないコードが混入していないか
+- 新規ルートが `out/<route>/index.html` として生成されるか
+- サブパス直リンクが CloudFront Function (`infra/cloudfront/url-rewrite.js`) で扱える形か
+
+### 6. パフォーマンス・セキュリティ
+
+- 巨大な client bundle 化（`"use client"` で大量のサーバ専用ロジックを巻き込んでいないか）
+- 外部 URL のハードコード（環境変数化検討）
+- `dangerouslySetInnerHTML` の使用箇所
+
+## 出力フォーマット
+
+```
+## レビュー結果
+
+### 🔴 高優先（セキュリティ / 動作不良 / a11y）
+- ファイルパス:行番号 — 内容と修正案
+
+### 🟡 中優先（保守性 / パフォーマンス）
+- 同上
+
+### 🟢 低優先（スタイル / 命名 / 微調整）
+- 同上
+
+### ✅ 良かった点
+- ...
+
+### 提案
+- React Doctor を回したか / `/react-doctor` を実行することを推奨
+```
+
+## 注意
+
+- ファイルは編集せず、指摘のみ行う
+- 修正が必要な場合は呼び出し元 (Claude main) に戻して、main 側で修正実行する
+- `.claude/rules/typescript-nextjs.md` の規約と矛盾する指摘はしない

.claude/commands/branch-from-develop.md

@@ -0,0 +1,45 @@
+---
+name: branch-from-develop
+description: develop から最新を取得して feature/<topic> ブランチを切る
+argument-hint: <topic>
+---
+
+`develop` の最新から `feature/$ARGUMENTS` ブランチを切ってください。
+
+## 手順
+
+### 1. 引数の検証
+
+`$ARGUMENTS` が空の場合、ユーザーにトピック名（例: `add-contact-form`, `fix-mobile-header`）を確認する。
+`feature/` プレフィックスが既に含まれていれば取り除く（重複防止）。
+
+### 2. develop の最新化
+
+```bash
+git checkout develop
+git pull --ff-only origin develop
+```
+
+未コミットの変更があれば「stash するか確認してから」進める。
+
+### 3. ブランチ作成
+
+```bash
+git checkout -b feature/<topic>
+```
+
+### 4. 報告
+
+```
+作業ブランチを作成しました:
+- 元ブランチ: develop (commit: <短縮 SHA>)
+- 新ブランチ: feature/<topic>
+```
+
+## 命名規則
+
+- `feature/<topic>` — 新機能・改善
+- `fix/<topic>` — バグ修正
+- `chore/<topic>` — 設定・ドキュメント等
+
+`<topic>` は kebab-case で簡潔に（例: `add-favicon`, `fix-overview-typo`）。

.claude/commands/deploy-check.md

@@ -0,0 +1,67 @@
+---
+name: deploy-check
+description: prod へ push する前のデプロイ前チェック（CI 相当 + サブパスリライト確認）
+---
+
+`prod` ブランチへ push して本番デプロイをトリガする前の最終チェックを行ってください。
+
+## 前提
+
+- `prod` への push で GitHub Actions (`deploy.yml`) が S3 sync + CloudFront invalidation を実行する
+- `develop` で動作確認済みであることが前提
+- ステージング環境は無い
+
+## 手順
+
+### 1. ブランチ状態の確認
+
+```bash
+git status
+git branch --show-current
+```
+
+`develop` または `feature/*` で作業中であること、未コミット変更が無いことを確認。
+
+### 2. ローカルで CI 相当を実行
+
+```bash
+npm ci
+npm run lint
+npm run typecheck
+npm run build
+```
+
+`out/` が生成され、`out/index.html`, `out/company/index.html` などサブパスの index が出力されていることを確認:
+
+```bash
+ls out/
+ls out/company out/overview out/privacy
+```
+
+### 3. CloudFront Function の整合確認
+
+`infra/cloudfront/url-rewrite.js` を読み、サブパス → `index.html` のリライトロジックに変更が無いか確認。
+変更がある場合は **コードと AWS 上の関数 (`ic-gr-url-rewrite`) の両方** を更新する必要があるため、ユーザーに警告。
+
+### 4. デプロイ手順の提示
+
+チェックが通ったら、以下を提示してユーザーの確認を取ってから実行:
+
+```bash
+git checkout prod
+git merge --ff-only develop      # または PR develop → prod
+git push origin prod              # ← これがデプロイトリガ
+```
+
+push 後に GitHub Actions の進行を確認:
+
+```bash
+gh run list --branch prod --limit 3
+gh run watch
+```
+
+## 注意
+
+- `prod` への直接 push はワークフロートリガになり、本番が即座に書き換わる
+- 緊急時のロールバックは前のコミットへ revert → push（同じパイプラインで戻る）
+- CloudFront Function の変更はリポジトリだけでは反映されない（AWS 側のデプロイが別途必要）。`infra/cloudfront/README.md` を参照

.claude/commands/pre-commit.md

@@ -0,0 +1,41 @@
+---
+name: pre-commit
+description: コミット前の包括的チェック（lint, typecheck, build, react-doctor）を実行
+---
+
+コミット前の包括的なチェックを実行してください。
+
+## 1. 静的解析・型チェック
+
+```bash
+npm run lint
+npm run typecheck
+```
+
+エラーがある場合は修正してから次に進む。設定（`eslint.config.*` / `tsconfig.json`）を緩めて回避するのは禁止。
+
+## 2. ビルド確認
+
+```bash
+npm run build
+```
+
+`out/` への static export まで成功することを確認。
+
+## 3. React Doctor 診断
+
+`/react-doctor diff` を実行し、`develop` との差分に対するスコアと指摘を確認する。
+高優先度（セキュリティ・a11y）の指摘があれば修正する。
+
+## 4. 結果サマリー
+
+全チェックの結果を一覧（OK / NG）で報告してください:
+
+```
+- lint:         OK/NG
+- typecheck:    OK/NG
+- build:        OK/NG
+- react-doctor: スコア XX/100, 高優先指摘 N 件
+```
+
+問題がある場合は修正方法を提案してください。

.claude/commands/react-doctor.md

@@ -0,0 +1,112 @@
+---
+name: react-doctor
+description: React Doctor でフロントエンドを診断し、検出された問題を修正する（スコア、セキュリティ、パフォーマンス、a11y、アーキテクチャ）
+argument-hint: <blank | diff | score | path>
+---
+
+React Doctor でフロントエンドのコード品質を診断し、検出された問題を修正してください: $ARGUMENTS
+
+## React Doctor とは
+
+Aiden Bai（Million.js / React Scan 作者）による React コードベース診断 CLI。プロジェクトをスキャンしてセキュリティ・パフォーマンス・正確性・アクセシビリティ・アーキテクチャの問題を 47 以上のルールで検出し、0〜100 のスコアで健全性を可視化する。
+
+主な検出対象:
+- 不要な `useEffect`（派生ステート計算・イベントハンドラで代替可能な処理）
+- アクセシビリティ問題（`alt` 属性欠落、ラベルなしフォーム要素）
+- Prop drilling（Context / Composition で置き換えるべき多段 props 渡し）
+- デッドコード（未使用 export / 未参照ファイル）
+- 古い / 非推奨パターン、セキュリティ上のアンチパターン
+
+## 対象の判定
+
+- 引数なし → リポジトリ全体（`app/`, `components/`）をスキャン
+- 引数が `diff` → `develop` ブランチとの差分のみスキャン
+- 引数が `score` → スコアのみ出力（修正フェーズに進まない）
+- 引数がパス → 当該パス配下をスキャン
+
+設定は `react-doctor.config.json` を参照（`.next/`, `out/`, `node_modules/` は除外済み）。
+
+## 手順
+
+### 1. 診断実行
+
+リポジトリルートで React Doctor を実行する。
+
+```bash
+# 詳細表示（問題のあるファイルと行番号）
+npx --yes react-doctor@latest . --verbose
+
+# 差分スキャン（引数: diff）
+npx --yes react-doctor@latest . --diff develop --verbose
+
+# スコアのみ（引数: score）
+npx --yes react-doctor@latest . --score
+```
+
+初回実行時は `npx` によるパッケージ取得に時間がかかる。
+
+### 2. 結果の読み取り
+
+- 総合スコア（例: `Score: 87/100`）
+- 検出されたルール違反のカテゴリ別件数
+- ファイルパス・行番号付きの個別指摘
+
+### 3. 除外対象の判定
+
+以下のファイルは指摘があっても**編集しない**:
+- `.next/`, `out/`, `node_modules/`（ビルド成果物・依存）
+- `next-env.d.ts`（Next.js 自動生成）
+
+### 4. 修正方針の提示
+
+検出件数が多い場合は、ユーザーに修正スコープを確認する前に以下を整理して提示:
+
+- **高優先**: セキュリティ、a11y 違反、明確なバグ
+- **中優先**: 不要な `useEffect`、prop drilling、パフォーマンス
+- **低優先**: デッドコード、命名、スタイル
+
+### 5. 修正の実行
+
+優先度順に 1 件ずつ修正。各修正後に以下を遵守:
+
+- `.claude/rules/typescript-nextjs.md` のコーディング規約を守る
+- `any` は導入しない。やむを得ない場合は `unknown` + 型ガード
+- Server Components をデフォルトに。`"use client"` は必要時のみ
+
+### 6. 検証
+
+修正後に以下を実行し、スコアが改善し既存機能が壊れていないことを確認:
+
+```bash
+npx --yes react-doctor@latest . --score
+npm run lint
+npm run typecheck
+npm run build
+```
+
+### 7. 結果報告
+
+```
+## React Doctor 診断結果
+
+### スコア
+- 修正前: XX/100
+- 修正後: YY/100
+
+### 修正した問題
+- [カテゴリ] 内容: ファイルパス:行番号
+
+### 未対応（理由付き）
+- [カテゴリ] 内容: 理由
+
+### ビルド・型チェック
+- lint:      OK/NG
+- typecheck: OK/NG
+- build:     OK/NG
+```
+
+## 注意事項
+
+- `npx --yes react-doctor@latest` は毎回最新を取得する。オフライン環境ではユーザーに確認する
+- 大規模リファクタ（prop drilling → Context 化など）はユーザー確認を取ってから実行
+- スコア改善のためだけに本質を逸脱する変更（意味のある `useEffect` を無理に除去する等）は避ける

.claude/hooks/block-no-verify.sh

@@ -0,0 +1,16 @@
+#!/bin/bash
+# PreToolUse hook: --no-verify フラグの使用をブロック
+set -euo pipefail
+
+COMMAND=$(jq -r '.tool_input.command // empty')
+
+if [ -z "$COMMAND" ]; then
+  exit 0
+fi
+
+if echo "$COMMAND" | grep -qE '\-\-no-verify'; then
+  echo "BLOCKED: --no-verify フラグは禁止されています。pre-commit / CI のチェックをバイパスせず、原因を修正してください。" >&2
+  exit 2
+fi
+
+exit 0

.claude/hooks/config-protection.sh

@@ -0,0 +1,21 @@
+#!/bin/bash
+# PreToolUse hook: プロジェクト設定ファイル編集を警告（ブロックはしない）
+set -euo pipefail
+
+FILE=$(jq -r '.tool_input.file_path // empty')
+
+if [ -z "$FILE" ]; then
+  exit 0
+fi
+
+if echo "$FILE" | grep -qE '(next\.config\.(ts|mjs|js)|tsconfig\.json|postcss\.config\.(mjs|js)|eslint\.config\.(mjs|js)|\.eslintrc.*|package\.json)$'; then
+  BASENAME=$(basename "$FILE")
+  echo "WARNING: ${BASENAME} はプロジェクト設定ファイルです。リンター/ビルド設定を緩めてエラー回避するのではなく、コード側を修正してください。本当に設定変更が必要な場合のみ編集してください。" >&2
+fi
+
+# CLAUDE.md / .claude/* の編集も明示的に通知（隠れた挙動変更を防ぐ）
+if echo "$FILE" | grep -qE '(^|/)(CLAUDE\.md|\.claude/(settings\.json|hooks/|commands/|agents/|rules/))'; then
+  echo "NOTE: Claude Code 設定ファイルを編集しています。フック・コマンド・ルール変更はチーム全体に影響します。" >&2
+fi
+
+exit 0