Phase: Develop
Tags:#implementation#coding#feature#qualityAI Model: Any (model-agnostic)
Use this prompt after Plan and Understand are complete to execute the actual implementation. It structures the AI’s output around your plan and codebase conventions, rather than letting it freestyle.
| Variable | Description | Example |
|---|---|---|
| `` | The plan from the Plan phase | (paste your plan) |
| `` | Patterns from the Understand phase | “PascalCase components, Zustand stores, CSS modules” |
| `` | Which specific sub-task to work on | “Task 3: Build the checkout form component” |
| `` | Checks that must pass before completion | “Tests pass, auth checked server-side, no secret logging” |
| `` | Edge cases or failure modes to handle | “Empty cart, expired session, payment API timeout” |
Implement the following task from our implementation plan:
Full plan for reference:
Codebase conventions to follow:
Quality gates to preserve:
Edge cases and failure modes to handle:
Requirements:
1. Follow the plan exactly. If you think the plan needs changes,
say so BEFORE writing code — don't silently deviate.
2. Match the existing codebase conventions listed above.
3. Include inline comments for any non-obvious decisions.
4. Write the code in logical chunks — don't dump everything at once.
5. After each chunk, explain what it does and why.
6. Flag any assumptions you're making.
7. Handle the listed edge cases or explain why a specific case does not apply.
8. Keep a quality gate status and stop if a required gate fails.
9. Run or name the most relevant checks before marking the task complete.
Track progress by marking completed items:
- [ ] = not started
- [x] = complete
Start with the first incomplete item.
Implement the following task from our implementation plan:
Task 3: Build the checkout form component with Stripe Elements
Full plan for reference:
[paste the architecture plan from Plan phase]
Codebase conventions to follow:
- React functional components with TypeScript
- Props defined as interfaces (not types)
- CSS Modules for styling
- Error handling with toast notifications (react-hot-toast)
- Form validation with Zod schemas
Quality gates to preserve:
- Checkout cannot submit an invalid cart
- Payment errors show a recoverable user-facing state
- No Stripe secret keys are exposed to the client
- Relevant component and integration tests pass
Edge cases and failure modes to handle:
- Empty cart
- Expired user session
- Stripe Elements load failure
- Duplicate submit while payment is processing
[rest of prompt...]
The output should update quality gate status and explain how listed edge cases were handled or deferred. Step-by-step implementation: Zod validation schema → component skeleton → Stripe Elements integration → error handling → styling. Each chunk explained before the code, assumptions flagged, and progress checklist updated.