docs(01-foundation): create phase plan
4 plans across 3 waves: scaffold, registry+test stubs, Zod schemas and WizardState store (parallel wave 3).
This commit is contained in:
@@ -0,0 +1,196 @@
|
||||
---
|
||||
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>
|
||||
Reference in New Issue
Block a user