> ## Documentation Index > Fetch the complete documentation index at: https://docs.lumi.new/llms.txt > Use this file to discover all available pages before exploring further. # Best Practices > Get up to speed quickly and avoid common pitfalls when building on Lumi. Getting the most out of Lumi, whether you are a new or experienced user, involves setting up a solid foundation, mastering prompt engineering, and leveraging its various tools and modes effectively. By following these guidelines, you can accelerate your development process and avoid common pitfalls. ## Prompting Best Practices ### **1. Mastering Prompt Engineering for Better Output:** Treat the AI as your engineering partner; it only knows what you explicitly tell it. * **Clarity and Verbosity:** **Clear and verbose prompts lead to superior output**. Be specific, mentioning exact pages (e.g., `/dashboard`) and expected behaviours. Use natural language for your requests, such as ```mdx expandable theme={null} I want users with the role Investor to access this component, but not Admins. ``` * **Visual Aids:** **Add screenshots, especially when describing bugs or UX issues**. This provides visual context that words alone might miss. * **Guardrails and Limitations:** Tell the AI **what not to touch**. For instance, you might instruct: ```mdx expandable theme={null} Do not edit /shared/Layout.tsx. ``` * **Repetition for Retention:** AI's memory can be limited, so **repeat important instructions across prompts** if necessary. * **Break Down Complex Tasks:** Avoid trying to implement multiple things simultaneously. **Break your work into smaller, testable chunks**. Use Discuss Mode between each step to validate before proceeding. A useful template for feature breakdown includes: ```mdx expandable theme={null} Create the new page, Add UI layout, Connect the data, Add logic + edge cases, Test per role. ``` * **Role-Specific Instructions:** If your application supports multiple user roles, **always define which role the prompt applies to**. This helps prevent bugs arising from shared logic or components. For example: ```mdx expandable theme={null} As an Investor, I want to view the company dashboard, but I shouldn’t be able to edit it. Please isolate this feature to the Investor role only. ``` ### **2. Leverage Discuss Mode Frequently** Discuss Mode is your AI co-pilot, designed for debugging, brainstorming, and planning implementations **without immediately altering your code**. * **When to use it:** Switch to Discuss Mode after 2-3 failed "Try to Fix" attempts, when debugging complex logic or database issues, or when planning new features. You can prompt it to ```mdx expandable theme={null} "Suggest 3 ways to implement X". ``` * **Workflow Recommendation:** Some users find it effective to **spend 60-70% of their time in Discuss Mode**, only clicking "Implement the plan" once fully satisfied. This approach enhances output consistency and prevents unintended edits. * **Controlled Interaction:** To avoid unwanted code execution, use prompts like "Investigate but don’t write code yet" or "Suggest 3 ways to solve this without changing anything". This maintains control in your hands. * **Escaping AI Loops:** If the AI enters a "loop" of patching broken code, switch to Discuss Mode, paste a screenshot of the error, and prompt: ```mdx expandable theme={null} "Please investigate this without breaking other features. If needed, revert to the last working version and fix from there". ``` ### **3. Remix as a Last Resort.** Sometimes, starting over takes less time, especially when stuck in a development quagmire. * **What Remixing Does:** Remix creates a **clean copy of your project at T=0**. You can then rebuild with improved prompts and clearer knowledge, using your old project purely as a reference. * **When to Remix:** This is useful if you are stuck in a buggy loop, want to restart cleanly while preserving history, or need to disconnect a database service like Supabase and try a new approach. ### **4. Cultivate Patience and Calm** AI development can be unpredictable; magical one moment, frustrating the next. The final stages of a build often take the longest. * **Golden Rule:** **Take your time with prompts, re-check everything, and break down work into small, testable blocks**. Precision in your inputs directly correlates with the quality of your outputs. ### **5. Bonus Tips for Enhanced Workflow** * **"I am frustrated..." Pattern:** Employ the "I am frustrated…" prompt pattern to help the AI focus better. * **Post-Edit Checks:** After any major edit, **always recheck multiple roles and their behaviours**, particularly for conditional logic. * **Fallback Versions:** Store stable versions as fallbacks for quick debugging. * **Role-Specific Components:** To avoid bugs from overly generic logic, prompt the AI to ```mdx expandable theme={null} "Create a component specifically for [role X] and do not reuse shared components unless clearly scoped". ``` ## Prompt Library – Strategies and Examples The prompt library provides a collection of reusable prompt patterns and examples for common development scenarios with Lumi's AI. Think of these as templates to adapt for your projects. 1. **Starting Projects** * **When to use:** At the very beginning of a project to help the AI understand high-level requirements and build the foundation. It acts as your initial project brief. * **How to use:** Outline the application type, key technologies (frontend, backend, services), and primary features. Direct the AI on where to begin, typically the main page or a crucial feature. ```mdx expandable theme={null} "I need a task management application with: - Tech Stack: Next.js frontend, Tailwind CSS for styling, Supabase for auth and database. - Core Features: Project and task creation, assigning tasks to users, due date reminders, and a dashboard overview. Start by building the main dashboard page, containing: - A header with navigation, - A list of projects with their status, - and a button to create a new project. Provide dummy data for now, and ensure the design is clean and responsive". ``` 2. **UI/UX Design Enhancements** * **When to use:** To **refine the visual appeal** of your application without altering its functionality. This includes polishing the UI, adjusting layouts, or implementing a specific design style. * **How to use:** Clearly define the scope of design changes and **emphasise that functionality must remain untouched**. Guide the AI on the desired aesthetic (e.g., modern, minimalist). Address multiple changes one at a time and mention any UI parts that should not have their logic altered. ```mdx expandable theme={null} The app UI should be improved, without changing any functionality. - Keep all existing logic and state management as is. - Visual Enhancements: Update the styling of the dashboard page: use a modern card design for each project listing, improve the color scheme for better contrast, and increase padding for a cleaner layout. - Ensure these changes do not break any functionality or data flow. Goal: purely cosmetic improvements for a more polished look, with the app behaving exactly as before. ``` 3. **Ensuring Responsiveness** * **When to use:** When your app needs to adapt its layout across various screen sizes (mobile, tablet, desktop). Ideal as a final pass on UI-heavy tasks. * **How to use:** **Emphasise a mobile-first approach** and instruct the AI to ensure responsiveness across standard breakpoints. Mention specific CSS framework guidelines (e.g., Tailwind's `sm, md, lg, xl` breakpoints) and request the avoidance of fixed widths. ```mdx expandable theme={null} Our app needs to be fully responsive across mobile, tablet, and desktop. - Follow a mobile-first strategy: prioritize the layout for small screens, then adjust for larger screens. - Use modern UI/UX best practices for responsive design. (For Tailwind CSS, use the standard breakpoints sm, md, lg, xl – no custom breakpoints unless necessary.) - Ensure every page (especially the dashboard and project detail pages) reflows properly on a small screen: elements should stack or resize as needed, text should remain readable, and no content should overflow off-screen. - Do not change the core design or functionality, just make sure it flexibly adapts to different screen sizes. After making changes, please double-check the layout at iPhone 12 dimensions and a typical desktop width. ``` 4. **Refactoring Code** * **When to use:** Periodically, especially when code becomes messy or slow. Refactoring improves code structure, readability, or performance **without altering its external behaviour**. * **How to use:** Identify the scope (file, feature, or codebase). For specific files, prompt: "Refactor this file for clarity and efficiency, but **do not alter its functionality or output**". Specify focus areas like reducing duplication or simplifying logic. For larger refactors, ask the AI to plan in steps or audit the code first. ```mdx expandable theme={null} Refactor the ProjectList component file, but keep its behaviour and UI exactly the same. Goals: - Improve the code structure and readability (simplify complex functions, break into smaller ones if needed). - Remove any unused variables or imports. - Ensure the file follows best practices and is well-documented. Do not introduce any new features or change how the component works for the user – this is purely a code cleanup for maintainability. If any part of the code is unclear, add a brief comment for clarification. ``` 5. **App Types and Features** Lumi can assist with a wide variety of application types and features. Examples include: ```mdx expandable theme={null} E-commerce Store: Product listing, search, filtering, cart, checkout, user accounts. ``` ```mdx expandable theme={null} CMS: Admin dashboard, content creation/editing/publishing, rich text, image uploads, SEO. ``` ```mdx expandable theme={null} Project Management: Task boards, lists, cards, assignment, due dates, drag-and-drop. ``` ```mdx expandable theme={null} Social Media Feed: Posts, comments, likes, sharing, user profiles, notifications, infinite scrolling. ``` ```mdx expandable theme={null} Analytics Dashboard: Various chart types, data filtering, date range selection, exportable reports. ``` ```mdx expandable theme={null} SaaS Application Starter: User authentication, subscription management, settings, dashboard, role-based access. ``` ``` AI Chat Interface: Conversation history, typing indicators, message threading, feedback. ``` ```mdx expandable theme={null} AI Content Generation Tool: Generate content based on inputs, refinement options, saving, export. ``` ```mdx expandable theme={null} Recommendation Component: Based on user behaviour/preferences, feedback, explanation of recommendations. ``` ```mdx expandable theme={null} Personalisation System: Customisable UI, content recommendations, user control over personalisation. ``` 6. **Strategic Planning with AI** * **When to use:** Before starting a complex, multi-step implementation, or when you have a large feature that needs breaking down. Planning prompts allow you to **outline an approach before code is written**, saving credits and preventing misdirection. * **How to use:** Ask the AI for a plan or checklist. For example, "Outline a step-by-step plan for X" or "Before coding, list the steps you will take to implement Y". This is best done in Discuss Mode to avoid code execution. ```mdx expandable theme={null} Before writing any code, plan out the implementation of the new Notifications feature. - List each step required to add email notifications when a task is overdue. - Consider both frontend (UI changes, if any) and backend (creating scheduled checks or triggers) aspects. - Ensure the plan keeps the current functionality stable – we can’t break anything existing. - Provide the plan as an ordered list (1, 2, 3, ...), with a brief explanation of each step. Once you outline the plan, pause for review. Do not make any code changes yet.". The AI might respond with a plan such as: 1. Add a timestamp field to tasks. 2. Create a server-side function to check for overdue tasks. 3. Integrate email sending. 4. Update the UI for notification toggles. 5. Test the flow. ``` By diligently applying these best practices and utilising the prompt library, you will be well-equipped to develop sophisticated applications efficiently and effectively within Lumi.