CLAUDE.md Template: Next.js 13 + Supabase + Clerk + Stripe AI Form Builder SaaS

Overview

A CLAUDE.md template is a copyable blueprint for a production-ready AI-assisted SaaS project. This page covers a complete Next.js 13+ stack with TypeScript, Supabase as the database, Clerk for authentication, Stripe for payments, and natural language (NL) form generation. It also includes a ready-to-paste CLAUDE.md block you can drop into your repository to start implementing an AI Form Builder SaaS with analytics and form submissions.

Direct answer: This CLAUDE.md template provides a concrete blueprint and a paste-ready CLAUDE.md block for building an AI Form Builder SaaS with Next.js 13, TS, Supabase, Clerk, Stripe, NL form generation, submissions, and analytics.

When to Use This CLAUDE.md Template

• You’re building a production-grade AI Form Builder SaaS with a modern Next.js (App Router) frontend and a REST/GraphQL API backend.
• You want integrated authentication (Clerk), payments (Stripe), and a scalable Postgres DB (Supabase) with Row-Level Security.
• You plan to generate forms via NL prompts and store submissions, with analytics dashboards for product decisions.
• You need a copyable, maintainable CLAUDE.md template to onboard developers quickly.

Copyable CLAUDE.md Template

# CLAUDE.md

Role:
- You are a Production AI & Frontend/Backend Architect building a Next.js 13+ SaaS with Supabase, Clerk, Stripe, and NL form generation.
- You produce a clean, secure, and maintainable codebase. You paste the CLAUDE.md into repo instructions and follow it.

Architecture rules:
- Tech stack: Next.js 13+ with App Router, TypeScript, Supabase (Postgres), Clerk for auth, Stripe for payments, NL form generation, and analytics.
- Data flow: Client renders with Server Components when possible; data fetching via API routes or tRPC-like layer; all secrets in environment variables.
- API: Use REST for forms, submissions, analytics; use edge or serverless functions for webhook endpoints.
- Observability: structured logging, metrics collection, and error reporting integrated with your hosting environment.
- Claude Code style: strongly typed, explicit interfaces, minimal side effects in components.

File structure rules:
- Do not create unrelated folders. Keep a single source of truth under apps/web and libs/
- Top-level folders: apps/web (Next.js app), apps/api (API routes or serverless handlers), libs/auth (Clerk helpers), libs/db (Supabase client), libs/payments (Stripe helpers).
- Use a predictable naming convention: src/pages or app/, components/, hooks/, lib/, services/
- Do not duplicate logic; extract to reusable modules (e.g., form generation engine, storage adapters).

Authentication rules:
- Clerk handles all user authentication and sessions.
- Endpoints must verify session and, when required, user roles (admin, owner, member).
- Never expose private keys or service accounts to the frontend; use server-side helpers.

Database rules:
- Supabase database with tables: users, organizations, forms, form_fields, submissions, analytics, form_generation_logs.
- Enable Row-Level Security (RLS) with policies keyed to the current_user_id and organization_id.
- Use stored procedures or server-side functions for complex writes.

Validation rules:
- Validate all inputs with Zod on both client and server boundaries.
- Normalize email, phone, and IDs; reject invalid NL-generated prompts.

Security rules:
- Do not commit secrets to VCS; use environment variables and secret managers.
- Validate JWTs from Clerk for protected endpoints.
- Sanitize all NL-generated content to avoid XSS in dynamic forms.

Testing rules:
- Unit tests for form generation, validation, and adapters (Zod schemas, DB adapters).
- Integration tests for auth flows (Clerk), payments (Stripe webhooks), and API endpoints.
- End-to-end tests simulating real user flows (forms, submissions, analytics) with Playwright.

Deployment rules:
- Deploy to Vercel or a comparable platform with Preview Deploys.
- Configure environment: NEXTAUTH_URL, SUPABASE_URL, SUPABASE_ANON_KEY, CLERK_SECRET, STRIPE_SECRET.
- Enable webhook endpoints for Stripe and ensure they’re verified.

