> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aitmpl.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Quick Start

> Install and use your first Claude Code component in under 2 minutes

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

<Note>
  **Prerequisites**: You need [Anthropic's Claude Code](https://code.claude.com) installed on your machine. Claude Code Templates works as an enhancement to the official Claude Code IDE.
</Note>

## Installation

<Steps>
  <Step title="Run the CLI">
    Open your terminal and run the npx command. No installation required:

    ```bash theme={null}
    npx claude-code-templates@latest
    ```

    <Tip>
      Use the short alias `cct` to save typing:

      ```bash theme={null}
      npx cct@latest
      ```
    </Tip>
  </Step>

  <Step title="Choose Your Component">
    The interactive menu will appear. Let's install a frontend developer agent:

    ```bash theme={null}
    # 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:

    ```bash theme={null}
    ? What would you like to install?
    ❯ 🤖 Agent
      ⚡ Command
      🔌 MCP Server
      ⚙️  Setting
      🪝 Hook
    ```
  </Step>

  <Step title="Select Component Category">
    Browse by category to find what you need:

    ```bash theme={null}
    ? Select agent category:
    ❯ Development Team
      Development Tools
      Security
      DevOps & Infrastructure
      Data & AI
      Documentation
      Testing & QA
    ```

    <Note>
      There are 400+ agents organized into 30+ categories. Use arrow keys to browse or start typing to filter.
    </Note>
  </Step>

  <Step title="Install Component">
    Choose your specific component:

    ```bash theme={null}
    ? 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:

    ```bash theme={null}
    ✓ Installing frontend-developer agent...
    ✓ Component installed successfully!
    ```
  </Step>
</Steps>

## Quick Install (Skip Interactive Mode)

If you already know what you want, install directly:

<CodeGroup>
  ```bash Install Single Component theme={null}
  npx claude-code-templates@latest \
    --agent development-team/frontend-developer \
    --yes
  ```

  ```bash Install Multiple Components theme={null}
  npx claude-code-templates@latest \
    --agent development-team/frontend-developer \
    --command testing/generate-tests \
    --mcp development/github-integration \
    --yes
  ```

  ```bash Install Complete Stack theme={null}
  # 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
  ```
</CodeGroup>

<Tip>
  The `--yes` flag skips all confirmation prompts. Perfect for automation and scripting.
</Tip>

## 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:

```bash theme={null}
# 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:

```bash theme={null}
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:

<Steps>
  <Step title="Create New Project">
    ```bash theme={null}
    npx create-react-app my-app
    cd my-app
    ```
  </Step>

  <Step title="Install Components">
    ```bash theme={null}
    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
  </Step>

  <Step title="Open in Claude Code">
    ```bash theme={null}
    code .
    ```

    Claude Code will automatically detect and load your components.
  </Step>

  <Step title="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
    ```
  </Step>
</Steps>

## Next Steps

<CardGroup cols={2}>
  <Card title="Browse Components" icon="grid" href="https://aitmpl.com">
    Explore 900+ agents, commands, MCPs, and more in the interactive catalog.
  </Card>

  <Card title="Installation Guide" icon="book" href="/installation">
    Learn about component types, batch installation, and advanced configuration.
  </Card>

  <Card title="CLI Reference" icon="code" href="/cli/overview">
    Complete CLI reference with all commands and options.
  </Card>

  <Card title="Analytics Dashboard" icon="chart-line" href="/tools/analytics-dashboard">
    Monitor your Claude Code sessions in real-time.
  </Card>
</CardGroup>

## Troubleshooting

<AccordionGroup>
  <Accordion title="Components not showing in Claude Code">
    Make sure you're running Claude Code in the same directory where you installed components:

    ```bash theme={null}
    # Check current directory
    pwd

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

    If `.claude/` doesn't exist, run the installation again in your project directory.
  </Accordion>

  <Accordion title="Permission denied errors">
    Some components require executable permissions. Run:

    ```bash theme={null}
    chmod +x .claude/scripts/*
    chmod +x .claude/hooks/*
    ```
  </Accordion>

  <Accordion title="MCP connection errors">
    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:

    ```bash theme={null}
    # Add to .env
    GITHUB_TOKEN=ghp_your_token_here
    ```
  </Accordion>

  <Accordion title="npx command not found">
    You need Node.js 14+ installed:

    ```bash theme={null}
    # Check Node.js version
    node --version

    # Install Node.js from https://nodejs.org
    # Or use nvm:
    nvm install 20
    nvm use 20
    ```
  </Accordion>
</AccordionGroup>

## Get Help

If you're stuck:

* **GitHub Discussions**: [Ask the community](https://github.com/davila7/claude-code-templates/discussions)
* **Issues**: [Report bugs](https://github.com/davila7/claude-code-templates/issues)
* **Documentation**: [Read the full docs](https://docs.aitmpl.com)
* **Discord**: [Join our community](https://discord.gg/claude-code-templates)

***

<Card title="Ready to explore?" icon="rocket" href="https://aitmpl.com">
  Browse 900+ components in the interactive catalog and find exactly what you need.
</Card>