Phase: Plan
Tags:#scoping#greenfield#requirements#qualityAI Model: Any (model-agnostic)
Use this prompt at the very start of a new task or feature — before writing any code. It forces you to define boundaries, success criteria, and constraints upfront, preventing scope creep and wasted effort.
| Variable | Description | Example |
|---|---|---|
| `` | What you’re building or fixing | “Add user profile editing to the settings page” |
| `` | Measurable definition of “done” | “Users can update name, email, and avatar” |
| `` | Technical or time limitations | “Must use existing Supabase auth, ship by Friday” |
| `` | What you’re explicitly NOT doing | “Password change, account deletion” |
| `` | Required checks before moving phases or shipping | “Auth verified server-side, tests pass, rollback documented” |
| `` | Known risky cases to plan for | “Expired session, duplicate submit, empty avatar upload” |
I need to work on the following task:
Before writing any code, create an implementation plan.
Success criteria:
Constraints:
Explicitly out of scope:
Quality gates that must pass:
Known or suspected edge cases:
The implementation plan should include:
1. A breakdown of the task into concrete sub-tasks
2. The files that will need to be created or modified
3. Key technical decisions and their rationale
4. Potential risks or unknowns
5. Quality gates for Plan, Understand, Develop, and Ship
6. Edge cases that must be tested, handled, or explicitly deferred
7. Estimated complexity (simple / moderate / complex)
Do not write any code yet — just the plan.
I need to work on the following task:
Add a dark mode toggle to our React dashboard. Currently the app
only supports light mode.
Before writing any code, create an implementation plan.
Success criteria:
- Users can toggle between light and dark mode
- Preference persists across sessions (localStorage)
- All existing components render correctly in both modes
Constraints:
- React 18 with TypeScript
- Using CSS custom properties (no Tailwind)
- Must not break existing component styles
Explicitly out of scope:
- System preference detection (prefers-color-scheme)
- Per-page theme settings
- Animation on theme transition
Quality gates that must pass:
- Existing pages render correctly in both themes
- Theme preference persists after reload
- No contrast regressions below WCAG AA for core text
Known or suspected edge cases:
- localStorage unavailable or blocked
- User opens app with an old saved theme value
- Dashboard charts use hardcoded colors
The implementation plan should include:
1. A breakdown of the task into concrete sub-tasks
2. The files that will need to be created or modified
3. Key technical decisions and their rationale
4. Potential risks or unknowns
5. Quality gates for Plan, Understand, Develop, and Ship
6. Edge cases that must be tested, handled, or explicitly deferred
7. Estimated complexity (simple / moderate / complex)
Do not write any code yet — just the plan.
The output should include quality gates for verification and edge cases to test, handle, or explicitly defer.
A structured plan with 5–8 sub-tasks, file list, decision to use CSS custom properties with a [data-theme] attribute, risk note about third-party component libraries, and complexity rating of “moderate.”