You're building an interactive product showcase for a leather artisan in Tunis — a React app with filtering, detail views, and automated tests, deployed to Vercel.
The discipline skills: React components with TypeScript, state management and event handling, Tailwind CSS, writing unit tests with Vitest, and creating the full planning pipeline yourself — PRD, design decisions, governance file, ticket breakdown.
The AI-direction lesson: how much you ask AI to do in a single request directly affects the quality of what you get back. "Build the whole page" produces worse results than focused, component-level requests. The sequence matters too — which piece you build first establishes constraints that later pieces inherit. And when AI's output drifts from what you specified, the first question is whether your own planning artifacts were clear enough.
Your Role
You are the same developer, returning to a familiar client.
Last time, a senior developer handled the upstream planning — the PRD, the design direction, the ticket breakdown, the governance file. You picked up a finished handoff and built from it. This time you handle the full pipeline: read the client's email, write the PRD yourself, make the design and architecture decisions, create the governance file, break the work into tickets, then build. Templates guide the structure of each document, but the content is yours.
You still direct Claude Code to do the implementation. What changes is scope. You are directing AI through planning and building, not just building.
What's New
Last time you built a static HTML/CSS site from a complete handoff. You verified with html-validate and Lighthouse, deployed to Netlify, and handled a scope addition. You know how to direct Claude Code through tickets and check the output against real targets.
Three things are new.
You create the planning artifacts. The PRD, the design decisions, the CLAUDE.md governance file, the ticket breakdown. You have templates that show the structure. You translate Yasmine's email into those documents, and then you build from what you wrote. When something goes wrong during the build, the first question is whether you specified it clearly enough upstream.
The framework changes. React with TypeScript, Tailwind CSS, Vite. Interactive components with props, state, and event handlers instead of static HTML pages. This is your first React project.
You write automated tests. Vitest runs assertions against your components. A passing test is a claim you can re-run. A failing test tells you exactly what broke and where. This is verification that persists, not just a one-time check.
The hard part is the pipeline. Writing code from a clear spec is something you have done. Writing the spec from a client email, then building from it, then tracing bugs back to gaps in your own planning — that is new territory.
Tools
- Claude Code — AI coding agent, VS Code extension. Primary tool for planning and building.
- Git and GitHub — version control, remote repo, issues, project board.
- VS Code with Claude Code extension and ESLint.
- React with TypeScript — component framework. New.
- Vite — build tool and dev server. New.
- Vitest — test runner. New.
- Tailwind CSS — utility-first CSS framework. New.
- html-validate — HTML structural validation. Continuing.
- Lighthouse — performance, accessibility, best practices, SEO audits. Continuing.
- Vercel CLI — deployment to production. New, replacing Netlify.
Materials
- Yasmine's follow-up email — her requests in her own words. The raw input to the pipeline.
- Pipeline templates — PRD template, design decisions template, ticket breakdown template. Structure without content.
- Product photos — new detail shots of Yasmine's leather goods, multiple angles per piece.