Vibe Coding Prompts
That Actually Ship.

Create a new Next.js 14 App Router project with TypeScript, Tailwind CSS, Supabase Auth, and Stripe billing. Scaffold the folder structure: /app, /components, /lib, /hooks. Add a root layout with a Navbar and a placeholder dashboard page. Include a README with setup steps.

Design a Supabase PostgreSQL schema for a multi-tenant SaaS. Tables needed: users (extends auth.users), organizations, memberships (user↔org with role), subscriptions, and usage_events. Include: primary keys (uuid), foreign keys with cascade, created_at/updated_at triggers, and indexes on common query patterns. Output as SQL.

Build a dark-mode SaaS landing page. Sections: Hero (headline + CTA + waitlist form), Features (3-column grid with icons), Pricing (3 tiers: Free / Pro / Team), FAQ accordion, Footer with links. Use purple as the accent colour. Make it fully responsive. Connect the waitlist form to Supabase table 'waitlist'.

Add Next.js middleware to protect routes by role. Read the user's role from the Supabase JWT claim 'user_role'. Protect /admin/* for 'admin' role, /dashboard/* for any authenticated user. Redirect unauthorised users to /auth/login with a ?redirect param. Place the middleware in /middleware.ts.

Install and configure shadcn/ui in this Next.js project. Set the theme to dark mode by default. Add the following components: Button, Card, Input, Badge, Dialog, Dropdown Menu. Place them in /components/ui. Show me a demo page at /ui-preview that renders each component.

Build a kanban board with 4 columns: Backlog, In Progress, Review, Done. Cards should be draggable between columns using @dnd-kit/core. Each card shows: title, assignee avatar, priority badge, due date. Add a 'New Card' button per column. Store state in Zustand. Dark theme.

Set up a blog at /blog using MDX files in /content/blog. Each post has frontmatter: title, description, date, tags, ogImage. Build a /blog/[slug] page that renders MDX with syntax highlighting (rehype-pretty-code). Add a /blog index with cards sorted by date. Include reading time estimate.

Create a Stripe webhook handler at /app/api/webhooks/stripe/route.ts. Handle events: checkout.session.completed, customer.subscription.updated, customer.subscription.deleted. Verify the webhook signature with STRIPE_WEBHOOK_SECRET. On checkout.completed, upsert user subscription in Supabase table 'subscriptions'.

Build a 4-step onboarding form at /app/onboarding/page.tsx using React Hook Form and Zod. Steps: (1) profile name + avatar upload, (2) use-case selection (checkboxes), (3) plan selection, (4) confirmation. Show a progress bar. On submit, call the /api/onboarding server action and redirect to /dashboard.

Integrate Stripe checkout into this app. Add a /pricing page with 3 plans. On 'Upgrade' click, call a Supabase edge function that creates a Stripe Checkout session and returns the URL. Redirect the user to Stripe. On success, handle the webhook to update 'subscriptions' table and redirect to /dashboard?upgrade=success.

Write a Supabase Edge Function at /functions/create-checkout that: (1) verifies the user JWT, (2) looks up their Stripe customer ID from 'profiles', (3) creates a Stripe Checkout session for the given price_id, (4) returns the session URL. Use Deno and the Stripe Deno SDK. Handle errors with proper HTTP status codes.

Plan a zero-downtime migration for this database change: [describe change — e.g. rename column, add non-null column, split table]. Use the expand-contract pattern. Write the migration SQL, a backfill script, and the cleanup migration. Identify the deployment sequence and any app-code changes needed at each step.

Add Google and GitHub OAuth to this Supabase auth setup. Step 1: Add provider buttons on the login page with correct icons. Step 2: On redirect back, check if this is a new user — if so, redirect to /onboarding. Step 3: If returning user, go to /dashboard. Step 4: Handle the auth callback at /auth/callback.

Add OpenGraph and Twitter Card metadata to every page in /app. Use Next.js generateMetadata() for dynamic pages (pass title, description, image). For static pages use the metadata export. Default OG image: /public/og-default.png. Ensure each page has a unique title and description.

You are a senior security engineer reviewing a pull request. Review the following code for vulnerabilities: SQL injection, XSS, CSRF, insecure direct object references, missing auth checks, exposed secrets, and error messages that leak internals. For each issue found, explain the risk level (critical/high/medium/low) and provide a fixed version.

You are a Next.js expert. I'm getting a React hydration mismatch error: "Text content did not match." Act as if you're pair programming with me. Inspect my layout.tsx and any components that render conditional content. Find the cause — likely a date, random value, or browser-only API — and fix it without adding 'use client' to the root layout.

