A ten-role engineering team, in any repository.

Step one

Install

Run this from the root of any git repository. It writes configuration only — never credentials.

$ curl -fsSL https://raw.githubusercontent.com/RadhaKrishna0018/crew/master/scripts/install.sh | bash
⚡ Installing Crew into /path/to/your-repo
• Installed .claudecode/instructions.md (CTO orchestration playbook)
• Installed 8 subagent charters → .claude/agents/
• Installed company design system → docs/THEME.md, theme.css, theme-preview.html, brand/
• Created .claudecode/metrics.json ledger (repo=your-repo)
• Linked skill from CLAUDE.md
• .gitignore updated (handoffs + private ledger)

✅ Done. Open Claude Code in this repo and state a goal.

What it writes

Then state a goal

> Build a rate-limited REST API for orders with tests, budget 500k tokens.

The CTO plans, sets the cap, runs the architecture gate, spawns parallel waves, sends the Documentation Engineer in once behavior is approved, and QA opens the pull request. No UI is required — the terminal is the whole product.

The org

Ten roles, one frontier tier

The CTO is the main Claude Code thread — subagents cannot spawn subagents, so orchestration lives at the top. Everyone else is a native subagent with restrictions the harness enforces.

Summaries below. To read what each agent is actually told — the full text of every file under .claude/agents/, reproduced verbatim rather than paraphrased — see the agent charters.

Why the tiers sit where they do

CTO, Architect, and every build role run on Claude Opus 5, so quality is uniform and a handoff never crosses a capability cliff. QA sits one tier down on Claude Sonnet 5 deliberately: a reviewer that is not also the strongest author is less inclined to rewrite the work in its head instead of judging it. Lookups run on Claude Haiku 4.5.

Lifecycle

How a goal runs

These stages are strictly ordered — each one exists because skipping it costs more downstream.

Budget discipline

The CTO reads the ledger before every wave, not just at the start.

Agents never exchange raw transcripts — only short markdown handoffs under .claudecode/handoffs/, referencing path:line rather than pasting file bodies.

Defaults

Two modes, always on

Nobody has to remember to switch these on. .claude/settings.json declares both plugin marketplaces and enables both plugins, and each plugin ships its own SessionStart hook — so they are active from the first message, for the CTO and every subagent.

Offline fallback

Both cores are vendored into the repo at .claude/skills/ponytail-core/ and .claude/skills/caveman-core/, so the defaults hold with no network and no plugin install. Both are MIT licensed, with the license text kept beside each skill. The plugins add more — /ponytail-audit, /caveman-stats, the cavecrew subagents — so prefer them when they are available.

Turn either off for a session by saying so: stop caveman, stop ponytail, or normal mode.

Together they are how a goal lands under budget: fewer tokens per message and less code per task, without demoting a single role to a weaker model.

Design system

Every deliverable looks like one company

The theme is committed, self-contained, and org-portable: no private paths, no shared drive, no CDN. Clone the repo and you have the whole system, logo included.

The Documentation Engineer is the system's steward and the only role that may amend it; anything beyond a token value needs an Architect ruling. QA rejects a rendered deliverable that hardcodes a value the theme already tokenizes, pulls a font or stylesheet from a CDN, or opens dark without being asked.

The palette, live

Rendered from the same tokens this page is built on — toggle dark in the top bar and every swatch below moves with it. The full reference adds the type scale, every component, and the elevation ramp.

Components, live

Using the theme

Pick the delivery shape first

This one choice decides whether you link the stylesheets or inline them, and it is the most common reason a deliverable breaks after it leaves your machine.

Starter template

The hosted-site version. For a single file, replace the two <link> tags with the contents of both stylesheets in one <style> block, and swap the logo src for a data: URI.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Crew — Release Notes</title>
<link rel="stylesheet" href="theme.css">
<link rel="stylesheet" href="theme-components.css">
</head>
<body>

<!-- Top bar: the inlined mark, then the theme toggle -->
<div class="topbar"><div class="row">
  <span class="logo-chip"><span class="mark"><!-- inline brand/logo.svg --></span></span>
  <span class="prod">Crew</span>
  <span class="here"><span class="name">Upgrade Guide</span></span>
  <button class="themebtn" id="themebtn" type="button"
    aria-label="Toggle dark mode"><!-- sun + moon svg --></button>
</div></div>

<!-- Hero: eyebrow, h1, lede -->
<div class="hero"><div class="hero-inner">
  <p class="eyebrow">On-Premise Deployment</p>
  <h1>Upgrade to <span class="accent">3.4.1</span></h1>
  <p class="lede">What changes, what breaks, and how to roll back.</p>
</div></div>

<!-- Body: sidenav + prose column -->
<div class="shell split">
  <nav class="sidenav" aria-label="On this page">…</nav>
  <main class="content">
    <section id="prereqs">
      <p class="step-label">Before you start</p>
      <h2>Prerequisites</h2>
    </section>
  </main>
</div>

<footer><div class="in">Crew · 1.0.0</div></footer>

<script>
// Dark is opt-in. An explicit stored choice always wins.
const root = document.documentElement;
const stored = localStorage.getItem("theme-mode");
if (stored === "dark" || stored === "light") root.dataset.mode = stored;
document.getElementById("themebtn").addEventListener("click", () => {
  const isLight = root.dataset.mode === "light" ||
    (root.dataset.mode !== "dark" && root.dataset.theme === "light");
  const next = isLight ? "dark" : "light";
  root.dataset.mode = next;
  localStorage.setItem("theme-mode", next);
});
</script>
</body>
</html>

