In this guide, you’ll learn how to:
Use / commands to execute precise actions on your current screen.
Browse and select commands from the popup menu.
Write effective command phrases using natural language references.
Why use / commands? Execute precise actions on your current screen with short commands. They automatically target the page you’re viewing, so you don’t need file paths. Perfect for quick fixes and common tasks while saving tokens.
What are / commands? Text-driven shortcuts that execute updates on the page you have open. Browse them from the popup menu or start typing after / to get suggestions.
How / commands help Without / commands:
Unclear instructions and extra back-and-forth
Layout issues after changes
Time spent digging through files
With / commands:
Page-scoped operations with natural phrasing
Fewer revisions and quicker outcomes
Optimum token usage
How they work Automatic targeting:
Commands run on the current open screen unless you specify otherwise.Natural references:
Use everyday language to describe sections and elements, or quote exact text.Screen switching:
Open a different screen first, then run your command.After a / 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.
Command 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.
Brand & Identity
Layout & Structure
Quick Fixes
Animations & Effects
AI Features
Integrations
Language Features
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 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 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".
Workflow tips Make content changes first. If reflow causes issues, run /Fix Layout Issues. State locations for clarity: “in hero”, “in pricing”, “navigation bar”.
Troubleshooting Nothing changed:
Confirm you’re 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
You did it! You now have a concise toolkit of / commands to execute precise changes with confidence.
