How I Built 11 AI Agents and 14 Custom Commands for Claude Code

I spent 2 months turning Claude Code from "just a CLI" into a fully custom dev environment. Here's how I built 14 slash commands, 11 specialized AI agents, and a real-time usage tracker — and why it changed how I code.

If you've used Claude Code, you know it's powerful. But out of the box, it's generic.

Every session starts fresh. Every request requires context. Every limit surprise kills momentum.

I wanted better.

The goal: Build a development environment that knows my stack, my conventions, and my workflow — so I can focus on building, not explaining.

Two months and 42,000 messages later, I have:

• 11 specialized AI agents (architecture, security, performance, research)
• 14 custom slash commands (task planning, API generation, cleanup)
• Real-time usage tracking (context window, cost, rate limits)
• CLAUDE.md as AI onboarding doc (project structure, conventions)
• Terminal setup (Ghostty + tmux) for running multiple agents simultaneously

The stack:

• Frontend: Next.js 15 (App Router), React 19 (Server Components)
• Backend: Supabase (PostgreSQL, Auth, Storage, RLS)
• Language: TypeScript (strict mode)
• UI: Tailwind CSS + shadcn/ui components

The result: An environment where AI actually understands my project context from the first message.

This isn't a tutorial. This is a case study on what's possible when you treat Claude Code as a platform, not just a tool.

---

The Problem: Generic AI Wastes Time

Before customization:

Every conversation started the same way:

"I'm building a Next.js 15 app with React 19 and Supabase. I use TypeScript strict mode, functional components, and..."

Copy-paste context. Explain stack. Repeat for every session.

Or worse:

"Can you help me design this API?"

And Claude would suggest Express.js. Or Flask. Or something I'm not using.

Because it doesn't know my stack.

The limits problem:

Halfway through a refactor:

"You've reached your rate limit. Try again in 3 hours."

No warning. No visibility. Just... stopped.

---

The Solution: Specialized Agents

Instead of explaining context every time, I created 11 specialized agents with pre-configured knowledge:

1. requirements-analyst

Turns vague ideas into concrete specs.

Before:

"I want to build a dashboard"

After:

/requirements-analyst

"Building a dashboard. Let me clarify:

• Real-time or static data?
• User roles and permissions?
• Key metrics to display?
• Deployment target?"

Asks the right questions. Outputs structured requirements.

2. backend-architect / frontend-architect

Architecture design focused on MY stack.

Pre-configured with:

• Next.js 15 (App Router, Server Actions)
• React 19 (Server Components, Suspense)
• Supabase (RLS, real-time subscriptions)
• TypeScript strict mode

Example:

/backend-architect "User authentication flow"

Output:

// Suggested architecture for auth flow
// Using Next.js 15 Server Actions + Supabase Auth

// 1. Server Action: app/actions/auth.ts
export async function signIn(formData: FormData) {
  'use server'

  const supabase = createClient()
  const { data, error } = await supabase.auth.signInWithPassword({
    email: formData.get('email') as string,
    password: formData.get('password') as string,
  })

  if (error) throw error
  revalidatePath('/')
  redirect('/dashboard')
}

No generic advice. Just code that fits my stack.

3. security-engineer

Checks for vulnerabilities.

Scans for:

• SQL injection (Supabase queries)
• XSS risks (React rendering)
• Authentication bypasses
• RLS policy gaps
• Environment variable leaks

4. performance-engineer

Optimizes based on metrics.

Analyzes:

• Bundle size (Next.js build output)
• Render performance (React DevTools data)
• Database query efficiency (Supabase logs)
• Lighthouse scores

5. deep-research-agent

Researches technologies before making decisions.

Example:

"Should I use Prisma or Drizzle ORM with Supabase?"

Makes informed recommendations with sources.

---

Custom Slash Commands

Beyond agents, I built 14 slash commands for common operations:

/new-task — Task Planning

Breaks down work into concrete steps.

Input:

/new-task "Add user profile page"

Output:

## Task: Add User Profile Page

Subtasks:
1. [ ] Create route: app/profile/page.tsx
2. [ ] Fetch user data (Server Component)
3. [ ] Build UI (avatar, name, bio, stats)
4. [ ] Add edit mode (Client Component)
5. [ ] Update API: app/api/profile/route.ts
6. [ ] Add tests

Estimated: 2-3 hours
Stack: Next.js 15, Supabase, Tailwind

/api-new — API Endpoint Generator

Creates new API routes with validation.

Includes:

• Zod validation
• Supabase RLS
• Error handling
• TypeScript types

/code-cleanup — Refactoring

Cleans up code while preserving functionality.

Focuses on:

• Remove unused imports
• Extract repeated logic
• Add missing types
• Improve naming
• Add error handling

---

Real-Time Usage Tracking

The biggest quality-of-life improvement: visibility into limits.

Custom Status Line

Right below the Claude Code prompt:

🍺 ~/nazarf-claude-code │ main ✓ │ 14% 23k[▓░░░░░░░░░]143k │ $0.04

Shows:

• Git branch + status
• Context window usage (14% = green, 60%+ = yellow, 80%+ = red)
• Progress bar visualization
• Session cost (accumulated API spend)

Terminal Setup: Ghostty + tmux

The foundation: Ghostty terminal emulator + tmux.

Why ghostty?

• Modern, GPU-accelerated terminal
• Fast rendering (critical for long Claude Code sessions)
• Native macOS integration
• Excellent Unicode and emoji support
• Customizable via simple config files

Why tmux?

Running multiple AI agents simultaneously requires session management.

Here's my typical workflow:

