Prompting Tips

These techniques go beyond the basics in Prompting Best Practices. They are for users who already know how the AI works and want to push the quality higher.

Advanced prompt patterns

Break large tasks into stages

Do not ask the AI to build an entire feature in one message. Break it into stages, verify each one before continuing.

Build a complete user settings page with profile editing,
password change, notification preferences, subscription management,
and account deletion: all with form validation, Supabase auth
integration, and responsive design.

Show me first, then I will adjust

When you are not sure exactly what you want, ask the AI to generate a first version and iterate:

"Create a pricing section with three tiers. Clean, modern design. I will tell you what to adjust after I see it."

This beats trying to specify every detail upfront.

Reference existing patterns

If your project already has a style you like, point the AI at it:

"Build a team members page. Follow the same card layout and style as /dashboard, but show team member avatars, names, roles, and a 'Remove' button."

The AI reads the referenced file and matches the patterns.

Using screenshots in prompts

You can paste or upload screenshots in the chat to communicate visual intent.

When this helps:

• "Here is a screenshot of the current state. The spacing between these two sections is too large. Reduce it to 16px."
• "I found this design on Dribbble (attached). Build something similar for our hero section."
• "Here is a screenshot of the bug. The dropdown is clipped by the container."

Screenshots eliminate ambiguity. Instead of describing what looks wrong, show it.

Debugging with AI

Include error messages

Copy the exact error and paste it into chat. The AI can usually diagnose from the error text alone.

"I get this error when submitting the form: TypeError: Cannot read properties of undefined (reading 'email'). The form is in src/components/contact-form.tsx."

Use the error stepper and /fix

Lyna captures runtime errors in the error panel. Click through the error stepper for the full stack trace, then reference it in your prompt. Type /fix to trigger a focused fix workflow where the AI reads the errors and resolves them.

Describe expected vs. actual behavior

"When I click 'Save', nothing happens. I expected it to save the form data to Supabase and show a success toast."

This framing gives the AI a clear target.

Use Ask mode for diagnosis

Switch to Ask Mode when you want the AI to explain what is happening without changing anything. Good for understanding unfamiliar code or tracing a bug through multiple files.

Getting better code quality

Set code standards in Knowledge

Add explicit standards to your project's Knowledge:

Code standards:
- Use TypeScript strict mode
- Use functional components with hooks
- Use Tailwind CSS for all styling, no inline styles
- Use descriptive variable names, no single-letter names
- Handle loading and error states for all async operations
- Add aria-labels to interactive elements

The AI follows these consistently across all conversations.

Ask for specific patterns

Be explicit:

• "Use useActionState for the form submission, not useState with manual fetch"
• "Store this in a MobX store, not React state"
• "Use server components for data fetching, client component only for the interactive parts"

Request error handling explicitly

The AI may skip error handling to keep responses short. If you need it, say so:

"Add proper error handling. Show a toast on failure, disable the button while loading, handle 429 rate limits."

Lyna-specific tips

Reference files with @

Type @ in the chat input to attach context:

• @file: Attach a specific file
• @folder: Attach a folder for broader context
• @url: Include content from a URL
• @git-changes: Show what changed recently
• @problems: Include current errors and warnings

Example:

"In @src/components/pricing-card.tsx, add annual pricing with a toggle to switch between monthly and annual."

This tells the AI exactly where to work. Context pills below the input confirm what is attached.

Pick the right mode

Switch modes with the mode selector or press Cmd/Ctrl + .. You can also type a slash command directly.

Adjust effort for complex tasks

The effort selector in the chat input controls how much reasoning the AI applies.

Combine visual editing with chat

A good workflow alternates between the two:

1. Use chat to scaffold a component
2. Use the visual editor to fine-tune spacing, colors, alignment
3. Use chat again to add interactivity or connect to data

Chat handles structure and logic well. The visual editor handles pixel-level adjustments.

Start fresh for new features

When moving to unrelated work, start a new chat with Cmd/Ctrl + L. This clears conversation context and prevents the AI from referencing irrelevant earlier messages.