Stack Builder

Compose your full-stack app, layer by layer — every choice is validated live, and your naming, structure, and standards come baked in. Walk away with a scaffold command and a KICKOFF.md your coding agent follows to the letter.

Outputs a bun create command + a KICKOFF.md — not a generated project.

Project name

Used in the scaffolding command — sanitized to a safe slug.

Framework

Web Frontend

The web client framework.

Backend

The server framework that hosts your API.

Runtime

Where the server code executes.

API

Type-safe client/server contract.

Data

Database

Your primary data store.

ORM

How you talk to the database.

DB Setup

Hosted provider / local setup for the database.

Product

Auth

Authentication strategy.

Payments

Billing & monetization.

UI Library

Component system for the frontend.

AI & agents

AI Assistant

Coding agents wired into the repo.

MCP Servers

Model Context Protocol servers available to agents.

Skills

Reusable agent skill packs to install.

Vibe ModeLooser guardrails, faster iteration for prototyping.

Conventions

File naming

How files and folders are cased.

user-profile.tsx

Directory structure

Where application code lives.

All app code under src/.

Import paths

How modules reference each other.

Absolute imports from the app root.

Commits

Commit message convention.

type(scope): subject

TypeScript

Type-checking strictness.

strict + no implicit any.

Tooling

Deploy

Where the app ships.

Package Manager

Dependency & workspace tool.

Addons

Optional tooling & capabilities.

GitInitialize a git repository.

Install depsRun the package manager install after scaffolding.

Selected stack

Framework

Web Frontend: Next.js
Runtime: Bun

Data

DB Setup: Basic

Product

UI Library: Cooud UI

AI & agents

AI Assistant: Claude Code

Conventions

File naming: kebab-case
Directory structure: src/ directory
Import paths: @/ alias
Commits: Conventional
TypeScript: Strict

Tooling

Package Manager: bun
Git: On
Install deps: On

Cooud UI works best with cooud-ui

Your stack is ready

Hand this to your coding agent. KICKOFF.md is the single source of truth for the build.

KICKOFF.mdmarkdown

# KICKOFF — my-cooud-app

> Generated by the Cooud Stack Builder. This file is the **single source of truth** for the project's stack, conventions, and mission. Read it fully before writing any code.

## Mission

Build **my-cooud-app** on the stack below. Keep choices consistent with this stack — do not introduce frameworks, databases, or tools not listed here without explicit approval.

## Stack (resolved — the truth)

| Layer | Choice |
| --- | --- |
| Web | Next.js |
| Runtime | Bun |
| DB Setup | Basic |
| UI | Cooud UI |
| Package Manager | bun |

## Conventions & standards

Project standards — apply them everywhere, from the first commit, so the codebase stays consistent no matter who writes the next file.

- **Naming:** kebab-case for file and folder names (`user-profile.tsx`); keep React components PascalCase in code.
- **Structure:** all application code lives under `src/`; keep config at the root.
- **Imports:** use the `@/…` path alias for absolute imports; avoid deep relative paths (`../../../`).
- **Commits:** Conventional Commits — `type(scope): subject` (`feat`, `fix`, `chore`, …).
- **TypeScript:** strict mode — no implicit `any`, no `!` non-null assertions to silence the compiler.

## Repo map

```
my-cooud-app/
  apps/web/        # frontend application
  KICKOFF.md       # this briefing
  stack.json       # machine-readable stack snapshot
```

## Commands

```bash
bun install
bun dev
bun test
```

## AI capabilities configured

- **Assistants:** Claude Code
- **MCP servers:** none
- **Skills:** none

## Cooud UI contract

This project uses **Cooud UI**. Treat these as hard rules:

- Use **only** components from `@cooud-ui/ui` — never hand-roll a primitive that already exists.
- Use **only** semantic design-system tokens (e.g. `bg-surface-raised`, `text-fg`, `border-border`). Never hardcode hex/rgb colors or raw Tailwind palette classes.
- Compose class names with `cn` from `@cooud-ui/ui`.
- Add `"use client"` to any component that holds state or effects.
- Every interactive element must have a visible `focus-visible` ring and pass the axe a11y gate.
- Tag composite elements with `data-slot` for styling hooks.

## Guardrails

- Stay on the stack above; ask before adding new top-level dependencies.
- No secrets in the repo — use `.env` and document required vars in `.env.example`.
- Keep changes typed; do not introduce `any` or suppress type errors to ship.

## Definition of Done

- [ ] Type checks pass (no errors, no new `any`).
- [ ] Lint/format pass.
- [ ] Tests pass (and new behavior is covered).
- [ ] UI uses only `@cooud-ui/ui` + semantic tokens; axe a11y gate is green.
- [ ] App runs locally end-to-end against the configured stack.