Embedding the fonts and the logo

Space Grotesk and JetBrains Mono are both OFL-1.1, so embed rather than link — a CDN <link> breaks offline viewing and fails under an artifact CSP. Weights used: 400 and 500 sans, 400 mono.

$ base64 -w0 ibm-plex-sans-latin-400-normal.woff2
# paste into: @font-face{...src:url(data:font/woff2;base64,PASTE) format('woff2')}
$ cat docs/brand/logo.svg   # paste inline; it is currentColor
# the logo, ready for an <img src="...">

Subset to latin unless the document needs more, and keep font-display:swap so text paints immediately. Skipping the fonts is fine for internal drafts — the stacks fall back to Segoe UI and Consolas without breaking layout.

Building blocks

Component recipes

All of these already exist in docs/theme-components.css. You write the markup, not the CSS.

Terminal block

Four span classes carry the meaning: .p prompt (unselectable, so a copied block pastes clean), .c command, .cm comment, .o output. Always show the expected output next to the command.

<div class="term">
  <div class="term-bar">
    <!-- 14px icon --><span class="term-title">verify.sh</span>
    <span class="term-actions"><button class="term-btn">copy</button></span>
  </div>
  <pre><span class="p">$ </span><span class="c">kubectl get pods</span>
<span class="cm"># all nine services should report Running</span>
<span class="o">crew-api-7d9f4b8c6-x2k9p   1/1   Running</span></pre>
</div>

Callouts

Four severities: default (brand), .warn, .bad, .ok. Place a warning before the step it applies to, never after.

<div class="note warn">
  <!-- 17px triangle icon -->
  <span><b>This deletes the volume.</b> Snapshot first.</span>
</div>

Status — never colour alone

Every pill carries a word. The colour reinforces it; it never has to carry the meaning by itself. That is what keeps the system readable in greyscale print and for colour-blind readers.

<span class="pill running">running</span>
<span class="pill pending">pending</span>
<span class="pill failed">failed</span>

Definition rows

For env vars, flags, and config keys. The key goes in <code> and renders in --red; the grid gap is the divider.

Wide content

Tables, diagrams, and terminal blocks scroll inside their own container. Wrap a table in <div class="tbl-wrap"> — the page body must never scroll sideways, at any width down to 320px.

Reference

Choosing a token

When you are unsure which token a value should be, read down this table rather than picking a hex that looks close.

Avoid

What QA rejects most often

.panel {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r);
}

<link href="https://fonts.googleapis.com/
  css2?family=IBM+Plex+Sans" rel="stylesheet">

@font-face{font-family:'Space Grotesk';
  font-weight:400;font-display:swap;
  src:url(data:font/woff2;base64,…)}

@media (prefers-color-scheme: light) {
  :root { --page: #FFFFFF; … }
}

:root[data-mode="light"] {
  --page: #FFFFFF; …
}

<img src="brand/logo.svg">
<!-- currentColor cannot resolve -->

<span class="logo-chip">
  <span class="mark"><svg …>
    <!-- inlined --></svg></span>
</span>

button:focus { outline: none; }

button:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

Before you hand off

Ship checklist

QA runs every one of these. Checking them yourself first turns a two-cycle review into one.

• No hardcoded value that has a token — search the file for # and px and justify every hit.
• Correct delivery shape: single files inline the CSS and the logo; hosted pages link same-origin copies. No CDN either way.
• Opens dark. The toggle switches to light and back, and the choice survives a reload.
• Mark inlined as SVG so it inherits currentColor, sized square, with a text alternative.
• Tab through the whole page — every interactive element shows a focus ring.
• No status conveyed by colour alone.
• Narrow the window to 320px — nothing overflows the body horizontally.
• prefers-reduced-motion and @media print blocks present. Print-preview it: chrome hidden, white canvas, one column, accordions open.
• Every command in the document was actually run, and the output shown is the real output.

Checks

Verify an install

$ ls .claudecode/
adr  handoffs  instructions.md  metrics.json  plans
$ ls .claude/agents/ | wc -l
8
$ grep -H '^model:' .claude/agents/*.md
# everything except qa-reviewer (sonnet) and support-query (haiku) must be opus
backend-engineer.md:model: opus
devops-lead.md:model: opus
documentation-engineer.md:model: opus
frontend-engineer.md:model: opus
principal-architect.md:model: opus
qa-reviewer.md:model: sonnet
support-query.md:model: haiku
test-engineer.md:model: opus

In Claude Code, /agents should list all eight roles. If a role is missing, the charter did not download — re-run the installer.

Rollout

Onboarding colleagues

Each colleague runs the same one-liner in their own clone. Claude Code executes with their credentials, so every instance is fully isolated: separate budgets, separate ledgers, no shared state, and nothing leaves their machine.

Point new joiners at the theme reference first, then this page. The playbook itself is short enough to read in one sitting — .claudecode/instructions.md.

Guardrails

Security

The guide, the charters and the theme preview are public and indexable — this is a portfolio piece. The dashboard keeps noindex and is disallowed in robots.txt: it is an operator view, and the ledger it reads is never deployed. The full hardening checklist lives in docs/SETUP.md.