Scaffold React App

React Web アプリ scaffold（Vite + React + TS + Tailwind）

Vite ベースの React 19 + TypeScript SPA を雛形生成する。

stack

• パッケージマネージャ: pnpm（Node 22+）
• ビルド: Vite + @vitejs/plugin-react
• UI: React 19 + react-router-dom
• スタイル: Tailwind CSS v4（@tailwindcss/vite）
• テスト: Vitest + @testing-library/react + jsdom
• lint/format: Biome（既定）/ 型: tsc -b
• 任意: TanStack Query（API データ取得）, Recharts（グラフ）, SSE は EventSource

手順

1. 初期化

   pnpm create vite@latest . --template react-ts
   pnpm install
   

2. Tailwind v4 を追加

   pnpm add tailwindcss @tailwindcss/vite
   

   vite.config.ts の plugins に tailwindcss() を足し、エントリ CSS に @import "tailwindcss";。
3. ルーティング / データ取得（必要に応じて）

   pnpm add react-router-dom
   pnpm add @tanstack/react-query     # API 連携するなら
   

4. テストと lint を追加

   pnpm add -D vitest jsdom @testing-library/react @testing-library/jest-dom @testing-library/user-event @vitest/coverage-v8
   pnpm add -D @biomejs/biome
   

5. package.json の scripts を揃える

   {
     "dev": "vite",
     "build": "tsc -b && vite build",
     "preview": "vite preview",
     "test": "vitest",
     "test:run": "vitest run",
     "lint": "biome lint",
     "format": "biome format --write",
     "check": "biome check --write"
   }
   

6. vite.config.ts の骨子

   import { defineConfig } from 'vite';
   import react from '@vitejs/plugin-react';
   import tailwindcss from '@tailwindcss/vite';
   
   export default defineConfig({
     plugins: [react(), tailwindcss()],
     test: { environment: 'jsdom', setupFiles: ['./src/test/setup.ts'] },
   });
   

7. 動作確認 — pnpm dev。型・lint・テストは pre-pr-checks で確認。

ルール・コツ

• API 連携は TanStack Query に寄せる（キャッシュ・再取得・ローディング状態を一元管理）。リアルタイム更新は EventSource(SSE)。
• ルーティングは react-router-dom。型安全なローダ/アクションを活用する。
• テストは Testing Library でユーザー視点（role/label で取得、実装詳細に依存しない）。
• 環境変数は Vite の import.meta.env.VITE_*。秘密情報をフロントに埋め込まない（公開される）。
• グラフが必要なら Recharts。

完了条件

以下を全て満たしたら完了。満たせない項目があれば、黙って省略せず理由を報告する。

• pnpm install が通り、pnpm dev でアプリが起動する
• scripts（dev/build/preview/test/test:run/lint/format/check）が揃っている
• Tailwind / Vitest(jsdom + setup) / Biome が設定済み
• API 連携がある場合 TanStack Query を使っている
• VITE_* 以外の秘密情報をフロントに埋め込んでいない

補足

• ライセンスは permissive 前提。依存追加時にライセンスを確認する。
• 記載のバージョン・パッケージ構成は Skill 作成時点の目安。初期化時に最新安定版を確認して読み替える。