Step 5 of 6Support

Step 5

Tour the three regions

What you're about to do

Get oriented to how your app is organized, and learn how to ask your AI for help without breaking anything.

Why it matters

This page is short but important. The way your code is organized lets you use AI tools to customize and build your app without ever breaking the infrastructure underneath. Five minutes here saves you hours of confusion later.

What you'll need

Your code editor open with the boilerplate loaded. 5 minutes.

Your app has three regions

Look at the left sidebar in your code editor. Among other folders, you'll see three top-level folders:

/platform/
/website/
/product/

These are the three regions your app is built around. Each one has a clear purpose, and you'll work with them differently.

`/platform/` — the locked plumbing

What it is: Authentication (sign-in/sign-up), payments (Stripe), email sending (Resend), the admin dashboard, the journey UX you're about to use. The “plumbing” of a SaaS that you'd otherwise have to build from scratch.

What you do here: Nothing. You don't modify this region.

Why: This is shared code that's tested and works. When we ship updates to the boilerplate (new features, security fixes), they update /platform/ for you. If you've modified files in here, those updates can conflict with your changes. Keeping /platform/ untouched means you always get clean updates.

If you ever need a change here: Click Support and let us know. There's almost always a way to do what you want from /product/ or /website/ without modifying /platform/.

`/website/` — your marketing layer

What it is: Your public-facing pages. The landing page, the pricing page, the About page, your blog, contact forms — anything someone sees before signing up for your product.

What you do here: Customize freely. Change the hero, write your sales copy, add blog posts, design your About page, swap colors. Make it look like your brand.

Why this is its own region: Marketing changes shouldn't risk your infrastructure. Even when you ask your AI for a major redesign of your landing page, the AI can't accidentally touch your auth or payments — they live in /platform/ and the AI is instructed not to go there.

`/product/` — your actual app

What it is: Whatever your product is. If you're building a calendar app, your calendar lives here. If you're building an accounting tool, the accounting features live here. This is your unique value.

What you do here: Build your product. Add features, design UI, write business logic. Your AI tools work with you in this region.

How your AI tools know the rules

When you downloaded the boilerplate, it included a set of instruction files for AI tools. These files (named CLAUDE.md, .cursorrules, AI_INSTRUCTIONS.md, and a few others) tell any AI tool you use:

Don't modify files in /platform/
You can freely modify files in /website/ and /product/
Always ask before doing something that crosses regions
Follow specific patterns for adding routes, database tables, etc.

The good news: most AI tools find and read these files automatically.

Cursor reads .cursorrules and the per-region .cursor/rules/*.mdc files automatically. You don't have to do anything.
Claude Code (CLI) reads the CLAUDE.md files automatically.
GitHub Copilot in VS Code reads .github/copilot-instructions.md automatically.

When you need to paste the rules yourself

Some AI tools don't automatically read instruction files. If you're using:

Claude.ai in your browser
ChatGPT in your browser
Gemini in your browser
Or you're pasting code into any other web-based AI

...you need to give the AI the rules manually at the start of each session.

Here's a starter prompt you can copy:

I'm building a SaaS using a boilerplate with three code regions: /platform/ is locked infrastructure (auth, payments, email, admin). Never modify files here. /website/ is my marketing layer (landing, pricing, blog). I can modify freely. /product/ is my actual app code. I can modify freely. Other rules: Database tables in /product/ must be prefixed app_ (e.g., app_calendars). Never modify the /app/ directory directly — it's a routing manifest. To add new routes, use the pnpm new:route command. Never paste API keys or secrets into web forms or commit them to git — they go in .env.local only. If a request would require modifying files across regions, ask me to confirm first. I'll be asking for help with [region you're working in]. Please follow these rules throughout our conversation.

Paste that at the start of any session with a web-based AI. Then ask your actual question.

For your convenience, the full set of rules is saved in your project at AI_INSTRUCTIONS.md. Open that file anytime to copy the full content.

A quick example of safe AI use

Let's say you want to redesign your landing page. Here's a safe way to ask Cursor or Claude.ai for help:

“I want to redesign my landing page hero. The current one is in /website/pages/home/. Can you suggest a new layout with a video background, a bigger headline, and three feature highlights below? Just propose the layout — don't make changes yet, I want to review first.”

This works because:

You specified the region (/website/)
You asked for a proposal, not immediate changes
The AI has rules telling it not to touch /platform/ regardless

Even if the AI hallucinates or gets ambitious, your auth, payments, and admin systems are safe.

How to verify it worked

Quick mental check before moving on:

If I want to redesign my landing page, I work in: /website/
If I want to add a feature to my actual app, I work in: /product/
I should never edit files in: /platform/
Before pasting code into a web-based AI, I should: paste the starter prompt with the rules first

If those answers are obvious, you're good.

What to do if something went wrong▾

There's nothing to break in this step — it's all reading. But if you have questions about how the regions work or how to use AI safely with your boilerplate, click Support.

Continue to Step 6