Things Claude must not do:
- Do not bypass Clerk auth or expose admin credentials on the client.
- Do not write raw SQL in the frontend or bypass RLS policies.
- Do not generate insecure or unvalidated SQL.
- Do not assume NL prompts are safe without server-side validation.
- Do not hardcode production secrets in code blocks.

Recommended Project Structure

my-saas-app/
├─ apps/
│  ├─ web/                # Next.js 13+ app with app dir
│  │  ├─ app/            # App Router entry
│  │  │  ├─ layout.tsx
│  │  │  ├─ page.tsx
│  │  │  └─ form/         # Feature: forms
│  │  ├─ components/
│  │  ├─ hooks/
│  │  ├─ lib/
│  │  │  ├─ supabase.ts
│  │  │  ├─ clerk.ts
│  │  │  └─ stripe.ts
│  │  └─ styles/
│  └─ api/               # Optional API routes if not using app dir directly
│     └─ webhooks/
├─ libs/
│  ├─ auth/              # Clerk helpers
│  ├─ db/                # Supabase client and types
│  └─ payments/          # Stripe helpers and webhooks
└─ scripts/               # Migrations, seed, CI helpers

Core Engineering Principles

• Type safety and explicit interfaces across all layers.
• Separation of concerns: UI, business logic, and data access are decoupled.
• Security by default: strict auth, RBAC, and server-side validation.
• Automated testing: unit, integration, and end-to-end tests in CI.
• Observability: structured logging, tracing, and metrics from day one.

Code Construction Rules

• Client code must not access secrets or DB keys directly; use server endpoints or API routes.
• All API inputs must be validated with Zod; return consistent error shapes.
• Data fetching uses the app router fetch or a minimal client wrapper with typed responses.
• NL form generation should be encapsulated in a service with input/output contracts and audit logs.
• Stripe webhooks must be verified using endpoint secrets and validated events.
• Form rendering must escape all user-provided content to prevent XSS.

Security and Production Rules

• Use Clerk session validation on protected routes and server components.
• Enable Supabase Row-Level Security with policies tied to user_id and org_id.
• Do not expose API keys or DB credentials in front-end code.
• Validate NL-generated prompts to avoid injection of unsafe content.
• Keep dependencies up to date with security patches; monitor CVEs.

Testing Checklist

• Unit tests for form field validators and NL prompt templates.
• Integration tests for sign-in, create form, submit form, and fetch analytics.
• API endpoint tests for CRUD on forms, submissions, and analytics data.
• End-to-end tests covering user onboarding, form generation, and payment flows.
• Continuous deployment checks and preview environment validations.

Common Mistakes to Avoid

• Using client-side secrets or calling DB directly from components.
• Skipping RBAC and exposing admin endpoints publicly.
• Over-relying on NL prompts without server-side validation.
• Neglecting Webhook signature verification for Stripe.
• Inconsistent data models between forms and submissions causing analytics drift.

Related implementation resources: AI Use Case for Insurance Agencies Using Zendesk To Automate The Early Collection Of Accident Report Data From Claimants and Designing secure Server Actions with mandatory input schema validations at the server boundary.

FAQ

What is included in this CLAUDE.md Template?

This template provides a ready-to-paste CLAUDE.md block for a Next.js 13+ AI Form Builder SaaS with Supabase, Clerk, Stripe, NL form generation, and analytics, plus a recommended project structure and rules.

Which stack is covered?

Next.js 13+ with TypeScript, Supabase for Postgres, Clerk for authentication, Stripe for payments, and NL-based form generation.

How do I start using the CLAUDE.md block?

Copy the CLAUDE.md block from the template into your repo and adapt the rules to your project specifics and environment variables.

What about security rules?

Follow RBAC with Clerk, enforce RBAC on API routes, validate inputs, and keep secrets on the server side only.

Where can I extend the template?

Use the recommended project structure to add new features like analytics dashboards, NL prompt tuning, or payment features.