Forem: Creative Brain Inc

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.

Forem: Creative Brain Inc

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