DEV Community: Creative Brain Inc

I gave Claude Code 24 specialist roles, then used them to rebuild my own agency

Creative Brain Inc — Thu, 11 Jun 2026 22:38:33 +0000

TL;DR — A few months ago I posted that I'd given Claude Code 16 specialist roles to ship features solo. I didn't stop at 16. It's 24 now — and the change I actually care about isn't the count. I split every auditor into a read-only finder that can't touch your code and a scoped fixer that changes only what was flagged. Six slash commands became eleven. The whole system is now a one-command plugin install. Then I did the obvious thing: I pointed the agent team at my own company and rebuilt Creative Brain's site with it — client zero. Same gather → delegate → verify loop I'd run on a client repo.

Where this started

If you read the first article, here's the one-paragraph recap: I'm a solo founder. I built a Claude Code plugin where one orchestrator session does nothing but gather context, delegate to a narrow specialist, and verify the output. Sixteen specialists, six slash commands, file-based memory in memory/, and safety hooks that block dangerous moves in the runtime. Idea to staging in under an hour, everything in the repo, no new SaaS.

That system worked. So I kept building it. This is the "I didn't stop at 16" update — and then the part I'm actually proud of: what the system let me do.

Fig 1 — One orchestrator gathers context and delegates; each specialist works in its own clean context window.

The one change that mattered most: split find from fix

Here's the most important thing I changed, and it's not the headcount.

Before, a single agent would "find the bug and fix it." Sounds efficient. In practice it meant: "found 14 issues — and quietly rewrote three unrelated files while it was in there." Classic. When one agent finds a problem and patches it in the same breath, it gets ambitious. You ask it to tighten one auth check and it "tidies up" three other files while it's there. Now your diff is a mystery and your review is useless.

Fig 2 — The anti-pattern: one agent that both finds and fixes has an unbounded blast radius.

So I split every auditor in two:

Finders are read-only. They scan the diff and hand back a structured report. They literally cannot touch your code — their tool allowlist has no write access.
Fixers take that report and change only what was flagged. Nothing else.

The loop becomes: find → I read → scoped fix. A read-only audit, then I read it, then a fix that does exactly one thing. Reviewable. Boring. Safe. Every agent's blast radius shrank to one job.

Fig 3 — The split: a read-only finder reports issues, and a scoped fixer changes only what was flagged.

Fig 4 — Before, one move touched everything. After, each agent is scoped to exactly one job.

This is the kind of constraint that's invisible until you've been burned by its absence. If you run coding agents: do you actually constrain what your "fix" step is allowed to touch — or do you just hope?

What else changed since the last post

The numbers moved, and I want to be precise about them because the build status is now reconciled against the actual files on disk — not aspirational counts.

16 specialists → 24. The roster grew, but mostly because the auditors doubled (a finder and a fixer where there used to be one combined agent), plus a few new roles.
6 slash commands → 11. Added a rollback-author, a performance profiler, a BRD-to-roadmap command, and a changelog builder, among others.
A setup script → a one-command plugin install. It used to need a setup script. Now it's /plugin install and you've got the full roster, no scaffolding step.

Fig 5 — The 24 specialists in four bands — the audit band is where the finder/fixer doubling happened.

Fig 6 — Six commands became eleven: rollback, perf profiler, BRD→roadmap, changelog builder, and more.

That last bullet matters more than it sounds. A one-command install is the difference between "a thing I built for myself" and "a thing someone else can actually run." The whole roster — agents, commands, hooks, memory model — installs in one move.

Fig 7 — /plugin install brings the whole roster in one command. No setup script.

The rule I'd bet the whole thing on

Everything above rests on one principle, and it hasn't changed since the first article:

The safety gates live in the runtime, not the prompt. A prompt can be ignored. A runtime gate cannot.

Claude Code's hook system runs scripts at lifecycle events, and I use them to enforce hard limits — no force pushes, no rm -rf near root, no production deploy without my explicit approval, every write appended to an audit log. These aren't polite requests in a system prompt that a confident model can rationalize past. They're hooks. They run in the runtime layer. The AI cannot override them.

The finder/fixer split is the same idea pushed one level deeper. A finder being read-only isn't a sentence in its prompt asking it nicely not to edit files — it's an empty write-tool allowlist. The constraint is structural, not advisory. That's the whole reason I trust the system enough to point it at production.

Fig 8 — Hooks gate the tool lifecycle in the runtime layer — a dangerous command is blocked before it runs.

Then I made my own company client zero

This is the part I actually wanted to write about.

For years, Creative Brain was a creative + web development studio — good work, but priced and paced like every other shop: scoped in weeks, billed by the hour. The pivot to an AI-native agency wasn't a new logo. It was a new way of building. And before I sold "we ship with a gated AI agent team" to a single client, I made myself client zero.

So I pointed my own 24-specialist Claude Code team at creativebrain.ca and rebuilt the whole site:

