Agents

Agents are specialized AI assistants that live in .claude/agents/ and handle delegated tasks. Each agent has focused expertise, specific tools, and structured workflows for its domain.

Available Agents

AI Kit generates up to 20 agents based on your project’s detected stack:

How to Use Agents

In Claude Code, agents are automatically available for delegation. You can invoke them directly:

@kit-planner Plan the implementation for adding dark mode support
@kit-code-reviewer Review the changes in src/components/Header.tsx
@kit-security-reviewer Run a security audit on the authentication flow
@kit-e2e-runner Write E2E tests for the checkout flow
@kit-build-resolver Fix the TypeScript build errors
@kit-doc-updater Update docs for the changes I just made
@kit-refactor-cleaner Find dead code in src/components/
@kit-tdd-guide Walk me through adding tests for the cart feature using TDD
@kit-ci-debugger Diagnose the failing GitHub Actions workflow
@kit-sitecore-specialist Debug why the Hero component isn't rendering in Experience Editor
@kit-database-reviewer Audit the GraphQL queries in src/lib/queries for over-fetching and N+1 patterns
@kit-architect Design the rendering strategy for the new product pages
@kit-data-scientist Profile this dataset and recommend a modeling approach
@kit-performance-profiler Audit the homepage for Core Web Vitals issues
@kit-migration-specialist Plan the upgrade from Next.js 14 to 15
@kit-dependency-auditor Run a full dependency audit with license check
@kit-api-designer Design the REST API for the orders resource
@kit-ui-designer Review the ProductCard component for design quality
@kit-release-manager Cut the v2.3.0 release
@kit-onboarding-guide Help me understand the project structure as a new developer

You can also use the /kit-orchestrate skill to coordinate multiple agents on a complex task.

Agent Details

Planner

Breaks down feature requests into concrete implementation plans. Outputs:

• Files to create and modify (with reasons)
• Numbered implementation steps
• Testing strategy
• Risks and considerations

Follows existing patterns in your codebase. Flags changes that touch more than 7 files for approval.

Code Reviewer

Provides thorough reviews across multiple dimensions:

• Correctness — logic errors, null handling, async patterns
• React patterns — hooks rules, memoization, Server vs Client Components
• TypeScript — no any, proper generics, strict null checks
• Performance — unnecessary re-renders, bundle size, data fetching
• Accessibility — semantic HTML, ARIA, keyboard nav, color contrast
• Sitecore — JSS helpers, Experience Editor compatibility, GraphQL efficiency

Rates each category as PASS / WARN / FAIL with specific line references.

Confidence-gated reviews: The agent declares its confidence (0–100%) in each review category before reporting. When confidence drops below 80% in any area — because it lacks context like a type definition or auth middleware — it pauses and asks a targeted question rather than guessing. This prevents false positives from incomplete context.

Confidence: Correctness 95% | React 88% | TypeScript 72% (need to see src/types/cart.ts) | Security 91%

Security Reviewer

Focused exclusively on security vulnerabilities:

• XSS prevention — dangerouslySetInnerHTML, URL params, eval()
• Injection — SQL, NoSQL, command injection, path traversal
• Auth & session — route protection, JWT validation, localStorage secrets
• Secrets — hardcoded keys, .env in git, NEXT_PUBLIC_ misuse
• API security — rate limiting, input validation, CORS, HTTP methods
• Dependencies — npm audit, known CVEs, typosquatting

Outputs findings as CRITICAL / HIGH / MEDIUM / LOW with a score out of 100.

E2E Runner

Generates and runs Playwright tests using Page Object Model:

• Creates page objects in tests/pages/
• Uses accessible selectors (getByRole, getByLabel, getByText)
• Covers happy paths, error states, accessibility, and responsive viewports
• Uses CLI only (npx playwright test) — never the Playwright MCP plugin

Build Resolver

Diagnoses root causes of build failures:

• TypeScript errors — type mismatches, missing declarations, module resolution
• Next.js errors — Server/Client boundary, dynamic imports, image config
• Sitecore errors — component factory, GraphQL schema, layout service
• Module resolution — missing deps, circular imports, path aliases

Follows the two-attempt rule: if an approach fails twice, tries a different strategy.

Doc Updater

Keeps documentation in sync with code changes:

• Updates JSDoc comments and component docs when props change
• Creates documentation entries for new components
• Updates README sections for new features or changed setup
• Generates Storybook stories if Storybook is detected
• Appends dated entries to docs/decisions-log.md

Refactor Cleaner

Finds and removes dead code and unnecessary complexity:

• Unused exports — uses Knip if available, otherwise manual search
• Unused imports — including type-only import optimization
• Dead code — unreferenced functions, commented-out blocks
• Over-abstraction — wrappers that just pass through, single-use utilities

Groups findings by severity: Remove / Simplify / Consider.

TDD Guide

Coaches you through the red/green/refactor cycle for test-driven development:

