Claude Code × Next.js 初期構築を完全自動化する

# プロジェクト名

## 技術スタック
- Next.js 15+ (App Router)
- TypeScript (strict: true)
- Tailwind CSS v4
- shadcn/ui
- ESLint + Prettier

## ディレクトリ構成
- `src/app/` — App Router のルート
- `src/components/` — UIコンポーネント
- `src/lib/` — ユーティリティ関数
- `src/types/` — 型定義

## コーディングルール
- コンポーネントは必ず TypeScript で書く
- `any` 型は使用禁止
- `interface` より `type` を優先
- Server Component をデフォルトとし、必要な場合のみ `"use client"` を付ける

## 禁止事項
- `src/` 外にコードを置かない
- CSS in JS の使用禁止（Tailwind を使う）
- `console.log` をそのままコミットしない

新規 Next.js プロジェクトを作成してください。
- プロジェクト名: my-app
- CLAUDE.md の技術スタックに従って設定してください
- create-next-app を実行し、その後 shadcn/ui の初期化まで完了させてください

npx create-next-app@latest my-app \
  --typescript \
  --tailwind \
  --eslint \
  --app \
  --src-dir \
  --import-alias "@/*"

// tsconfig.json
{
  "compilerOptions": {
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "exactOptionalPropertyTypes": true
  }
}

npx shadcn@latest init

## shadcn/ui 設定
- style: default
- base color: slate
- CSS variables: 使用する

/* src/app/globals.css */
@import "tailwindcss";

@theme {
  --color-primary: oklch(0.5 0.2 250);
  --font-sans: "Inter", sans-serif;
}

## Tailwind CSS
- バージョン: v4
- 設定は globals.css の @theme に書く
- tailwind.config.ts は作成しない

// eslint.config.mjs
import { dirname } from "path";
import { fileURLToPath } from "url";
import { FlatCompat } from "@eslint/eslintrc";

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

const compat = new FlatCompat({ baseDirectory: __dirname });

export default [
  ...compat.extends("next/core-web-vitals", "next/typescript"),
  {
    rules: {
      "@typescript-eslint/no-explicit-any": "error",
      "@typescript-eslint/no-unused-vars": "error",
    },
  },
];

<!-- .claude/commands/component.md -->
# コンポーネント生成

$ARGUMENTS で指定されたコンポーネントを以下のルールで生成してください：
- ファイル: `src/components/$ARGUMENTS.tsx`
- TypeScript で書く
- shadcn/ui のスタイルに合わせる
- Props の型定義を必ず含める
- Storybook のストーリーファイル（.stories.tsx）も同時に生成する

<!-- .claude/commands/page.md -->
# ページ生成

$ARGUMENTS のページを App Router の規約に従って生成してください：
- `src/app/$ARGUMENTS/page.tsx` を作成
- Server Component として実装
- メタデータ（metadata export）を含める
- ローディング UI（loading.tsx）も生成する

npm install -D husky lint-staged
npx husky init

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx lint-staged

{
  "lint-staged": {
    "*.{ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{css,md,json}": [
      "prettier --write"
    ]
  }
}

## 自動化
- pre-commit: husky + lint-staged でESLintとPrettierを実行
- TypeScriptのビルドエラーもpre-commitでチェックする

// .prettierrc
{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100
}

npm install -g vercel

現在のプロジェクトを Vercel にデプロイしてください。
- プロジェクト名: my-app
- フレームワーク: Next.js
- ビルドコマンドはデフォルト設定を使用
- 環境変数は .env.local から読み込む

vercel --prod

vercel env add NEXT_PUBLIC_API_URL production

## 編集禁止ファイル
- `src/styles/design-tokens.css` — デザイントークンの定義（変更不可）
- `.env.local` — 環境変数（参照のみ）