a full /services architecture
a free /tools suite and a /seo-tools suite
a complete custom illustration system — no stock, no icon-library filler, hand-built SVGs in one coherent family
an actual design system, tokens and all, documented

The loop was exactly the one I'd run on a client repo. A planner spec'd it. Builders wrote it. Read-only finders audited it. I reviewed and shipped:

planner drafts the spec        → I approve
builders implement             → finders audit (read-only) → I review
I ship

gather → delegate → verify. What used to be a 2–3 week site project compressed into 3–4 days of focused sessions — because I wasn't doing the typing, I was doing the deciding.

Fig 9 — Client zero: the same gather→delegate→verify loop, pointed at the agency's own site.

The honest part (this hasn't changed either)

The AI did not replace the taste. Every design call, every "no, not that," every brand decision was mine. The agents gave me leverage, not judgment — and that's still the job. A few more honest limits, same as the first article:

It's slow on day one of a new repo. The specialists need a memory/ to read against. Day three, it flies; day one, you're hand-holding.
Migrations still make me nervous. I read every Supabase migration line by line. The auditor is a second opinion, not the final word.
It still can't design anything beautiful. Correct, accessible components — yes. Taste — no. That's on me.
It costs tokens. Twenty-four specialists run against a non-trivial diff eat budget. The trade vs. the alternative is still wildly favorable, but it isn't free.

None of that is a disclaimer. It's the reason the system is safe to run: I know exactly where it stops being trustworthy, and the gates are built around those edges.

Fig 10 — The receipt: a 2–3 week studio project compressed into 3–4 days of focused, decision-led sessions.

So what's the pitch now

Creative Brain isn't "a studio that uses AI." It's an agency where one person plus a gated agent team ships at a pace a traditional shop can't match — in fixed-price, fixed-scope Sprints, most of them 14 days, with the client owning 100% of the code on day one. The rebuilt site is the receipt: live, custom, and built by the exact system I've been posting about.

If you run an agency or a studio, here's the question the rebuild left me with: what's the one project you'd redo from scratch if your build time dropped by 5x?

And if you want to see this running on your stack — Next.js + Supabase or otherwise — I do free 15-minute walkthroughs. I'll look at your repo and tell you honestly whether the approach fits:

→ https://calendly.com/creativebrain-ca/free-mvp-strategy-call

The whole orchestrator pattern — the 24 agents, the finder/fixer split, the hooks, the memory model — is documented in the repo. Drop a question in the comments with your stack and I'll dig into the specifics.

I built a local-first dashboard for everything Claude Code does on my machine

Creative Brain Inc — Tue, 19 May 2026 16:51:02 +0000

Claude Observatory turns ~/.claude into a searchable, visual command center — 16 modules, live SSE updates, zero outbound network. Here's what's inside and why I built it.

Every Claude session, every token, every command — visible

If you use Claude Code daily, your ~/.claude/ directory already contains the answer to most of the questions you keep asking yourself:

"How much did I spend on Claude last week, and on which projects?"
"Where did I write that prompt three weeks ago?"
"Which tool calls are slowest or failing most?"
"Which skills, MCPs, and CLAUDE.md files are actually loaded for this project?"
"What did I tell Claude to do that I forgot to follow up on?"

The data is right there in JSONL files, SQLite databases, and config blobs scattered across folders. It's just not browsable.

So I built Claude Observatory — a local-first Next.js dashboard that reads ~/.claude/, indexes it into SQLite, and exposes 16 modules + 7 "killer" features. No outbound network, bound to 127.0.0.1, no telemetry. Your data never leaves the machine.

This is the technical tour: what's in the box, how it's wired, and what I learned shipping it.

The dashboard at a glance

The Command Center is the home page — today's spend, recent sessions, live status dot, and quick links into every module. There's also a dark theme if you live in the terminal:

The left sidebar is the navigation spine. Every module is a separate route, every route is bookmarkable, and the live status dot at the top tells you whether the file watcher is attached.

The three-layer architecture

~/.claude/                    →  Index Layer            →  UI (Next.js)
├── projects/*.jsonl              ├── parser workers          ├── 16 module routes
├── sessions/                     ├── SQLite + FTS5           ├── live SSE updates
├── todos/                        ├── chokidar watcher        ├── recharts/d3 viz
├── skills/                       ├── API routes              └── monaco editor
├── bash-commands.log             └── SSE stream
├── cost-tracker.log
└── 17+ more sources

Stack: Next.js 16 (App Router) · React 19 · TypeScript strict · Tailwind 4 · shadcn/ui · better-sqlite3 with FTS5 · zod · chokidar · TanStack Query · zustand · recharts · d3 · Monaco Editor.

Why local SQLite over a hosted Postgres? Because the data is local. Round-tripping your conversation history through a cloud DB just to render a chart of your own spend is the wrong tradeoff. better-sqlite3 is synchronous, lives next to the app, and runs the entire 16-module dashboard with sub-50ms p95 on most pages.

The 16 modules

Here's the full list — Command Center · Sessions · Search · Cost & Tokens · Tool Heatmap · Bash Explorer · File History · Skills · MCP Hub · Memory · Todos · Activity · Telemetry · Prompts · Settings · Headless & Agent Mode.

Let me show the ones that surprised me most.

Sessions Explorer

Every session, filterable by project / model / status / text content. Click in and you get the full conversation. This is the page I open when I half-remember an exchange and want the verbatim transcript.

Cost & Token Analytics

Daily / weekly / monthly USD + token breakdown, per project and per model. The first time I opened this page on my own data I made three immediate workflow changes. That's what the dashboard is for.

Tool Usage Heatmap

Calendar heatmap + 24h distribution + per-tool table + outliers. p95 = 14.9ms. The "when does Claude actually run" question turns out to be answerable to the hour.

Bash Explorer

Every shell command Claude has run on your behalf, with a dangerous-pattern panel that flags rm -rf, force-pushes, sudo, etc. Built over the tool_calls table via json_extract — no schema migration needed.

File History & Diff

Every file Claude has written or edited, with a lazy-loaded Monaco DiffEditor on the detail page. 676 files indexed on my machine. Useful when you want to roll back a specific edit but don't want to read commits.

Skills Library

Inventory of every skill under ~/.claude/skills/ and ~/.claude/plugins/*/skills/, with FTS5-powered trigger counts. 862 skills on my machine. That's not a typo.

MCP Hub

Declared (mcp.json) plus observed MCP servers, merged into one view, with env values scrubbed before display. Tells you what's actually wired vs. what you think is wired.

Memory Explorer

Every CLAUDE.md plus the auto-memory store under ~/.claude/projects/<id>/memory/*.md. Six scopes (global / project / .claude / nested / auto-index / auto). Detail page shows siblings in the sidebar so you can navigate a project's whole memory tree without leaving the page.

Todos

TodoWrite items across all sessions, with a 4-status filter and an abandoned-todo panel for things in_progress > 7 days. 30 files, 37 items, 13 abandoned on my machine when I first turned it on. (I had a productive afternoon after that.)

Activity Heatmap

Calendar heatmap of sessions per day, current streak, busiest hour. Reuses the heatmap component from /tools. Streak tracking turned out to be motivating in a way I didn't expect.

Telemetry

Error rate, slowest tools, retry counts. 30-day window: 4,986 calls, 9.7% error rate, Write at 17.9% is the worst-performing tool. I pivoted away from latency histograms because tool_calls.duration_ms is unpopulated in current JSONL — the honest banner on the page explains it.

Prompt Library

Reads ~/.claude/history.jsonl on demand. Top-reused prompts, project facets, slash-command frequency. p95 = 3ms.

Settings (first write-capable surface)

This is where Mutations live — see "Editing without footguns" below.

Headless & Agent Mode

Inspects claude -p runs and the agent-harness session feed. Pair this with the API Server module if you want to use your own machine as a Claude server:

Live updates without polling

The Observatory watches ~/.claude/ in real time with chokidar (400ms trailing-edge debounce). When Claude Code writes a new JSONL line, the SSE stream at /api/stream invalidates the relevant TanStack Query keys and the UI updates without a refresh.

The LiveStatusDot in the sidebar shows one of three states:

● Live (green) — watcher attached, last event was recent
● Starting (amber) — watcher initialising
● Offline (red) — watcher detached

Three colors, one component, zero confusion. I tried react-use-websocket first and ripped it out — SSE is simpler, one-way, survives proxies, and the entire watcher → broadcaster → SSE → query invalidation pipeline fits in about 150 lines.

Editing without footguns

Writes to ~/.claude/ are off by default. To enable them:

Go to /settings
Flip the Mutations toggle ON (persisted in zustand+localStorage)
Every subsequent write request includes an X-Mutations-Confirmed: 1 header
Server-side handlers reject any write without it
Every overwrite creates a timestamped backup (e.g. settings.json.bak.2026-05-15T12-30-00)
An in-memory audit log shows every write attempt — even rejected ones

This is enforced in code, not in UI alone. There is no way to mutate ~/.claude/ from the app without going through the gate. I'm bullish on this pattern for any tool that touches a user's config directory — toggle in client state, header in transit, gate at the server, audit log in memory. Four layers, all cheap.

The 7 killer features

Modules tell you what happened. Killer features change what you can do with it:

Time-Travel Replay & Fork — Git rebase, but for AI conversations.
Ask Your History — Natural-language Q&A over your entire Claude history.
The Twin — A specialized agent fine-tuned on you.
Self-Evolving CLAUDE.md — Your AI gets smarter every week, autonomously.
AI ROI Dashboard — The single number that ends "is Claude worth it?"
Budget Autopilot — Spend governance that runs itself.
Personal Headless API — Your machine becomes a Claude server.

Some are alpha-shipping today:

Ask Your History uses a local prompt-to-SQL pipeline. Type a question, the system generates a SELECT against the index and answers in plain English. "What did I spend on the Reddit SaaS project last month?" becomes a chart and a sentence.

AI ROI Dashboard answers the one question every team eventually asks. It's not magic — it's just every number you already have, presented as a ratio.

Budget Autopilot sets per-project and per-month caps with anomaly alerts. Burn rate visible at a glance.

Self-Evolving CLAUDE.md watches your sessions and suggests CLAUDE.md improvements weekly. Append, accept, reject — your call, never automatic.

Privacy: the part most observability tools skip

The dev server binds to 127.0.0.1. Never 0.0.0.0.
Zero outbound network traffic in the free tier. Cloud sync, AI summaries, and the Headless API are explicit opt-ins.
.credentials.json is never read or displayed — the UI only shows a Connected · expires in Nd string.
The SQLite index lives next to the app under data/observatory.db and can be wiped at any time with pnpm db:reset.
The watcher reads only; it never writes to ~/.claude/ unless Mutations is ON.

If you're going to build a tool that introspects another tool's home directory, the absolute minimum is to be loud about what it does and does not touch. The threat model lives in SECURITY.md and is enforced in tests.

First-run setup

pnpm install
pnpm scan:initial    # one-time full index of ~/.claude/
pnpm dev             # serves at http://127.0.0.1:7777

The initial scan is the slow part — everything after that is incremental via the watcher. On a populated ~/.claude/ the first scan takes about a minute. After that the dashboard opens cold in under a second.

What I'd build differently if I started over

Three things, briefly:

Start with the watcher, not the scanner. I built the full-scan pipeline first and bolted live updates on later. Building incremental from day one would have been cleaner.
Treat tool_calls.duration_ms as aspirational. It's not populated reliably in current JSONL. Don't build histograms on top of fields that may not exist.
One gate, four layers. The Mutations pattern (toggle → header → server check → audit log) is the design I'm most proud of. Worth doing from the start, not retrofitted.

If you are interested in trying it out

DM me and I will send you the repository. It's going to be an open source, MIT for the Solo tier. Bind to 127.0.0.1, run pnpm scan:initial, and open http://127.0.0.1:7777. If you use Claude Code daily, give it ten minutes — and let me know what you find on /cost and /tools.

If you build a module on top of it, I want to see it. There are 16 today; the architecture is a parser layer + a query layer + a route, and adding a 17th is genuinely a single afternoon.

Andy / Creative Brain Inc. — Toronto, Ontario. Find me at andy@creativebrain.ca.

I gave Claude Code 16 specialist roles. Now I ship full-stack features before lunch.

Creative Brain Inc — Thu, 07 May 2026 18:37:29 +0000

I'm a solo founder. I built a Claude Code plugin where one orchestrator session dispatches 16 narrow AI specialists (planner, api-builder, ui-builder, bug-hunter, security-scanner, accessibility-tester, supabase-auditor, deployer, and more). They coordinate through plain markdown files in memory/. Hooks block force pushes and ungated production deploys. Six slash commands take a feature from idea to staging in under an hour. Everything lives in the repo. No new SaaS subscription. No data leaving the machine.

The problem nobody admits out loud

Solo founders aren't slow because they can't code. They're slow because they wear eight hats at once.

A 30-minute task becomes 3 hours when you also have to think about: "is this auth flow safe?", "did I add the migration?", "is the README still accurate?", "do the keyboard shortcuts work?", "did I just push a service_role key to the client bundle?"

The context-switching tax is the real cost of shipping alone. So I stopped trying to be eight people, and built an orchestrated AI engineering team that I direct instead.

The pattern: orchestrator does context, specialists do the work

The single most important design decision: the orchestrator does not write code.

The main Claude Code session has one job — gather context, delegate to a specialist, verify the output. That's it. Every actual write operation (code, migration, doc, deploy) runs inside a narrow subagent with a tight system prompt and a single concern.

Why this matters: a generalist AI burns context on every task. By the time it's writing your migration, it's also remembering your CSS opinions, your API conventions, the bug it fixed yesterday, and the README you asked it to update. The output gets fuzzier as the context fills up.

A roster of specialists with clean context windows beats one big context every time. The orchestrator is the only one with persistent memory of the whole project — and it leans on the file system (memory/) for that, not the chat buffer.

┌──────────────────────────────────────────────────────────────┐
│  Orchestrator (main Claude Code session)                     │
│  → reads memory/ → delegates to specialist → verifies output │
└────────────┬─────────────────────────────────────────────────┘
             │
   ┌─────────┼─────────┬──────────┬───────────┐
   │         │         │          │           │
   ▼         ▼         ▼          ▼           ▼
 planner  api-bldr  ui-bldr   bug-huntr  security-scnr   ...

The 16 specialists

Each specialist is a Claude Code subagent — its own markdown file in agents/, its own system prompt, its own tool allowlist. They group into four bands:

Planning band

planner — turns a one-line ask into a precise spec with acceptance criteria
architect — picks patterns, writes ADRs, evaluates trade-offs
brd-decomposer — turns a Business Requirements Doc into a phased roadmap

Build band

api-builder — Next.js route handlers, validation, error contracts
db-architect — schema, RLS policies, indexes
ui-builder — React components, design-token-aligned, a11y-aware
test-author — unit + integration coverage for what just shipped
migration-author — Supabase migration files with up/down logic

Audit band (run in parallel)

bug-hunter — runs against the diff, looks for runtime bugs
security-scanner — looks for auth holes, leaked secrets, injection
accessibility-tester — keyboard, contrast, ARIA, focus traps
supabase-auditor — RLS coverage, policy gaps, exposed service keys

Operations band

supabase-deployer — pushes migrations, gated
bug-fixer — closes a single bug, tightly scoped
docs-writer — keeps the README and CHANGELOG honest

Sixteen narrow files beats one giant prompt. Each specialist's prompt is ~80 lines max, focused entirely on its concern. Swapping one out is a one-file change.

File-based memory: the part nobody else does

The orchestrator's memory does not live in chat. It lives in your repo, in markdown:

memory/
├── activity-log.md       # append-only — every Write/Edit auto-logged
├── current-sprint.md     # what we're working on RIGHT NOW
├── roadmap.md            # phased plan from the BRD
├── known-issues.md       # bugs we know about, won't ship today
├── ADR-template.md       # architecture decisions
└── brds/                 # source business requirements
    └── _BRD-TEMPLATE.md

Why files, not a vector DB:

It's diffable. Every memory change shows up in git log. You can see, line by line, what the AI thought yesterday vs. today.
It's portable. Switch to a different AI tool tomorrow? Your memory is still there. Plain markdown.
It's reviewable. I read current-sprint.md myself before standup. The AI and I share the same source of truth.
It survives sessions. Close Claude Code, reboot, come back next week — memory/ is still there. The orchestrator picks up exactly where it left off.

A vector DB would give you "similar past work" lookups. A file system gives you precise, auditable, version-controlled state. For a solo team, files win.

Six commands. Idea to production.

The whole workflow surfaces as six slash commands. Type one, the orchestrator dispatches the right specialists.

/cbinc-init-from-brd    # Read a BRD, spit out a phased roadmap
/cbinc-plan             # Draft a spec for a single feature
/cbinc-implement        # Build it (api + ui + db + tests in parallel)
/cbinc-audit            # Run all four auditors in parallel against the diff
/cbinc-ship             # Staging deploy, halt for prod approval
/cbinc-document         # Update README, CHANGELOG, ADRs
/cbinc-standup          # Generate yesterday/today/blockers from activity-log

A real Tuesday morning:

08:30  /cbinc-plan add user profile editing
       → planner drafts spec → I approve in 2 min

09:00  /cbinc-implement profile-editing
       → api-builder, ui-builder, db-architect, test-author run in parallel
       → I review the diff → request 2 changes

10:15  /cbinc-audit profile-editing
       → bug-hunter, security-scanner, a11y-tester, supabase-auditor run in parallel
       → security-scanner finds an RLS gap → patch applied
       → audit re-runs clean

11:00  /cbinc-ship profile-editing
       → staging deploy → smoke checks pass
       → orchestrator halts, asks me to approve production
       → I type 'y' → live by 11:15

A feature shipped before lunch, solo, with every safety gate intact.

Safety hooks: policy as code, not vibes

This is where the system earns its keep. Claude Code's hook system runs scripts at lifecycle events. I use them to enforce hard limits:

// hooks/settings.json (excerpt)
{
  "hooks": {
    "PreToolUse": [
      {
        "matcher": "Bash",
        "hooks": [{
          "type": "command",
          "command": "bash -c 'if echo \"$TOOL_INPUT\" | grep -qE \"git push.*--force|rm -rf /|DROP DATABASE\"; then echo BLOCKED; exit 2; fi'"
        }]
      }
    ],
    "PostToolUse": [
      {
        "matcher": "Write|Edit",
        "hooks": [{
          "type": "command",
          "command": "bash scripts/append-to-activity-log.sh"
        }]
      }
    ],
    "SessionEnd": [
      {
        "type": "command",
        "command": "bash scripts/write-session-summary.sh"
      }
    ]
  }
}

What this gives me:

No force pushes. Ever. Even if the AI thinks it's a good idea.
No rm -rf near root. The pattern matcher catches it before the tool runs.
No production deploy without my explicit approval. The deployer halts at staging — there's no flag the AI can pass to skip the gate.
Every write logged. activity-log.md is append-only. I can rewind to any point in the project.
Session summaries. When I close Claude Code, it writes a one-page summary so the next session picks up clean.

These aren't suggestions to the AI. They're hooks. They run in the runtime layer, not the prompt layer. The AI cannot override them.

Observability: watch every agent live

When four auditors run in parallel, you want to see them. I added a small live dashboard that tails the activity log + the per-agent logs and renders them in a single browser pane:

You can swap this for whatever you like — tail -f in a tmux pane works fine. The point is: when the AI is doing something on your behalf, you should be able to see exactly what.

The honest tradeoffs

This isn't a silver bullet. Things that don't work well:

It's slow on the first feature of a new repo. The specialists need a memory/ to read against. The first day you set this up, you're hand-holding the planner through context it doesn't have yet. Day three onwards, it flies.

Migrations are still scary. I review every Supabase migration line by line. The AI is good at writing them but I trust the diff, not the AI's confidence. The supabase-auditor catches most issues but I treat it as a second opinion, not the final word.

You need a clear stack. This is tuned for Next.js + Supabase + Netlify. If your stack is exotic — Phoenix + Postgres + Fly.io — you'll need to retune the api-builder and deployer prompts. Doable, but it's real work, not a one-line config change.

Cost. Sixteen specialists, run on every audit, against a non-trivial diff, eats tokens. Budget for it. I run a Claude Pro subscription plus API credit for the heavy days. The trade vs. hiring an engineer is still wildly favorable, but it's not free.

It can't do design. None of this replaces taste. The ui-builder produces correct, accessible components. It does not produce beautiful products. That's still on me, working with a designer.

What I'd build next if I were starting over

If you're going to copy this pattern, two things I'd do differently:

Start with the BRD decomposer, not the planner. When I started, I went /plan first. Now I always start with a BRD doc, run /cbinc-init-from-brd, and let the system generate the phased roadmap. The roadmap becomes the source of truth, and every subsequent /plan references it. Way less drift.

Write the activity-log hook on day one. I added it in week two. The two weeks of un-logged history are a real gap when I'm trying to understand "wait, why did we structure it this way?" Don't skip it.

And if you want to see this running live on your stack — Next.js + Supabase or otherwise — I do free 15-minute walkthroughs. I'll show you the system, look at your repo, and tell you honestly if it fits or not:

→ https://calendly.com/creativebrain-ca/free-mvp-strategy-call

The whole orchestrator pattern is documented in the repo (commands, agents, hooks, memory model). Happy to share specifics in the comments — drop a question and I'll dig into your stack.

If this resonated, a ❤️ or a follow tells the dev.to algorithm to show it to other founders. Comments with your own orchestrator patterns get bumped to the top — I want to hear what you're building.

Free Developer Tools: How I Built a Complete Toolkit for the Community

Creative Brain Inc — Thu, 20 Nov 2025 03:46:40 +0000

As a full-stack developer, I've always believed in giving back to the community that has helped me grow. That's why I created a comprehensive collection of 100% free developer tools that solve real problems we face daily.

How I Built These Tools

Tech Stack:

Frontend: Next.js 15 with TypeScript
Styling: Tailwind CSS with shadcn/ui components
Deployment: Netlify with optimized build configuration
Performance: Lighthouse scores 90+ across all metrics

Architecture: The tools are built as modular React components with a focus on performance and user experience. Each tool is self-contained, works offline, and processes data client-side for privacy and speed.

// JSON Formatter Tool - Core Logic
interface JSONFormatterState {
  input: string;
  output: string;
  error: string | null;
  isValid: boolean;
}

const useJSONFormatter = () => {
  const [state, setState] = useState<JSONFormatterState>({
    input: '',
    output: '',
    error: null,
    isValid: false
  });

  const formatJSON = useCallback((rawJSON: string, indentSize: number = 2) => {
    try {
      const parsed = JSON.parse(rawJSON);
      const formatted = JSON.stringify(parsed, null, indentSize);

      setState({
        input: rawJSON,
        output: formatted,
        error: null,
        isValid: true
      });
    } catch (err) {
      setState(prev => ({
        ...prev,
        error: 'Invalid JSON format',
        output: '',
        isValid: false
      }));
    }
  }, []);

  return { state, formatJSON };
};

// Component Implementation
const JSONFormatter: React.FC = () => {
  const { state, formatJSON } = useJSONFormatter();

  return (
    <div className="grid lg:grid-cols-2 gap-6">
      <Card>
        <CardContent>
          <Textarea
            value={state.input}
            onChange={(e) => formatJSON(e.target.value)}
            placeholder="Paste your JSON here..."
            className="font-mono"
          />
          {state.error && (
            <Alert variant="destructive">
              <AlertCircle className="h-4 w-4" />
              <AlertDescription>{state.error}</AlertDescription>
            </Alert>
          )}
        </CardContent>
      </Card>

      <Card>
        <CardContent>
          <Textarea
            value={state.output}
            readOnly
            className="font-mono"
          />
          <Button onClick={() => navigator.clipboard.writeText(state.output)}>
            Copy Formatted JSON
          </Button>
        </CardContent>
      </Card>
    </div>
  );
};

Why I Built These Tools

Main Reasons:

Daily Pain Points: I was tired of switching between multiple websites for basic dev tasks
Privacy Concerns: Many existing tools send data to servers
Community Support: Wanted to give back to the developer community
Learning Experience: Challenge myself to build production-ready tools

Tools & Problems They Solve

1. AI Prompt Engineering Tool

Problem: Writing effective prompts for ChatGPT, Claude, and other AI models is challenging Solution: Template-based prompt builder with role definitions, context management, and optimization suggestions based on Google's research and OpenAI's GPT-5 guide (Aug 2025) with 13+ proven techniques including Chain-of-Thought, Tree-of-Thoughts, and ReAct.

// Prompt Structure Generator
interface PromptTemplate {
  role: string;
  context: string;
  task: string;
  format: string;
  constraints: string[];
  examples: string[];
}

const generatePrompt = (template: PromptTemplate): string => {
  return `
Role: You are a ${template.role}

Context: ${template.context}

Task: ${template.task}

Format: ${template.format}

Constraints:
${template.constraints.map(c => `- ${c}`).join('\n')}

Examples:
${template.examples.map((ex, i) => `${i + 1}. ${ex}`).join('\n')}
`.trim();
};

Features include:

50+ Pre-built Templates for coding, writing, analysis, creative tasks, and lot more
Role-Based Prompting with persona definitions
Token Counter to optimize prompt length
A/B Testing suggestions for prompt variations
Export Options in multiple formats (JSON, Markdown, Plain Text)
Guides: Cheat Sheet and How to use guide.

Link: https://creativebrain.ca/tools/ai-prompt-engineer

2. CSS Gradient Generator

Problem: Creating beautiful CSS gradients manually is time-consuming and error-prone
Solution: Visual gradient builder with real-time preview, color picker, and advanced controls

/* Example Generated Gradient */
background: linear-gradient(
  135deg,
  #667eea 0%,
  #764ba2 100%
);

/* With Advanced Options */
background: radial-gradient(
  ellipse at center,
  rgba(102, 126, 234, 0.8) 0%,
  rgba(118, 75, 162, 0.6) 50%,
  rgba(55, 59, 68, 1) 100%
);

Features include:

Multiple Gradient Types (linear, radial, conic, etc.)
Color Stop Management with precise positioning
Preset Collections (sunset, ocean, neon, pastel and lot more)
Export Copy CSS code

Link: https://creativebrain.ca/tools/css-gradient-generator

3. Interactive Flexbox Guide

Problem: CSS Flexbox properties are confusing and hard to visualize
Solution: Interactive playground with live examples, property explanations, and real-world use cases

/* Interactive Examples Generated */
.flex-container {
  display: flex;
  flex-direction: row; /* Try: column, row-reverse, column-reverse */
  justify-content: space-between; /* Try: center, flex-start, flex-end */
  align-items: center; /* Try: stretch, flex-start, flex-end */
  flex-wrap: wrap; /* Try: nowrap, wrap-reverse */
  gap: 1rem;
}

.flex-item {
  flex: 1 1 200px; /* grow | shrink | basis */
  align-self: auto; /* Try: center, flex-start, flex-end */
}

Features include:

Visual Property Controls with sliders and toggles
Live Code Preview that updates as you experiment
Common Layout Patterns (navigation bars, card grids, centering)
Copy-Paste Ready Code

Link: https://creativebrain.ca/tools/flexbox-guide

4. Advanced Image Compressor

Problem: Large images slow down websites and consume storage
Solution: Client-side compression with quality preview, batch processing, and format conversion

// Advanced Compression Algorithm
interface CompressionOptions {
  quality: number; // 0.1 - 1.0
  maxWidth: number;
  maxHeight: number;
  format: 'jpeg' | 'webp' | 'png';
  maintainAspectRatio: boolean;
}

const compressImage = async (
  file: File, 
  options: CompressionOptions
): Promise<Blob> => {
  return new Promise((resolve) => {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d')!;
    const img = new Image();

    img.onload = () => {
      // Calculate new dimensions
      let { width, height } = calculateDimensions(
        img.width, 
        img.height, 
        options.maxWidth, 
        options.maxHeight,
        options.maintainAspectRatio
      );

      canvas.width = width;
      canvas.height = height;

      // Apply compression
      ctx.drawImage(img, 0, 0, width, height);

      canvas.toBlob(resolve, `image/${options.format}`, options.quality);
    };

    img.src = URL.createObjectURL(file);
  });
};

Features include:

Batch Processing for multiple images
Format Conversion (PNG to JPEG/WebP, etc.)
Size Comparison showing before/after file sizes
Quality Preview with side-by-side comparison
Progressive JPEG option for web optimization
Metadata Preservation options (EXIF data)

Link: https://creativebrain.ca/tools/image-compressor

5. JSON Formatter & Validator

Problem: APIs return minified JSON that's impossible to read Solution: Instant formatting, validation, and syntax highlighting

// Input (minified):
{"users":[{"id":1,"name":"John","email":"john@example.com","active":true},{"id":2,"name":"Jane","email":"jane@example.com","active":false}],"meta":{"total":2,"page":1}}

// Output (beautifully formatted):
{
  "users": [
    {
      "id": 1,
      "name": "John",
      "email": "john@example.com",
      "active": true
    },
    {
      "id": 2,
      "name": "Jane",
      "email": "jane@example.com",
      "active": false
    }
  ],
  "meta": {
    "total": 2,
    "page": 1
  }
}

Link: https://creativebrain.ca/tools/json-formatter-validator

6. Regex Tester

Problem: Debugging complex regular expressions
Solution: Real-time testing with match highlighting

Link: https://creativebrain.ca/tools/regex-tester

7. Color Palette Generator

Problem: Finding the beautiful, accessible (a11y) color scheme and WCAG compliance checking
Solution: It generates WCAG compliance and accessibility report with copy color palette option

Link: https://creativebrain.ca/tools/color-palette-generator

8. Lorem Ipsum Generator

Problem: Need placeholder text for designs
Solution: Customizable placeholder text generation with multiple categories, themes and formatting options.

Link: https://creativebrain.ca/tools/lorem-ipsum-generator

Key Features

What Makes These Tools Special:

100% Free - No hidden fees or premium tiers
Privacy First - All processing done client-side
Mobile Responsive - Works perfectly on all devices
No Registration - Use immediately without signing up
Offline Capable - Many tools work without internet
Fast & Lightweight - Optimized for speed
Educational - Learn while you use with interactive guides
Professional Grade - Built for production workflows

Real Impact

Since launching, the tools have been used by thousands of developers:

500,000+ monthly tool interactions
Average 3.2 tools used per session
Zero downtime in the past 6 months
50+ countries using the tools regularly

Future Plans

Coming Soon:

API Testing Tool with full request/response handling
Markdown to HTML Converter with custom styling
Git Command Generator for complex workflows
Docker Compose Builder with service templates
CSS Grid Generator with visual editing
SVG Optimizer and Editor
Web Performance Analyzer

Completely Free for Everyone

These tools are totally free for anyone to use - whether you're a student learning to code, a freelance developer, or working at a Fortune 500 company. No ads, no tracking, no premium features. Just helpful tools for the community.

Why Free? The developer community has given me so much through open source projects, tutorials, and Stack Overflow answers. This is my way of paying it forward.

Try Them Out

All tools are available at: https://CreativeBrain.ca

Each tool includes:

Detailed usage instructions with examples
Multiple export/download options
Mobile-optimized interface
Educational tooltips and guides
Accessibility features (screen reader support)

What's your favorite developer tool? Let me know in the comments if there's a specific tool you'd like me to build next!

P.S. All these tools are open source, and I'd love contributions from the community. Feel free to suggest improvements or report issues.

DEV Community: Creative Brain Inc

I gave Claude Code 24 specialist roles, then used them to rebuild my own agency

Where this started

The one change that mattered most: split find from fix

What else changed since the last post

The rule I'd bet the whole thing on

Then I made my own company client zero

The honest part (this hasn't changed either)

So what's the pitch now

I built a local-first dashboard for everything Claude Code does on my machine

Claude Observatory turns ~/.claude into a searchable, visual command center — 16 modules, live SSE updates, zero outbound network. Here's what's inside and why I built it.

The dashboard at a glance

The three-layer architecture

The 16 modules

Sessions Explorer

Cost & Token Analytics

Tool Usage Heatmap

Bash Explorer

File History & Diff

Skills Library

MCP Hub

Memory Explorer

Todos

Activity Heatmap

Telemetry

Prompt Library

Settings (first write-capable surface)

Headless & Agent Mode

Live updates without polling

Editing without footguns

The 7 killer features

Privacy: the part most observability tools skip

First-run setup

What I'd build differently if I started over

If you are interested in trying it out

I gave Claude Code 16 specialist roles. Now I ship full-stack features before lunch.

The problem nobody admits out loud

The pattern: orchestrator does context, specialists do the work

The 16 specialists

File-based memory: the part nobody else does

Six commands. Idea to production.

Safety hooks: policy as code, not vibes

Observability: watch every agent live

The honest tradeoffs

What I'd build next if I were starting over

Free Developer Tools: How I Built a Complete Toolkit for the Community

How I Built These Tools

Why I Built These Tools

Tools & Problems They Solve

1. AI Prompt Engineering Tool

2. CSS Gradient Generator

3. Interactive Flexbox Guide

4. Advanced Image Compressor

5. JSON Formatter & Validator

6. Regex Tester

7. Color Palette Generator

8. Lorem Ipsum Generator

Key Features

Real Impact

Future Plans

Completely Free for Everyone

Try Them Out

Tags