Installing Individual Components

Claude Code Templates provides over 600 individual components that you can install one at a time. Each component type serves a specific purpose in your development workflow.

Component Types

Before installing, understand what each component type does:

Agents (162+) - AI specialists for specific tasks (e.g., security-auditor, frontend-developer)
Commands (210+) - Custom slash commands for workflows (e.g., /setup-testing, /docker-setup)
MCPs (65+) - Model Context Protocol integrations for external services
Settings (60+) - Configuration files for Claude Code behavior
Hooks (45+) - Automation triggers for events (e.g., before bash, after file edit)
Skills - Specialized knowledge domains for Claude to reference

Installation Syntax

All components follow the same installation pattern:

npx claude-code-templates@latest --{type} {component-name}

Installing Agents

Agents are AI specialists stored in .claude/agents/.

Browse Available Agents

Visit aitmpl.com and filter by “Agents” to explore 162+ available agents organized by category:

Development Team - Full-stack, frontend, backend developers

Security - Security auditors, penetration testers

Data/AI - ML engineers, data scientists

DevOps - Cloud architects, infrastructure specialists

Business - Product managers, project managers

Install an Agent

npx claude-code-templates@latest --agent frontend-developer

You can use either the component name or the full category path:

# Both work
npx claude-code-templates@latest --agent frontend-developer
npx claude-code-templates@latest --agent development-team/frontend-developer

Verify Installation

ls .claude/agents/
# Should show: frontend-developer.md

Use the Agent

In Claude Code, reference the agent:

Use the frontend-developer agent to review this React component for performance issues

Agent Discovery: Can’t find an agent? Use the search on aitmpl.com to search by description, category, or use case.

Installing Commands

Commands are custom slash commands stored in .claude/commands/.

Find a Command

Browse commands by category at aitmpl.com/commands:

Automation - CI/CD, workflow automation

Development - Git, testing, project setup

DevOps - Docker, deployment, infrastructure

Security - Vulnerability scanning, audit tools

Install a Command

npx claude-code-templates@latest --command setup-testing

View Command Details

cat .claude/commands/setup-testing.md

Execute the Command

In Claude Code:

/setup-testing jest

Installing MCPs

MCPs (Model Context Protocols) enable external service integrations. They merge into .mcp.json.

Install an MCP

npx claude-code-templates@latest --mcp filesystem

Automatic Merging: MCP configurations are automatically merged with your existing .mcp.json. The CLI will prompt if conflicts are detected.

Verify MCP Configuration

cat .mcp.json

Expected output:

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "/path/to/allowed/files"]
    }
  }
}

Restart Claude Code

MCP changes require a restart to take effect.

Installing Settings

Settings configure Claude Code behavior. You can install them at multiple levels.

Install a Setting

npx claude-code-templates@latest --setting enable-telemetry

Choose Installation Location

The CLI will prompt you to select one or more locations:

User settings (~/.claude/settings.json) - Applies to all projects

Project settings (.claude/settings.json) - Shared with team via git

Local settings (.claude/settings.local.json) - Personal, gitignored

Enterprise settings - System-wide policy (requires admin)

Understanding Settings Hierarchy

Settings are loaded in this order (later overrides earlier):

Enterprise managed settings
User settings (~/.claude/settings.json)
Project settings (.claude/settings.json)
Local settings (.claude/settings.local.json)

This allows personal preferences to override team settings.

Verify Settings

cat .claude/settings.local.json

Conflict Detection: The CLI checks for conflicts when merging settings. If a setting already exists with a different value, you’ll be prompted to confirm overwrite.

Installing Hooks

Hooks enable event-driven automation. They’re stored in settings files.

Install a Hook

npx claude-code-templates@latest --hook automation/simple-notifications

Choose Hook Location

Same as settings, you’ll choose where to install:

? Where would you like to install this hook?
  ◯ User settings - Applies to all projects
  ◯ Project settings - Shared with team
  ◉ Local settings - Personal only

View Hook Configuration

cat .claude/settings.local.json

Expected structure:

{
  "hooks": {
    "SessionStart": [
      {
        "matcher": "startup",
        "hooks": [
          {
            "type": "command",
            "command": "echo 'Session started!'"
          }
        ]
      }
    ]
  }
}

Test the Hook

Restart Claude Code or trigger the hook event to see it in action.

Installing Skills

