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

### Goal Build a prototype for **[idea]** that demonstrates the core functionality and user experience. ### Core Features - Simple input flow where users interact with the prototype. - Generate placeholder data and UI screens to simulate...

### Goal Build a GPT wrapper tool for **[topic]** that generates content based on user inputs and parameters. ### Core Features - Input field where users enter prompts or parameters. - AI generates [topic] outputs instantly. - Options to...

Create an interactive presentation for 7th grade geography students about Volcanoes. The tone should be simple, visual, and engaging for teenagers. Use colorful diagrams and icons. Structure the presentation with the following slides: Title...

Create an interactive presentation for 7th grade biology students about Photosynthesis. The tone should be simple, visual, and engaging for teenagers. Use colorful diagrams and icons. Structure the presentation with the following slides: Title...

Create an interactive presentation for 7th grade science students about the Water Cycle. The tone should be simple, visual, and engaging for teenagers. Use colorful diagrams and icons. Structure the presentation with the following slides: Title...

Create a 2-panel auth screen: - Left: image or quote - Right: login/signup form Layout: - Mobile: vertical stack, form first - Desktop: flex-row layout Use flex-col-reverse md:flex-row. Make form inputs large enough for thumbs. Use ShadCN...

Build a responsive data table with: - Sortable headers - Dropdown filters - Pagination Use ShadCN table components. On mobile, collapse columns into stacked accordion layout (one row expands to show details). Use overflow-x-auto for mid-sized...

Design a responsive sticky navbar. - Include logo, nav links, CTA - Desktop: full horizontal layout - Mobile: hamburger menu (ShadCN dropdown or popover) Sticky using top-0 z-50. Add scroll effect: navbar shrinks and adds shadow on scroll....

Build a grid of feature cards with: - "Icon" - "Short description" - “Learn More” button triggering modal" Layout: - "Mobile: 1 column" - "Tablet: 2 columns" - "Desktop: 3–4 columns" Use Tailwind grid-cols-1, md:grid-cols-2, lg:grid-cols-4....

Build a 3-tier pricing section (Basic, Pro, Enterprise). Highlight the "Pro" plan as Most Popular. Mobile: stack cards vertically Tablet: 2-column Desktop: 3-column Each card includes plan name, price, feature list, CTA. Use Tailwind’s...

Create a responsive hero section for a marketing page. Include: Heading, subheading, CTA button Image or video beside text Layout: Mobile: stacked layout, center aligned Desktop: text left, image right Follow mobile-first strategy. Use...

esign a fully responsive admin dashboard with key widgets: total revenue, user growth, active sessions, and performance trends. On desktop: 2-column layout with fixed sidebar On mobile/tablet: Sidebar collapses into hamburger menu Header is...

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

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

Build a landing page footer with a mini CTA banner, navigation links, app store badges, social icons, and trust signals like SSL badge or reviews. Make it visually balanced, mobile responsive, and conversion-friendly.

Create a password input field with real-time strength indicator (weak → strong) and validation checklist (min length, special char, number, etc.). Show checkmarks as user types. Use subtle animations and tooltips.

Build a minimalist landing page with a short headline, subheading, and a single input field for email or phone. Add a “Get Started” button. Use soft colors, white space, and smooth fade-in elements.

Design a floating action button (bottom right) that triggers a compact contact form modal. Include fields for name, email, and message. Add subtle opening animation, blur background, and “Thank You” state after submission.

Create a compact lead capture form for gated content. Include fields for name, email, and company. Add a compelling headline and CTA button. On submit, show a “Check your inbox” confirmation with a success checkmark.

Build a full-page login screen with a gradient background and two-column layout: left side with welcome text and illustration, right side with the login form. Add soft shadows, glowing inputs, and a modern font.

Design a newsletter signup section with a short benefit list, an email input field, and a CTA button. Show a success message on submission with a checkmark animation. Make it visually appealing and mobile-friendly.

Create a landing page hero section with a bold headline, subheading, and a clear CTA button. Add a right-side image or autoplaying video. Use responsive layout, light animations, and emphasize visual hierarchy for conversion.

Build a modal-based auth form with tabs for “Login” and “Sign Up”. Include inputs for email and password, a show/hide password toggle, and Google/GitHub login buttons. Add transitions between the tabs and error handling for validation.

