Skip to content

Latest commit

 

History

History
82 lines (58 loc) · 4.5 KB

.cursor-tasks.md

File metadata and controls

82 lines (58 loc) · 4.5 KB

Example Tasks for a "Hello, World!" Project

This file outlines a set of tasks for building a simple Next.js project. In this project, the user enters their name in a text box on the Home Page and is then greeted with "Hello, {name}" on a separate Greeting Page.

Here's an example prompt to use to generate this. Note that you'll first want to either provide a detailed set of notes / prd of exactly what to build, or have a two-step process where you have the AI create the spec, then proceed with this step: Be sure to use an advanced thinking model with this, ideally "Deep Research" from OpenAI but o1-pro, o3-mini, flash-2-thinking, or (maybe?) DeepSeek R1 could work as well.

Create a very very very detailed markdown checklist of all of the stories for this project plan, with one-story-point tasks (with unchecked checkboxes) that break down each story. It is critically important that all of the details to implement this are in this list. Note that a very competent AI Coding Agent will be using this list to autonomously create this application, so be sure not to miss any details whatsoever, no matter how much time and thinking you must do to complete this very challenging but critically important task.

After you generate this task list, here is a prompt to use in cursor agent to kick this off (might be useful to put at the end of your cursorrules file as well?) Probably helpful to just @include the cursor-tasks.md file as well.

Go through each story and task in the .cursor-tasks.md file. Find the next story to work on. Review each unfinished task, correct any issues or ask for clarifications (only if absolutely needed!). Then proceed to create or edit files to complete each task. After you complete all the tasks in the story, update the file to check off any completed tasks. Run builds and commits after each story. Run all safe commands without asking for approval. Continue with each task until you have finished the story, then stop and wait for me to review.

1. Project Setup

  1. Initialize the Next.js Project

    • Use Create Next App to bootstrap the project.
    • Enable the App Router.
    • Configure Tailwind CSS for styling.
    • Set up TypeScript with strict mode.

  2. Configure Basic Routing

    • Ensure the project has two main pages:
      • Home Page (pages/index.tsx) for user input.
      • Greeting Page (pages/greeting.tsx) to display the greeting.

2. Home Page – Name Input

  1. Create the Home Page (pages/index.tsx)

    • Render a form containing:
      • A text input where the user enters their name.
      • A submit button labeled "Submit".
    • Use Tailwind CSS classes for styling (e.g., input borders, padding, and button colors).

  2. Implement Form Handling

    • Use React’s useState hook to manage the input value.
    • Validate that the input is not empty before submission.
    • On form submission, navigate to the Greeting Page while passing the entered name (using query parameters or a simple state management solution).

3. Greeting Page – Display the Message

  1. Create the Greeting Page (pages/greeting.tsx)

    • Retrieve the user's name from the query parameters or via a shared state.
    • Display a greeting message in the format: "Hello, {name}".
    • Style the greeting message using Tailwind CSS (e.g., text size, color, and margin).

  2. Implement Navigation from Home Page

    • Ensure that the Home Page form submission correctly routes to the Greeting Page with the user’s name attached.

4. Basic Interactivity and Validation

  1. Form Validation

    • Prevent submission if the text input is empty.
    • Display a simple error message below the input (e.g., "Please enter your name.") when validation fails.

  2. Test the User Flow

    • Manually test by entering a name and verifying that the Greeting Page shows the correct message.
    • Optionally, write unit tests for the form logic to ensure reliability.

5. Documentation and Final Steps

  1. Update the Project README

    • Include instructions on how to install dependencies, run the development server, and build the project.
    • Provide a brief overview of the project’s purpose and structure.

  2. Final Review and Testing

    • Ensure that all components render correctly and the navigation works as expected.
    • Test the app in both development and production modes to confirm proper behavior.