CLAUDE.md Template: Next.js TypeScript Supabase Clerk Stripe Kanban SaaS

Overview

Direct answer: This CLAUDE.md template outputs a full stack Next.js TypeScript SaaS with Supabase, Clerk, Stripe, AI task planning, team workspaces, and Kanban boards. It is designed to be copied into Claude Code and used as a starting point for a production grade SaaS project.

CLAUDE.md template is for building a complete Project Management SaaS using the specified stack. It provides an actionable, paste ready CLAUDE.md block and a structured project skeleton tailored to Next.js with TS, Supabase for auth and data, Clerk for user management, Stripe for payments, and Kanban workflows for teams.

When to Use This CLAUDE.md Template

• You are building a multi tenant PM SaaS with Kanban boards and AI task planning
• You use Next.js App Router with TypeScript
• You need integrated auth and billing via Clerk and Stripe
• You want AI assisted planning that can seed and optimize tasks in Kanban boards
• You require team workspaces with isolation per tenant

Copyable CLAUDE.md Template

# CLAUDE.md
Project role: Lead Frontend/Full Stack Engineer for Next.js TS Supabase Clerk Stripe Kanban SaaS
Architecture rules:
- Use Next.js app router in TS
- Use Supabase as DB and auth layer
- Use Clerk for user auth management
- Use Stripe for billing and subscriptions
- Implement Kanban boards with AI task planning
- Keep code strong typed and modular
File structure rules:
- apps/web
- infra/supabase
- services/clerk
- services/stripe
- ai/kanban
- src/components
- tests
Authentication rules:
- Use Clerk for login and user sessions
- Protect API routes with Clerk session checks
- Use JWTs for client-server communication
Database rules:
- Use Postgres via Supabase
- Enable Row Level Security
- Enforce foreign keys, proper indexes
Validation rules:
- Validate inputs server and client side
- Use zod for runtime validation
- Sanitize all inputs
Security rules:
- Do not expose private keys on client
- Use env vars; rotate keys
- Validate Stripe webhook signatures
- Implement CSRF protection
Testing rules:
- Unit tests for utilities and services
- Integration tests for API routes
- E2E tests for Kanban flows
Deployment rules:
- Deploy to Vercel with environment configs
- Use secret management and preview environments
- Set up automated tests on CI
Things Claude must not do:
- Do not modify production data without approval
- Do not bypass authentication
- Do not access other tenants data
- Do not hardcode secrets in code

Recommended Project Structure

my-saas/
├── apps/
│   └── web/
│       ├── app/
│       ├── components/
│       ├── hooks/
│       ├── lib/
│       ├── styles/
│       └── next.config.js
├── infra/
│   ├── supabase/
│   │   ├── migrations/
│   │   └── seeds/
├── services/
│   ├── clerk/
│   │   └── config/
│   └── stripe/
│       └── webhooks/
├── tests/
│   ├── unit/
│   └── integration/
└── README.md

Core Engineering Principles

• Type safety and explicit contracts across client and server boundaries
• Clear separation of concerns between UI, business logic, and infrastructure
• Security by default with proper auth, RBAC, and data isolation
• Incremental, observable changes with tests and metrics
• Performance budgets and streaming UX for Kanban tasks

Code Construction Rules

• All data models typed with TypeScript interfaces
• API routes validated on both server and client using a schema like Zod
• Supabase client initialized in a single lib and reused
• Authentication guards on protected endpoints using Clerk
• Stripe webhooks verified with the official signature library
• Kanban board actions are pure and testable; avoid side effects in UI actions
• Do not bypass auth or expose secrets on the client

Security and Production Rules

• Store all secrets in environment variables; never hardcode
• Enable Supabase Row Level Security for tenant isolation
• Validate Stripe webhook signatures and use replay protection
• Use secure cookies and httpOnly flags for session tokens
• Implement CSRF protection for state-changing forms

Testing Checklist

• Unit tests for utilities and domain logic
• Integration tests for API routes with real-ish data or mocks
• End-to-end tests for Kanban flows including AI task planning
• CI runs to execute tests on PRs and deploy previews
• Security and migration tests before production deploy

Common Mistakes to Avoid

• Overloading the client with business logic instead of using server boundaries
• Neglecting Row Level Security and tenant isolation
• Hardcoding secrets or API keys in code or commits
• Assuming Clerk roles without enforcing access control
• Ignoring Stripe subscription lifecycle edge cases

Related implementation resources: AI Use Case for Software Agencies Using Github Copilot To Accelerate Boilerplate Code Generation for New Client Mvps and Building production-grade forms with live validation and disabled double-click tokens.

FAQ

What is CLAUDE.md Template used for in this stack?

It provides a pasteable CLAUDE.md block and a recommended architecture for building a Next.js TS SaaS with Supabase, Clerk, Stripe, and Kanban workflows.

Which stack components are covered by this template?

Next.js with TypeScript, Supabase for database and auth, Clerk for user management, Stripe for payments, and Kanban boards with AI task planning.

How do I adapt the template for multi-tenant teams?

Follow the included architecture rules to segregate data by tenant and implement Row Level Security in Supabase; use Clerk roles and Stripe subscriptions per workspace.

Can I paste the CLAUDE.md block into Claude Code directly?

Yes, the block is copyable and designed to be pasted into CLAUDE.md with minimal edits.

What are common security considerations?

Ensure Stripe webhook signing, rotate keys, keep secrets in env vars, and avoid exposing private keys in the client.