Boilerplate

SystemClaude Code

Claude Code Harness

The customization framework that enables Claude Code to work effectively on this project. Commands, agents, skills, and automation that bridges coding sessions.

49Commands

7Agents

13Skills

5Rules

8Hooks

5MCP Servers

What is a Harness?

A harness is the underlying infrastructure that runs an AI coding agent. It provides context, commands, expertise, and automation.

CLAUDE.mdProject instructions

CommandsSlash command workflows

AgentsSpecialized experts

SkillsReusable expertise

RulesPath-specific guidance

HooksAutomated validation

Commands

49 slash commands organized by namespace. Type /command in Claude Code to invoke.

spec/*7 commands

Specification workflow

createdecomposeexecutefeedback+3 more

git/*2 commands

Version control with validation

commitpush

debug/*8 commands

Systematic debugging

browsertypestestapi+4 more

roadmap/*8 commands

Product roadmap management

showaddopenvalidate+4 more

system/*4 commands

Harness maintenance

askupdatereviewlearn

app/*2 commands

Application maintenance

upgradecleanup

db/*2 commands

Database operations

migratestudio

dev/*1 commands

Feature scaffolding

scaffold

docs/*1 commands

Documentation maintenance

reconcile

cc/*5 commands

Claude Code configuration

notify:onnotify:offnotify:statuside:set+1 more

template/*2 commands

Upstream template management

checkupdate

Plus: /ideate, /ideate-to-spec, /review-recent-work, /db:migrate, /dev:scaffold, and more.

Agents

Specialized experts that run in isolated context windows via the Task tool.

Agent	Specialty	When to Use
`prisma-expert`	Database design, migrations, queries	Schema changes, DAL patterns
`react-tanstack-expert`	React, TanStack Query, components	Data fetching, state management
`typescript-expert`	Type system, generics, build errors	Complex types, build failures
`zod-forms-expert`	Zod schemas, React Hook Form	Form validation, schema design
`product-manager`	Roadmap, prioritization, scope	Strategic decisions
`research-expert`	Web research, information gathering	External research tasks
`code-search`	Finding files, patterns, functions	Locating code

Skills

Reusable expertise that Claude applies automatically when relevant.

proactive-clarification

Identify gaps, ask clarifying questions

Vague requests, ambiguous scope

debugging-systematically

Debugging methodology and patterns

Investigating bugs

designing-frontend

Calm Tech design language, UI decisions

Planning UI, reviewing designs

styling-with-tailwind-shadcn

Tailwind CSS v4, Shadcn UI implementation

Writing styles, building components

organizing-fsd-architecture

Feature-Sliced Design, layer organization

Structuring features

working-with-prisma

Prisma 7 patterns, DAL conventions

Database queries, migrations

generating-images-replicate

Replicate MCP for image generation, processing

Image generation, editing

vectorizing-images

Raster-to-vector conversion with @neplex/vectorizer

Converting PNG/JPG to SVG

managing-roadmap-moscow

MoSCoW prioritization, roadmap utilities

Product planning

writing-developer-guides

Developer guide structure for AI agents

Creating/updating guides

orchestrating-parallel-work

Parallel agent execution, batch scheduling

Coordinating concurrent tasks

changelog-writing

Human-friendly changelog entries, release notes

Populating changelog, preparing releases

posthog-nextjs-app-router

PostHog analytics integration for Next.js

Adding analytics to App Router

Core Workflows

Feature Development

1/ideate <task>
2/ideate-to-spec <path>
3/spec:decompose <path>
4/spec:execute <path>
5/git:commit

Debugging

1/debug:browser
2/debug:types
3/debug:test
4/debug:api
5/debug:logs

Roadmap Management

1/roadmap:show
2/roadmap:open
3/roadmap:add <title>
4/roadmap:prioritize

Quality of Life

Developer experience enhancements that make working with Claude Code more effective.

IDE Color Customization

Generate a unique VS Code color scheme from a single seed color to visually distinguish this project from others.

/cc:ide:set <color>/cc:ide:reset

•Supports hex (#3b82f6), RGB, HSL, or color names (forest green, ocean blue)
•Uses 60-30-10 design rule with 11-step tonal palette
•Only modifies .vscode/settings.json (project-level)

Dev Server Logging

All dev server output is captured to timestamped log files, giving Claude access to server logs for debugging.

pnpm dev/debug:logs

•Logs stored in .logs/YYYY-MM-DD_HH-MM-SS.log
•Claude can analyze logs to diagnose errors
•Correlates errors with stack traces and code paths

pnpm Package Manager

The project uses pnpm by default for faster installs and better disk efficiency.

pnpm installpnpm devpnpm build

•Lockfile: pnpm-lock.yaml
•All scripts use pnpm (dev, build, test, lint)
•Symlinked node_modules with content-addressable store

File Locations

.claude/commands/Slash commands

.claude/agents/Agent definitions

.claude/skills/Skill definitions

.claude/rules/Path-specific rules

.claude/settings.jsonHooks & config

CLAUDE.mdProject instructions

.logs/Dev server logs

.vscode/settings.jsonIDE color customization

Full Harness Documentation

Open .claude/README.md in your editor for architecture diagrams and maintenance guides