iTranslated by AI

The content below is an AI-generated translation. This is an experimental feature, and may contain errors. View original article
🎯

Claude Code's Hidden Killer Features: The Complete Guide to Boosting Development Efficiency 10x with Hooks, Custom Commands, and Voice Integration

に公開

I Can't Be Bothered with Manual Work Anymore!

"Notify me with a sound when the task is done."
"I always create PRs manually, even though the steps are the same every time."
"I wish I could give instructions by voice..."

All of these frustrations can be solved.

Based on the presentation by tonkotsuboy (@tonkotsuboy_com) at the Findy Claude Code Meetup, I'll show you how to unleash the true power of Claude Code.

🎪 The 5 Amazing Features Introduced Here

  1. Hooks — Automated processing before and after tasks
  2. Custom Slash Commands — Speed up repetitive tasks
  3. MCP Integration — Connect with external systems
  4. Aqua Voice — Give voice commands to AI
  5. Kiro × Claude Code — The ultimate duo for design and implementation

Let's dive into each one!

🪝 Hooks: Make Magic Before and After Tasks

What Are Hooks?

A feature that lets you automatically run any shell command at various Claude Code events (before/after tool use, when submitting a user prompt, etc.).

Example 1: Sound Notification on Task Completion

Here's tonkotsuboy's configuration:

// ~/.claude/settings.json
{
  "hooks": {
    "Stop": [
      {
        "matcher": "",
        "hooks": [
          {
            "type": "command",
            "command": "afplay /Users/takeshi.kano/.claude/buhi.m4a"
          }
        ]
      }
    ]
  }
}

Believe it or not, it plays a "boohi" sound when a task completes!

Example 2: Automatic Code Formatting

{
  "hooks": {
    "Stop": [
      {
        "matcher": "",
        "hooks": [
          {
            "type": "command",
            "command": "npm run format && npm run lint:fix"
          }
        ]
      }
    ]
  }
}

Formatting and lint fixes run automatically when a task finishes. No more manual work!

Example 3: Automatic Work Logging

{
  "hooks": {
    "UserPromptSubmit": [
      {
        "matcher": "",
        "hooks": [
          {
            "type": "command",
            "command": "echo \"[$(date)] Prompt submitted\" >> ~/.claude/work.log"
          }
        ]
      }
    ],
    "Stop": [
      {
        "matcher": "",
        "hooks": [
          {
            "type": "command",
            "command": "echo \"[$(date)] Task completed\" >> ~/.claude/work.log"
          }
        ]
      }
    ]
  }
}

Use Case: Team Notifications

{
  "hooks": {
    "Stop": [
      {
        "matcher": "Create PR",
        "hooks": [
          {
            "type": "command",
            "command": "curl -X POST https://slack.com/api/chat.postMessage -H 'Authorization: Bearer $SLACK_TOKEN' -d 'channel=#dev-team&text=PR created!'"
          }
        ]
      }
    ]
  }
}

🚀 Custom Slash Commands: Crush Repetitive Tasks Instantly

The Power of Custom Slash Commands

Are you writing the same prompts over and over? If you use something more than three times, turn it into a command!

Example 1: Complete Automation of PR Creation

Here's tonkotsuboy's example:

# ~/.claude/commands/create-pr.md
---
name: create-pr
description: Automate PR creation
---

## Description
This command automatically performs the following tasks:
1. Run `npm run format` to format with Prettier
2. Split changes into appropriately sized commits
3. Create a GitHub PR

## Implementation
After running prettier, split changes into appropriate commits and create a PR.

Usage:

> /create-pr
# → Formatting, commits, and PR creation are done automatically!

Example 2: Test-Driven Development Command

# ~/.claude/commands/tdd.md
---
name: tdd
description: Execute the TDD cycle
---

## Implementation
1. Write a failing test
2. Write the minimum code to pass the test
3. Refactor
4. Generate a coverage report

Execute the TDD cycle for the current file.

Example 3: Release Notes Generation

# ~/.claude/commands/release-notes.md
---
name: release-notes
description: Automatically generate release notes
---

## Implementation
1. Get commits from the last release tag to HEAD
2. Group by prefixes like feat:, fix:, perf:
3. Append to CHANGELOG.md
4. Generate user-friendly explanations in Japanese

Analyze `git log --oneline $(git describe --tags --abbrev=0)..HEAD` and create clear release notes.

Project-Specific Commands

# .claude/commands/deploy-staging.md
---
name: deploy-staging
description: Deploy to staging environment
scope: project
---

## Implementation
1. Run tests (stop if they fail)
2. Build
3. Deploy to staging environment
4. Notify Slack

Execute the following commands in order:
- npm test
- npm run build
- npm run deploy:staging
- curl -X POST $SLACK_WEBHOOK -d '{"text":"Staging deployment complete"}'

🔌 MCP (Model Context Protocol): The Magic Bridge to External Systems

What Can You Do with MCP?

You can directly integrate Claude Code with external systems.

Example 1: Automated Browser Operations with Puppeteer

> Use Puppeteer to upload an image to a GitHub PR

Claude Code automatically operates the browser to upload the image!

Example 2: Integration with External Systems

With MCP, you can integrate with various external systems. For example:

  • Browser operations via Puppeteer
  • Direct database access
  • Communication with external APIs

For details, see the MCP official documentation.

Example 3: Consulting with o3 (UltraThink Integration)