Session 1 (3h59m active): backend-architect  │ 25% rate limit
Session 2 (3d18h active): frontend-architect │ 40% rate limit
Session 3 (1h12m active): deep-research      │ 15% rate limit

tmux gives me:

1. Parallel agent workflows — Architecture discussion in one pane, performance analysis in another
2. Persistent sessions — Detach/reattach without losing context
3. Real-time monitoring — Status bar shows rate limits across ALL sessions
4. Context switching — Jump between agents with one keystroke

The tmux status bar:

1 claude    3h59m: [██░░░░] 25%    3d18h: [████░░░░] 40%

Shows:

• Active session name (1 claude)
• Time since session started (3h59m)
• 3-hour rate limit window (25% used)
• 3-day rate limit window (40% used)

Why this matters:

Claude Pro has two rolling rate limits:

• Messages per 3 hours
• Messages per 3 days

Most people hit these limits by surprise.

With tmux tracking, I see limits approaching across all sessions and shift workload accordingly.

Full configs: github.com/norens/dotfiles (ghostty + tmux + Claude Code setup)

What It Looks Like in Practice

Here's my actual terminal running Claude Code:

What you see:

• Top: Claude Code v2.1.47 (Opus 4.6, Claude Max)
• Middle: Active conversation in ~/IdeaProjects/nazarf-claude-code
• Bottom left: Git status (main branch, 14% context used, 24k chars)
• Bottom right: tmux session info (1 claude) with rate limit tracking (2h23m: 20%, 5d9h: 18%)

This is the environment running while I build. Multiple sessions, persistent state, full visibility.

---

CLAUDE.md: AI Onboarding Doc

Every session, Claude Code reads CLAUDE.md automatically.

Think of it as a README, but for AI.

Mine includes:

Project Structure

nazarf-claude-code/
├── app/                 # Next.js 15 App Router
├── components/          # React components
├── lib/
│   ├── supabase/       # Supabase client
│   └── utils/          # Helpers
└── types/              # TypeScript types

Stack & Conventions

• Next.js 15 (App Router, Server Components)
• React 19 (Suspense, use client/server)
• TypeScript (strict mode)
• Supabase (PostgreSQL + Auth + Storage)
• Tailwind CSS + shadcn/ui

Result:

Claude knows my stack. My conventions. My preferences.

Every session.

---

The Numbers

2 months in:

• 151 sessions
• 42,000 messages
• Longest session: 24.5 hours, 1,326 messages
• Average cost: $0.04/session

Productivity impact:

I've built more in 2 months with this setup than in 6 months before.

Not because Claude Code is magic.

Because friction disappeared.

---

How to Build This Yourself

This is a Claude Code plugin. You can install it in ~2 minutes.

Repository: github.com/norens/nazarf-claude-code

What's Included:

1. Plugin scaffold — 14 slash commands + 11 specialized agents
2. Status line configs — Context window + cost tracking
3. tmux status bar — Rate limit visualization across sessions
4. CLAUDE.md template — AI onboarding doc for your project
5. Dotfiles integration — Works with my terminal setup

Installation (As a Plugin):

# Clone the plugin repository
git clone https://github.com/norens/nazarf-claude-code
cd nazarf-claude-code

# Install as Claude Code plugin
claude-code plugin install .

# Verify installation
claude-code plugin list

That's it. All 14 commands and 11 agents are now available.

Customize for Your Project:

# Copy the CLAUDE.md template to your project
cp CLAUDE.template.md ~/your-project/CLAUDE.md

# Edit it with your stack, conventions, and structure
vim ~/your-project/CLAUDE.md

Claude Code will auto-load CLAUDE.md from your project root.

Optional: Terminal Setup

For the full experience (ghostty + tmux + rate limit tracking):

# Clone dotfiles
git clone https://github.com/norens/dotfiles
cd dotfiles

# Install ghostty config
cp .config/ghostty/* ~/.config/ghostty/

# Install tmux config (includes Claude Code status bar)
cp .tmux.conf ~/.tmux.conf

# Reload tmux
tmux source-file ~/.tmux.conf

Customizing Agents:

Each agent is a YAML config:

# agents/backend-architect.yaml
name: backend-architect
description: "Design backend architecture for Next.js 15 + Supabase"
system_prompt: |
  You are a backend architect specializing in:
  - Next.js 15 App Router
  - Server Actions and Server Components
  - Supabase (PostgreSQL, Auth, RLS)

---

Key Takeaways

1. Claude Code is a Platform, Not Just a Tool

Out of the box: useful.

Customized: transformative.

The difference is treating it as extensible infrastructure, not a static product.

2. Context is Everything

Generic AI advice is worthless.

Stack-specific, project-aware AI is a force multiplier.

Invest in onboarding your AI. It pays back 10x.

3. Visibility Prevents Surprises

Rate limits aren't the problem.

Invisible rate limits are.

Real-time tracking = proactive workflow management.

4. Specialize Your Agents

One generalist AI < Five specialist AIs.

Each agent knows its domain deeply.

---

Conclusion

Claude Code gave me AI in the terminal.

Customization gave me a dev environment that knows me.

The setup:

• 11 specialized agents
• 14 slash commands
• Real-time usage tracking
• AI onboarding docs

The result:

• 2 months, 42K messages
• Built more than previous 6 months
• Zero friction

The lesson:

Generic tools are starting points, not destinations.

Your competitive advantage isn't the tool.

It's what you build on top of it.

---

GitHub: github.com/norens/nazarf-claude-code

Stack: Next.js 15, React 19, Supabase, TypeScript

License: MIT

Questions? Built something similar? Share in the comments. 👇

---

Published: February 19, 2026

Author: Nazar Fedishin