The Brief
Yasmine Khelifi's portfolio site is live. She loves it. Her friend Nadia called it "real -- not like a template." But Yasmine has been watching how people use it, and she wants more.
Right now, customers scroll through one photo per item and see everything at once. Yasmine wants them to explore. Click on a bag and see close-ups of the stitching and the clasp. Filter by category so someone interested in wallets doesn't have to scroll past belts. And she wants a section about her custom work -- what's possible, what the timeline looks like, what materials she works with.
She sent a follow-up email. It's specific in some places and vague in others. That gap between what she said and what you need to build is where the project starts.
Your Role
You are the same developer. Yasmine already trusts you with her work.
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. That senior developer is gone. This time you handle the full pipeline: read Yasmine'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. The quality of what you plan directly affects the quality of what gets built.
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.