iTranslated by AI
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
- Hooks — Automated processing before and after tasks
- Custom Slash Commands — Speed up repetitive tasks
- MCP Integration — Connect with external systems
- Aqua Voice — Give voice commands to AI
- 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
-
Design with Kiro
Conversational requirements definition → Generate detailed design document -
Feed the design document to Claude Code
> /read task.md > Implement according to this design document. -
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
-
Infinite Hook Loops
// ❌ Bad example { "hooks": { "Change": [{ "command": "git add ." // This will trigger further Change events }] } } -
Overly Bloated Commands
# ❌ Bad example: Too much crammed into one command /do-everything # ✅ Good example: Properly split /format /test /deploy -
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
-
First, make sound with Hooks
{"hooks": {"Stop": [{"command": "say 完了しました"}]}} -
Create one command you use frequently
mkdir -p ~/.claude/commands echo "Run the tests." > ~/.claude/commands/test.md -
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!
🔗 Reference Links
- Claude Code Hooks Official Documentation
- Custom Slash Commands
- MCP (Model Context Protocol)
- Aqua Voice
- Kiro
- tonkotsuboy's Zenn Article
Next Episode Preview: "Complete Automated CI/CD with Claude Code × GitHub Actions"
Until then, Happy Coding with Claude! 🚀
Discussion