• Red — writes a failing test that captures the desired behavior before implementation
• Green — implements the minimal code needed to make the test pass
• Refactor — cleans up the implementation while keeping tests passing
• Suggests test structure using React Testing Library, Vitest, or Jest depending on your stack
• Helps design testable interfaces before writing the implementation

CI Debugger

Diagnoses CI/CD pipeline failures and suggests targeted fixes:

• Reads CI log output (GitHub Actions, GitLab CI, CircleCI, Bitbucket Pipelines)
• Identifies root cause categories: failing tests, TypeScript errors, lint failures, build errors, missing environment variables, or flaky infrastructure
• Distinguishes genuine code regressions from flaky test failures or environment issues
• Provides specific file and line references where relevant
• Suggests the minimal fix to unblock the pipeline without over-engineering

Invoke with: @kit-ci-debugger Diagnose the failing workflow — here's the log output: [paste log]

Sitecore Specialist

Handles all Sitecore XM Cloud development patterns:

• Component development — JSS field helpers, Experience Editor compatibility
• Field type mapping — TextField, RichTextField, ImageField, LinkField, DateField
• GraphQL — efficient queries, fragments, Experience Edge pagination
• Layout service — rendering host config, placeholder nesting
• Personalization — component variants, A/B testing rules
• Debugging — component not rendering, empty fields, GraphQL errors, 404s

Database Reviewer

Audits the data access layer for correctness, performance, and security across:

• GraphQL / Experience Edge — field selection efficiency, fragment reuse, pagination cursors, null safety, schema alignment
• Next.js data fetching — Server vs Client Component fetch placement, cache/revalidate intent, parallel fetches with Promise.all, .ok checks on every fetch()
• ORM patterns — N+1 query detection (loops with per-iteration fetches), transaction scope for multi-write operations, connection pooling
• Security — parameterized queries only (no string interpolation), authorization checks before queries, no internal IDs or admin fields in public responses, rate limiting on data endpoints

Outputs per-area ratings (PASS / WARN / FAIL) with file and line references, plus a Data Layer Score (0–100).

Also confidence-gated: if the agent can’t see the full Experience Edge schema or the auth middleware, it asks before reviewing those areas rather than guessing.

Invoke with:

@kit-database-reviewer Audit all GraphQL queries in src/lib/queries/ for over-fetching
@kit-database-reviewer Review the fetch patterns in app/(routes)/products/page.tsx
@kit-database-reviewer Check for N+1 patterns in the product listing components

Conditional — generated when Sitecore CMS is detected or when the project is Next.js (both have significant data-fetching surface).

Architect

Makes high-level design decisions for Next.js, Sitecore XM Cloud, and Tailwind projects:

• Rendering strategy — SSR, SSG, ISR, and client-side rendering decisions per route
• Component hierarchy — Server vs Client Component boundaries, composition patterns
• Data flow — Sitecore Layout Service, Experience Edge GraphQL, caching layers
• State management — URL params, server state, React state, global store (minimal approach)

Outputs Architecture Decision Records with rendering strategy tables, component hierarchies, and trade-offs.

Data Scientist

Handles ML pipelines, data analysis, and model evaluation:

• Data analysis — profiling, quality assessment, feature engineering
• ML pipeline design — end-to-end pipeline architecture, feature stores
• Model evaluation — metric selection, evaluation harnesses, distribution shift detection
• Experiment tracking — structured experiments with reproducibility

Starts with exploratory analysis before modeling. Reports confidence intervals and statistical significance.

Performance Profiler

Diagnoses and fixes web performance bottlenecks:

• Core Web Vitals — LCP, INP, CLS analysis with specific element identification
• Bundle analysis — heavy dependencies, tree-shaking opportunities, code splitting
• Runtime profiling — unnecessary re-renders, memory leaks, network waterfalls
• Rendering optimization — Server/Client Component boundaries, Suspense placement

Follows a measure-first approach: baseline → identify bottleneck → fix → verify → repeat.

Migration Specialist

Plans and executes safe, incremental framework and library migrations:

• Breaking change detection — scans for deprecated APIs, removed features, behavior changes
• Migration planning — phased plans with rollback points, minimum viable upgrade paths
• Codemod execution — applies official codemods, writes custom transforms for edge cases
• Incremental adoption — adapter patterns, feature flags, mixed-state app support

Never upgrades multiple major versions in one step. Keeps the app deployable at every step.

Dependency Auditor

Audits project dependencies for security, compliance, and hygiene:

• Vulnerability scanning — classifies by severity, checks reachability of vulnerable code paths
• Outdated detection — prioritizes security fixes over feature updates, flags abandoned packages
• License compliance — flags copyleft in proprietary projects, generates license reports
• Bundle impact — measures install/bundle size contribution, finds lighter alternatives

Distinguishes direct vs transitive vulnerabilities. Never recommends npm audit fix --force blindly.

API Designer

Designs, reviews, and improves REST and GraphQL APIs:

