Catalyst Dev Surface

Catalyst Surface

Your development toolkit — documentation, examples, demos, and project management at /~/

Your development toolkit in one place

The Catalyst dev surface unifies all development resources under the /~ namespace — documentation, examples, demos, and project management. Delete it when you ship.

Why This Exists

Catalyst separates your product from your development tools:

Clean separation

Product surfaces stay focused on users. Dev content lives in its own namespace that won't ship.

Easy removal

Delete app/(~) when you're ready to ship. No hunting through folders for dev-only content.

Reference at hand

Catalyst docs, examples, and demos available during development without polluting production.

Project management

Track briefs, view roadmap, and monitor project status — all in one place.

What's Included

The dev surface contains several sections, each with its own purpose:

Dev Home/~

Landing page with navigation cards to all dev sections.

Project Dashboard/~/catalyst

View briefs, roadmap, and project status. The control center for your Catalyst project.

Documentation/~/docs

Catalyst method documentation — workflow, design system, components, and more.

Examples/~/examples

Reference implementations you can copy. Dashboards, landing pages, analytics, and more.

Design Demo/~/demo

Design system playground. Preview colors, typography, and components.

Modules/~/modules

Module demos showing CRM, diagrams, activity feeds, and other Pro features.

Technical Details

Configuration

Route Group: app/(~)
URL Prefix: /~/*
Layout: Multiple shells
Auth: None (dev only)
Indexing: noindex by default

Folder Structure

app/(~)/
├── DEV.md          # Docs
├── dev.css         # Styles
├── layout.tsx      # Route layout
├── _surface/       # Shells
│   ├── docs-shell.tsx
│   ├── examples-shell.tsx
│   └── ...
└── ~/              # Routes
    ├── page.tsx    # /~
    ├── catalyst/   # /~/catalyst
    ├── docs/       # /~/docs
    ├── examples/   # /~/examples
    └── ...

Shells

Each section uses its own shell for navigation:

Shell	Used By	Navigation
CatalystShell	/~/catalyst/*	Project nav
DocsShell	/~/docs/*	Collapsible docs nav
ExamplesShell	/~/examples/*	Examples list
ModulesShell	/~/modules/*	Modules list

Pages without sidebars (/~, /~/demo) use minimal layouts.

For AI Agents

Key rules:

Catalyst surfaces are for your team, not users
All Catalyst content lives at /~/* URLs
Route group is app/(~)/ with routes under ~/
Each section has its own shell — use the appropriate one (DocsShell, ExamplesShell, etc.)
Read app/(~)/DEV.md for surface conventions
Delete the entire app/(~) folder when shipping to production