skills/multi-tenant-architecture/SKILL.md
Provides architecture guidance for multi-tenant SaaS platforms on Cloudflare or Vercel. Covers platform choice, domain strategy, tenant identification and isolation, subdomain routing, custom domains and SSL, white-label setup, tenant context propagation, PSL submission, and mapping platform limits to pricing plans. Use when building a multi-tenant application or asking "how do I support multiple tenants", "build a white-label platform", "add custom domains", "route tenants by subdomain", or "map limits to plans". For general app folder structure use define-architecture; for scaffolding a new Next.js repo use scaffold-nextjs.
npx skillsauth add mblode/agent-skills multi-tenant-architectureInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
define-architecture), or scaffolding a new repo (use scaffold-nextjs).| Signals | Platform | Load | |---------|----------|------| | Tenants run untrusted or per-tenant code; need code-level isolation; edge-first compute on D1/KV/Durable Objects | Cloudflare (Workers for Platforms, dispatch namespaces) | cloudflare-platform.md | | All tenants share one Next.js codebase; need ISR, React Server Components, managed deploys | Vercel (App Router + Middleware) | vercel-platform.md, then vercel-domains.md for the domain lifecycle |
random.acme.com damages the whole domain.acme.app for tenants, acme.com for brand).tenant.yourdomain.com. Requires wildcard DNS. Simplest for many tenants.yourdomain.com/tenant-slug. No per-tenant DNS/SSL, but limits branding and complicates cookie isolation.tenant_id scoping. Middleware resolves tenant from hostname; every data query includes tenant context. Use Postgres RLS for defence-in-depth./domains/[domain] dynamic segment. Edge Config for sub-millisecond tenant lookups. 404 when no mapping exists.x-tenant-id, x-tenant-slug, x-tenant-plan on the forwarded request headers (not the response). Server Components read via headers(); API routes read from request headers:
// middleware.ts
import { NextRequest, NextResponse } from "next/server";
export function middleware(request: NextRequest) {
const hostname = request.headers.get("host") ?? "";
const tenant = hostname.split(".")[0]; // resolve from Edge Config/DB in production
const requestHeaders = new Headers(request.headers);
requestHeaders.set("x-tenant-id", tenant);
return NextResponse.next({ request: { headers: requestHeaders } });
}
@vercel/sdk for domain management. Database connections scoped by tenant_id, or database-per-tenant (Neon).@vercel/sdk for programmatic domain CRUD plus automatic Let's Encrypt SSL; wildcard subdomains require Vercel nameservers. See vercel-domains.md.robots.txt, sitemap.xml, llms.txt must vary by tenant; never serve them from /public. Cloudflare: generate in the tenant Worker. Vercel: route handlers under the domain segment (see vercel-platform.md).random.acme.com damages the entire acme.com reputation. Register a separate TLD for tenant workloads.headers() in Server Components reads forwarded request headers, so use NextResponse.next({ request: { headers } }) or the tenant id never arrives.tenant_id scoping: one missing WHERE clause leaks another tenant's data./.well-known/acme-challenge/* with Middleware or redirects: Let's Encrypt HTTP-01 validation fails and custom-domain SSL never issues.define-architecture: folder structure, module contracts, and middleware pipelines for the application itself.scaffold-nextjs: bootstrap the Next.js turborepo before applying these tenancy patterns.optimise-seo: per-tenant sitemaps, canonical URLs, and structured data once routing works.development
Designs and builds UI end to end, from visual direction (palettes, type scales, design tokens, layout systems, landing-page CRO strategy, brand kits) to Tailwind implementation with the ui.sh design guideline system, including multiple variants with an in-browser picker, semantic markup scaffolds from screenshots, retrofitting dark mode or responsive behavior, and componentizing or canonicalizing Tailwind code. Use when asked to "build a landing page", "create a dashboard", "make this look good", "make this look premium", "pick a visual style", "design the UI for", "show me 3 hero options", "improve conversions", "create a brand kit", "turn this screenshot into markup", "add dark mode", "make a dark version of this image", "make this responsive", "fix this on mobile", "componentize this page", "clean up the Tailwind", or any prompt that designs, creates, or refines UI code. For auditing existing UI use ui-audit; for motion use ui-animation; for landing page copy use copywriting.
development
Collaborative interrogation that produces an implementation plan before any code is written. Explores the codebase and relevant docs first, asks one question at a time with a concrete recommended answer, grills the rationale behind documented decisions, flags fuzzy terminology, and walks a decision tree until shared understanding is reached, then writes a plan file. First step of the shipping pipeline; it creates plans, plan-reviewer stress-tests them, pr-creator opens the PR. Use when asked to "create a plan", "help me think through this", "plan this feature", "I want to build X", "grill me", "grill with docs", "understand the docs", "unpack the decisions", "brainstorm a spec", "what should the plan be", "think this through with me", or before starting any non-trivial implementation.
development
--- name: pr-reviewer description: Reviews the current local diff or branch and returns a read-only, severity-tiered findings report. It never edits files. Four modes: standard bug and compliance review, structural quality, AI slop detection, and whole-codebase security audit. Use when asked to run /pr-reviewer, "review my changes", or "code review" before commit, push, or handoff. "Thermo-nuclear review", "structural review", "deep code quality audit", "harsh maintainability review", and "code
development
--- name: ux-audit description: Feature-level UX audit for React/Next.js code, diff-aware by default. Catches what Lighthouse, axe, ESLint, and Storybook miss: state-coverage gaps (missing loading/empty/error), form data loss on validation, double-submit, broken focus management, optimistic UI without rollback, stale async responses, skeleton-induced layout shift, and vague microcopy. 33 modern failure-mode rules plus 30 Laws of UX rules across 12 feature playbooks. Produces a 3-tier ship-readin