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.
Commands use fewer credits 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.
Navigate to the page or screen you want to change. / commands automatically target whatever is currently open.
A popup menu appears with all available commands. Browse the list or start typing to filter.
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.
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.
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: 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
Describe the style (isometric, geometric, line art, gradient), intended placement (hero, section, icon), and colors for best results.
@ 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.
Start your message with @, or insert it anywhere in your sentence. The picker opens in chat with Files & Folders and Tasks options.
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.
Continue typing. The scope is locked to your selection, so Rocket only modifies the targeted file or folder.
Selecting Tasks from the @ picker links a previous task and brings its context into the current conversation. See cross-task context 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