lovable-skills

Use when reviewing or fixing accessibility: keyboard navigation, focus order, labels, color contrast, screen reader support, or ARIA attributes. Not for SEO-only or performance-only audits.

Use when adding product analytics (PostHog, GA4, Plausible), event tracking, funnels, or conversion measurement. Not for server logs only or A/B infra unless events are part of the task.

Use when standardizing API and edge function errors: HTTP status codes, error JSON shape, logging, or mapping Supabase/Stripe errors to client responses. Not for UI toast copy only or form field validation messages.

Use when recording audit trails: who changed what, admin action logs, compliance history, or append-only event tables. Not for product analytics (use analytics-events) or debug console logs only.

Use when scheduling background work: cron jobs, digest emails, cleanup tasks, pg_cron, Supabase scheduled edge functions, or job queues. Not for synchronous user-facing API in the request path.

Use when adding dark mode, theme toggle, system theme support, or fixing hardcoded colors that break in dark mode. Not for design-token migration unrelated to dark mode.

Use when building dashboards, charts, KPI cards, trend lines, or analytics UI with Recharts or shadcn's chart components. Not for static landing-page graphics or product analytics tracking (use analytics-events).

Use when adding Supabase Edge Functions, Stripe/webhook handlers, server-side secrets, or API routes that must not run in the browser. Not for client-only UI, CSS, or simple CRUD that RLS + client can handle safely.

Use when sending transactional email (Resend, Postmark, etc.), magic links, notification templates, or email edge functions. Not for in-app toast-only UX or SMS unless extending the same pattern.

Use when building lists, tables, dashboards, feeds, or any data-driven UI that needs loading, empty, error, or retry states. Not for static marketing pages or pure styling tweaks.

Use when adding feature flags, gradual rollouts, beta features, kill switches, or per-user/per-org feature toggles. Not for plan-based gating (use pricing-and-billing) unless flags wrap plan checks too.

Use when implementing file uploads, avatars, attachments, or Supabase Storage buckets with signed URLs. Not for text-only forms or external CDNs unless integrating upload to Storage.

Use when adding multi-language support, translations, locale switching, date/number formatting, or RTL layout. Not for single-language apps unless preparing for i18n later.

Use when planning a session in Lovable, breaking a feature into prompts, asking Lovable to refactor or debug, or writing a backlog of Lovable prompts. Not when actually executing inside Lovable — this guides how to phrase work, not the work itself.

Use when I say I'm about to launch, ship, go live, release, or ask if the app is production-ready. Run the checklist and report pass/fail per item. Not for feature building, refactors, or SEO copywriting from scratch.

Use when changing Supabase schema, adding columns, backfills, or production migrations that must not break existing apps. Not for client-only UI or seed data in local dev only.

Use when building organization/workspace multi-tenancy: teams, memberships, roles, inviting members, or scoping all data by org_id. Not for single-user apps with only user_id ownership.

Use when writing first-run flows, empty states, tooltips, welcome modals, or in-app onboarding copy. Not for legal terms, support email replies, or SEO landing pages.

Use when implementing optimistic UI for mutations: instant likes, inline edits, toggles, delete-then-undo, or any action that should feel instant before the server confirms. Not for read-only views or critical writes that must wait for server confirmation (payments, auth).

Use when handling failed Stripe payments: invoice.payment_failed, past_due subscriptions, dunning emails, grace periods, or billing recovery UX. Not for initial Checkout setup or webhook signature basics (use stripe-payment-webhooks).

Use when Stripe or payment webhooks fire twice, need duplicate event handling, stripe_webhook_events table, ordering, or safe retries. Not for first-time webhook setup without idempotency concerns (use stripe-payment-webhooks).

Use when testing Stripe payment webhooks locally, debugging webhook failures, Stripe CLI forward, replaying events, or webhook logs. Not for production deploy only or writing marketing copy.

Use when the app feels slow, bundle is large, or optimizing LCP, INP, CLS, images, or unnecessary re-renders. Not for SEO copy or accessibility-only passes.

Use when you need a copy-pasteable pg_cron recipe — cleanup of soft-deleted rows, expiring trials, materialized view refresh, retry queue, scheduled notifications, log table trimming. Cookbook companion to pg-cron-scheduled-jobs.

Use when scheduling Postgres jobs with pg_cron — installing the extension, writing cron expressions, scheduling SQL or function calls, monitoring runs, unscheduling, and avoiding overlap. Companion to background-jobs-and-cron; this is the deep dive.

Use when pg_cron needs to call an HTTPS endpoint — typically a Supabase Edge Function — for work too heavy or external for plain SQL. Covers pg_net setup, authentication, payload signing, and reading async responses.

Use when implementing search with Postgres: tsvector, GIN indexes, search RPC, or replacing client-side filter of large lists. Not for external Algolia/Typesense setup unless migrating away from DB search.

Use when adding Postgres triggers, database functions (RPC), generated columns, or moving invariant logic into the database. Not for edge functions (use edge-functions-and-webhooks) or client-only validation.

Use when implementing Stripe subscriptions, checkout, customer portal, trials, invoices, or plan gating. Not for one-time tips without Stripe or display-only pricing tables with no payment.

Use when designing the content layer for programmatic SEO pages: avoiding thin content, deduplication, AI generation guardrails, E-E-A-T signals, and quality thresholds. Not for one-off blog editing or full template design (use programmatic-seo-pages).

Use when generating SEO pages at scale from data: location pages, "X vs Y" comparison pages, "alternatives to X", integration pages, feature templates, or any pattern producing hundreds of pages from rows. Not for one-off marketing pages or thin/spammy content.

Use when adding rate limiting to edge functions, login endpoints, signup, password reset, contact forms, or any abuse-prone API path. Not for static page caching or CDN-level limits unless implementing at the application layer.

Use when adding Supabase Realtime, live updates, chat, notifications, or postgres_changes subscriptions. Not for one-time fetches (use data hooks) or polling unless Realtime is unavailable.

Use when refactoring, renaming, or restructuring code where behavior must stay the same, or when the user asks for minimal/surgical changes. Not for greenfield features or intentional behavior changes unless listed.

Use when writing changelog entries, release notes, or customer-facing "what's new" from features, commits, or a feature list. Not for internal code review or marketing landing page copy from scratch.

Use when optimizing LCP, INP, or CLS specifically for SEO in a Lovable SPA: PageSpeed/CrUX issues, hero image too heavy, layout shift from web fonts, slow interactions on mobile. Not for backend-only perf (use performance-budget).

Use when building or auditing public marketing pages, landing pages, blogs, or SEO metadata (title, description, OG, headings). Not for authenticated app dashboards behind login.

Use when adding per-route titles, meta descriptions, Open Graph, Twitter card, or canonical tags in a Lovable SPA (React + Vite). Not for static HTML edits or content-only changes.

Use when generating sitemap.xml, robots.txt, dynamic sitemaps from a database, sitemap index files, or fixing crawl coverage. Not for in-app navigation or internal link strategy (see programmatic-seo-pages).

Use when a Lovable SPA needs Google or social crawlers to see populated HTML: SSR, prerendering, react-snap, prerender.io, vite-ssg, or migrating routes to static. Not for fully authenticated apps with no public surface.