Skip to main content
Claude Code Templates provides a powerful component-based system that extends Claude Code with specialized capabilities. Components are modular, reusable building blocks that you can install individually or in batches to enhance your development workflow.

​
What Are Components?

Components are pre-built configurations, scripts, and AI specialists that integrate seamlessly with Claude Code. Think of them as plugins that add new capabilities to your AI coding assistant.

400+ Agents

AI specialists for every development task

225+ Commands

Custom slash commands for workflows

65+ MCPs

Model Context Protocol integrations

60+ Settings

Configuration files for Claude Code

39+ Hooks

Event-driven automation triggers

14+ Templates

Complete project configurations

​
Component Architecture

All components live in the .claude directory within your project: 
.claude/
├── agents/          # AI specialist agents
├── commands/        # Slash command definitions
├── hooks/           # Automation scripts
├── scripts/         # Supporting files for hooks/statuslines
├── settings.json    # Project-wide configuration (committed to git)
├── settings.local.json  # Personal settings (not committed)
└── .mcp.json        # MCP server configurations (project root)
The .claude directory structure is automatically created when you install your first component.

​
Installation Methods

Claude Code Templates supports multiple installation approaches:
Install one component at a time:
npx claude-code-templates@latest --agent frontend-developer
npx claude-code-templates@latest --command ci-pipeline
npx claude-code-templates@latest --mcp web-fetch

​
Component Categories

Components are organized by type and purpose:

​
Agents

AI specialists with domain expertise. Examples:
  • development-team/frontend-developer - React, Vue, Angular expert
  • security/api-security-audit - API security specialist
  • database/postgresql-optimizer - Database performance tuning

​
Commands

Slash commands for common workflows. Examples:
  • setup/ci-pipeline - GitHub Actions automation
  • security/vulnerability-scan - Security analysis
  • git-workflow/conventional-commits - Commit message formatting

​
MCPs

Model Context Protocol integrations for external services:
  • web/web-fetch - HTTP requests and web scraping
  • database/postgresql-integration - Direct database access
  • browser_automation/playwright - Browser automation

​
Hooks

Event-driven automation that runs before/after tool use:
  • git/git-commit-formatter - Format commits automatically
  • automation/build-on-change - Auto-build on file edits
  • security/prevent-force-push - Block dangerous git operations

​
Settings

Configuration files for permissions, models, and behavior:
  • permissions/allow-npm-commands - Enable npm command execution
  • model/use-sonnet - Default to Claude Sonnet model
  • statusline/context-monitor - Real-time context usage tracking

​
Templates

Complete project configurations with multiple components:
  • development/react-typescript - React + TypeScript stack
  • security/security-first - Security-hardened configuration
  • workflow-automation/git-excellence - Git workflow automation

​
Component Lifecycle

1

Discovery

Browse components at aitmpl.com or use the CLI’s interactive mode.
2

Installation

Components are downloaded from GitHub and installed to .claude/ directory.
3

Configuration

Settings merge with existing configurations. Choose installation location (user/project/local).
4

Activation

Components are immediately available in Claude Code. No restart required.
5

Updates

Re-run installation command to update components to latest version.

​
Component Naming Conventions

All components follow consistent naming patterns:
  • Kebab-case: frontend-developer, ci-pipeline, web-fetch
  • Category prefixes: category/component-name (e.g., security/api-security-audit)
  • Descriptive: Names clearly indicate purpose and functionality
When installing components with category prefixes (e.g., development-team/frontend-developer), the component is installed to the flat .claude/agents/ directory without category subdirectories.

​
Component Configuration

Components can be configured through three settings levels:
  1. User settings (~/.claude/settings.json) - Apply to all projects
  2. Project settings (.claude/settings.json) - Shared with team (committed)
  3. Local settings (.claude/settings.local.json) - Personal overrides (not committed)
Settings cascade from user → project → local, with later settings overriding earlier ones.

​
Component Compatibility

Components are designed to work together:
  • Agents can use commands to perform specialized workflows
  • Hooks can trigger commands automatically
  • MCPs provide data and services that agents leverage
  • Settings control behavior of all component types
  • Templates bundle multiple components for specific use cases

​
Next Steps

Explore Agents

Learn about AI specialist agents

Create Commands

Build custom slash commands

Configure MCPs

Integrate external services

Automate with Hooks

Set up event-driven automation

Build docs developers (and LLMs) love

Get started for freeTalk to us