Skip to content

supplement-quick-reference.md

Latest commit

 

History

History
347 lines (261 loc) · 5.47 KB

supplement-quick-reference.md

File metadata and controls

347 lines (261 loc) · 5.47 KB

Quick Reference Guide - Lovable Cheat Sheet

Quick lookup for common tasks and prompts in Lovable.

🚀 Getting Started

Create Account

  1. Go to lovable.dev
  2. Click "Get started"
  3. Sign up with Google, Email, or GitHub

Start New Project

Create a [type of app] called "[name]" with [key features]

💬 Common Prompts

Basic Page Creation

Create a [page type] page with [features]

Adding Features

Add [feature] to [location/page]

Changing Design

Change [element] to [new style/color/size]

Fixing Issues

Fix [problem] - [what should happen instead]

🎨 Design Prompts

Colors

Change the primary color to #0066CC
Use [color1] and [color2] as the main colors
Make the background [color]

Layout

Make the layout responsive for mobile
Add more spacing between elements
Center the content
Make it full-width

Typography

Change the font to [font name]
Make the headings larger
Improve text readability

🔐 Authentication Prompts

Enable Authentication

Enable Lovable Cloud for user authentication

Create Auth Pages

Create a sign up page with email and password
Create a login page
Add logout functionality

Protect Pages

Make this page only accessible to logged-in users
Redirect non-logged-in users to login

💾 Database Prompts

Set Up Database

Create a database table for [data type] with fields: [list fields]

Use Database

Save [data] to the database when [action]
Display all [items] from the database
Update [item] in the database
Delete [item] from the database

📄 Page Management

Add New Page

Create a new [page type] page called "[name]"
Add it to the navigation menu

Update Page

Update the [page name] page to include [features]

Delete Page

Remove the [page name] page

🖼️ Images & Media

Add Images

Add [image description] to [location]
Use [uploaded image] as [purpose]

Image Optimization

Optimize images for faster loading
Add alt text to all images

🔗 Navigation

Create Menu

Add a navigation menu with links to [pages]
Make the menu sticky (stays at top)

Update Navigation

Add [page] to the navigation
Remove [page] from navigation
Update navigation to show [items] when logged in

📱 Responsive Design

Mobile Optimization

Make this fully responsive for mobile devices
Fix the mobile layout for [element]
Improve touch targets for mobile

Tablet Optimization

Ensure it works well on tablets
Adjust layout for medium screens

🎯 Forms

Create Form

Create a [form type] form with fields: [list fields]
Add form validation

Form Features

Add form validation
Show success message after submission
Add loading state to submit button

🔍 SEO Prompts

Basic SEO

Add SEO:
- Title: "[title]"
- Description: "[description]"

Advanced SEO

Add Open Graph tags for social sharing
Add meta keywords
Optimize for search engines

🚀 Deployment

Publish

  1. Click "Publish" button
  2. Fill in project details
  3. Click "Deploy"
  4. Get your URL!

Custom Domain

Add custom domain [yourdomain.com]

🛠️ Editing

Visual Edits

  1. Click "Visual Edit" mode
  2. Click on element to edit
  3. Make changes
  4. Save

Revert Changes

  1. Go to History
  2. Find previous version
  3. Click "Revert"

💡 Pro Tips

Better Prompts

  • ✅ Be specific
  • ✅ Provide context
  • ✅ Use "Ask me questions" technique
  • ✅ Break complex requests into steps

Common Patterns

Create [thing] with:
- [Feature 1]
- [Feature 2]
- [Feature 3]

Make [thing] similar to [reference] but [your changes]

[Describe what you want]. Ask me any questions you need.

🆘 Getting Help

Chat Mode

I'm stuck on [problem]. Can you help?
How do I [task]?
What's the best way to [goal]?

Debugging

[Feature] isn't working. Can you check what's wrong?
Why is [problem] happening?
How can I fix [issue]?

📚 Quick Links

🎯 Mode Quick Reference

Chat Mode

  • Use for: Questions, planning, debugging
  • Cost: 1 credit per message
  • Does: Helps you understand, doesn't change code

Agent Mode

  • Use for: Building, implementing, fixing
  • Cost: Usage-based
  • Does: Makes changes automatically

Code Mode

  • Use for: Viewing/editing code directly
  • Cost: Free to view, paid to edit
  • Does: Shows raw code

✅ Common Checklists

Before Publishing

  • Everything works
  • Tested on mobile
  • SEO added
  • No obvious bugs
  • Content complete

Adding Authentication

  • Backend enabled
  • Sign up page created
  • Login page created
  • Logout works
  • Pages protected

Adding Database

  • Database table created
  • Fields defined
  • Forms save data
  • Data displays correctly
  • User association works

Keep this handy for quick reference while building! 🚀

Last updated: December 2024