> ## Documentation Index
> Fetch the complete documentation index at: https://docs.rocket.new/llms.txt
> Use this file to discover all available pages before exploring further.
# Core concepts
> The essential principles for prompting in Rocket.new, from clear intent to reliable, reusable patterns.
export const LlmsDirective = () =>
For the complete documentation index, see llms.txt.
For a lightweight markdown version of this page, append .md to the URL.
;
Prompting is how you direct Rocket using clear, natural language. You describe *what* you want (screens, logic, fixes, flows) and Rocket figures out the *how*.
This guide covers:
* The S.I.M.P.L.E. framework for writing effective prompts
* Core prompting strategies (zero-shot, instructional, one-shot)
* How to build features incrementally
* Common mistakes and how to fix them
Looking for ready-to-use prompts? Browse the [Prompt library](/learn/guides/prompt-library). Running into issues? Check the [Debugging guide](/learn/guides/debugging).
## Start with clear intent
Strong prompting always starts with one question: **What should this app, screen, or feature do, in one sentence?** Write that sentence first. Then layer in:
What the user can do (core actions)
Where it lives (which screen, component, or flow)
Avoid vague prompts like "Make this better", "Fix the layout", or "Clean up the logic." These feel fast to write but are slow to fix.
A slightly longer, more specific prompt is almost always faster overall.
## The S.I.M.P.L.E. framework
Use the **S.I.M.P.L.E.** framework as a quick checklist before you send any substantial prompt.
```mermaid theme={null}
graph LR
A[Your Prompt] --> B{S.I.M.P.L.E. Check}
B --> C[S: Specific?]
B --> D[I: Incremental?]
B --> E[M: Meaningful context?]
B --> F[P: Pattern-aware?]
B --> G[L: Limited scope?]
B --> H[E: Explicit structure?]
C --> I[Ready to send]
D --> I
E --> I
F --> I
G --> I
H --> I
```
| Letter | Principle | What it means |
| :----- | :--------------------- | :-------------------------------------------------------- |
| **S** | **Specific** | Say exactly what you want, not just how it should "feel". |
| **I** | **Incremental** | Ask for one focused change at a time. |
| **M** | **Meaningful context** | Include only the context Rocket actually needs. |
| **P** | **Pattern-aware** | Point to existing screens, styles, or flows when helpful. |
| **L** | **Limited scope** | State what **not** to touch to avoid drift. |
| **E** | **Explicit structure** | Describe layout and order the way users experience it. |
You do not need to label each part in your prompt. Just make sure these ideas are present.
### S - Specific
**Vague:**
```plaintext wrap theme={null}
Make a screen that shows some user data.
```
**Specific:**
```plaintext wrap theme={null}
Create a dashboard that shows name, email, and last login date from the `users` table.
```
Specific prompts are faster overall because you skip back-and-forth corrections.
### I - Incremental
Break big ideas into small, safe steps.
```plaintext wrap theme={null}
Step 1: Build just the layout for the checkout page (no payment logic yet).
Step 2: Add basic form validation.
Step 3: Connect to the payment provider.
```
Each prompt should move the app forward in a way you can quickly review.
### M - Meaningful context
Include only the details that change the outcome, enough to be clear, not a full spec.
```plaintext wrap theme={null}
This is the main analytics dashboard for marketing.
Users scan it quickly, often on laptops.
Focus on making key metrics readable at a glance.
```
If a teammate would not need a detail to build it, the AI probably does not either.
### P - Pattern-aware
When you already have good examples in your app, reuse them.
```plaintext wrap theme={null}
Create a settings page using the same card layout, spacing,
and button styles as the existing profile page.
Include sections for notifications, privacy, and account settings.
```
This keeps your app consistent without rewriting every requirement.
### L - Limited scope
Tell Rocket what not to change so it does not "help" too much.
```plaintext wrap theme={null}
Only update the header layout on this page.
Do not change navigation links, routes, or any data fetching logic.
```
Use [@ commands](/build/editor/commands) to automatically limit changes to specific files or folders, ensuring edits stay focused and predictable.
* `@pages/dashboard.jsx only update the header layout. Do not change navigation links or data fetching.`
* `@components/card.jsx fix spacing between title and content. Keep all other styling unchanged.`
### E - Explicit structure
Describe the layout in the same top-to-bottom order a user experiences it.
```plaintext wrap theme={null}
Create a dashboard layout:
- Top: header with the user's name and a "New report" button.
- Middle: three metric cards in a row (revenue, active users, churn rate).
- Bottom: a table showing the last 20 events.
```
Logical order helps Rocket structure the screen cleanly on the first try.
### Self-check before sending
Before you submit a prompt, ask yourself:
1. Do you know exactly what "done" looks like?
2. Is it Specific, Incremental, contextual, Pattern-aware, Limited, and Explicitly structured?
3. Could you review the result in under 5 minutes?
If any answer is "no", shrink the prompt or clarify the outcome.
## Basic prompting strategies
Once you are comfortable with S.I.M.P.L.E., these core strategies cover most day-to-day work.
**Direct instructions.** Use when the task is small and clear, and you do not need to match an existing pattern.
```plaintext wrap theme={null}
Create a screen that lists all orders placed in the last 7 days.
```
Combine with **S**, **L**, and **E** from S.I.M.P.L.E. to keep it specific, scoped, and structured.
**Step-by-step "how."** Use when layout and structure really matter.
```plaintext wrap theme={null}
Build a form layout:
- Title centered at the top,
- Three input fields stacked vertically with 16px spacing,
- Submit button centered below the last field.
```
You are telling Rocket *how* to build it, not just *what* to build.
**"Like this, but for X."** Use when you already have a good example in your app and want to mirror it.
```plaintext wrap theme={null}
Create a billing settings page using the same card layout and spacing
as the existing profile page. Include sections for payment methods,
invoices, and subscription details.
```
This leans on the **Pattern-aware** part of S.I.M.P.L.E.
## Plan, Build, Refine
Think of your prompting workflow in three lightweight phases.
Spend a minute writing down:
* What you are building
* Who it is for
* The top 3 jobs it must do well
```plaintext wrap theme={null}
I am building an internal CRM for our support team.
Top 3 jobs: 1) track conversations, 2) see customer history, 3) schedule follow-ups.
Start by creating a main dashboard layout that surfaces today's tasks and recently updated tickets.
```
Use **Incremental** and **Limited scope**:
```plaintext wrap theme={null}
First, create the layout for the dashboard only.
Do not connect to real data yet, just use mock data.
```
Then:
```plaintext wrap theme={null}
Now connect this dashboard to the existing `tickets` table.
Keep the current layout exactly the same.
```
Once something basically works, avoid "start over" prompts. Instead:
```plaintext wrap theme={null}
The current version of this screen works correctly.
Now only improve the visual hierarchy:
- Keep all existing behavior and data loading,
- Focus on spacing, typography, and grouping related content.
```
Use [`/` commands](/build/editor/commands) to make targeted changes - swap components, reorganize sections, or fix issues - without rebuilding from scratch.
## Common mistakes and how to fix them
These common prompting mistakes map directly to the S.I.M.P.L.E. principles. Use this table as a quick reference when prompts are not working as expected.
| Mistake | Example | Why it fails | S.I.M.P.L.E. fix |
| :----------------------- | :------------------------------------------------------------------------------------------------ | :-------------------------------------- | :---------------------------------------- |
| **The Vague Vanisher** | "Make it look nice" | Subjective, no clear anchor | **S**pecific, **E**xplicit structure |
| **The Everything Bagel** | "Create a full e-commerce site with products, cart, checkout, user accounts, and admin dashboard" | Too many responsibilities at once | **I**ncremental, **L**imited scope |
| **The Missing Data** | "Show all user data in a table" | "All" is undefined, no source specified | **S**pecific, **M**eaningful context |
| **The Silent Change** | "Clean this up" | No definition of what stays the same | **L**imited scope, **E**xplicit structure |
| **The Assumption Trap** | "Make it user-friendly and fast" | Assumes Rocket knows your preferences | **S**pecific, **M**eaningful context |
| **The Reverse Order** | "Add a submit button, then create a form with name and email fields above it" | Describes elements in wrong order | **E**xplicit structure |
| **The Constraint Gap** | "Update the header" | No boundaries on what to change | **S**pecific, **L**imited scope |
### The Vague Vanisher
**Mistake:**
```plaintext wrap theme={null}
Make it look nice.
```
"Nice" is subjective and open to interpretation. Rocket does not know what "nice" means to you.
**Fix:**
```plaintext wrap theme={null}
Improve the visual design of this screen while keeping all logic the same.
Increase white space between sections, use a clean sans-serif font,
set body text to 14-16px, and add subtle 8px rounded corners and soft shadows
to cards so they stand out from the background.
```
### The Everything Bagel
**Mistake:**
```plaintext wrap theme={null}
Create a complete e-commerce site with product pages, shopping cart, checkout, user accounts, payment processing, order tracking, and admin dashboard.
```
Too many responsibilities in one prompt. Hard to review, debug, or roll back.
**Fix (break it into smaller prompts):**
```plaintext wrap theme={null}
Step 1: Create a product listing page with product cards showing image, name, price, and "Add to Cart" button.
```
Then build incrementally using iterative refinement.
### The Missing Data
**Mistake:**
```plaintext wrap theme={null}
Show all the user data in a table.
```
"All" is undefined. No source table, fields, ordering, or filters specified.
**Fix:**
```plaintext wrap theme={null}
Display user data from the `users` table in a table format. Show columns for: user ID, name, email, registration date, and account status. Sort by registration date (newest first). Add a filter to show only active users.
```
### The Assumption Trap
**Mistake:**
```plaintext wrap theme={null}
Make it user-friendly and fast.
```
Assumes Rocket knows your definition of "user-friendly" and "fast."
**Fix:**
```plaintext wrap theme={null}
Use large input fields (minimum 44px height), minimal text, and a single-step submission flow. Optimize by lazy-loading images and implementing pagination for lists over 50 items.
```
### The Silent Change
**Mistake:**
```plaintext wrap theme={null}
Clean this up.
```
No definition of what "clean" means and no boundaries on what should stay the same.
**Fix:**
```plaintext wrap theme={null}
Improve the code organization in the `utils` folder only:
- Refactor helper functions into separate files by category
- Add JSDoc comments to exported functions
- Do not change any function logic, parameters, or return values
- Do not modify files outside the `utils` folder
```
Or with commands: `@utils/helpers.jsx refactor helper functions into separate files. Do not change function logic or parameters.`
### The Reverse Order
**Mistake:**
```plaintext wrap theme={null}
Add a submit button, then create a form with name and email fields above it.
```
Describes elements bottom-to-top instead of top-to-bottom.
**Fix:**
```plaintext wrap theme={null}
Create a form layout:
- Top: form title "Contact Us"
- Middle: name input field (required)
- Below name: email input field (required)
- Bottom: submit button labeled "Send Message"
```
### The Constraint Gap
**Mistake:**
```plaintext wrap theme={null}
Update the header.
```
Too vague. No boundaries on what can be changed.
**Fix:**
```plaintext wrap theme={null}
Update only the header text color and font size:
- Change header text color to #1a1a1a
- Increase font size to 24px
- Do not change header layout, navigation links, logo, or any other styling
- Keep all existing functionality unchanged
```
Or with commands: `@components/header.jsx update only the text color and font size. Do not change layout or navigation.`
When a prompt is not working, check which S.I.M.P.L.E. principle it violates. Most mistakes fall into one of these categories: being too vague (**S**), asking for too much (**I**, **L**), missing context (**M**), or unclear structure (**E**).
## Prompting for integrations
When prompting Rocket to work with external services, being specific about names, keys, and configuration makes the difference between a working integration and a broken one.
### Stripe
Always include the exact product name, price, billing interval, and mode (test or live).
```plaintext Bad prompt wrap theme={null}
Add Stripe payments to my app.
```
```plaintext Good prompt wrap theme={null}
Add a Stripe checkout button for the "Pro Plan" at $29/month. Use test mode. On success, redirect to /dashboard?upgraded=true. On cancel, redirect back to /pricing. Show a loading state on the button while the session is being created.
```
**Key details to include:**
* Product or plan name (for example, "Pro Plan", "Starter Pack")
* Exact price and billing interval (for example, "$29/month", "$199/year")
* Test or live mode
* Success and cancel redirect URLs
* Whether it is a one-time payment or a subscription
### Supabase
Always name your tables, list the columns with their types, and specify which auth method you are using.
```plaintext Bad prompt wrap theme={null}
Connect my app to Supabase and show user data.
```
```plaintext Good prompt wrap theme={null}
Fetch data from the Supabase `profiles` table. Show columns: display_name (text), avatar_url (text), bio (text), and created_at (timestamp). Filter by the currently authenticated user's ID using auth.uid(). Display the data in an editable form on the /settings page.
```
**Key details to include:**
* Table name and column names with types
* Auth method (email/password, Google OAuth, magic link)
* RLS requirements (who can read, write, update, delete)
* Redirect paths after auth events
* Whether to use real-time subscriptions
### AI features
Always specify which model to use, the desired tone or style of output, and any context limits.
```plaintext Bad prompt wrap theme={null}
Add AI to generate descriptions for my products.
```
```plaintext Good prompt wrap theme={null}
Add a "Generate Description" button next to the product description field. When clicked, send the product name and category to OpenAI's gpt-4o model with the prompt: "Write a 2-sentence product description in a friendly, professional tone." Insert the result into the description field. Let the user edit the result before saving.
```
**Key details to include:**
* Model name (for example, gpt-4o, claude-3.5-sonnet, gemini-pro)
* Tone or style (for example, professional, casual, technical)
* Output format (for example, bullet points, paragraph, JSON)
* Maximum length or token limit
* Fallback behavior if the API call fails
### Email
Always specify the trigger event, recipient, subject line, and body content.
```plaintext Bad prompt wrap theme={null}
Send emails when things happen in my app.
```
```plaintext Good prompt wrap theme={null}
When a user completes checkout, send an order confirmation email using Resend. Recipient: the user's email from their profile. Subject: "Order #[order_id] confirmed". Body: list purchased items with name, quantity, and price, then show the total and a "View Order" button linking to /orders/[order_id]. Use the RESEND_API_KEY from environment variables.
```
**Key details to include:**
* Trigger event (for example, signup, purchase, password reset)
* Recipient (who gets the email)
* Subject line
* Body content and any dynamic data to include
* Which email service to use (Resend, SendGrid)
* API key location (environment variables)
### Quick comparison
| Integration | Bad prompt | Good prompt | Why it is better |
| :------------ | :-------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------- |
| **Stripe** | "Add payments" | "Add a Stripe checkout for the Pro Plan at \$29/month in test mode, redirecting to /success on completion" | Specifies plan, price, mode, and redirect |
| **Supabase** | "Save data to the database" | "Insert a new row into the `tasks` table with columns title (text), status (text), and user\_id (uuid) from the task creation form" | Names the table, columns, and types |
| **AI** | "Use AI to help users" | "Add a summarize button that sends article content to OpenAI gpt-4o and returns 3 bullet points in a professional tone" | Names the model, output format, and tone |
| **Email** | "Send notification emails" | "When a team member is invited, send an email via Resend with subject 'You have been invited to \[team\_name]' and an accept button linking to /invite/\[token]" | Specifies trigger, subject, body, and service |
| **Analytics** | "Add tracking" | "Track a 'signup\_completed' GA4 event with parameters signup\_method and plan\_name when a user finishes registration" | Names the event, parameters, and trigger |