react-vite-scaffold

Vite React プロジェクトのスキャフォールド

参考：https://www.heropy.dev/p/6iFzkB

Vite ベースの React（CSR）プロジェクトをスキャフォールドするか、既存プロジェクトで不足している設定を自動的に補完するスキルです。

必須実行チェックリスト（MANDATORY）

スキルの開始直後に、以下の項目を TodoWrite に1:1で登録してから、順番に進めます。スキップは禁止です。

1. プロジェクトの状態を検出（ステップ1）
2. モードを決定：スキャフォールドモードか補完モードか（ステップ2）
3. プロジェクトを作成［スキャフォールドモードの場合のみ］（ステップ3）
4. Tailwind CSS をインストールして設定［tailwindcss が未インストールの場合］（ステップ4）
5. パスエイリアスを設定［vite.config／tsconfig にエイリアスが設定されていない場合］（ステップ5）
6. ESLint + Prettier を設定［.prettierrc がない、または prettier パッケージが未インストールの場合］（ステップ6）
7. .prettierrc を作成［ファイルがない場合］（ステップ7）
8. .vscode/settings.json を作成［ファイルがない場合］（ステップ8）
9. 最終検証 — ステップ1の検出表を再度確認し、すべての設定が揃っているか確認します。不足があれば該当するステップを再実行します（ステップ9）

各項目は、条件を満たしている場合は「skipped」として完了扱いにします。ただし、次に進む前に条件を判断した根拠（ファイル／パッケージの有無）を明記します。

動作フロー

ステップ1：プロジェクトの状態を検出

以下のファイルを確認し、現在のプロジェクトの状態を判断します。

確認対象	検出方法
空のディレクトリかどうか	現在のディレクトリにファイルがない、または package.json がない
Vite プロジェクト	vite.config.ts または vite.config.js が存在する
TypeScript	tsconfig.json または tsconfig.app.json が存在する
Tailwind CSS	package.json の dependencies／devDependencies に tailwindcss が存在する
ESLint の設定	eslint.config.js または eslint.config.mjs が存在する
Prettier の設定	.prettierrc が存在する
VSCode の設定	.vscode/settings.json が存在する
パッケージマネージャー	pnpm-lock.yaml → pnpm、yarn.lock → yarn、bun.lockb／bun.lock → bun、package-lock.json または該当ファイルなし → npm

ステップ2：分岐処理

空のディレクトリの場合（スキャフォールドモード）：

1. プロジェクト作成コマンドを実行します
2. 以下の設定をすべて自動で適用します

既存の Vite プロジェクトの場合（補完モード）：

1. 上記の検出基準に基づいてインストール状況を自動で判定します
2. 不足している設定のみを特定し、自動で作成します
3. すでに存在する設定ファイルは変更しません

ステップ3：プロジェクトを作成

{pm} は、パッケージマネージャーの検出ルールに従って決定したパッケージマネージャーに置き換えます。（npm、pnpm、yarn、bun） 要件：Node.js 22+、NPM 10+

現在のディレクトリに Vite プロジェクトを作成します。

{pm} create vite@latest . -- --template react-compiler-ts --no-interactive

ステップ4：Tailwind CSS をインストール［条件：tailwindcss が未インストールの場合］

{pm} i -D tailwindcss @tailwindcss/vite

vite.config.ts に Tailwind プラグイン（tailwindcss()）を追加します。

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    react(),
    tailwindcss()
  ]
})

src/index.css ファイルの先頭に追加します。

@import 'tailwindcss';

ステップ5：パスエイリアスを設定［条件：vite.config または tsconfig に @ エイリアスが設定されていない場合］

vite.config.ts の resolve.alias 設定：

export default defineConfig({
  resolve: {
    alias: [
      { find: '@', replacement: '/src' }
    ]
  }
})

tsconfig.app.json にパスエイリアスを追加します。

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

TypeScript v5 以下（tsc --version で確認）の場合は、"baseUrl": "." を paths の上に追加します。

ステップ6：ESLint + Prettier を設定［条件：prettier パッケージまたは eslint-plugin-prettier が未インストールの場合］

ESLint 関連パッケージは、Vite プロジェクトの作成時にすでに含まれています。 Prettier 関連パッケージを追加でインストールします。

{pm} install -D prettier eslint-config-prettier eslint-plugin-prettier prettier-plugin-tailwindcss

eslint.config.js に Prettier 統合を追加します。

import prettierRecommended from 'eslint-plugin-prettier/recommended'

export default defineConfig([
  {
    extends: [
      prettierRecommended
    ]
  }
])

ステップ7：.prettierrc［条件：ファイルがない場合］

.prettierrc ファイルがない場合は、プロジェクトのルートに作成します。

{
  "semi": false,
  "singleQuote": true,
  "singleAttributePerLine": true,
  "bracketSameLine": true,
  "endOfLine": "auto",
  "trailingComma": "none",
  "arrowParens": "avoid",
  "plugins": ["prettier-plugin-tailwindcss"]
}

ステップ8：.vscode/settings.json［条件：ファイルがない場合］

.vscode/settings.json ファイルがない場合は、作成します。

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

ステップ9：最終検証（MANDATORY）

すべてのステップを実行した後、ステップ1の検出表をもう一度スキャンして、以下の項目を確認します。

• tailwindcss、@tailwindcss/vite がインストール済み + vite.config.ts にプラグインが登録済み + src/index.css に @import 'tailwindcss' が存在する
• vite.config.ts と tsconfig.app.json の両方に @ パスエイリアスが存在する
• prettier、eslint-config-prettier、eslint-plugin-prettier、prettier-plugin-tailwindcss がインストール済み
• eslint.config.js に prettierRecommended が含まれている
• .prettierrc が存在する
• .vscode/settings.json が存在する

**不足項目がある場合は、該当するステップに戻り、すぐに補完します。**検証に合格する前に作業を終了してはいけません。

注意事項

• すでに存在する設定ファイルは上書きしません
• 既存プロジェクトの補完モードでは、質問せずに自動で進めます
• パッケージマネージャーは既存プロジェクトのロックファイルから判定します：
  • pnpm-lock.yaml → pnpm
  • yarn.lock → yarn
  • bun.lockb または bun.lock → bun
  • package-lock.json またはロックファイルなし → npm
• 空のディレクトリ（スキャフォールドモード）では npm を使用します