> ## Documentation Index
> Fetch the complete documentation index at: https://dhiwisepvtltd-5e04e6a4.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Core concepts

> Core prompting concepts for Rocket.new: writing clear intent, giving context, and building reusable patterns for reliable Solve and Build results.

> [!NOTE]
>
> 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](https://dhiwisepvtltd-5e04e6a4.mintlify.site/learn/guides/prompt-library.md). Running into issues? Check the [Debugging guide](https://dhiwisepvtltd-5e04e6a4.mintlify.site/learn/guides/debugging.md).

## 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**
>
> What the user can do (core actions)

> **Where**
>
> Where it lives (which screen, component, or flow)

> [!WARNING]
>
> 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.
```

> [!TIP]
>
> Use [@ commands](https://dhiwisepvtltd-5e04e6a4.mintlify.site/build/editor/commands.md) 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.

> **Zero-shot**
>
> **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.

> **Instructional**
>
> **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.

> **One-shot**
>
> **"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.

**1. Plan just enough**

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.
```

**2. Build in controlled steps**

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.
```

**3. Refine safely**

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.
```

> [!TIP]
>
> Use [`/` commands](https://dhiwisepvtltd-5e04e6a4.mintlify.site/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.
```

> [!WARNING]
>
> "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.
```

> [!WARNING]
>
> 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.
```

> [!WARNING]
>
> "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.
```

> [!WARNING]
>
> 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.
```

> [!WARNING]
>
> 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.
```

> [!WARNING]
>
> 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.
```

> [!WARNING]
>
> 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.`

> [!TIP]
>
> 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 |


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.