> ## Documentation Index
> Fetch the complete documentation index at: https://docs.rocket.new/llms.txt
> Use this file to discover all available pages before exploring further.

# Use commands

> Execute precise edits with Rocket.new slash and @ commands inside the Build editor.

export const LlmsDirective = () => <blockquote className="llms-directive">
    For the complete documentation index, see <a href="/llms.txt">llms.txt</a>.
    For a lightweight markdown version of this page, append .md to the URL.
  </blockquote>;

<LlmsDirective />

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](/getting-started/credits) than open-ended prompts. Quoting exact text or naming the area you want to change avoids follow-up messages.
</Note>

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

<Steps>
  <Step title="Open the screen you want to edit">
    Navigate to the page or screen you want to change. `/` commands automatically target whatever is currently open.
  </Step>

  <Step title="Type `/` in the chat input">
    A popup menu appears with all available commands. Browse the list or start typing to filter.

    <Frame caption="/ command menu open in chat">
      <img src="https://mintcdn.com/dhiwisepvtltd-5e04e6a4/SjTE8D-vvYrzhPjv/images/build-docs/editor/commands/slash/web-browser/slash-menu-light.webp?fit=max&auto=format&n=SjTE8D-vvYrzhPjv&q=85&s=f8b4867150dd140504b2a24c1d4af275" alt="Slash command menu open in Rocket chat showing available commands." className="theme-image light-image" width="1440" height="812" data-path="images/build-docs/editor/commands/slash/web-browser/slash-menu-light.webp" />

      <img src="https://mintcdn.com/dhiwisepvtltd-5e04e6a4/SjTE8D-vvYrzhPjv/images/build-docs/editor/commands/slash/web-browser/slash-menu-dark.webp?fit=max&auto=format&n=SjTE8D-vvYrzhPjv&q=85&s=50639cd3ca96fd3095f45995283d0078" alt="Slash command menu open in Rocket chat showing available commands." className="theme-image dark-image" width="1440" height="812" data-path="images/build-docs/editor/commands/slash/web-browser/slash-menu-dark.webp" />
    </Frame>
  </Step>

  <Step title="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.

    <Frame caption="Command applied with result in chat">
      <img src="https://mintcdn.com/dhiwisepvtltd-5e04e6a4/SjTE8D-vvYrzhPjv/images/build-docs/editor/commands/slash/web-browser/slash-applied-light.webp?fit=max&auto=format&n=SjTE8D-vvYrzhPjv&q=85&s=afdcd18c03291e20c007b41dae65b676" alt="Slash command result shown in chat after applying a command." className="theme-image light-image" width="1440" height="812" data-path="images/build-docs/editor/commands/slash/web-browser/slash-applied-light.webp" />

      <img src="https://mintcdn.com/dhiwisepvtltd-5e04e6a4/SjTE8D-vvYrzhPjv/images/build-docs/editor/commands/slash/web-browser/slash-applied-dark.webp?fit=max&auto=format&n=SjTE8D-vvYrzhPjv&q=85&s=a7d6ffaf8e397350e485b3bd0ab1e4a6" alt="Slash command result shown in chat after applying a command." className="theme-image dark-image" width="1440" height="812" data-path="images/build-docs/editor/commands/slash/web-browser/slash-applied-dark.webp" />
    </Frame>
  </Step>
</Steps>

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

