New to prompting? Start here with the simplest possible prompt:
Copy
Create a landing page with:- Hero section: headline "Welcome to [Your App Name]", subheadline, and primary CTA button "Get Started"- Features section: 3 feature cards in a row with icons, titles, and descriptions- Final CTA section before footerUse a clean, modern design with plenty of white space.
Copy this, replace [Your App Name] with your app name, and paste into Rocket. That’s it!
If you’re new to prompting, here’s how to use this library:
1
Start with a complete feature
Find a feature that matches what you want to build (like “Todo/Task management” or “User authentication”)
2
Copy the prompt
Click the copy button on any code block
3
Replace placeholders
Look for text in brackets like [DATABASE/STORAGE] and replace with your details:
[DATABASE/STORAGE] → “Supabase”, “Firebase”, or your API
[AUTH_PROVIDER] → “Supabase Auth”, “Firebase Auth”, or your auth service
[TABLE_NAME] → Your actual table name (e.g., “users”, “products”)
[FIELD_1], [FIELD_2] → Your actual field names
4
Paste into Rocket
Paste the customized prompt and watch it build
Don’t know what to replace? Start with the simplest version - remove the placeholder line entirely or use a generic value like “local storage” for [DATABASE/STORAGE]. You can always refine later.Quick edits instead? For small, targeted changes, use @ commands to scope edits to specific files or `/` commands for page-scoped operations like /Update Content or /Fix Layout Issues.Examples:
/Update Content change "[PLACEHOLDER]" to "[YOUR_VALUE]" in [SECTION]
/Fix Layout Issues for quick layout fixes
@[FILE_PATH] [specific edit instruction] for targeted changes
Create a [TYPE] app for [AUDIENCE].Core features: [FEATURE_1], [FEATURE_2], [FEATURE_3].Start by building [FIRST_SCREEN_OR_FLOW]:[Describe what should be on the first screen in 1-2 sentences].
Break down a complex feature into manageable steps before building.
Copy
Plan the steps needed to add [FEATURE] to this app.Include:- Frontend screens or components,- Data models or tables,- Any connections to other services (like payment processors, email services, etc.),- Edge cases we should consider.Format this as an ordered list I can tackle step by step.Don't implement anything yet.
Ready-to-use prompts for building entire features from scratch. Copy, customize placeholders, and paste.
Copy
Create a task management feature with:- Main screen: list of tasks with checkboxes, task text, and delete button- Add task: input field at top with "Add" button- Task states: show completed tasks with strikethrough, filter by "All", "Active", "Completed"- Task counter: show number of active tasks remaining- Data persistence: save tasks to [DATABASE/STORAGE] and load on page refresh- Empty state: show message when no tasks existUse a clean card-based layout with 16px spacing.
Build individual components to customize your features.
Copy
Add a primary call-to-action button to this screen:- Label: "[LABEL]"- Full-width on mobile, auto-width on desktop- Uses the app's primary colorPlace it [POSITION] (e.g. below the form, top-right of the card).Don't change any existing text or layout spacing.
Quick command alternatives for UI components:
Buttons & CTAs: /Update Content change "[LABEL]" to "[NEW_LABEL]" in [POSITION] or /Add Element add primary CTA button [POSITION]
Forms: /Fix Layout Issues in form section or @components/form.jsx add validation for [FIELD] without changing existing validation logic
Create a dashboard layout with:- A top header showing [TITLE] and [SECONDARY_ACTION] button.- A three-card row of metrics: [METRIC_1], [METRIC_2], [METRIC_3].- A main content area below with a table or list for [PRIMARY_DATA].Use a card-based layout with 16px padding, 8px rounded corners,and consistent spacing. Keep navigation and routes unchanged.
Connect your app to external services and platforms.
Need help with placeholders? See the Getting started section above for how to replace placeholders like [DATABASE/STORAGE], [AUTH_PROVIDER], and [TABLE_NAME].
Quick integration setup: Instead of writing full prompts, use `/` commands like /Add Supabase Authentication, /Add Stripe Payments, or /Add Email Alerts for faster integration setup.Examples:
/Add Supabase Authentication set up login, signup, and forgot password
/Add Stripe Payments create checkout for [PRODUCT] on pricing page
/Add Email Alerts send order confirmation emails after successful checkout
Copy
Connect this project to Supabase (if not already) and set upthe ability to create, read, update, and delete records in the `[TABLE_NAME]` table.Fields:- [FIELD_1] (type: [TYPE])- [FIELD_2] (type: [TYPE])- [FIELD_3] (type: [TYPE])Requirements:- List view that shows all records (with "next page" if there are many),- A form to create a new record,- Edit and delete actions for each row,- Loading and error states for all operations.Explain any new tables or policies you create as comments in the code.
Phase 3: Polish and improve. Use these to enhance visuals, responsiveness, performance, and accessibility.
Copy
Improve the visual hierarchy of this screen while keepingall logic and data exactly the same.Focus on:- Clear section headings,- Consistent font sizes for titles vs. body text,- Increasing spacing between unrelated sections,- Aligning labels and inputs for readability.Don't change any page connections, data sources, or how things are named.
Quick command alternatives for refinement:
Visual polish: /Fix Layout Issues or @components/card.jsx improve visual hierarchy by adjusting font sizes and spacing. Keep all logic unchanged.
Responsiveness: /Fix Layout Issues for mobile breakpoints or /Fix Layout Issues for tablet and mobile breakpoints
Loading & error states: @components/data-table.jsx add loading indicator while fetching data and error message with retry button if fetch fails.
Phase 4: Prepare for launch. Use these to get your app ready for deployment and production.
Copy
Review this project and outline a checklist to get it ready for launch:- Any missing loading/error states,- Screens that need empty states,- Performance concerns (like pages loading slowly),- Security or auth considerations,- Analytics or event tracking we should add.Return the checklist grouped into:- Must‑fix before launch,- Nice‑to‑have after launch.Don't implement changes yet - just give me the list.
