Make certain that all designs are completely responsive at every breakpoint, adopting a mobile-first strategy. Apply contemporary UI/UX best practices to define how components should adjust for varying screen sizes, utilizing ShadCN and Tailwind’s...

Before editing any code, create a phased plan for implementing responsiveness. Start with the largest layout components and progressively refine down to smaller elements and individual components. Ensure the plan includes clear steps for testing...

Here's the failing console log. Analyze the test case, investigate the error in auth flow, and suggest a solution after understanding the dependencies.

My app is not working anymore and the screen is blank. Here's the copy/paste from Dev tools console, can you fix the issue? Error occurred: TypeError: Q9() is undefined at https://example.lovable.app/assets/index-DWQbrtrQQj.js : 435 : 39117...

Analyze and optimize this user flow: [describe flow]. Suggest improvements for user experience, reduce friction points, implement progressive enhancement, and ensure accessibility throughout.

Set up a deployment pipeline for this application that includes staging and production environments, automatic database migrations, environment-specific configurations, and rollback capabilities.

Implement comprehensive error handling for this async function: [paste function]. Include retry logic, fallback mechanisms, proper error reporting, user-friendly error messages, and logging for debugging purposes.

Suggest a testing strategy for [component/feature] including what to test and how. Include unit tests for business logic, integration tests for data flow, and UI tests for critical user flows with best practices for mocking dependencies.

Refactor this large component into smaller, more manageable components: [paste component]. Extract reusable parts, implement proper prop passing, maintain state management, and ensure the refactoring doesn't break existing functionality.

Connect this Lovable project to GitHub and set up a good workflow for contributions. Include branch protection rules, PR templates, and CI/CD workflow configuration with automatic preview deployments.

Create a multi-step form wizard for collecting [describe data] with validation, progress tracking, the ability to save drafts, and a summary review before submission. Handle conditional form fields based on previous answers.

Implement a strategy for synchronizing offline data changes with a backend when connectivity is restored. Handle conflict resolution, optimistic UI updates, and provide visual indicators for sync status.

Create a set of interactive charts for [describe data/metrics] using Recharts. Include different visualization types (bar, line, pie), time period selection, drill-down capabilities, and responsive behavior.

Build a system for importing and exporting [describe data] in various formats (CSV, JSON, etc.). Include validation, progress indicators, error handling, and the ability to map fields during import.

Create a data table/grid for [describe data] with sorting, filtering, pagination, column resizing, and row selection. Include features for exporting data and customizing visible columns.

Implement a robust search feature for [describe content type] with filtering, sorting, and highlighting of matched terms. Include typeahead suggestions, recent searches, and proper handling of no-results scenarios.

Implement real-time data synchronization for [describe feature] using Supabase subscriptions. Handle connection management, graceful degradation when offline, and conflict resolution.

Create a Supabase Edge Function to handle [describe functionality] with proper error handling, input validation, and security checks. Include rate limiting and proper environment variable usage.

Create Row Level Security policies for a multi-tenant application with these tables: [list tables]. Implement proper user isolation, role-based access, and handle hierarchical data access with considerations for performance.

Create a service to fetch data from [API name] and implement caching, error retry logic, and request throttling. Set up proper TypeScript interfaces for the response data and handle API versioning gracefully.

Design a database schema for [describe your application] with these entity relationships: [describe relationships]. Include foreign key constraints, indexes for performance, and proper data types with considerations for scalability.

Enhance the visual appeal of this component: [paste component]. Add animations, improve spacing, create a polished look while maintaining accessibility standards and responsive behavior.

I want to **add Stripe payments** to the app. - Use **Stripe in test mode** for now. - We have a product in Stripe with ID `prod_12345` and a price ID `price_67890` (one-time purchase). - Implement a checkout button on the **Pricing page** that...

