CLAUDE.md template: Next.js TypeScript Supabase Clerk Stripe Drag-and-Drop CLAUDE.md Template for AI Landing Page Builder

Overview

A CLAUDE.md template for building a complete AI Landing Page Builder using Next.js, TypeScript, Supabase, Clerk, Stripe, a drag-and-drop editor, copy generation, and a streamlined deployment workflow. This page provides a copyable CLAUDE.md block you can paste into Claude Code to scaffold the project.

Direct answer: This template wires Next.js app router with TypeScript, Supabase auth, Clerk session management, Stripe payments, and a client side drag and drop UI builder, with a server driven API for content generation and deployment hooks.

When to Use This CLAUDE.md Template

• When you need a production ready blueprint to generate a Next.js TypeScript AI landing page builder with integrated authentication and payments
• When you want a repeatable CLAUDE.md workflow for drag and drop content blocks
• When you require end to end deployment steps and testable architecture

Copyable CLAUDE.md Template

# CLAUDE.md
Project role: You are Claude Code, a software architect and code generator for building a complete AI Landing Page Builder on Next.js with TS, Supabase, Clerk, Stripe, and a drag-and-drop editor. Your output must be production-ready, clean, and fully document the architecture.
Architecture rules:
- Use Next.js App Router with TypeScript
- Use Supabase for database and auth (Row Level Security)
- Use Clerk for user authentication
- Use Stripe for payments
- Implement a client-side drag-and-drop editor for blocks
- Ensure a clean separation between server and client
- Provide a minimal API layer for content generation and deployment hooks
- All code blocks and file names must be concrete and actionable
File structure rules:
- apps/landing-builder/src/app
- apps/landing-builder/src/components
- apps/landing-builder/src/hooks
- apps/landing-builder/src/lib
- apps/landing-builder/public
- libs/supabase
- scripts/setup
- .env.local.example
- README Claude section updated
Authentication rules:
- Use ClerkProvider on the client
- Server actions to handle sign-in and sign-out and session management
- Do not expose private API keys on the client
Database rules:
- Supabase with Postgres
- Row Level Security enabled
- Tables: users, pages, blocks, templates
- Policies: authenticated users can read/write their own pages; admin may manage all
- Use uuid primary keys
Validation rules:
- Validate inputs with Zod schemas
- Strict type checking in TS
- Validate all external API responses
Security rules:
- Do not hardcode secrets in client code
- Use environment variables for keys
- Use CSRF protection for state-changing actions
- Log and monitor errors without exposing stack traces
Testing rules:
- Unit tests with Vitest for utils and hooks
- Integration tests for API routes
- E2E tests with Playwright for the editor flow
- Mock external services in tests
Deployment rules:
- Deploy to Vercel
- Use environment variables securely
- Automate previews for pull requests
- Provide build step to generate static landing content if needed
Things Claude must not do:
- Do not access or store private keys on the client
- Do not generate hard-coded production secrets
- Do not bypass server-side validation
- Do not use deprecated libraries

Recommended Project Structure

apps/
  landing-builder/
    src/
      app/
        layout.tsx
        page.tsx
        globals.css
      components/
        Editor.tsx
        Block.tsx
        PagePreview.tsx
      hooks/
      lib/
        supabase.ts
    public/
    tests/
  scripts/
    setup/
libs/
  supabase/
  cli-tools/

Core Engineering Principles

• Explicit contracts between client and server via API routes and server actions
• Type safety with TypeScript and Zod schemas
• Principle of least privilege for auth and database access
• Repeatable, testable, and auditable deployment pipelines
• Idempotent operations for deployment and content generation

Code Construction Rules

• All API routes must export handler functions with clear types
• Client components must avoid server-only logic
• Use server components for data fetching and avoid data fetching in client components
• Ensure tsconfig paths and baseUrl are correctly configured
• Prettier and ESLint must pass in CI

Security and Production Rules

• Hide secrets; use environment variables
• Enable CSRF protection for state-changing operations
• Enable Subresource Integrity for external scripts
• Run security scans and dependency checks

Testing Checklist

• Unit tests for utilities and hooks
• Integration tests for API routes and DB access
• End-to-end tests for editor flow
• CI should run tests on PRs

Common Mistakes to Avoid

• Over-scoping client components with server logic
• Ignoring type validation or relying on any
• Hard-coding secrets in repository
• Skipping server-side rendering when needed

Related implementation resources: AI Use Case for Software Agencies Using Github Copilot To Accelerate Boilerplate Code Generation for New Client Mvps and Why authorization checks belong in AI coding instructions for production-grade systems.

FAQ

What is a CLAUDE.md template?

A copyable CLAUDE.md template that instructs Claude Code to scaffold a Next.js TS app with Supabase, Clerk, Stripe, a drag-and-drop editor, and a deployment workflow.

Which stack does this template cover?

Next.js, TypeScript, Supabase, Clerk, Stripe, a drag-and-drop editor, and a deployment workflow.

How is authentication handled?

Clerk handles session management; ClerkProvider on the client; server actions for sign-in and sign-out.

How do I test and deploy?

Run unit/integration tests locally; deploy to Vercel with configured env vars and previews.