Design a 3-step form wizard with clear step indicators at the top. Each step should include form fields and a “Next” button. Add transitions between steps and validate input before moving forward. Include a final “Submit” with confirmation animation.

Build a responsive team section with profile cards showing name, role, avatar, skill tags, and social links. Include hover animations that reveal extra info or contact buttons. Mobile-friendly layout.

Create a collapsible FAQ section with search input, category filters (tabs), and animated expand/collapse. Allow one open item at a time. Smooth UX with accessible keyboard navigation.

Build a notification bell icon that opens a dropdown with categorized notifications (e.g., Messages, Alerts). Include icons, timestamps, and action buttons (mark as read, dismiss). Smooth animation on open/close.

Design a drag-and-drop file uploader component with file previews (image or file type icon), progress bar animations, max size validation, and success/error messages. Allow users to remove files before upload.

Create a testimonials section with avatar images, 5-star ratings, short feedback text, and rotating carousel animation. Include company logos for credibility. Enable swipe/scroll support on mobile.

Generate four dashboard cards showing KPIs with animated counters and mini line/bar charts. Add subtle gradients in the background and icons for context. Include percentage change indicators with arrows (up/down).

Build a 3-column responsive feature grid with icons and brief descriptions. Add hover effects that highlight the card, and enable a “Learn More” modal on click. Ensure mobile responsiveness and accessibility.

Create a vertical progress timeline with 5 project milestones. Each milestone should include an animated progress icon, a colored status badge (e.g. completed, in-progress), and expandable sections with more details.

Build a smart search bar component with real-time autocomplete suggestions. Show recent search history, categorized results, and smooth dropdown animation. Include keyboard navigation and icon indicators for categories.

Design three responsive pricing cards with subtle hover animations. Include a badge for “Most Popular” on the middle tier with a soft gradient. Each card should list 4 features with check icons and a CTA button. Add responsive layout and smooth...

Design a clean UI color palette with olive green, dark forest green, soft white, and natural shadow tones. It should work well for centered text, inspirational quotes, and minimalist app design.

Create a vintage-style color palette using tan, faded brown, parchment white, and subtle hints of soft gold or floral peach. The palette should feel nostalgic and handcrafted, like an old photo album.

Design a palette that combines leafy green, soft pink, pastel violet, and warm beige on a clean white or cream background. It should evoke nature, positivity, and peace—perfect for affirmations and gentle UI themes.

Generate a color palette using soft lavender, light pink, leafy green, and cream. Make the tones pastel and gentle. The goal is to feel playful yet calm—like a wallpaper for a flower-themed planner or wellness journal.

Create a watercolor-inspired color palette using light pink, pale yellow, muted lavender, and natural white. Avoid hard edges. The palette should feel romantic, soft, and elegant—ideal for events, invites, or greeting cards.

Design a color palette that blends soft browns, blush pink, warm cream, and gentle blue. The palette should feel personal, expressive, and stylish—perfect for user profile pages or journaling apps with personality.

Generate a muted, cozy color palette inspired by kraft paper, taped corners, soft beige tones, and faded brown textures. Include one soft highlight color like dusty rose or vintage blue. The palette should feel handmade and lovable.

Create a modern, minimal UI color palette using soft botanical greens, light neutrals, and gentle off-whites. Avoid saturation. The tone should feel elegant, peaceful, and emotionally calming—perfect for a wellness or mindful app.

Create a complete UI color system that works beautifully in both light and dark mode. Keep the tone warm, consistent, and visually gentle.

Design a gender-neutral UI palette with muted lavenders, greens, or oranges. Avoid stereotypical pink/blue schemes. Include all basic UI states.

Use warm pastels to create a lovable UI palette. Include buttons, background, inputs, and text colors. The tone should be calming and stylish.

Create a mostly monochrome palette with one standout brand color. Ideal for modern, lovable apps with clean interfaces and strong branding.

Design a UI palette that includes friendly focus/hover states. Avoid harsh outlines. Keep the base and primary tones soft, lovable, and modern.

Design a color system that balances accessibility with a lovable aesthetic. Avoid pure black/white. Include primary, secondary, background, and disabled states.

