---
phase: 01-foundation
plan: 01
type: execute
wave: 1
depends_on: []
files_modified:
  - package.json
  - vite.config.ts
  - tsconfig.json
  - tsconfig.app.json
  - tsconfig.node.json
  - src/index.css
  - src/main.tsx
  - src/App.tsx
  - vitest.config.ts
  - index.html
autonomous: true
requirements: []

must_haves:
  truths:
    - "npm run dev starts the Vite dev server with no console errors"
    - "npm run build succeeds with no TypeScript errors"
    - "npx vitest run exits 0 (even with zero test files)"
    - "Tailwind utility classes applied in JSX produce visible styles"
  artifacts:
    - path: "vite.config.ts"
      provides: "Vite build config with React plugin and Tailwind v4 plugin"
      contains: "@tailwindcss/vite"
    - path: "src/index.css"
      provides: "Tailwind v4 CSS entry point"
      contains: "@import \"tailwindcss\""
    - path: "vitest.config.ts"
      provides: "Vitest configuration for pure-function unit tests"
      contains: "environment: 'node'"
    - path: "package.json"
      provides: "All Phase 1 dependencies declared"
      contains: "zod"
  key_links:
    - from: "vite.config.ts"
      to: "src/index.css"
      via: "tailwindcss() plugin processes @import directive"
      pattern: "tailwindcss\\(\\)"
    - from: "src/main.tsx"
      to: "src/index.css"
      via: "import './index.css'"
      pattern: "import.*index\\.css"
---

<objective>
Bootstrap the project: scaffold a Vite 6 + React 18 + TypeScript 5 SPA, install all Phase 1 dependencies, configure Tailwind v4 via the Vite plugin, and install Vitest so automated tests can run.

Purpose: Every downstream plan needs a working project with correct tooling. Getting the scaffold wrong (e.g., Tailwind v3 path, old shadcn CLI) causes painful migration later.
Output: A runnable dev server, a passing build, and Vitest ready to execute unit tests.
</objective>

<execution_context>
@C:/Users/SebastienQUEROL/.claude/get-shit-done/workflows/execute-plan.md
@C:/Users/SebastienQUEROL/.claude/get-shit-done/templates/summary.md
</execution_context>

<context>
@.planning/PROJECT.md
@.planning/ROADMAP.md
@.planning/STATE.md

<!-- Key pitfalls from research (mandatory reading before executing): -->
<!-- 1. Tailwind v4 uses @tailwindcss/vite plugin — NOT postcss + tailwind.config.js -->
<!-- 2. shadcn CLI is `npx shadcn@latest` — NOT `npx shadcn-ui@latest` -->
<!-- 3. Vite 6 requires Node.js 20.19+ or 22.12+ — verify with `node --version` first -->
<!-- 4. Zod v4 requires @hookform/resolvers v5 — do NOT install resolvers v3/v4 -->
</context>

<tasks>

<task type="auto">
  <name>Task 1: Scaffold and install all Phase 1 dependencies</name>
  <files>package.json, vite.config.ts, src/index.css, src/main.tsx, src/App.tsx, index.html, tsconfig.json, tsconfig.app.json, tsconfig.node.json</files>
  <action>
    First verify Node.js version meets Vite 6 requirements:
    ```
    node --version
    ```
    Must be 20.19+ or 22.12+. If below, stop and report — do not proceed.

    Scaffold the project in the current directory (not a subdirectory — the repo root IS the project):
    ```
    npm create vite@latest . -- --template react-ts
    ```
    Accept overwrite prompts if any files exist.

    Install all Phase 1 production and dev dependencies in one command:
    ```
    npm install
    npm install zod react-hook-form @hookform/resolvers
    npm install -D tailwindcss @tailwindcss/vite
    npm install -D vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom
    ```

    Update vite.config.ts to add the Tailwind v4 plugin (use @tailwindcss/vite, NOT postcss):
    ```typescript
    import { defineConfig } from 'vite';
    import react from '@vitejs/plugin-react';
    import tailwindcss from '@tailwindcss/vite';

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

    Replace the contents of src/index.css with the single Tailwind v4 import directive:
    ```css
    @import "tailwindcss";
    ```
    Do NOT add tailwind.config.js, do NOT add postcss.config.js, do NOT add content globs.

    Clean up the Vite default boilerplate in src/App.tsx — replace with a minimal placeholder that uses one Tailwind class to confirm styles work:
    ```tsx
    export default function App() {
      return (
        <div className="p-4">
          <h1 className="text-2xl font-bold">Ready2Blob</h1>
        </div>
      );
    }
    ```

    Verify the dev server starts without console errors:
    ```
    npm run dev
    ```
    Then Ctrl+C. Verify the build succeeds:
    ```
    npm run build
    ```
  </action>
  <verify>
    <automated>npm run build 2>&1 | tail -5</automated>
  </verify>
  <done>npm run build exits 0 with no TypeScript errors. npm run dev starts without console errors (manual check: open browser, check devtools console).</done>
</task>

<task type="auto">
  <name>Task 2: Configure Vitest for pure-function unit tests</name>
  <files>vitest.config.ts</files>
  <action>
    Create vitest.config.ts at the project root with the node environment (pure functions do not need a DOM):
    ```typescript
    import { defineConfig } from 'vitest/config';

    export default defineConfig({
      test: {
        environment: 'node',
        globals: true,
      },
    });
    ```

    Add a test script to package.json if not already present:
    ```json
    "test": "vitest run"
    ```

    Run the test suite to confirm Vitest executes (zero tests is acceptable at this stage):
    ```
    npx vitest run
    ```
    Expected output: "No test files found" or similar — this is correct. Exit code must be 0.
  </action>
  <verify>
    <automated>npx vitest run 2>&1; echo "exit: $?"</automated>
  </verify>
  <done>npx vitest run exits 0. vitest.config.ts exists with environment: 'node' and globals: true.</done>
</task>

</tasks>

<verification>
Run in sequence after both tasks complete:
1. `npm run build` — exits 0, no TypeScript errors
2. `npx vitest run` — exits 0
3. Manual: `npm run dev`, open browser, confirm no console errors and "Ready2Blob" heading renders with bold styling
</verification>

<success_criteria>
- Vite 6 + React 18 + TypeScript 5 project builds cleanly
- Tailwind v4 configured via @tailwindcss/vite plugin (no postcss.config.js, no tailwind.config.js)
- All Phase 1 dependencies installed: zod, react-hook-form, @hookform/resolvers, vitest, @testing-library/react
- Vitest configured and executable (exits 0 with no test files)
- src/index.css contains only `@import "tailwindcss"` for Tailwind v4
</success_criteria>

<output>
After completion, create `.planning/phases/01-foundation/01-01-SUMMARY.md` using the summary template.
</output>