Prompts for planning, building and reviewing web applications, from schema and API to React and CSS.
These prompts cover the working day of a web developer: specifying a change, designing the data and the API behind it, building the interface in React, Next.js and CSS, and then checking the result through code review and performance diagnosis. Each one asks for the inputs an experienced engineer would want before starting, such as your framework version, your real data shapes, the queries you run or the measurements you have collected, and each tells the model what it must not make up.
Choose by the stage you are at. If the approach is not settled, begin with the technical spec prompt, which asks you questions before it drafts anything. For back-end foundations, the schema and API prompts produce designs you can review with a team. For interface work, pick the React prompt for a single component, the Next.js prompt when routing, caching and server boundaries are involved, and the CSS prompt for layout. Use the code review prompt on any diff before it merges, including code that an AI tool wrote.
AI models are good at producing a structured first draft, applying well-known conventions consistently and pointing out cases you had not considered. They cannot run your code, see your production data or know what your team decided last quarter, and their knowledge of a framework can lag behind the version you use. Treat every output as a proposal: run it, test it, check version-specific details against the official documentation, and keep a person responsible for anything that touches security or user data.
Reviews a diff the way a careful senior engineer would: intent first, findings ranked by severity, each tied to a line with a suggested fix.
| If you need to… | Use |
|---|---|
| I want a second pair of eyes on a diff before it merges | Pull Request Code Review Prompt |
| I need to agree on an approach before anyone writes code | Technical Specification Prompt |
| I'm building an interactive component with state and data fetching | React Component Prompt |
| I'm designing tables and endpoints for a new feature | Relational Database Schema Prompt |
| My page is failing LCP, INP or CLS and I don't know why | Core Web Vitals Diagnosis Prompt |
Reviews a diff the way a careful senior engineer would: intent first, findings ranked by severity, each tied to a line with a suggested fix.
Works from your own field and lab data to rank likely causes of poor LCP, INP or CLS, with a way to confirm each one before you change code.
A plan-then-build prompt for App Router work: routes, server and client boundaries, caching, mutations and authorization, approved before any code.
Makes the model plan components, state and effects before coding, then deliver complete files, tests and a list of what it assumed.
Builds a layout with Grid, Flexbox and container queries that adapts to its content, with the reasoning and the edge cases to test.
Turns a description of your domain and consumers into a consistent REST contract: resources, endpoints, errors, pagination and open decisions.
Designs a relational schema from your entities, rules and real queries: relationships, DDL, constraints and indexes that each trace to a query.
Interviews you briefly, then drafts a reviewable spec: goals and non-goals, design, alternatives, rollout, risks and open questions.
Guide
The five parts of a complete prompt (goal, context, task, constraints, output format), with a worked rewrite and a pre-send checklist.
Technical guide
How to split a large task into a sequence of focused prompts, design the handoffs between them, and debug the chain when a step goes wrong.
Guide
A diagnostic approach to weak AI answers: name the fault, trace it to the gap in your prompt, then follow up precisely or rewrite and start again.