Quick Start

Get up and running with Claude Code Templates in under 2 minutes. This guide will walk you through installing your first component and using it with Claude Code.

Prerequisites: You need Anthropic’s Claude Code installed on your machine. Claude Code Templates works as an enhancement to the official Claude Code IDE.

Installation

Run the CLI

Open your terminal and run the npx command. No installation required:

npx claude-code-templates@latest

Use the short alias cct to save typing:

npx cct@latest

Choose Your Component

The interactive menu will appear. Let’s install a frontend developer agent:

# Navigate using arrow keys
? What would you like to do?
❯ ⚙️  Project Setup - Configure Claude Code for your project
  📊 Analytics Dashboard
  💬 Chats Mobile
  🔍 Health Check

# Select "Project Setup" and press Enter

Then select the component type:

? What would you like to install?
❯ 🤖 Agent
  ⚡ Command
  🔌 MCP Server
  ⚙️  Setting
  🪝 Hook

Select Component Category

Browse by category to find what you need:

? Select agent category:
❯ Development Team
  Development Tools
  Security
  DevOps & Infrastructure
  Data & AI
  Documentation
  Testing & QA

There are 400+ agents organized into 30+ categories. Use arrow keys to browse or start typing to filter.

Install Component

Choose your specific component:

? Select agent:
❯ frontend-developer - Expert in modern frontend development
  backend-developer - Specializes in server-side development
  fullstack-developer - Full-stack web application expert
  react-expert - React and Next.js specialist
  vue-expert - Vue.js and Nuxt specialist

# Select and press Enter

The CLI will download and install the component:

✓ Installing frontend-developer agent...
✓ Component installed successfully!

Quick Install (Skip Interactive Mode)

If you already know what you want, install directly:

npx claude-code-templates@latest \
  --agent development-team/frontend-developer \
  --yes

npx claude-code-templates@latest \
  --agent development-team/frontend-developer \
  --command testing/generate-tests \
  --mcp development/github-integration \
  --yes

# React development environment
npx claude-code-templates@latest \
  --agent development-team/frontend-developer \
  --agent development-team/react-expert \
  --command testing/generate-tests \
  --command performance/optimize-bundle \
  --mcp development/github-integration \
  --hook git/pre-commit-validation \
  --yes

The --yes flag skips all confirmation prompts. Perfect for automation and scripting.

Using Your Component

After installation, your components are immediately available in Claude Code:

Using Agents

Agents are installed to .claude/agents/ in your project:

Open Claude Code in your project directory

Reference the agent in conversation:

@frontend-developer help me optimize this React component

The agent has specialized knowledge and context for its domain

Using Commands

Commands are available as slash commands:

Type / in Claude Code to see available commands

Use the command:

/generate-tests src/components/Button.tsx

Claude Code executes the command with the agent’s context

Using MCPs (Model Context Protocol)

MCPs integrate external services:

MCPs are automatically configured in your .claude/ directory
Claude Code connects to the service on startup

Use natural language to interact:

Show me recent pull requests from GitHub

Verify Installation

Check that components were installed correctly:

# List all installed components
ls -la .claude/

# Example output:
drwxr-xr-x  agents/
drwxr-xr-x  commands/
drwxr-xr-x  hooks/
-rw-r--r--  config.json

Or run the health check:

npx claude-code-templates@latest --health-check

This will validate:

✓ Claude Code is installed
✓ Configuration files are valid
✓ All components are properly configured
✓ Dependencies are installed

Example: Complete React Setup

Let’s set up a complete React development environment:

Create New Project

npx create-react-app my-app
cd my-app

Install Components

npx claude-code-templates@latest \
  --agent development-team/frontend-developer \
  --agent development-team/react-expert \
  --command testing/generate-tests \
  --command performance/optimize-bundle \
  --mcp development/github-integration \
  --hook git/pre-commit-validation \
  --yes

This installs:

🤖 Frontend Developer agent
🤖 React Expert agent
⚡ Generate Tests command
⚡ Optimize Bundle command
🔌 GitHub MCP integration
🪝 Pre-commit validation hook

Open in Claude Code

code .

Claude Code will automatically detect and load your components.

Start Building

Try these prompts in Claude Code:

@react-expert create a reusable Button component with TypeScript

/generate-tests src/components/Button.tsx

@frontend-developer optimize this component for performance

/optimize-bundle

Next Steps

Browse Components

Explore 900+ agents, commands, MCPs, and more in the interactive catalog.

Installation Guide

Learn about component types, batch installation, and advanced configuration.

CLI Reference

Complete CLI reference with all commands and options.

Analytics Dashboard

Monitor your Claude Code sessions in real-time.

Troubleshooting

Components not showing in Claude Code

Make sure you’re running Claude Code in the same directory where you installed components:

# Check current directory
pwd

# Check for .claude directory
ls -la .claude/

If .claude/ doesn’t exist, run the installation again in your project directory.

Permission denied errors

Some components require executable permissions. Run:

chmod +x .claude/scripts/*
chmod +x .claude/hooks/*

MCP connection errors

MCPs require external services to be configured:

Check the MCP documentation for required environment variables
Add credentials to .env or Claude Code settings
Restart Claude Code to reload configuration

Example for GitHub MCP:

# Add to .env
GITHUB_TOKEN=ghp_your_token_here

npx command not found

You need Node.js 14+ installed:

# Check Node.js version
node --version

# Install Node.js from https://nodejs.org
# Or use nvm:
nvm install 20
nvm use 20

Get Help

If you’re stuck:

GitHub Discussions: Ask the community
Issues: Report bugs
Documentation: Read the full docs
Discord: Join our community

Ready to explore?

Browse 900+ components in the interactive catalog and find exactly what you need.

Get Started

Core Concepts

Guides

Tools

Advanced

Quick Start

Quick Start

Installation

Quick Install (Skip Interactive Mode)

Using Your Component

Using Agents

Using Commands

Using MCPs (Model Context Protocol)

Verify Installation

Example: Complete React Setup

Next Steps

Browse Components

Installation Guide

CLI Reference

Analytics Dashboard

Troubleshooting

Get Help

Ready to explore?

​Quick Start

​Installation

​Quick Install (Skip Interactive Mode)

​Using Your Component

​Using Agents

​Using Commands

​Using MCPs (Model Context Protocol)

​Verify Installation

​Example: Complete React Setup

​Next Steps

Browse Components

Installation Guide

CLI Reference

Analytics Dashboard

​Troubleshooting

​Get Help

Ready to explore?

Quick Start

Installation

Quick Install (Skip Interactive Mode)

Using Your Component

Using Agents

Using Commands

Using MCPs (Model Context Protocol)

Verify Installation

Example: Complete React Setup

Next Steps

Troubleshooting

Get Help