<Tabs>
  <Tab title="Web">
    <Tabs>
      <Tab title="Brand & Identity">
        <AccordionGroup>
          <Accordion title="/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.
            </Note>
          </Accordion>

          <Accordion title="/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`.
            </Note>
          </Accordion>

          <Accordion title="/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`.
            </Note>
          </Accordion>

          <Accordion title="/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.
            </Note>
          </Accordion>

          <Accordion title="/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.
            </Note>
          </Accordion>
        </AccordionGroup>
      </Tab>

      <Tab title="Layout & Structure">
        <AccordionGroup>
          <Accordion title="/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`
          </Accordion>

          <Accordion title="/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`
          </Accordion>

          <Accordion title="/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`
          </Accordion>

          <Accordion title="/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"`
          </Accordion>

          <Accordion title="/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`
          </Accordion>

          <Accordion title="/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`
          </Accordion>
        </AccordionGroup>
      </Tab>

      <Tab title="Quick Fixes">
        <AccordionGroup>
          <Accordion title="/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`
          </Accordion>

          <Accordion title="/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`
          </Accordion>

          <Accordion title="/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`
          </Accordion>

          <Accordion title="/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.
            </Note>
          </Accordion>

          <Accordion title="/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`
          </Accordion>
        </AccordionGroup>
      </Tab>

      <Tab title="Animations & Effects">
        <AccordionGroup>
          <Accordion title="/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`
          </Accordion>
        </AccordionGroup>
      </Tab>

      <Tab title="AI Features">
        <AccordionGroup>
          <Accordion title="/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.
            </Note>
          </Accordion>

          <Accordion title="/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`
          </Accordion>

          <Accordion title="/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`
          </Accordion>
        </AccordionGroup>
      </Tab>

      <Tab title="Connectors">
        <Tabs>
          <Tab title="Supabase">
            <AccordionGroup>
              <Accordion title="/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`
              </Accordion>

              <Accordion title="/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.
                </Note>
              </Accordion>

              <Accordion title="/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`
              </Accordion>

              <Accordion title="/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`
              </Accordion>
            </AccordionGroup>
          </Tab>

          <Tab title="Stripe">
            <AccordionGroup>
              <Accordion title="/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`
              </Accordion>
            </AccordionGroup>
          </Tab>

          <Tab title="Resend">
            <AccordionGroup>
              <Accordion title="/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`
              </Accordion>
            </AccordionGroup>
          </Tab>

          <Tab title="Twilio">
            <AccordionGroup>
              <Accordion title="/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`
              </Accordion>

              <Accordion title="/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`
              </Accordion>
            </AccordionGroup>
          </Tab>

          <Tab title="AI Chatbot">
            <AccordionGroup>
              <Accordion title="/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`
              </Accordion>
            </AccordionGroup>
          </Tab>

          <Tab title="Google Analytics">
            <AccordionGroup>
              <Accordion title="/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`
              </Accordion>
            </AccordionGroup>
          </Tab>

          <Tab title="Adsense">
            <AccordionGroup>
              <Accordion title="/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`
              </Accordion>
            </AccordionGroup>
          </Tab>

          <Tab title="Mixpanel">
            <AccordionGroup>
              <Accordion title="/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`
              </Accordion>
            </AccordionGroup>
          </Tab>

          <Tab title="Airtable">
            <AccordionGroup>
              <Accordion title="/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`
              </Accordion>
            </AccordionGroup>
          </Tab>

          <Tab title="Notion & Docs">
            <AccordionGroup>
              <Accordion title="/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]`
              </Accordion>

              <Accordion title="/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]`
              </Accordion>

              <Accordion title="/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]`
              </Accordion>

              <Accordion title="/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]`
              </Accordion>

              <Accordion title="/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]`
              </Accordion>

              <Accordion title="/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]`
              </Accordion>
            </AccordionGroup>
          </Tab>

          <Tab title="Linear">
            <AccordionGroup>
              <Accordion title="/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]`
              </Accordion>
            </AccordionGroup>
          </Tab>

          <Tab title="CMS">
            <AccordionGroup>
              <Accordion title="/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`
              </Accordion>

              <Accordion title="/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`
              </Accordion>
            </AccordionGroup>
          </Tab>

          <Tab title="Email">
            <AccordionGroup>
              <Accordion title="/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`
              </Accordion>

              <Accordion title="/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`
              </Accordion>

              <Accordion title="/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`
              </Accordion>

              <Accordion title="/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`
              </Accordion>
            </AccordionGroup>
          </Tab>

          <Tab title="Scheduling">
            <AccordionGroup>
              <Accordion title="/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`
              </Accordion>
            </AccordionGroup>
          </Tab>

          <Tab title="Forms">
            <AccordionGroup>
              <Accordion title="/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`
              </Accordion>
            </AccordionGroup>
          </Tab>
        </Tabs>
      </Tab>

      <Tab title="Language Features">
        <AccordionGroup>
          <Accordion title="/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`
          </Accordion>

          <Accordion title="/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`
          </Accordion>
        </AccordionGroup>
      </Tab>

      <Tab title="SEO (Search Engine Optimization)">
        <AccordionGroup>
          <Accordion title="/Generate SEO Report">
            **Purpose:**
            Analyze codebase and generate SEO report.

            **Examples:**

            * `/Generate SEO Report`
            * `/Generate SEO Report for marketing pages`
          </Accordion>

          <Accordion title="/Improve SEO">
            **Purpose:**
            Implement SEO improvements across the current codebase.

            **Examples:**

            * `/Improve SEO`
            * `/Improve SEO for landing page`
          </Accordion>
        </AccordionGroup>
      </Tab>

      <Tab title="GEO (Generative Engine Optimization)">
        <AccordionGroup>
          <Accordion title="/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`
          </Accordion>

          <Accordion title="/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`
          </Accordion>
        </AccordionGroup>
      </Tab>

      <Tab title="Accessibility">
        <AccordionGroup>
          <Accordion title="/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`
          </Accordion>

          <Accordion title="/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`
          </Accordion>
        </AccordionGroup>
      </Tab>

      <Tab title="Privacy and compliance">
        <AccordionGroup>
          <Accordion title="/Implement Privacy Compliance">
            **Purpose:**
            Implement privacy compliance infrastructure in the current codebase.

            **Examples:**

            * `/Implement Privacy Compliance`
            * `/Implement Privacy Compliance for user data and cookies`
          </Accordion>

          <Accordion title="/Generate Privacy Report">
            **Purpose:**
            Analyze codebase and generate a privacy compliance report.

            **Examples:**

            * `/Generate Privacy Report`
            * `/Generate Privacy Report for data handling`
          </Accordion>
        </AccordionGroup>
      </Tab>
    </Tabs>
  </Tab>

  <Tab title="Mobile">
    <Tabs>
      <Tab title="Brand & Identity">
        <AccordionGroup>
          <Accordion title="/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`
          </Accordion>

          <Accordion title="/Update App Name">
            **Purpose:**
            Change the app name in titles, UI, and package metadata.

            **Examples:**

            * `/Update App Name Nova Suite`
            * `/Update App Name Atlas`
          </Accordion>

          <Accordion title="/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`
          </Accordion>

          <Accordion title="/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`
          </Accordion>
        </AccordionGroup>
      </Tab>

      <Tab title="Layout & Structure">
        <AccordionGroup>
          <Accordion title="/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`
          </Accordion>

          <Accordion title="/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`
          </Accordion>

          <Accordion title="/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`
          </Accordion>

          <Accordion title="/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`
          </Accordion>

          <Accordion title="/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`
          </Accordion>

          <Accordion title="/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`
          </Accordion>
        </AccordionGroup>
      </Tab>

      <Tab title="Quick Fixes">
        <AccordionGroup>
          <Accordion title="/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`
          </Accordion>

          <Accordion title="/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`
          </Accordion>

          <Accordion title="/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`
          </Accordion>

          <Accordion title="/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`
          </Accordion>

          <Accordion title="/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`
          </Accordion>

          <Accordion title="/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`
          </Accordion>
        </AccordionGroup>
      </Tab>

      <Tab title="Animations & Effects">
        <AccordionGroup>
          <Accordion title="/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`
          </Accordion>

          <Accordion title="/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`
          </Accordion>
        </AccordionGroup>
      </Tab>

      <Tab title="AI Features">
        <AccordionGroup>
          <Accordion title="/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`
          </Accordion>

          <Accordion title="/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`
          </Accordion>

          <Accordion title="/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`
          </Accordion>
        </AccordionGroup>
      </Tab>

      <Tab title="Connectors">
        <Tabs>
          <Tab title="Supabase">
            <AccordionGroup>
              <Accordion title="/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`
              </Accordion>

              <Accordion title="/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`
              </Accordion>

              <Accordion title="/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`
              </Accordion>

              <Accordion title="/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`
              </Accordion>
            </AccordionGroup>
          </Tab>

          <Tab title="Stripe">
            <AccordionGroup>
              <Accordion title="/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`
              </Accordion>
            </AccordionGroup>
          </Tab>

          <Tab title="Resend">
            <AccordionGroup>
              <Accordion title="/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`
              </Accordion>
            </AccordionGroup>
          </Tab>

          <Tab title="Twilio">
            <AccordionGroup>
              <Accordion title="/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`
              </Accordion>

              <Accordion title="/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`
              </Accordion>
            </AccordionGroup>
          </Tab>

          <Tab title="AI Chatbot">
            <AccordionGroup>
              <Accordion title="/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`
              </Accordion>
            </AccordionGroup>
          </Tab>
        </Tabs>
      </Tab>

      <Tab title="Language Features">
        <AccordionGroup>
          <Accordion title="/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`
          </Accordion>

          <Accordion title="/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`
          </Accordion>
        </AccordionGroup>
      </Tab>
    </Tabs>
  </Tab>
