CLAUDE.md Template: Next.js + TypeScript + Supabase + Clerk + Stripe AI Image Prompt Marketplace

Overview

CLAUDE.md template for building a complete AI Image Prompt Marketplace using Next.js, TypeScript, Supabase, Clerk, and Stripe. This template covers a full stack: frontend with Next.js, strong TS typings, a Postgres back-end via Supabase, authentication via Clerk, payments via Stripe, a built-in prompt library, and support for creator payouts and search.

Direct answer: This CLAUDE.md template provides a ready-to-paste instruction block for Claude Code to bootstrap a production-grade AI image prompt marketplace with the exact stack listed above.

When to Use This CLAUDE.md Template

• When you need a complete, production-ready blueprint for a Next.js + TypeScript AI image marketplace.
• When you require authentication via Clerk and payments via Stripe with creator payouts.
• When you want a built-in prompt library and search capabilities backed by Supabase.
• When you need explicit Claude Code instructions you can paste into CLAUDE.md.

Copyable CLAUDE.md Template

# CLAUDE.md
Project role: You are a production-ready AI Image Prompt Marketplace Engineer building a Next.js + TypeScript app with Supabase, Clerk for authentication, Stripe for payments, a prompts library, and creator payouts. Implement robust search and a clean developer experience.
Architecture rules:
- Build a Next.js 14+ app using the app router with server components for data fetching, and API routes for payments and payouts.
- Use Supabase Postgres as the primary database; enable Row-Level Security (RLS) and per-table policies; store sensitive data in secure storage buckets when needed.
- Use Clerk for authentication, session management, and user roles (buyer, creator, admin).
- Implement Stripe payments and payouts with webhooks; keep Stripe secrets in environment variables and verify webhook signatures.
- Implement a dedicated search index (PostgreSQL full-text search or a small dedicated search service) with re-validation on write.
- Use a server-first approach; render most pages on the server and progressively hydrate interactive components.
File structure rules:
- Monorepo layout: apps/marketplace/ with src/, libs/, and shared components.
- Entrypoints: apps/marketplace/src/app/ (routes and pages); apps/marketplace/src/pages/api/ (legacy APIs if needed).
- Central DB client: libs/db/supabaseClient.ts, and libs/db/schema.ts for types.
- UI components under apps/marketplace/src/components/.
Authentication rules:
- Enforce Clerk authentication on all protected routes; use middleware to guard server and edge routes.
- Enforce role-based access: creators can create prompts and receive payouts; buyers can purchase prompts; admins manage payouts and moderation.
Database rules:
- Tables: users, prompts, prompt_assets, purchases, payouts, products, and transactions.
- Implement Row-Level Security with policies by user_id and creator_id where appropriate.
- Validate relationships and cascade rules to maintain referential integrity.
Validation rules:
- Validate request bodies with a Zod-like schema (or TypeScript guards) on all API routes.
- Sanitize uploads and prevent invalid content; reject non-image prompt assets unless allowed.
Security rules:
- Do not expose secret keys on the client; store secrets in environment variables; verify Stripe webhook signatures.
- Do not trust client-provided JWTs; verify Clerk sessions server-side; authorize actions using server-side checks.
Testing rules:
- Unit tests for utilities and shared hooks; integration tests for API routes; end-to-end tests for signup, prompt creation, purchase, and payout workflows.
Deployment rules:
- Deploy to Vercel or your preferred hosting; configure environment variables; set up Supabase with appropriate policies; configure Stripe webhook endpoints.
- Enable CI to run tests and linting on pull requests; run migrations during deployment.
Things Claude must not do:
- Do not bypass Clerk authentication or manipulate database on the client side.
- Do not store credentials or Stripe secrets in frontend code; do not execute payouts from client-side code.

Recommended Project Structure

my-marketplace/
├─ apps/
│  └─ marketplace/
│     ├─ src/
│     │  ├─ app/
│     │  │  ├─ layout.tsx
│     │  │  ├─ page.tsx
│     │  │  ├─ search/
│     │  │  │  ├─ route.ts
│     │  │  │  └─ components/
│     │  │  ├─ prompts/
│     │  │  │  └─ page.tsx
│     │  │  └─ payouts/
│     │  │     └─ page.tsx
│     │  ├─ lib/
│     │  │  ├─ supabase.ts
│     │  │  └─ clerk.ts
│     │  └─ styles/
│     └─ package.json

Core Engineering Principles

• Clear contracts between server and client with strict typing (TypeScript).
• Security-by-default with Clerk auth and Supabase RLS.
• Single source of truth for data with centralized DB access layer.
• Performance-first: server components, caching, and indexed search.
• Testability: unit and integration tests for critical paths; CI/CD enforcement.

Code Construction Rules

• Use TypeScript everywhere; enable strict mode; avoid any.
• Prefer Server Components for data fetching; limit client-side state to interactive UI only.
• Api routes must validate input using schema-based validation (Zod-like) and reject invalid data with 400s.
• Store Stripe secrets and API keys only in environment variables; never hardcode in code.
• Structure components by feature; avoid deep prop drilling; favor hooks and context where needed.

Security and Production Rules

• Use Clerk middleware to protect routes; verify sessions on both server and edge.
• Enforce Supabase RLS policies per role; never expose private data to buyers.
• Validate Stripe webhook signatures and handle idempotent events.
• Do not log sensitive data; redact PII in logs and error reporting.

Testing Checklist

• Unit tests for utilities and hooks; integration tests for API routes; end-to-end tests for key user flows.
• Test deployment on staging; verify migrations run and environment variables are loaded.

Common Mistakes to Avoid

• Failing to enforce authentication in API routes; exposing DB keys on the client.
• Not implementing proper Supabase RLS; allowing privileged reads to unauthorized users.
• Ignoring search indexing or performance considerations; large payloads without pagination.

FAQ

What stack does this template cover?

Next.js, TypeScript, Supabase, Clerk, Stripe, with a built-in prompt library and search for an AI image marketplace.

How do I use the CLAUDE.md block?

Copy the code block and paste into your CLAUDE.md file; adapt IDs, endpoints, and environment values to your project.

Is this production-ready?

It provides production-ready patterns; you must tailor policies and secrets to your environment before going live.

How do payouts work?

Stripe payouts are wired via webhooks; ensure creators have Stripe-connected accounts and verified payment methods.

How do I test and deploy?

Run unit/integration tests locally; deploy to Vercel or your provider; configure env variables and run migrations on deploy.

Related implementation resources: AI Agent Use Case for Industrial Equipment Manufacturers Using Service Manual Databases To Guide Field Technicians Through Repairs and Track Real-Time System Health on Public Layouts: Production-Grade Dashboards for Enterprise.