You are a Supabase security expert. Write Row Level Security policies for the 'documents' table. Rules: owners can do anything, org members with 'editor' role can update, org members with 'viewer' role can only select, public documents (is_public=true) are readable by anyone. Use auth.uid() and a helper function get_user_org_role(). Test with SQL examples that verify each rule.

You are a senior software architect. I'm building a [describe your app]. Expected users: [N]. Key features: [list]. Budget: [$/mo]. Compare: (a) Next.js + Supabase + Vercel, (b) Remix + PlanetScale + Fly.io, (c) SvelteKit + Turso + Cloudflare. For each option, list pros, cons, cost, and scalability ceiling. Recommend one with explicit reasoning.

You are a React performance specialist. This page has a slow initial render (>2s TTI). Audit and identify: unnecessary re-renders, missing useMemo/useCallback, waterfall data fetching, large unoptimised images, and missing code splitting. Fix each issue with code. Prioritise by impact. Target <500ms TTI.

Add infinite scroll to /app/tools/page.tsx. Use the Intersection Observer API. Fetch the next page from /api/tools?page=N&limit=20. Show a loading spinner at the bottom. Stop fetching when there are no more results. CONSTRAINTS: client-side only — no external library. Do not break existing filter/search functionality. Keep TypeScript strict mode.

Add rate limiting to all /app/api routes using Upstash Redis. Limit to 20 requests per minute per IP. Return 429 with Retry-After header when exceeded. CONSTRAINTS: create a reusable rateLimit() helper in /lib/rateLimit.ts. Do not change existing route logic — just wrap it. No new dependencies beyond @upstash/redis.

Refactor all /app/api/* route handlers into Next.js Server Actions. Move them to /app/actions/. Replace every fetch('/api/...') call in client components with direct server action calls. CONSTRAINTS: keep error handling identical. Do not change the UI components. Do not add new dependencies. Show the diff clearly.

Analyse this Next.js project's bundle. Identify the top 5 largest dependencies. CONSTRAINTS: for each, suggest either (a) a lighter alternative, (b) dynamic import, or (c) tree-shaking fix. Implement only the changes that don't require API changes or UI rewrites. Show before/after sizes. Target 30% reduction.

Write a Supabase seed.sql file that populates: 3 test users (with hashed passwords via auth schema), 2 organizations, memberships linking users to orgs with different roles, 10 sample posts per org, and a free-tier subscription for each org. CONSTRAINTS: use CTEs to avoid hardcoding UUIDs. Must be safe to re-run (INSERT ... ON CONFLICT DO NOTHING). No external tooling — pure SQL.

Build a reusable <DataTable /> component using @tanstack/react-table v8. It should support: sortable columns, pagination (10/25/50 rows), global search, and row selection. Make it generic with TypeScript generics. CONSTRAINTS: add an export-to-CSV button. No extra UI library. Place it in /components/DataTable.tsx.

Look at my Supabase table definition in /lib/db/schema.ts. Think through each column's type, nullability, and constraints. Then generate Zod validation schemas for each table: insert schema, update schema, and select schema. Explain your reasoning for each type choice. Export them from /lib/validators/. Use strict mode and add JSDoc comments.

Think through the best full-text search approach for the 'posts' table, then implement it. Consider: tsvector column vs pg_trgm vs external search. Choose tsvector. Create a search_vector column combining title (weight A) and content (weight B). Add a GIN index. Write a trigger to keep it updated. Create a Supabase RPC function 'search_posts(query text)' returning ranked results. Show the Next.js integration.

Think through the data types in this Next.js app and what caching layer fits each one. Consider: Next.js full-route cache, React cache(), unstable_cache, Redis for shared state, CDN headers for static assets, and SWR/React Query on the client. For each data type, reason through the right cache layer and TTL. Show code examples for each recommendation.

Think through the failure modes of a daily billing cron job, then implement it safely. The job should: (1) mark subscriptions past their end_date as 'expired', (2) send expiry emails via an Edge Function, (3) log the run result to 'cron_logs'. Consider: idempotency, partial failures, email deduplication. Schedule it at 00:05 UTC using pg_cron. Show the full SQL and edge function code.

This Supabase query is slow (>500ms): [paste query]. Walk through the execution plan with EXPLAIN ANALYZE. Identify each bottleneck: missing indexes, N+1 patterns, unnecessary columns in SELECT *, missing foreign key indexes. For each issue found, explain why it's slow, then rewrite with the fix. Show before/after explain output.