Precise control from chat. Commands let you make targeted edits without describing everything from scratch. Use / for screen-aware shortcuts and @ for file-scoped changes.
Commands are only available on the web browser. They are not supported in the Rocket mobile app.
How commands work Both commands run from the chat input. Type / or @ to get started.
/ commands@ commandsWhat they do Screen-aware shortcuts that update the page you have open Target a specific file or folder to keep edits scoped How to trigger Type / in chat and browse the popup menu, or start typing to filter Type @ in chat and pick a file or folder from the picker Targeting Runs on the current open screen automatically Locks scope to your selected file or folder Best for Quick updates, layout fixes, content changes, integrations Precise edits to known files, isolated component changes
After either command runs, you’ll see a short summary and a preview link to review changes.
Save tokens: One specific / command beats a long description. Quoting exact text or naming areas avoids follow-up prompts.
/ commands
Open the screen you want to edit
Navigate to the page or screen you want to change. / commands automatically target whatever is currently open.
Type `/` in the chat input
A popup menu appears with all available commands. Browse the list or start typing to filter.
Select a command and add details
Pick a command from the menu, then describe what you want using natural language. Reference sections, elements, or quote exact text.
Phrasing patterns Replace in place:
replace [thing] in [area] with [new thing]
Insert at location: Edit by text match:
change “Old text” to “New text” in [area]
Examples:
/Update Content change "Get started" to "Launch now" in hero section/Remove Element testimonial card three in reviews section/Generate Image replace team photo in About section with a modern workspace photo/Fix Layout Issues in pricing grid
Available / commands Use this catalog to see which / commands each category offers from chat, organized by app type and intent.
Web Projects
Mobile Projects
Brand & Identity
Layout & Structure
Quick Fixes
Animations & Effects
AI Features
Integrations
Language Features
SEO
GEO
Accessibility
Privacy and compliance
Purpose:
Replace the app logo across all pages.Usage:
Attach the logo file first, then run the /Update App Logo command.Examples:
/Update App Logo/Update App Logo use the logo from the attached file Transparent PNGs work well for logos.
Purpose:
Change the app name in titles, UI, and metadata.Examples:
/Update App Name Nova Suite/Update App Name Atlas For custom text blocks that still show the old name, use /Update Content.
Purpose:
Apply a new color scheme across your entire web app.Examples:
/Change App Theme switch to a light theme with navy primary and soft gray background/Change App Theme primary color #4F46E5 and accent #F97316 If colors look off after a big change, follow up with /Fix Theme Switching.
Purpose:
Add coordinated light and dark theme options to your app.Examples:
/Add Light/Dark Theme/Add Light/Dark Theme with higher contrast dark mode for text and buttons Use /Fix Theme Switching if toggling between modes does not update all areas.
Purpose:
Replace text, placeholders, or branding in the current page.Examples:
/Update Content change "Get started" to "Launch now" in hero section/Update Content change hero title to "Welcome to Rocket" in hero section/Update Content change all CTA buttons to "Buy Now" in pricing section/Update Content change pricing tier names to Starter, Growth, Scale in pricing section
Purpose:
Replace an existing UI element with a different element type on the current page.Examples:
/Change Element change hero image to video in hero section/Change Element change secondary button to a text link in footer
Purpose:
Insert a new UI element into the current page.Examples:
/Add Element add testimonial card under "What our customers say" in reviews section/Add Element add sticky CTA button in header that links to pricing section
Purpose:
Delete UI elements or sections with automatic layout reflow.Examples:
/Remove Element hero section/Remove Element footer/Remove Element announcement bar/Remove Element image row under "Features"
Purpose:
Delete an entire screen from your app, including its route and navigation references.Examples:
/Remove Screen delete the About page/Remove Screen remove onboarding screen
/Restructure Screen Layout
Purpose:
Restructure the layout of the current page to a different design pattern.Examples:
/Restructure Screen Layout change pricing section to a three column grid/Restructure Screen Layout turn hero into split layout with text on left and image on right
Purpose:
Automatically fix spacing, alignment, positioning, and responsiveness issues on the current page.Examples:
/Fix Layout Issues/Fix Layout Issues for mobile breakpoints/Fix Layout Issues in pricing grid/Fix Layout Issues for tablet and mobile breakpoints
Purpose:
Resolve navigation and routing problems in your web app.Examples:
/Fix Navigation Issues in header navigation/Fix Navigation Issues in sidebar menu for dashboard routes/Fix Navigation Issues for broken links in the footer
Purpose:
Fix problems when switching between light and dark mode.Examples:
/Fix Theme Switching for navbar and footer/Fix Theme Switching on dashboard pages where text stays dark on dark background
Purpose:
Break large files into smaller modules and clean up structure for specified files.Examples:
/Organize Code in src/components/dashboard.tsx/Organize Code for auth related files in src/auth
Purpose:
Add smooth animations between pages across your web app.Examples:
/Add Page Transitions slide in from right for all marketing pages/Add Page Transitions fade between dashboard and settings pages
Purpose:
Create an AI generated image and place it by naming the destination.Examples:
/Generate Image add hero banner with soft gradient sky to hero section/Generate Image replace product visual in hero section with a sleek abstract render/Generate Image replace image in pricing card A with a minimal 3D icon/Generate Image replace team photo in About with an abstract 3D shape (include alt: "Our team values") Use one clear visual idea per command. Include alt text where it improves accessibility.
/Suggest What to Build Next
Purpose:
Get AI recommendations for what to build next based on your current app.Examples:
/Suggest What to Build Next based on current dashboard and auth flows/Suggest What to Build Next to improve onboarding and first session experience
/Add Supabase Authentication
Purpose:
Add a complete authentication system with Supabase, including login, signup, profile, and password reset.Examples:
/Add Supabase Authentication set up login, signup, and forgot password/Add Supabase Authentication add auth screens to this app Make sure your Supabase project is already connected in Rocket before running this command.
/Add Social Authentication
Purpose:
Add social sign in options using OAuth providers.Examples:
/Add Social Authentication with Google and GitHub/Add Social Authentication add Google sign in button to login page
/Fix Supabase Authentication Issues
Purpose:
Automatically diagnose and fix common Supabase authentication problems.Examples:
/Fix Supabase Authentication Issues/Fix Supabase Authentication Issues for users who can sign up but cannot log in
Purpose:
Set up one time checkout payments with Stripe.Examples:
/Add Stripe Payments create checkout for Pro subscription on pricing page/Add Stripe Payments add one time purchase flow for order page
Purpose:
Send automated email messages to users using Twilio powered email.Examples:
/Add Email Alerts send order confirmation emails after successful checkout/Add Email Alerts send weekly summary emails to active users
Purpose:
Send automated WhatsApp messages to users using Twilio.Examples:
/Add WhatsApp Messages send order status updates after purchase/Add WhatsApp Messages send appointment reminders from bookings page
Purpose:
Send automated SMS messages for verification and alerts using Twilio.Examples:
/Add Text Messages (SMS) send OTP codes on signup/Add Text Messages (SMS) send delivery updates to users
Purpose:
Add an AI powered chat assistant to your web app.Examples:
/Add AI Chatbot add support assistant widget on Help page/Add AI Chatbot add in app assistant on dashboard
Purpose:
Configure Google Analytics for page views, events, and user properties.Examples:
/Setup Google Analytics use measurement ID G-XXXXXXX/Setup Google Analytics track page views and signup button clicks on marketing pages
Purpose:
Place Google Adsense ad units throughout your web app.Examples:
/Setup Adsense add banner ad in blog sidebar/Setup Adsense add responsive ad unit at the end of article pages
Purpose:
Add right to left layout support for languages like Arabic and Hebrew.Examples:
/Add RTL Support apply RTL layout for all marketing pages/Add RTL Support enable RTL for dashboard while keeping admin language in English
Purpose:
Prepare your app for multiple languages and translation.Examples:
/Add Multiple Languages add English, Spanish, and French/Add Multiple Languages set up structure for future translations without changing layout
Purpose:
Analyze codebase and generate SEO report.Examples:
/Generate SEO Report/Generate SEO Report for marketing pages
/Improve SEO Optimizations
Purpose:
Implement SEO in the current codebase.Examples:
/Improve SEO Optimizations/Improve SEO Optimizations for landing page
Purpose:
Implement Generative Engine Optimization in the current codebase.Examples:
/Improve GEO And AEO/Improve GEO And AEO for blog and docs
/Generate GEO And AEO Report
Purpose:
Analyze codebase and generate GEO report.Examples:
/Generate GEO And AEO Report/Generate GEO And AEO Report for content pages
/Generate Accessibility Report
Purpose:
Audit codebase for WCAG 2.1 AA compliance and generate accessibility report.Examples:
/Generate Accessibility Report/Generate Accessibility Report for dashboard
/Improve Accessibility Audit
Purpose:
Implement WCAG 2.1 AA accessibility fixes in the current codebase.Examples:
/Improve Accessibility Audit/Improve Accessibility Audit for forms and navigation
/Implement Privacy Compliance
Purpose:
Implement privacy compliance infrastructure in the current codebase.Examples:
/Implement Privacy Compliance/Implement Privacy Compliance for user data and cookies
Purpose:
Analyze codebase and generate a privacy compliance report.Examples:
/Generate Privacy Report/Generate Privacy Report for data handling Brand & Identity
Layout & Structure
Quick Fixes
Animations & Effects
AI Features
Integrations
Language Features
Purpose:
Replace the app logo across all mobile screens.Usage:
Attach the logo file first, then run the /Update App Logo command.Examples:
/Update App Logo/Update App Logo use the logo from the attached file
Purpose:
Change the app name in titles, UI, and package metadata.Examples:
/Update App Name Nova Suite/Update App Name Atlas
Purpose:
Apply a new color scheme across your mobile app.Examples:
/Change App Theme switch to a dark theme with teal accents/Change App Theme primary color #0F766E and accent #F97316
Purpose:
Add light and dark theme options throughout your mobile app.Examples:
/Add Light/Dark Theme/Add Light/Dark Theme with high contrast dark mode for text and icons
Purpose:
Replace text, placeholders, or branding in the current mobile screen.Examples:
/Update Content change "Continue" to "Next" on onboarding screen/Update Content change CTA button text to "Start free trial" on home screen/Update Content change plan names to Starter, Growth, Scale on pricing screen
Purpose:
Replace an existing UI element with a different element type in the current screen.Examples:
/Change Element change text field to dropdown in filters section on home screen/Change Element change icon button to text button in header
Purpose:
Insert a new UI element into the current mobile screen.Examples:
/Add Element add floating action button on chat screen/Add Element add banner card above list on home screen
Purpose:
Delete UI elements or sections with automatic layout reflow.Examples:
/Remove Element hero section on onboarding screen/Remove Element image carousel under "Featured" on home screen
Purpose:
Delete an entire screen from your mobile app, including its route and navigation references.Examples:
/Remove Screen delete the Settings page/Remove Screen remove profile screen
/Restructure Screen Layout
Purpose:
Restructure the layout of the current screen to a different pattern.Examples:
/Restructure Screen Layout change settings screen to grouped list layout/Restructure Screen Layout arrange product cards in two column grid
Purpose:
Automatically fix spacing, alignment, and layout issues in the current screen.Examples:
/Fix Layout Issues on onboarding screen/Fix Layout Issues in bottom navigation bar/Fix Layout Issues for small devices
Purpose:
Resolve navigation and routing problems in your mobile app.Examples:
/Fix Navigation Issues in bottom tab bar/Fix Navigation Issues between profile and settings screens
/Fix Overflow and Scrolling Issue
Purpose:
Fix issues when switching between light and dark mode on mobile.Examples:
/Fix Theme Switching on settings screen/Fix Theme Switching for status bar and navigation bar colors
Purpose:
Improve touch targets and mobile interaction patterns on the current screen.Examples:
/Fix Touch Interactions on product cards in home screen/Fix Touch Interactions for primary CTA button in checkout
Purpose:
Split large mobile files into smaller modules and tidy structure.Examples:
/Organize Code in lib/screens/home.dart/Organize Code for shared widgets in lib/components
/Add Animations & Effects
Purpose:
Add animations and visual effects to UI elements in the current mobile screen.Examples:
/Add Animations & Effects add bounce effect on add to cart button when tapped/Add Animations & Effects add shimmer loading state for list items
Purpose:
Add smooth transitions between mobile screens across your app.Examples:
/Add Screen Transitions push from right when opening details screen/Add Screen Transitions fade between login and home screens
Purpose:
Create an AI generated image and place it in a named area of the current screen.Examples:
/Generate Image replace illustration on onboarding screen with a friendly welcome graphic/Generate Image add product preview image to top of details screen
/Suggest What to Build Next
Purpose:
Get AI suggestions for the next features or screens to add to your app.Examples:
/Suggest What to Build Next for this ecommerce app based on home and cart screens/Suggest What to Build Next to improve retention after onboarding
/Add Supabase Authentication
Purpose:
Add a complete Supabase powered auth flow to your mobile app.Examples:
/Add Supabase Authentication create login, signup, and forgot password screens/Add Supabase Authentication add auth screens and wire them to existing home screen
/Add Social Authentication
Purpose:
Add social sign in options like Google or Apple to your auth flow.Examples:
/Add Social Authentication with Google and Apple/Add Social Authentication add Google sign in button to login screen
/Fix Supabase Authentication Issues
Purpose:
Diagnose and fix common Supabase auth issues in your mobile app.Examples:
/Fix Supabase Authentication Issues/Fix Supabase Authentication Issues where users stay logged out after signup
Purpose:
Set up Stripe powered one time checkout flows in your mobile app.Examples:
/Add Stripe Payments create checkout for Pro subscription on pricing screen/Add Stripe Payments add one time purchase flow on order screen
Purpose:
Send automated email messages, such as confirmations or summaries, from your mobile app flows.Examples:
/Add Email Alerts send order confirmation emails after checkout/Add Email Alerts send weekly usage summary emails to active users
Purpose:
Send automated WhatsApp messages using Twilio triggered by in app events.Examples:
/Add WhatsApp Messages send order status updates after purchase/Add WhatsApp Messages send appointment reminders from bookings screen
Purpose:
Send automated SMS messages for verification codes and time sensitive alerts.Examples:
/Add Text Messages (SMS) send OTP codes on signup/Add Text Messages (SMS) send delivery status updates
Purpose:
Add right to left layout support for mobile screens.Examples:
/Add RTL Support apply RTL layout for all main screens/Add RTL Support enable RTL when app language is Arabic or Hebrew
Purpose:
Prepare your mobile app for multiple languages and translations.Examples:
/Add Multiple Languages add English, Spanish, and French/Add Multiple Languages set up language switching in settings screen @ commands
Trigger the picker
Start your message with @, or insert it anywhere in your sentence. The Files & Folders picker opens in chat.
Select your target
Click Files & Folders , search for your file or folder, and select it. Your selection appears in the chat input.
Write your instruction
Continue typing. The scope is locked to your selection.
Example patterns Restructure content:
@pages/faq.jsx reorder questions so payments and refunds appear first. keep answers unchanged.Improve guidance:
@pages/onboarding.jsx rewrite tips to be friendlier and shorter. keep the same steps.Replace visuals:
@assets/screenshots replace getting-started.png with the latest capture. update the caption to match.Clarify microcopy:
@components/empty-state rewrite the message to set expectations and add a single call to action.Localize a section:
@pages/about.jsx translate the team bio section to Spanish. keep names and roles in English.Guidelines Referencing elements Use clear terms like “hero section”, “footer”, “primary CTA button”, or “pricing image row”. Quote exact text for copy changes: "Get started" to "Launch now". For @ commands, use exact paths: @pages/home.tsx, @components/card, or @docs/faq.md.
Workflow tips Make content changes first. If reflow causes issues, run /Fix Layout Issues. State locations for clarity: “in hero”, “in pricing”, “navigation bar”. Keep instructions specific and atomic. Small, clear edits work best.
Troubleshooting Nothing changed:
Confirm you are on the correct screen
For text: Quote the exact phrase
For images: Name the area precisely
Mobile layout issues:
Try /Fix Layout Issues for mobile breakpoints
If problems persist: Add tablet breakpoint
Cannot find the right file (@ commands):
Start typing the exact name in the picker, including the folder path if you know it
Edit feels too broad (@ commands):
Split the request into smaller @ command messages, each scoped to a single file or folder
What’s next? 