tonkotsuboy's use case:

> What can we do to improve performance in this repository? Think deeply while consulting with o3.

Claude Code connects with the o3 MCP in UltraThink mode for deep analysis!

Custom MCP Example

Ubie's design system MCP:

  • Automatic retrieval of design tokens
  • Reference component specifications
  • Apply style guides
// MCP server example
export const server = {
  tools: {
    getDesignToken: {
      description: "Get a design token",
      inputSchema: {
        type: "object",
        properties: {
          tokenName: { type: "string" }
        }
      },
      handler: async ({ tokenName }) => {
        // Fetch token from the design system
        return await fetchDesignToken(tokenName);
      }
    }
  }
};

🎙️ Aqua Voice Integration: Coding with Your Voice

What is Aqua Voice?

A high-precision Japanese speech recognition service. It even auto-corrects "uh" and "um" filler words, making it a standout tool.

Example: Execute Tasks by Voice

# Voice input
"Add a loading state to this component and display a skeleton screen."

# Claude Code understands and implements
> Implemented the loading state and skeleton screen.

Advantages

  • ⌨️ Faster than typing
  • 🎯 Can give instructions in natural Japanese
  • 🚀 Instantly implement ideas

Disadvantages

  • 😅 Can be a bit embarrassing in an office setting
  • 🔇 Requires a quiet environment

🏗️ Kiro × Claude Code: The Ultimate Design and Implementation Tag Team

Strengths of Kiro and Claude Code

Tool Strength Weakness
Kiro Creates detailed design documents Slow implementation
Claude Code Lightning-fast implementation Design can be rough

Practical Flow

  1. Design with Kiro

    Conversational requirements definition → Generate detailed design document
    
  2. Feed the design document to Claude Code

    > /read task.md
    > Implement according to this design document.
    
  3. Implementation completed at blazing speed

Example: Task Management App

Part of the design document generated by Kiro:

# Task Management Application Design

## Architecture
- Frontend: Next.js 14 (App Router)
- State: Zustand
- Styling: Tailwind CSS

## Component Structure
- TaskList
  - TaskItem
    - Checkbox
    - Title
    - DueDate
- TaskForm
  - Input fields
  - Validation

Just feed this to Claude Code and the basic functionality is completed in 30 minutes!

💡 Combination Techniques: The Ultimate Automation Flow

Fully Automate Your Morning Routine

// Hooks + Custom Commands + MCP
{
  "hooks": {
    "Start": [
      {
        "matcher": "/morning",
        "hooks": [
          {
            "type": "command",
            "command": "say 'おはようございます。今日も頑張りましょう'"
          }
        ]
      }
    ]
  }
}
# ~/.claude/commands/morning.md
---
name: morning
description: Morning routine
---

1. Pull the latest with `git pull`
2. Update dependencies with `npm install`
3. Run tests
4. Check yesterday's PR review comments
5. Display today's task list
6. Check Slack mentions (via MCP)

Fully Automate Release Workflows

# .claude/commands/release.md
---
name: release
description: Automate the release process
---

1. Run tests
2. Build
3. Generate release notes
4. Tag
5. Deploy
6. Notify Slack (also play a sound via Hooks)

🎓 Best Practices for Introduction

1. Introduce Gradually

Week 1: Automate simple tasks with Hooks
Week 2: Customize frequently used commands
Week 3: Integrate external systems with MCP
Week 4: Try voice input

2. Share with Your Team

# Team shared repository
team-claude-configs/
├── hooks/
   └── standard-hooks.json
├── commands/
   ├── pr-create.md
   ├── deploy.md
   └── test-coverage.md
└── README.md

3. Measure Effectiveness

// Hook for measuring work time
{
  "hooks": {
    "Start": [{
      "command": "echo START:$(date +%s) >> ~/.claude/metrics.log"
    }],
    "Stop": [{
      "command": "echo STOP:$(date +%s) >> ~/.claude/metrics.log"
    }]
  }
}

🚨 Cautions and Troubleshooting

Common Pitfalls

  1. Infinite Hook Loops

    // ❌ Bad example
    {
      "hooks": {
        "Change": [{
          "command": "git add ."  // This will trigger further Change events
        }]
      }
    }
    
  2. Overly Bloated Commands

    # ❌ Bad example: Too much crammed into one command
    /do-everything
    
    # ✅ Good example: Properly split
    /format
    /test
    /deploy
    
  3. Excessive MCP Dependency

    • What if the external service goes down?
    • What about rate limits?
    • Prepare fallback processing

🎯 Summary: Become a "Task Delegation Master" Too!

tonkotsuboy calls himself the "Claude Code task delegation master."

This is by no means laziness. It's a smart choice to focus on essential work.

Things You Can Start Right Now

  1. First, make sound with Hooks

    {"hooks": {"Stop": [{"command": "say 完了しました"}]}}
    
  2. Create one command you use frequently

    mkdir -p ~/.claude/commands
    echo "Run the tests." > ~/.claude/commands/test.md
    
  3. Try one MCP

    npm install -g @modelcontextprotocol/server-puppeteer
    

Master these features and your development efficiency will surely multiply by 10.

So, open your Claude Code now and set up your first Hook!


Next Episode Preview: "Complete Automated CI/CD with Claude Code × GitHub Actions"

Until then, Happy Coding with Claude! 🚀

Discussion