Skip to main content

​
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

1

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
2

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
3

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.
4

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
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:
  1. Open Claude Code in your project directory
  2. Reference the agent in conversation: 
    @frontend-developer help me optimize this React component
  3. The agent has specialized knowledge and context for its domain

​
Using Commands

Commands are available as slash commands:
  1. Type / in Claude Code to see available commands
  2. Use the command: 
    /generate-tests src/components/Button.tsx
  3. Claude Code executes the command with the agent’s context

​
Using MCPs (Model Context Protocol)

MCPs integrate external services:
  1. MCPs are automatically configured in your .claude/ directory
  2. Claude Code connects to the service on startup
  3. 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:
1

Create New Project

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

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
3

Open in Claude Code

code .
Claude Code will automatically detect and load your components.
4

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

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.
Some components require executable permissions. Run:
chmod +x .claude/scripts/*
chmod +x .claude/hooks/*
MCPs require external services to be configured:
  1. Check the MCP documentation for required environment variables
  2. Add credentials to .env or Claude Code settings
  3. Restart Claude Code to reload configuration
Example for GitHub MCP:
# Add to .env
GITHUB_TOKEN=ghp_your_token_here
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:

Ready to explore?

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

Build docs developers (and LLMs) love

Get started for freeTalk to us