Best practices

Build production-ready apps faster with Rocket. These best practices help you prompt clearly, fix issues confidently, and ship without surprises.

​

Overview

Rocket turns your ideas into apps in minutes. These practices help you work smarter, not harder. Structure prompts for better results, use preview tools to catch issues early, and polish your app before launch.

​

Key Concepts

• Clear prompts deliver better results: Include page names, what should appear, and what should stay untouched.
• Preview before you publish: Test layout, interactions, and mobile behavior before applying changes.
• Fix issues with built-in tools: Use the Fix it! button or chat interface to resolve problems quickly.

​

Benefits

• Faster builds: Clear prompts reduce iterations.
• Fewer errors: Preview catches issues before production.
• Confident debugging: Built-in tools fix problems without guesswork.
• Better results: Production-ready apps from day one.

​

Best Practices

​

1. Be clear with prompts

Rocket builds what you ask for. The clearer your instructions, the better the result. What to include:

• Exact page or screen name (e.g., /pricing, /auth/login)
• What should appear or happen
• What should stay untouched

​

2. Start with templates

Start your building journey with Rocket’s template library. Templates provide tested structure, proven layouts, and common patterns. How to find templates:

• Browse the template library from the homepage or profile menu
• Get suggestions in chat when your prompt matches a known use case

Why templates help:

• Free to use—no tokens required
• Preview screens and structure before committing
• Categories: Landing Pages, Dashboards, Mobile Apps, Internal Tools
• Customize from a solid foundation

Want to explore templates? Explore templates.

​

3. Define app structure first

Plan your app’s architecture before building. A clear structure saves time and prevents messy refactoring. What to plan:

• Main pages or screens and how they connect
• User flows and navigation paths
• Data models and relationships
• Key features and where they live
• Authentication and role-based access needs

Why it matters:

• Build with purpose instead of adding features randomly
• Navigation and routing make sense from day one
• Data flows are logical and easier to connect to Supabase or APIs
• Avoid major restructuring mid-build

​

4. Iterate in small steps

Build incrementally instead of creating everything at once. Small, focused changes are easier to test, debug, and refine. Why small steps work:

• Each change is easier to verify and fix
• Preview and test after each iteration
• Focus on one feature or screen at a time
• Faster feedback loop

How to iterate:

• Start with core functionality, then add features one by one
• Build one screen or component at a time
• Test each addition before moving to the next
• Save checkpoints along the way

​

5. Tweak with visual edit

Use Visual Edit to adjust layout, spacing, text, and element order. These changes are safe, fast, and token-free. Great for:

• Small copy changes
• Reordering blocks
• Fast design tweaks

​

6. Use commands and context

Slash commands (/) Type / in chat to open the command palette. Popular commands:

• /Generate image – Generate image without leaving Rocket
• /Set up Google Analytics – Wire GA tracking to measure usage
• /Fix layout issues – Straighten columns, spacing, or alignment
• /Update content – Refresh copy without hunting down every text block
• /Update App Logo – Update app logo across the project in one move

Browse all available commands to see 100+ options. Context targeting with @ Use @ to pick the exact file or component, then describe the change in plain language. Example: @header remove the hero image and add pricing cards.

​

7. Connect Supabase carefully

Supabase is powerful, but schema changes can break things if not managed properly. Play it safe:

• Connect Supabase after getting the desired output
• Avoid reverting versions with a live schema
• Test connected flows before publishing

​

8. Know when to rebuild

When fixes keep failing or logic becomes too complex, start fresh instead of untangling spaghetti code. Rebuild when:

• Multiple fixes keep failing or reintroduce bugs
• Logic is deeply nested and hard to reason about
• Schema reverts keep breaking your data model

​

9. Test on multiple devices and browsers

Your app should work everywhere. Test across different screens and browsers before publishing. What to check:

• Desktop browsers (Chrome, Safari, Firefox, Edge)
• Mobile devices (iOS and Android)
• Tablet layouts
• Different screen sizes and orientations

Why it matters:

• Catches layout issues early
• Ensures responsive design works
• Verifies interactions work across platforms
• Builds user confidence

​

10. Use the docs and ask for help

If you’re stuck, use the resources available. What to do:

• Browse nearby guides for examples or patterns
• Adjust the prompt and try a close variation
• Reach out in chat or the community for a second set of eyes

​

11. Additional pro tips

• Custom domain? Connect through Netlify when you’re ready to go live
• Low on tokens? Top up mid-cycle instead of changing plans
• Code ownership? You always own 100% of the output
• Slow generation? Break requests into smaller prompts and preview in batches
• Multiple roles? Mention the role in every command so Rocket scopes the change correctly