</Tabs>

<Divider />

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

<Steps>
  <Step title="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.

    <Frame caption="@ command picker in chat">
      <img src="https://mintcdn.com/dhiwisepvtltd-5e04e6a4/SjTE8D-vvYrzhPjv/images/build-docs/editor/commands/at/web-browser/at-picker-light.webp?fit=max&auto=format&n=SjTE8D-vvYrzhPjv&q=85&s=11d89e3746046ee7770ed475d5253a2d" alt="@ command picker open in Rocket chat showing Files & Folders and Tasks options." className="theme-image light-image" width="1440" height="812" data-path="images/build-docs/editor/commands/at/web-browser/at-picker-light.webp" />

      <img src="https://mintcdn.com/dhiwisepvtltd-5e04e6a4/SjTE8D-vvYrzhPjv/images/build-docs/editor/commands/at/web-browser/at-picker-dark.webp?fit=max&auto=format&n=SjTE8D-vvYrzhPjv&q=85&s=34f91cc76069ff66f4fd5a0e1f51be1a" alt="@ command picker open in Rocket chat showing Files & Folders and Tasks options." className="theme-image dark-image" width="1440" height="812" data-path="images/build-docs/editor/commands/at/web-browser/at-picker-dark.webp" />
    </Frame>
  </Step>

  <Step title="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.
  </Step>

  <Step title="Write your instruction">
    Continue typing. The scope is locked to your selection, so Rocket only modifies the targeted file or folder.
  </Step>
</Steps>

<Note>
  Selecting **Tasks** from the `@` picker links a previous task and brings its context into the current conversation. See [cross-task context](/getting-started/task/task-context) for details on how this works.
</Note>

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

<Divider />

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

<CardGroup cols={2}>
  <Card title="Chat with Rocket" icon="messages" href="/build/editor/chat">
    Use chat alongside commands for full control over your Build project.
  </Card>

  <Card title="Visual edit" icon="arrow-pointer" href="/build/editor/visual-edit">
    Click any element to change it directly without writing a prompt.
  </Card>

  <Card title="Code tab" icon="code" href="/build/editor/code">
    Browse and edit your project source files directly.
  </Card>

  <Card title="Versions" icon="clock-rotate-left" href="/build/editor/versions">
    Compare, roll back, and launch specific versions of your app.
  </Card>
</CardGroup>