Skills provide specialized knowledge domains for Claude to reference.

Install a Skill

npx claude-code-templates@latest --skill typescript-expert

Verify Installation

ls .claude/skills/
# Should show skill directory with SKILL.md and references/

Use the Skill

In Claude Code:

Use the typescript-expert skill to help me configure strict TypeScript

Component Naming Conventions

All components follow kebab-case naming: ✅ Correct:

--agent frontend-developer
--command setup-testing
--mcp web-fetch

❌ Incorrect:

--agent frontendDeveloper
--agent Frontend-Developer
--agent frontend_developer

Common Installation Flags

Directory Target

Install to a specific directory:

npx claude-code-templates@latest --agent security-auditor --directory /path/to/project

Skip Prompts

Use defaults without confirmation:

npx claude-code-templates@latest --agent security-auditor --yes

Dry Run

Preview what would be installed without making changes:

npx claude-code-templates@latest --agent security-auditor --dry-run

Verbose Logging

Enable detailed installation logs:

npx claude-code-templates@latest --agent security-auditor --verbose

Viewing Component Details

Before installing, you can view component details on the web:

Visit the Component Browser

Go to aitmpl.com

Search or Filter

Use the search bar for keywords

Filter by type (agents, commands, etc.)

Filter by category (development, security, etc.)

Click a Component

View:

Full description

Installation command

Source code preview

Download statistics

GitHub link

Copy Installation Command

Click “Copy” next to the installation command and run in your terminal.

Troubleshooting

Component Not Found

If you get a 404 error:

❌ Agent "frontend-dev" not found

Solutions:

Check spelling - component names are exact
Search on aitmpl.com for the correct name
Verify the component exists in the catalog

Permission Errors

If installation fails with permission errors:

# Run with sudo (Linux/Mac)
sudo npx claude-code-templates@latest --agent security-auditor

# Or install to user directory
npx claude-code-templates@latest --agent security-auditor --directory ~/projects/my-app

Merge Conflicts

If settings/hooks conflict with existing config:

⚠️ Conflicts detected:
  • Setting "telemetry" (current: false, new: true)

Do you want to overwrite? (y/N)

Choose:

y - Replace existing value with new value
N - Keep existing value, skip installation

File Locations Reference

Component Type	Installation Path	Format
Agents	`.claude/agents/{name}.md`	Markdown
Commands	`.claude/commands/{name}.md`	Markdown
MCPs	`.mcp.json` (merged)	JSON
Settings	`.claude/settings*.json`	JSON
Hooks	`.claude/settings*.json`	JSON
Skills	`.claude/skills/{name}/`	Directory

Next Steps

Batch Installation

Install multiple components at once

Interactive Mode

Use the visual component selector

Workflows

Create reusable installation workflows

Global Agents

Create agents you can run from anywhere

Get Started

Core Concepts

Guides

Tools

Advanced

Installing Individual Components

Installing Individual Components

Component Types

Installation Syntax

Installing Agents

Installing Commands

Installing MCPs

Installing Settings

Installing Hooks

Installing Skills

Component Naming Conventions

Common Installation Flags

Directory Target

Skip Prompts

Dry Run

Verbose Logging

Viewing Component Details

Troubleshooting

Component Not Found

Permission Errors

Merge Conflicts

File Locations Reference

Next Steps

Batch Installation

Interactive Mode

Workflows

Global Agents

Get Started

Core Concepts

Guides

Tools

Advanced

​Installing Individual Components

​Component Types

​Installation Syntax

​Installing Agents

​Installing Commands

​Installing MCPs

​Installing Settings

​Installing Hooks

​Installing Skills

​Component Naming Conventions

​Common Installation Flags

​Directory Target

​Skip Prompts

​Dry Run

​Verbose Logging

​Viewing Component Details

​Troubleshooting

​Component Not Found

​Permission Errors

​Merge Conflicts

​File Locations Reference

​Next Steps

Batch Installation

Interactive Mode

Workflows

Global Agents

Installing Individual Components

Component Types

Installation Syntax

Installing Agents

Installing Commands

Installing MCPs

Installing Settings

Installing Hooks

Installing Skills

Component Naming Conventions

Common Installation Flags

Directory Target

Skip Prompts

Dry Run

Verbose Logging

Viewing Component Details

Troubleshooting

Component Not Found

Permission Errors

Merge Conflicts

File Locations Reference

Next Steps