Prompt Recipes & Examples

Context: You are a frontend developer working on a React app.

Task: Create a user registration form with fields for name, email, and password. On submit, validate all fields and log the data to the console.

Guidelines: Use React and Tailwind CSS. Show inline error messages. Use controlled components with useState.

Constraints: Do not use any external form libraries. Only modify the RegisterForm.tsx file.

I need to implement a secure login system using Supabase.

Use email/password authentication

On success, store the JWT in localStorage

Show an error if the login fails

Include form validation and loading state

Use React and Supabase client SDK.

Here’s the issue: when the app loads, user.id is undefined even though the user is logged in.

Code snippet:
const user = useAuth();

Why might this be happening, and how can we fix it? Walk through possible causes and give a solution.

Make the TaskCard component mobile responsive.

Stack elements vertically on small screens

Use Tailwind’s sm / md / lg breakpoints

Keep padding and spacing consistent

Do not change functionality or remove any elements

Add a “Buy Now” button that opens a Stripe Checkout session.

Use the Stripe JavaScript SDK

On click, call an API route to create the session

Redirect to the Stripe-hosted checkout page

Assume the product ID is already available in product.id

Use Next.js with API routes. Do not include server-side logic in the frontend component.

Refactor the logic in handleFormSubmit for readability and maintainability.

Requirements:

No behavior should change

Use early returns instead of nested ifs

Add inline comments to explain each step

Only modify this function. Do not touch other parts of the file.

We just built a blog post editor with Markdown support, autosave, and tag suggestions.
Can you write a reusable prompt template someone else could use to build the same feature from scratch?

Here’s my current prompt:

“Build a login form using Supabase.”

Can you improve it? Make it more specific, add constraints, and suggest a better format.

List the steps required to:

Connect a Next.js app to Supabase

Add email/password login

Protect a route using auth middleware

Write it as a clear checklist I can follow.

This screenshot shows the layout we want.
Please create a responsive UI that matches this style and structure.

Use Tailwind CSS. Add placeholder text and buttons for now.