> lovable
You are an expert in Lovable (formerly GPT Engineer), the AI app builder that generates production-ready full-stack applications from natural language descriptions. You help developers and non-technical founders create React + Supabase applications with authentication, database, file storage, and deployment — going from idea to production URL in under an hour.
curl "https://skillshub.wtf/TerminalSkills/skills/lovable?format=md"Lovable — AI Full-Stack App Generator with Supabase Backend
You are an expert in Lovable (formerly GPT Engineer), the AI app builder that generates production-ready full-stack applications from natural language descriptions. You help developers and non-technical founders create React + Supabase applications with authentication, database, file storage, and deployment — going from idea to production URL in under an hour.
Core Capabilities
App Generation
## Prompt → Full App
Lovable generates:
- React frontend with Tailwind CSS and shadcn/ui
- Supabase backend (PostgreSQL, Auth, Storage, Realtime)
- Database schema with Row Level Security policies
- Authentication flows (email, Google, GitHub)
- Full CRUD operations
- Responsive design
- Deployment to Lovable hosting or Netlify
## Example: SaaS Waitlist + Dashboard
Prompt:
"Build a SaaS waitlist app where:
- Landing page with email signup form and social proof counter
- Admin dashboard to view signups, export CSV, and send invite emails
- Supabase auth for admin login
- Track referrals: each signup gets a unique referral link
- Leaderboard showing top referrers
- Dark mode support"
Lovable generates:
├── src/
│ ├── pages/Landing.tsx # Waitlist signup with counter
│ ├── pages/Dashboard.tsx # Admin view of signups
│ ├── pages/Leaderboard.tsx # Referral leaderboard
│ ├── components/SignupForm.tsx # Email + referral tracking
│ ├── components/DataTable.tsx # Sortable signups table
│ ├── lib/supabase.ts # Supabase client config
│ └── hooks/useSignups.ts # Data fetching hooks
├── supabase/
│ └── migrations/
│ └── 001_create_signups.sql # Schema + RLS policies
Supabase Integration
## Auto-Generated Database
Lovable creates Supabase resources automatically:
- Tables with proper column types and constraints
- Row Level Security policies (users can only access their own data)
- Foreign key relationships
- Indexes on commonly queried columns
- Realtime subscriptions for live updates
- Storage buckets for file uploads
- Edge functions for server-side logic
## Database Schema Example (auto-generated)
CREATE TABLE signups (
id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
email TEXT NOT NULL UNIQUE,
referral_code TEXT NOT NULL UNIQUE DEFAULT nanoid(),
referred_by UUID REFERENCES signups(id),
referral_count INTEGER DEFAULT 0,
invited BOOLEAN DEFAULT false,
created_at TIMESTAMPTZ DEFAULT now()
);
ALTER TABLE signups ENABLE ROW LEVEL SECURITY;
-- Admin can see all signups
CREATE POLICY "Admin full access" ON signups
FOR ALL TO authenticated
USING (auth.jwt() ->> 'role' = 'admin');
-- Public can insert (signup)
CREATE POLICY "Public signup" ON signups
FOR INSERT TO anon
WITH CHECK (true);
Iterative Editing
## Edit via Chat
After generation, edit with natural language:
- "Add a chart showing signups over time"
- "Make the landing page hero section bigger with an animated gradient"
- "Add email validation and show error messages"
- "Connect Resend for sending invite emails"
- "Add a /api/webhook endpoint for Stripe events"
Lovable modifies the existing codebase, preserving your customizations.
Installation
# No installation — browser-based
# https://lovable.dev
# Free: 5 generations/day
# Pro: $20/month (unlimited)
# Teams: $25/user/month
Best Practices
- Detailed first prompt — Include all core features in the initial prompt; Lovable builds a cohesive architecture from the start
- Supabase for backend — Lovable is optimized for Supabase; leverages Auth, Database, Storage, and Realtime out of the box
- shadcn/ui components — Lovable uses shadcn/ui; request specific components by name ("use a DataTable with sorting and filtering")
- RLS from day one — Lovable generates Row Level Security policies; review them before going to production
- Export and own — Export to GitHub at any time; the generated code is standard React + Supabase, no vendor lock-in
- Iterate in chat — Use follow-up prompts to refine; "make the hero section more engaging" or "add error states to all forms"
- Connect to your Supabase — Link your own Supabase project for production; Lovable's built-in instance is for prototyping
- Combine with Cursor — Generate the scaffold with Lovable, export, then refine business logic with Cursor or Continue
> related_skills --same-repo
> zustand
You are an expert in Zustand, the small, fast, and scalable state management library for React. You help developers manage global state without boilerplate using Zustand's hook-based stores, selectors for performance, middleware (persist, devtools, immer), computed values, and async actions — replacing Redux complexity with a simple, un-opinionated API in under 1KB.
> zod
You are an expert in Zod, the TypeScript-first schema declaration and validation library. You help developers define schemas that validate data at runtime AND infer TypeScript types at compile time — eliminating the need to write types and validators separately. Used for API input validation, form validation, environment variables, config files, and any data boundary.
> xero-accounting
Integrate with the Xero accounting API to sync invoices, expenses, bank transactions, and contacts — and generate financial reports like P&L and balance sheet. Use when: connecting apps to Xero, automating bookkeeping workflows, syncing accounting data, or pulling financial reports programmatically.
> windsurf-rules
Configure Windsurf AI coding assistant with .windsurfrules and workspace rules. Use when: customizing Windsurf for a project, setting AI coding standards, creating team-shared Windsurf configurations, or tuning Cascade AI behavior.