Create a minimalist UI palette with only 3 main colors: one light background, one dark text, and one signature tone. It should feel emotionally warm and elegant.

Design a calming UI color palette with neutral grays and whites as the base. Add one vibrant but tasteful accent color for CTAs. The tone should feel mature, lovable, and trustworthy.

Generate a modern UI color palette with soft, rounded tones. Prioritize approachability and warmth—avoid harsh contrasts. Include a primary color, secondary, background, surface, and neutral text tones. Make sure the palette feels playful but not...

Make the UI pixel-perfect according to Figma or design specs. You can adjust margins, paddings, alignment, and visual elements—but do not modify component logic, props, state, or API integration. Ensure app behavior is unchanged after visual...

Modernize the UI using updated styling (e.g., rounded corners, shadows, hover states). Do not change the structure, props, or any logic behind components. Confirm through testing that every feature works exactly as before.

Run a visual regression audit on the UI. Identify purely visual bugs or inconsistencies and fix them. Do not touch component logic, state, or API behavior. Use screenshots or snapshots to verify visual integrity remains consistent.

Improve the accessibility of the UI by adding ARIA labels, semantic tags, and better contrast ratios. Do not change any app logic, interactivity, or data flow. Ensure these improvements do not introduce regressions or break the original...

Replace raw values (e.g., #000000, 16px) with design tokens from the existing design system. Apply only visual changes—colors, spacing, typography. Do not affect functional code or app logic. Test to ensure the UI behaves exactly the same.

Refactor UI code to remove unused CSS classes, inline styles, or duplicated stylesheets. Do not remove any functional code or impact component behavior. After refactoring, test each component to ensure nothing is visually or functionally broken.

Add a dark mode theme to the UI using CSS variables or a theme switcher. Do not touch component logic, state, or API integrations. Your focus is purely visual. Ensure that toggling between modes does not interfere with the app’s logic or data.

Go through the entire UI and ensure consistent usage of fonts, button styles, border radius, and spacing. You are only allowed to touch CSS/styling—do not alter any component logic, state, or data handling. Test thoroughly to confirm that user...

Update the existing UI to support responsiveness across mobile, tablet, and desktop. Do not modify state logic, component behavior, or API calls. Focus only on layout and style (media queries, flex/grid, etc). Ensure the app still functions the...

You are a frontend engineer tasked with polishing the UI without affecting app logic. Focus on improving spacing, color consistency, typography, and visual hierarchy. Do not change component structure, logic, state, or API calls. After each...

Show a visual breakdown: - % of purchases avoided - Average delay time - Top emotional triggers - Estimated money saved Use simple bar charts or stat blocks. Use local storage or Supabase if user has sync enabled.

For a given item (selected via route param), show: - Summary of item info - Prompt: “Do you still want this?” Buttons: - ✅ Yes, Buy (moves to Bought list) - ❌ No, Don’t Buy (moves to Cancelled list) - ⏳ Delay (adds 24 more hours to...

Create a form for users to log a potential purchase. Fields: - What do you want to buy? (text) - How much does it cost? (number, optional) - Why do you want it? (textarea) - How do you feel right now? (dropdown: bored, anxious, excited,...

Create the following pages: - Home - Add New Intent - Waiting List - Revisit Decision - Insights - Settings - Learn Use soft, calming design. App is free — no login required unless user enables optional Supabase sync. Include a header with minimal...

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

Perform a comprehensive regression and audit of the codebase to determine if its architecture is clean, modular, and optimized. Pinpoint any files, components, or logic that are incorrectly placed, not allocated to suitable files, or require...

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

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

This update is quite delicate and requires utmost precision. Carefully examine all dependencies and potential impacts before implementing any changes, and test systematically to guarantee nothing is disrupted. Steer clear of shortcuts or...

Implement modifications to the feature while ensuring core functionality, other features, and processes remain unaffected. Evaluate its behavior and dependencies to identify potential risks, and discuss any concerns before moving forward. Conduct...

Start with "I need a [type] application with:" Elaborate on tech stack - including Frontend, styling, Authorization and Database. Elaborate on core features including main and secondary features. Then direct the AI to start somewhere like: "Start...

Provide as much details as you can in the input field. Use the "Select" feature to precise edit your component. Enhance your prompt with the experimental "Chat mode".

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

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.

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