Skip to content

Implementation Plan

Purpose

Use this prompt to break down a complex app project into manageable steps for execution. This creates a detailed roadmap that guides the development process.

Input

  • design-spec.md - Technical specifications document
  • prd.md - Product Requirements Doc
  • app-sitemap.md - Application structure and navigation
  • tech-stack.md - Tech stack

For an Existing Codebase (or Starting from a Template)

Open the repository in your coding agent so it can inspect the files directly. If it cannot access the repository, provide the relevant source files and a directory tree.

Initialize project instructions using the command for your tool, then review the generated file:

Tool Command Project instruction file
Claude Code /init CLAUDE.md
Codex CLI /init AGENTS.md

Use this onboarding prompt with either tool. Replace the task ID and description before running it; specs/tasks/ is a shared project convention, not a required tool directory.

Task ID: <task-id>
Task: <describe the task and its acceptance criteria>

Prepare to work on this task before changing application code:
- Read the applicable project instructions and shared specifications.
- Explore the relevant source files, dependencies, and existing tests.
- Identify constraints, open questions, and the commands needed to verify the work.
- Ask me to clarify requirements when needed.

Record your findings, relevant file paths, decisions, and proposed next steps in specs/tasks/<task-id>/onboarding.md. Make it useful for resuming the task in a new session with either coding agent.

Useful Tools

If you have existing code on Github, these tools can be useful:

  • Gitinjest:

    Turn any Git repository into a simple text digest of its codebase

  • Gitdiagram:

    Turn any GitHub repository into an interactive diagram

Steps

1. Run the prompt with your preferred AI thinking model to generate a comprehensive implementation plan

2. Review and refine the output as needed

3. Save the final document as implementation-steps.md

Prompt

You are an AI task planner responsible for breaking down a complex web application development project into manageable steps.

Your goal is to create a detailed, step-by-step plan that will guide the code generation process for building a fully functional web application based on a provided technical specification.

# Input
First, carefully review the following uploaded inputs for Design doc `design-spec.md`, PRD `prd.md`, Sitemap `app-sitemap.md` and Tech Stack `tech-stack.md`

After reviewing these inputs, your task is to create a comprehensive, detailed plan for implementing the web application.

Before creating the final plan, analyze the inputs and plan your approach. Wrap your thought process in <brainstorming> tags.

Break down the development process into small, manageable steps that can be executed sequentially by a code generation AI.

Each step should focus on a specific aspect of the application and should be concrete enough for the AI to implement in a single iteration. You are free to mix both frontend and backend tasks provided they make sense together.

When creating your plan, follow these guidelines:

1. Start with the core project structure and essential configurations.
2. Progress through database schema, server actions, and API routes.
3. Move on to shared components and layouts.
4. Break down the implementation of individual pages and features into smaller, focused steps.
5. Include steps for integrating authentication, authorization, and third-party services.
6. Incorporate steps for implementing client-side interactivity and state management.
7. Include steps for writing tests and implementing the specified testing strategy.
8. Ensure that each step builds upon the previous ones in a logical manner.

Present your plan using the following markdown-based format. This format is specifically designed to integrate with the subsequent code generation phase, where an AI will systematically implement each step and mark it as complete. Each step must be atomic and self-contained enough to be implemented in a single code generation iteration, and should modify no more than 20 files at once (ideally less) to ensure manageable changes. Make sure to include any instructions the user should follow for things you can't do like installing libraries, updating configurations on services, etc (Ex: Running a SQL script for storage bucket RLS policies in the Supabase editor).


# Implementation Plan

## [Section Name]
- [ ] Step 1: [Brief title]
  - **Task**: [Detailed explanation of what needs to be implemented]
  - **Files**: [Maximum of 20 files, ideally less]
    - `path/to/file1.ts`: [Description of changes]
  - **Step Dependencies**: [Step Dependencies]
  - **User Instructions**: [Instructions for User]

[Additional steps...]

After presenting your plan, provide a brief summary of the overall approach and any key considerations for the implementation process.

Remember to:
- Ensure that your plan covers all aspects of the technical specification.
- Break down complex features into smaller, manageable tasks.
- Consider the logical order of implementation, ensuring that dependencies are addressed in the correct sequence.
- Include steps for error handling, data validation, and edge case management.

# Output
Begin your response with your brainstorming, then proceed to create your detailed implementation plan for the web application based on the provided specification. The final document will be saved as `implementation-steps.md` for use in the code generation process.

Output

  • implementation-steps.md - A comprehensive step-by-step implementation plan with prioritized tasks

Benefits

  • Creates a clear, step-by-step implementation plan
  • Breaks complex features into manageable tasks
  • Establishes logical development sequence
  • Identifies dependencies between components
  • Provides a trackable roadmap for development
  • Integrates with code generation tools

Next Steps

After generating implementation-steps.md, review the plan. You can ask your LLM to write a prompt for an adversarial reviewer. After reviewing, proceed to Code Generation using this document as input for AI-assisted development.