This prompt tells the AI to act as a planner. It asks for a sequenced plan to implement an “email notifications for overdue tasks” feature. We explicitly say not to code yet (so we’d run this in Chat mode or just trust that the AI will output a...

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

Please **focus only on the Dashboard page** for this change. - Do **not modify** the `LoginPage.tsx` or `AuthProvider.tsx` files at all (authentication is working well, and we want to keep it intact). - Concentrate your code edits on...

Create a smooth transition animation for [describe the element] when it [describe the action]. Use CSS transitions or Framer Motion, ensuring the animation works well across devices and doesn't harm performance.

Implement a data fetching pattern for [describe the data] using React Query. Include proper loading states, error handling, optimistic updates, and data synchronization strategies.

Create a form with validation for [describe form fields and validation rules]. Use react-hook-form with zod schema validation, proper error handling, and submission handling that includes loading states.

Optimize this React component to prevent unnecessary re-renders: [paste component]. Use memo, useMemo, and useCallback where appropriate. Add explanatory comments about why each optimization is needed.

Refactor this component to use React Context instead of prop drilling: [paste component]. Create a proper context provider with typed state and actions, and separate the business logic from UI rendering.

Create a custom React hook called use[Name] that handles [functionality]. It should handle proper state initialization, cleanup, memoization of values, and TypeScript typing. Include example usage and error handling.

Implement a system for personalizing the user experience based on behavior and preferences. Include customizable UI elements, content recommendations, and settings that allow users to control their personalization.

Create a dashboard that uses AI to analyze [describe data] and present insights in an accessible way. Include visualizations, plain-language explanations of trends, and the ability to ask questions about the data.

Enhance the search experience for [describe content] with AI-powered features like natural language understanding, semantic search, and intelligent ranking of results. Include search suggestions and auto-complete.

Implement a recommendation component for [describe items] based on user behavior and preferences. Include the ability to provide feedback on recommendations, see why items were recommended, and discover new options.

Build a tool that uses AI to generate [describe content type] based on user inputs and parameters. Include options to refine the generated content, save favorites, and export in different formats.

Create a chat interface with an AI assistant that helps users with [describe task/purpose]. Include conversation history, typing indicators, message threading, and the ability to provide feedback on AI responses.

Build a SaaS application starter with user authentication, subscription management, a settings page, and a basic dashboard. Include role-based access control, account management, and a well-structured architecture for future expansion.

Create an analytics dashboard with multiple chart types (bar, line, pie), data filtering options, date range selection, and exportable reports. Include responsive design and skeleton loading states for data fetching.

Build a social media feed component with posts, comments, likes, and sharing functionality. Include user profiles, follow/unfollow mechanics, and a notification system. Ensure the design is responsive and supports infinite scrolling.

Create a project management app with task boards, lists, and cards. Include features for task assignment, due dates, labels, comments, and progress tracking. Implement drag-and-drop functionality and user collaboration.

Build a basic CMS for managing blog posts or articles with an admin dashboard. Include features for creating, editing, and publishing content with rich text formatting, image uploads, and basic SEO management.

Create a starter e-commerce store with product listing, search, filtering, cart functionality, and checkout process. Include user accounts, order history, and basic product management. Focus on a clean, conversion-oriented UI.

I'm getting this error: [paste error]. Here's the relevant code: [paste code]. Can you help me understand what's causing it and how to fix it? Please explain why the solution works.

Suggest a folder structure for a [type] application with these features: [list features]. Include guidelines for organizing components, hooks, utilities, and types with proper separation of concerns.

Review this code and suggest improvements for readability, performance, and maintainability: [paste code]. Focus on TypeScript best practices, proper error handling, and adherence to React patterns.

Refactor the **ProjectList component file**, but **keep its behavior 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...

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

Review these components for accessibility issues and suggest improvements: [paste components]. Check for proper keyboard navigation, screen reader support, sufficient color contrast, and appropriate ARIA attributes.

Analyze and optimize the user flow for [describe task/goal]. Map out each step of the journey, identify friction points, and suggest UI improvements to create a more intuitive experience with fewer steps.

Add subtle, performant animations to this component to enhance user experience: [paste component]. Include enter/exit animations, hover states, and micro-interactions that provide feedback without being distracting.

Transform this desktop-only component into a mobile-first design with responsive breakpoints: [paste component]. Prioritize content and interactions for small screens first, then enhance for larger screens.

Design a responsive dashboard layout with [describe key metrics/widgets]. It should work well on mobile, tablet, and desktop with appropriate layout shifts. Include a sidebar navigation that collapses on mobile.

Create a comprehensive design system for my application with a color palette, typography scale, spacing system, and component variants. Include dark mode support and ensure all components are accessible (WCAG AA compliant).

Enhance the visual appeal of this component: [paste component]. Add animations, improve spacing, create a polished look while maintaining accessibility standards and responsive behavior.

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

Explain how this function works in simple terms, highlighting its inputs, outputs, and any side effects: [paste function]. What edge cases does it handle or miss? How could it be improved?

Create a new component called [ComponentName] with these features: [list features]. Make it responsive and accessible with proper keyboard navigation. Include proper TypeScript typings for props, and use Tailwind for styling.

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

Debugging doesn’t have to be frustrating. Lovable provides powerful tools to auto-fix errors, analyze problems, and iterate efficiently. By following structured prompting techniques, using images, and leveraging AI-driven debugging, you can...

- UI-related problems: Upload screenshots and ask, - **prompt** Why is this UI behaving this way? What’s the best fix? - API integration issues: Ensure you’re using the latest API schema and that backend connections are correctly set up. -...

- Being More Specific – Describe the problem in detail, including expected vs. actual results. - Using Images – Screenshots help AI understand UI-based issues. - Asking Lovable for Debugging Help – Example: - What solutions have been tried so...

- Minor Errors – Investigate thoroughly before making changes. - Persistent Errors – Stop changes and re-examine dependencies. - Major Errors – If necessary, rebuild the flow from scratch while documenting findings.

- Console Logs – Review error logs and DevTools notifications. - Breakpoints – Pause execution to inspect state changes. - Network Requests – Validate data flow between frontend and backend.

- Project Overview – Describe what you’re building. - Page Structure – List key pages and components. - Navigation Logic – Explain user movement through the app. - Screenshots/Wireframes – Provide visuals if available. - Implementation Order –...

- Retracing Your Steps – Review what you initially asked Lovable to do. - Breaking It Down – Identify if specific sections are misaligned. - Using Images – Show Lovable the UI result versus the intended outcome.

- Task Identification – Prioritize issues based on impact. - Internal Review – Validate solutions before deploying. - Reporting Issues – Clearly define current vs. expected behavior. - Validation – Verify changes render correctly in the DOM. -...

Explain the meaning of this error, its origins, and the logical sequence that led to its occurrence. Offer a concise breakdown of the problem and its possible underlying cause. Avoid making any edits to the code at this stage, and don’t be...

Before moving ahead, are you entirely convinced that you have pinpointed the true root cause of the problem? Take a moment to review your analysis and check for any overlooked dependencies, edge cases, or associated factors. Ensure that your...

Take a moment to reflect on whether this solution can be simplified. Are there any superfluous steps, redundancies, or overly complex processes that could be streamlined? Assess if a more direct approach could attain the same outcome without...

Lovable, you’re doing an outstanding job, and I genuinely appreciate the attention and skill you bring to each task. Your talent for dissecting complex issues and delivering insightful solutions is truly remarkable. I have confidence in your...

Could you devise a strategy to systematically identify and eliminate superfluous console.log statements while preserving functionality and design? The plan should outline steps for reviewing each log to verify its non-essential nature, documenting...

This problem remains unresolved, and it's imperative to pause and reassess our entire strategy. Avoid making any code edits at this stage. Instead, embark on a thorough and systematic examination of the system. Create a comprehensive flow map,...

The problem continues and now calls for a comprehensive, system-wide audit. Take a step back and carefully map the entire system flow, examining all interactions, logs, and dependencies. Generate a clear and detailed report outlining expected...

This is a pressing issue that necessitates a thorough re-evaluation of the entire system. Halting all edits, begin by outlining the flow systematically—covering authentication, database interactions, integrations, state management, and redirects....

The issue persists without resolution. Perform a thorough analysis of the flow and dependencies, halting all modifications until the root cause is identified with complete certainty. Record the failures, the reasons behind them, and any observed...

The same error continues to occur. Take a moment to perform a preliminary investigation to uncover the root cause. Examine logs, workflows, and dependencies to gain insight into the problem. Avoid making any changes until you fully grasp the...

Follow this plan and act on all those items

Review the app and tell me where there is outdated code.

Initiate a Stripe connection in test mode using the configuration detailed below: Utilize the specified product and pricing details: Product IDs are [Your Product IDs], with a pricing model of [One-time or Subscription]. Set the webhook endpoint...

Perform a thorough audit of the codebase to assess its structure and organization. Evaluate whether files, components, and logic are effectively separated based on their functionality and purpose. Identify any instances of misplaced code,...

Ensure all routing and file imports are thoroughly updated and functioning as intended following the codebase restructuring. Validate that components, pages, and APIs reflect the accurate paths found in the new folder organization. Confirm that...

Conduct a thorough examination of the folder [Folder Name] along with all its subfolders and files. Assess each element to understand its function and how it enhances the overall performance of the application. Offer a detailed explanation of each...

Perform a comprehensive regression and audit of the codebase to determine if its architecture is clean, modular, and optimized. Identify any files, components, or logic that are mislocated, not correctly placed, or could benefit from enhanced...

Conduct a detailed post-refactor review to verify that no issues were introduced throughout the refactoring process. Confirm that both the UI and functionality retain their original integrity following the modifications. Execute an extensive suite...

Develop a comprehensive plan for a site-wide codebase review aimed at identifying segments that would benefit from refactoring. Concentrate on highlighting areas where the code structure, readability, or maintainability can be enhanced, ensuring...

Refactor this file while ensuring that the user interface and functionality remain unchanged—everything should appear and operate identically. Prioritize enhancing the structure and maintainability of the code. Carefully document the existing...

Refactoring is essential to your development lifecycle within Lovable. It is often suggested by the AI to minimize the loading time and errors.

Start with Front design, page by page, section by section. The plug backend using Supabase as Lovable integration is natively built! Then, refine the UX/UI if needed.

Key Guidelines: Approach problems systematically and articulate your reasoning for intricate issues. Decompose extensive tasks into manageable parts and seek clarification when necessary. While providing feedback, elucidate your thought process...

Always make things responsive on all breakpoints, with a focus on mobile first. Use modern UI/UX best practices for determining how breakpoints should change the components. Use shadcn and tailwind built in breakpoints instead of anything custom,...

Before you write any code, please review the Knowledge Base and share your understanding of my project.

Users begin their experience on the landing page, where they can click the sign-up button to register with Google, subsequently accessing the dashboard. The dashboard comprises X sections.

Before editing any code, create a phased plan for implementing responsiveness. Start with the largest layout components and progressively refine down to smaller elements and individual components. Ensure the plan includes clear steps for testing...

Make certain that all designs are completely responsive at every breakpoint, adopting a mobile-first strategy. Apply contemporary UI/UX best practices to define how components should adjust for varying screen sizes, utilizing ShadCN and Tailwind’s...

Enhance the app's mobile experience while preserving its existing design and functionality. Assess the layout and responsiveness to pinpoint essential modifications for smaller screens and touch inputs. Develop a comprehensive plan before making...

Make solely visual enhancements—ensure functionality and logic remain unaffected. Gain a comprehensive understanding of how the existing UI interacts with the app, ensuring that logic, state management, and APIs stay intact. Conduct extensive...

Before making any code edits, develop a structured plan for implementing responsiveness. Begin with the largest layout components and gradually work down to smaller elements and specific components. Ensure that the plan outlines definitive steps...

Summarize the errors we encountered while setting up JWT authentication and how they were resolved. Create a detailed prompt I can use next time.

Rewrite this prompt to be more concise and detailed: 'Create a secure login page in React using Supabase, ensuring role-based authentication.'

More conversational prompts while maintaining clarity.

You are a world-class prompt engineer. Write me a prompt that will generate a full-stack app taking an input of name, number, and company, and generate a company report.

Mastering Prompting

- Be explicit: Instead of “build a login page,” specify “create a login page using React, with email/password authentication and JWT handling.” - Set constraints: If you need a specific tech stack (e.g., Supabase for authentication), state it...

Unlike traditional coding, AI applications rely on structured communication. Providing AI with clear context and constraints ensures high-quality output. In a Lovable expert session at Lovable, Mark from Prompt Advisors demonstrated how developers...

- Effective prompting matters: Structure your prompts to save hours of troubleshooting. - Meta prompting: Use AI itself to refine your prompts for better accuracy. - Reverse meta prompting: Save debugging sessions to optimize future requests. -...

Most people think prompting is just typing a request into AI and hoping for the best. Wrong. The difference between getting a mediocre response and having AI build entire workflows for you comes down to how you prompt. Whether you’re a developer...

Our app is functional but seems **sluggish**. Please **analyze the project for performance bottlenecks** and suggest optimizations: - Check for any unnecessary database or network calls (e.g., duplicate fetches or N+1 query patterns). - Identify...

The next change is in a **critical part of the app**, so proceed with **utmost caution**. - Carefully examine all related code and dependencies *before* making changes. - **Avoid any modifications** to unrelated components or files. - If there’s...

Perform a comprehensive **audit of the entire codebase** to check if the architecture is clean, modular, and optimized: - Identify any files, components, or logic that are in the wrong place or could be better organized. Are there any instances...