• API design — resource endpoints, HTTP methods, status codes, pagination strategies
• Schema validation — Zod/JSON Schema definitions, naming conventions, nullable/required fields
• Versioning — backward-compatible changes, deprecation workflows, sunset headers
• Error handling — consistent error format, actionable messages, rate limit responses

Outputs endpoint tables, request/response examples, Zod schemas, and error response catalogs.

UI Designer

Reviews components and pages for visual quality — catching design issues that pass code review but look wrong to a user. Evaluates six dimensions:

• Typography — scale consistency, line height, heading hierarchy
• Spacing & Layout — grid alignment, padding consistency, visual grouping
• Color & Contrast — token usage, WCAG AA contrast, semantic color meaning
• Hierarchy & Focus — primary action clarity, scanability, information density
• Consistency — pattern reuse, system alignment, no one-off decisions
• Interaction Design — hover/focus states, loading, error, and empty states

Scores each dimension 0–10, surfaces the top three improvements with specific Tailwind code fixes, and acknowledges what’s working well. Reads tailwind.config.ts first to validate token usage.

Does not duplicate accessibility (use kit-security-reviewer) or responsive checks (use the /kit-responsive-check skill).

Invoke with:

@kit-ui-designer Review src/components/HeroBanner.tsx for design quality
@kit-ui-designer Audit the checkout page for visual hierarchy issues

Release Manager

Orchestrates the complete release lifecycle end-to-end:

1. Pre-release validation — clean tree, tests passing, build succeeding, no critical vulnerabilities
2. Version decision — reads git log and CHANGELOG, applies semver rules, explains the reasoning
3. Release execution plan — outputs the exact git tag, npm version, and push commands for review (never auto-executes them)
4. Release notes — user-facing GitHub Release notes from CHANGELOG entries
5. Post-deploy verification — lists critical paths to verify and references /kit-post-deploy

Never pushes without explicit user confirmation. If any pre-release check fails, stops and reports the blocker instead of proceeding.

Invoke with:

@kit-release-manager Cut the v2.3.0 release
@kit-release-manager What version should the next release be?
@kit-release-manager Generate release notes for v2.3.0

Onboarding Guide

Helps a new team member get productive quickly. Adapts to the actual project structure — reads package.json, CLAUDE.md, README.md, and the source directory before generating any guidance.

Covers three phases:

• Day 1 — project orientation, local setup, key files to read
• Week 1 — first contribution, Sitecore component workflow, AI Kit usage
• Week 2+ — independent task work, code review, rendering strategy understanding

Produces a structured onboarding document with:

• Tech stack table (technology → purpose in this specific project)
• Step-by-step local setup with exact commands
• First 30-minute reading list (5–7 files with explanations)
• “Where to add things” table (new page, new component, new API route → location + pattern to follow)
• Common gotchas specific to this codebase
• AI Kit skill quick reference for new developers

Explicitly flags Sitecore-specific patterns that are non-obvious to developers new to the JSS + Next.js stack.

Invoke with:

@kit-onboarding-guide I'm new to this project — help me get started
@kit-onboarding-guide Walk me through how Sitecore data flows to components
@kit-onboarding-guide What's the right pattern for adding a new component here?

Conditional Agents

Some agents are only generated when their tools are detected in your project:

All other agents (kit-planner, kit-code-reviewer, kit-security-reviewer, kit-build-resolver, kit-doc-updater, kit-refactor-cleaner, kit-architect, kit-ci-debugger, kit-data-scientist, kit-performance-profiler, kit-migration-specialist, kit-dependency-auditor, kit-api-designer, kit-ui-designer, kit-release-manager, kit-onboarding-guide) are generated for every project. This keeps the agent list relevant and avoids confusion from agents that can’t do their job.

Agent File Format

Each agent is a markdown file with YAML frontmatter in .claude/agents/:

---
name: kit-planner
description: Implementation planning agent — breaks features into tasks...
tools: Read, Glob, Grep, Bash
---
 
# Implementation Planner
 
[Agent instructions and workflow...]

The tools field controls which Claude Code tools the agent can use when delegated to. The description helps the main agent decide when to delegate.

Worktree Isolation (v1.10.0+)

Code-modifying agents include isolation: worktree in their frontmatter:

---
name: kit-refactor-cleaner
description: Dead code cleanup and refactoring agent...
tools: Read, Edit, Glob, Grep, Bash
isolation: worktree
initialPrompt: Scan for dead code and unused exports in this project.
---

isolation: worktree — The agent runs in a temporary git worktree (an isolated copy of your repo). It can freely edit files, run builds, and experiment without affecting your working directory. When the agent finishes, changes are either merged back or the worktree is cleaned up.

initialPrompt — An auto-submitted first turn that kicks off the agent’s workflow immediately. No need to type a prompt — the agent starts working on its own.

Agents with worktree isolation:

Customizing Agents

You can modify any agent file in .claude/agents/ to fit your team’s workflow. Changes are preserved across ai-kit update since agent files are only added, not overwritten.

To create a custom agent, add a new .md file to .claude/agents/ with the same frontmatter format. Claude Code will discover it automatically.