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

# Use commands

> Use slash and @ commands in the Rocket.new Build editor to target files, pin context, and trigger precise edits without long chat prompts.

Commands give you precise control over edits without writing long prompts. Type `/` to run screen-aware shortcuts on whatever page is open, or type `@` to lock edits to a specific file, folder, or task. Both run from the chat input and are only available in the web browser editor.

> [!NOTE]
>
> Commands use fewer [credits](https://dhiwisepvtltd-5e04e6a4.mintlify.site/getting-started/credits.md) than open-ended prompts. Quoting exact text or naming the area you want to change avoids follow-up messages.

## How commands work

| | `/` commands | `@` commands |
| :- | :- | :- |
| What they do | Screen-aware shortcuts that update the page you have open | Scope edits to a specific file, folder, or task |
| How to trigger | Type `/` in chat and browse or filter the popup menu | Type `@` in chat and pick a target from the picker |
| Targeting | Automatically targets the current open screen | Locks scope to your selected file, folder, or task |
| Best for | Layout fixes, content changes, theme updates, integrations | Precise edits to known files, isolated component changes |

After a command runs, you see a short summary and a preview link to review the changes.

## `/` commands

Slash commands automatically target whatever page or screen you have open. You do not need to specify a file.

**1. Open the screen you want to edit**

Navigate to the page or screen you want to change. `/` commands automatically target whatever is currently open.

**2. Type `/` in the chat input**

A popup menu appears with all available commands. Browse the list or start typing to filter.

![Slash command menu open in Rocket chat showing available commands.](https://mintlify.s3.us-west-1.amazonaws.com/dhiwisepvtltd-5e04e6a4/images/build/editor/commands/slash/web-browser/slash-menu-light.webp)

![Slash command menu open in Rocket chat showing available commands.](https://mintlify.s3.us-west-1.amazonaws.com/dhiwisepvtltd-5e04e6a4/images/build/editor/commands/slash/web-browser/slash-menu-dark.webp)

/ command menu open in chat

**3. Select a command and describe what you want**

Pick a command from the menu, then write your instruction in natural language. Reference sections, elements, or quote exact text for the most accurate result.

![Slash command result shown in chat after applying a command.](https://mintlify.s3.us-west-1.amazonaws.com/dhiwisepvtltd-5e04e6a4/images/build/editor/commands/slash/web-browser/slash-applied-light.webp)

![Slash command result shown in chat after applying a command.](https://mintlify.s3.us-west-1.amazonaws.com/dhiwisepvtltd-5e04e6a4/images/build/editor/commands/slash/web-browser/slash-applied-dark.webp)

Command applied with result in chat

### Phrasing patterns

These patterns work well with most `/` commands.

**Replace something:**

* `/Update Content change "Old text" to "New text" in [section name]`

**Insert something new:**

* `/Add Element add [element description] to [area]`

**Fix a specific issue:**

* `/Fix Layout Issues in [area or breakpoint]`

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

Browse the full command catalog below. Commands are organized by platform (Web or Mobile) and category.

**Web**

**Brand & Identity**

> **/Update App Logo**
>
> **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`
>
> > [!NOTE]
> >
> > Transparent PNGs work well for logos.

> **/Update App Name**
>
> **Purpose:**
> Change the app name in titles, UI, and metadata.
>
> **Examples:**
>
> * `/Update App Name Nova Suite`
>
> * `/Update App Name Atlas`
>
> > [!NOTE]
> >
> > For custom text blocks that still show the old name, use `/Update Content`.

> **/Change App Theme**
>
> **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`
>
> > [!NOTE]
> >
> > If colors look off after a big change, follow up with `/Fix Theme Switching`.

> **/Add Light/Dark Theme**
>
> **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`
>
> > [!NOTE]
> >
> > Use `/Fix Theme Switching` if toggling between modes does not update all areas.

> **/Generate SVG Illustration**
>
> **Purpose:**
> Create custom AI-generated SVG illustrations, hero visuals, section graphics, icons, and diagrams tailored to your app. SVGs are vector-based, so they scale to any size without losing quality.
>
> **Examples:**
>
> * `/Generate SVG Illustration replace the hero image with a custom drawing of a rocket launching from servers`
>
> * `/Generate SVG Illustration add a process flow illustration showing fresh farms to cleaning to factory processing`
>
> * `/Generate SVG Illustration create an animated notification bell icon with a gentle swing animation, duotone style, for the subscribe section`
>
> > [!NOTE]
> >
> > Describe the style (isometric, geometric, line art, gradient), intended placement (hero, section, icon), and colors for best results.

**Layout & Structure**

> **/Update Content**
>
> **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 (Call To Action) buttons to "Buy Now" in pricing section`
> * `/Update Content change pricing tier names to Starter, Growth, Scale in pricing section`

> **/Change Element**
>
> **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`

> **/Add Element**
>
> **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`

> **/Remove Element**
>
> **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"`

> **/Remove Screen**
>
> **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`

**Quick Fixes**

> **/Fix Layout Issues**
>
> **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`

> **/Fix Navigation Issues**
>
> **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`

> **/Fix Theme Switching**
>
> **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`

> **/Fix Hydration Errors**
>
> **Purpose:**
> Automatically fetch active errors from the running preview, filter by React hydration mismatch patterns, and apply targeted fixes to each affected file.
>
> **Examples:**
>
> * `/Fix Hydration Errors`
>
> * `/Fix Hydration Errors in the dashboard layout`
>
> * `/Fix Hydration Errors related to date formatting`
>
> > [!NOTE]
> >
> > Make sure the preview is running so Rocket can read the active error log. Works with Next.js, Remix, and any SSR React setup.

> **/Organize Code**
>
> **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`

**Animations & Effects**

> **/Add Page Transitions**
>
> **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`

**AI Features**

> **/Generate Image**
>
> **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")`
>
> > [!NOTE]
> >
> > 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`

> **/Migrate AI Integration**
>
> **Purpose:**
> Migrate old AI integrations to a new secure server-side architecture.
>
> **Examples:**
>
> * `/Migrate AI Integration`
> * `/Migrate AI Integration update all client-side AI calls to use server-side handlers`

**Connectors**

**Supabase**

> **/Add Phone Authentication**
>
> **Purpose:**
> Enable phone number login with OTP verification using Supabase Authentication.
>
> **Examples:**
>
> * `/Add Phone Authentication add phone OTP login to the signup screen`
> * `/Add Phone Authentication enable phone number sign in alongside email login`

> **/Add Supabase Authentication**
>
> **Purpose:**
> Add a complete authentication system with login, signup, profile, and password reset screens.
>
> **Examples:**
>
> * `/Add Supabase Authentication set up login, signup, and forgot password`
>
> * `/Add Supabase Authentication add auth screens to this app`
>
> > [!NOTE]
> >
> > 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`

**Stripe**

> **/Add Stripe Payments**
>
> **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`

**Resend**

> **/Add Email Alerts**
>
> **Purpose:**
> Send automated email messages to users using Resend. Set up notifications for account updates, order confirmations, newsletters, or custom alerts.
>
> **Examples:**
>
> * `/Add Email Alerts send welcome email when user logs in to the system`
> * `/Add Email Alerts send order confirmation emails after successful checkout`

**Twilio**

> **/Add WhatsApp Messages**
>
> **Purpose:**
> Send automated WhatsApp messages to users using Twilio. Great for order updates, appointment reminders, and customer notifications.
>
> **Examples:**
>
> * `/Add WhatsApp Messages notify users to update product offers`
> * `/Add WhatsApp Messages send appointment reminders from bookings page`

> **/Add Text Messages (SMS)**
>
> **Purpose:**
> Send automated text messages (SMS) to users' phones using Twilio. Perfect for verification codes, order updates, and time-sensitive alerts.
>
> **Examples:**
>
> * `/Add Text Messages (SMS) send order confirmation after checkout`
> * `/Add Text Messages (SMS) send OTP codes on signup`

**AI Chatbot**

> **/Add AI Chatbot**
>
> **Purpose:**
> Add an AI powered chat assistant to your web app. You can specify any LLM (Gemini, Anthropic, OpenAI, or others).
>
> **Examples:**
>
> * `/Add AI Chatbot add support assistant widget on Help page using Anthropic`
> * `/Add AI Chatbot add in app assistant on dashboard`

**Google Analytics**

> **/Setup Google Analytics**
>
> **Purpose:**
> Configure Google Analytics for page tracking, event tracking, 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`

**Adsense**

> **/Setup Adsense**
>
> **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`

**Mixpanel**

> **/Add Analytics Tracking**
>
> **Purpose:**
> Track events, screen views, user identity, and funnels with Mixpanel.
>
> **Examples:**
>
> * `/Add Analytics Tracking identify users on login and track page views and button clicks`
> * `/Add Analytics Tracking track checkout funnel from cart to confirmation`

**Airtable**

> **/Add User Data to Airtable**
>
> **Purpose:**
> Save form submissions or user records directly to Airtable.
>
> **Examples:**
>
> * `/Add User Data to Airtable save contact form submissions to my base in the Leads table`
> * `/Add User Data to Airtable save new signups to Airtable Members table`

**Notion & Docs**

> **/Apply Review Feedback**
>
> **Purpose:**
> Read design or technical review comments from a Google Doc and apply them to the code.
>
> **Examples:**
>
> * `/Apply Review Feedback apply the design and tech review comments from this document [paste URL]`

> **/Generate Screens from Content**
>
> **Purpose:**
> Turn structured content from a Notion page, Google Doc, or Google Sheet into fully generated app screens.
>
> **Examples:**
>
> * `/Generate Screens from Content generate app screens from the FAQ entries and copy in this page [paste URL]`

> **/Enforce Business Rules**
>
> **Purpose:**
> Read rules from a document and convert them into tested, executable application logic.
>
> **Examples:**
>
> * `/Enforce Business Rules convert the pricing and commission rules in this document into executable logic [paste URL]`

> **/Sync Requirement Changes**
>
> **Purpose:**
> Re-read an updated spec and apply the changes to the relevant parts of the app.
>
> **Examples:**
>
> * `/Sync Requirement Changes re-read this page and apply any requirement changes to the codebase [paste URL]`

> **/Implement User Stories**
>
> **Purpose:**
> Read a list of user stories and generate corresponding feature code for each.
>
> **Examples:**
>
> * `/Implement User Stories implement the stories listed in this document [paste URL]`

> **/Build Feature from Spec**
>
> **Purpose:**
> Read a PRD or feature spec from Notion, Google Docs, or Linear and generate the full feature with screens and logic.
>
> **Examples:**
>
> * `/Build Feature from Spec build the feature described in this page [paste URL]`

**Linear**

> **/Implement Ticket**
>
> **Purpose:**
> Fetch a Linear ticket and generate code scoped strictly to the ticket requirements.
>
> **Examples:**
>
> * `/Implement Ticket implement the requirements in ticket ENG-123`
> * `/Implement Ticket [paste ticket URL or ID]`

**CMS**

> **/Add CMS Content**
>
> **Purpose:**
> Connect screens to a Strapi or Directus CMS collection with list, detail, and search views.
>
> **Examples:**
>
> * `/Add CMS Content show a paginated blog list and detail page from my articles collection`
> * `/Add CMS Content connect the products screen to my Strapi products collection`

> **/Add Dynamic Config**
>
> **Purpose:**
> Drive app content, feature flags, or settings from an external store like Airtable, Strapi, or Directus.
>
> **Examples:**
>
> * `/Add Dynamic Config load feature flags and copy from a remote table at app startup`
> * `/Add Dynamic Config drive homepage banner content from an Airtable base`

**Email**

> **/Add Email Sign-up**
>
> **Purpose:**
> Subscribe users to a mailing list on registration or opt-in using Mailchimp, Brevo, or Mailerlite.
>
> **Examples:**
>
> * `/Add Email Sign-up add an opt-in checkbox on registration and subscribe users to my audience`
> * `/Add Email Sign-up add newsletter sign up form in footer`

> **/Add Email Verification**
>
> **Purpose:**
> Generate OTP or magic link verification email flow using Brevo or Sendgrid.
>
> **Examples:**
>
> * `/Add Email Verification send a 6-digit OTP on signup`
> * `/Add Email Verification use a magic link to verify email`

> **/Add Transactional Email Notifications**
>
> **Purpose:**
> Set up instant emails like welcome messages, OTP codes, alerts, and order confirmations using Brevo or Sendgrid.
>
> **Examples:**
>
> * `/Add Transactional Email Notifications welcome email on signup, OTP verification, order confirmation`
> * `/Add Transactional Email Notifications password reset email`

> **/Add Marketing Email Notifications**
>
> **Purpose:**
> Set up marketing emails like newsletters, campaigns, and user engagement emails using Brevo, Mailchimp, or Mailerlite.
>
> **Examples:**
>
> * `/Add Marketing Email Notifications newsletter campaign and promotional email`
> * `/Add Marketing Email Notifications product update emails to active users`

**Scheduling**

> **/Add Booking & Scheduling**
>
> **Purpose:**
> Embed a Calendly booking widget or let users schedule meetings in app.
>
> **Examples:**
>
> * `/Add Booking & Scheduling embed my booking page inline on the contact page pre-filled with the user's email`
> * `/Add Booking & Scheduling add meeting scheduler to the onboarding flow`

**Forms**

> **/Add Form Collection**
>
> **Purpose:**
> Embed or trigger a Tally or Typeform form to collect user data.
>
> **Examples:**
>
> * `/Add Form Collection embed my contact form on the homepage as a popup`
> * `/Add Form Collection add feedback form after purchase confirmation`

**Language Features**

> **/Add RTL Support**
>
> **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`

> **/Add Multiple Languages**
>
> **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`

**SEO (Search Engine Optimization)**

> **/Generate SEO Report**
>
> **Purpose:**
> Analyze codebase and generate SEO report.
>
> **Examples:**
>
> * `/Generate SEO Report`
> * `/Generate SEO Report for marketing pages`

> **/Improve SEO**
>
> **Purpose:**
> Implement SEO improvements across the current codebase.
>
> **Examples:**
>
> * `/Improve SEO`
> * `/Improve SEO for landing page`

**GEO (Generative Engine Optimization)**

> **/Improve GEO And AEO**
>
> **Purpose:**
> Implement GEO (Generative Engine Optimization) and AEO (Answer 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`

**Accessibility**

> **/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`

**Privacy and compliance**

> **/Implement Privacy Compliance**
>
> **Purpose:**
> Implement privacy compliance infrastructure in the current codebase.
>
> **Examples:**
>
> * `/Implement Privacy Compliance`
> * `/Implement Privacy Compliance for user data and cookies`

> **/Generate Privacy Report**
>
> **Purpose:**
> Analyze codebase and generate a privacy compliance report.
>
> **Examples:**
>
> * `/Generate Privacy Report`
> * `/Generate Privacy Report for data handling`

**Mobile**

**Brand & Identity**

> **/Update App Logo**
>
> **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`

> **/Update App Name**
>
> **Purpose:**
> Change the app name in titles, UI, and package metadata.
>
> **Examples:**
>
> * `/Update App Name Nova Suite`
> * `/Update App Name Atlas`

> **/Change App Theme**
>
> **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`

> **/Add Light/Dark Theme**
>
> **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`

**Layout & Structure**

> **/Update Content**
>
> **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`

> **/Change Element**
>
> **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`

> **/Add Element**
>
> **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`

> **/Remove Element**
>
> **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`

> **/Remove 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`

**Quick Fixes**

> **/Fix Layout Issues**
>
> **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`

> **/Fix Navigation Issues**
>
> **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:**
> Resolve overflow and scrolling problems such as content being cut off or double scroll.
>
> **Examples:**
>
> * `/Fix Overflow and Scrolling Issue on transactions list screen`
> * `/Fix Overflow and Scrolling Issue for small height devices`

> **/Fix Theme Switching**
>
> **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`

> **/Fix Touch Interactions**
>
> **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`

> **/Organize Code**
>
> **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`

**Animations & Effects**

> **/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`

> **/Add Screen Transitions**
>
> **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`

**AI Features**

> **/Generate Image**
>
> **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`

> **/Migrate AI Integration**
>
> **Purpose:**
> Migrate old AI integrations to a new secure server-side architecture.
>
> **Examples:**
>
> * `/Migrate AI Integration`
> * `/Migrate AI Integration update all client-side AI calls to use server-side handlers`

**Connectors**

**Supabase**

> **/Add Phone Authentication**
>
> **Purpose:**
> Enable phone number login with OTP verification using Supabase Authentication.
>
> **Examples:**
>
> * `/Add Phone Authentication add phone OTP login to the signup screen`
> * `/Add Phone Authentication enable phone number sign in alongside email login`

> **/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`

**Stripe**

> **/Add Stripe Payments**
>
> **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`

**Resend**

> **/Add Email Alerts**
>
> **Purpose:**
> Send automated email messages triggered by your mobile app flows.
>
> **Examples:**
>
> * `/Add Email Alerts send welcome email when user logs in`
> * `/Add Email Alerts send order confirmation emails after checkout`

**Twilio**

> **/Add WhatsApp Messages**
>
> **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`

> **/Add Text Messages (SMS)**
>
> **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 order confirmation after checkout`

**AI Chatbot**

> **/Add AI Chatbot**
>
> **Purpose:**
> Add an AI powered chat assistant to your mobile app. You can specify any LLM (Gemini, Anthropic, OpenAI, or others).
>
> **Examples:**
>
> * `/Add AI Chatbot add support assistant on Help screen using Anthropic`
> * `/Add AI Chatbot add in app assistant on home screen`

**Language Features**

> **/Add RTL Support**
>
> **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`

> **/Add Multiple Languages**
>
> **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

Use `@` commands to scope edits to a specific file, folder, or task. This is useful when you know exactly which part of the codebase you want to change.

**1. Trigger the picker**

Start your message with `@`, or insert it anywhere in your sentence. The picker opens in chat with **Files & Folders** and **Tasks** options.

![@ command picker open in Rocket chat showing Files & Folders and Tasks options.](https://mintlify.s3.us-west-1.amazonaws.com/dhiwisepvtltd-5e04e6a4/images/build/editor/commands/at/web-browser/at-picker-light.webp)

![@ command picker open in Rocket chat showing Files & Folders and Tasks options.](https://mintlify.s3.us-west-1.amazonaws.com/dhiwisepvtltd-5e04e6a4/images/build/editor/commands/at/web-browser/at-picker-dark.webp)

@ command picker in chat

**2. Select your target**

Choose **Files & Folders** to scope edits to a file or folder, or choose **Tasks** to bring in context from a previous task. Your selection appears in the chat input.

**3. Write your instruction**

Continue typing. The scope is locked to your selection, so Rocket only modifies the targeted file or folder.

> [!NOTE]
>
> Selecting **Tasks** from the `@` picker links a previous task and brings its context into the current conversation. See [cross-task context](https://dhiwisepvtltd-5e04e6a4.mintlify.site/getting-started/task/task-context.md) for details on how this works.

### 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. Small, focused edits work best

### Troubleshooting

**Nothing changed:**

* Confirm you are on the correct screen
* For text changes: quote the exact phrase you want changed
* For image changes: name the area precisely

**Mobile layout issues:**

* Try `/Fix Layout Issues for mobile breakpoints`
* If problems persist, run `/Fix Layout Issues for tablet and mobile breakpoints`

**Cannot find the right file (`@` commands):**

* Start typing the exact file name in the picker. Include 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?

> **[Chat with Rocket](https://dhiwisepvtltd-5e04e6a4.mintlify.site/build/editor/chat.md)**
>
> Use chat alongside commands for full control over your Build project.

> **[Visual edit](https://dhiwisepvtltd-5e04e6a4.mintlify.site/build/editor/visual-edit.md)**
>
> Click any element to change it directly without writing a prompt.

> **[Code tab](https://dhiwisepvtltd-5e04e6a4.mintlify.site/build/editor/code.md)**
>
> Browse and edit your project source files directly.

> **[Versions](https://dhiwisepvtltd-5e04e6a4.mintlify.site/build/editor/versions.md)**
>
> Compare, roll back, and launch specific versions of your app.


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