Module 5: Advanced TechniquesLesson 4 of 6
0%
Lesson 4ยท4 min

Custom Slash Commands

Create your own shortcuts for common tasks

Custom Slash Commands

Create shortcuts for tasks you do repeatedly. Save time and ensure consistency.

Built-in vs Custom

Built-in commands like /help, /clear, /cost are always available.

Custom commands are defined in your project and can do anything!

Creating Custom Commands

Add a .claude folder with command files:

Terminal
$ mkdir .claude
$ touch .claude/commands.json
โ–Œ
Terminal
$ cat .claude/commands.json
{
"commands": {
"test": {
"description": "Run all tests and show results",
"action": "Run npm test and summarize the results. If any fail, explain why."
},
"review": {
"description": "Code review the current changes",
"action": "Review uncommitted changes (git diff). Check for bugs, security issues, and code style. Format as a PR review."
},
"doc": {
"description": "Generate documentation",
"action": "Add JSDoc comments to all functions in the current file that don't have them."
},
"aussie": {
"description": "Check for Australian compliance",
"action": "Review the code for Australian business requirements: GST, date formats, currency (AUD), timezone handling for AEST/AEDT."
}
}
}
โ–Œ

Using Custom Commands

Terminal
> /test
Claude: Running tests...
$ npm test
Results: 23 passed, 1 failed
Failed test: src/utils/gst.test.ts
- Expected GST of $4.50, got $4.00
- The calculateGST function isn't rounding correctly
- Suggested fix: Use toFixed(2) for decimal precision
โ–Œ

Tip

Good custom commands encode your team's standards and common tasks.

Example Commands

/deploy

json
{
  "deploy": {
    "description": "Prepare and deploy to production",
    "action": "1. Run tests 2. Build the project 3. Check for env vars 4. Deploy to Vercel 5. Verify the deployment"
  }
}

/newpage

json
{
  "newpage": {
    "description": "Create a new page with standard structure",
    "action": "Create a new Next.js page with: metadata, loading state, error boundary. Use our standard page layout from app/template.tsx."
  }
}

/component

json
{
  "component": {
    "description": "Create a component with tests",
    "action": "Create a React component with TypeScript props interface, export it from components/index.ts, and create a basic test file."
  }
}

Aussie Note

Custom commands are like recipes. Write them once, use them forever! ๐Ÿณ

Project-Specific Commands

Add commands relevant to your project:

json
{
  "price": {
    "description": "Add a new menu item with pricing",
    "action": "Add a new coffee item to data/menu.ts with name, price in AUD, description, and size options. Update the menu component."
  },
  "shop": {
    "description": "Add a new coffee shop",
    "action": "Add a new coffee shop to data/shops.ts with name, address (Australian format), suburb, rating. Add to the shop listings page."
  }
}

Combining with Skills

Commands can reference skills:

json
{
  "comply": {
    "description": "Check Australian compliance",
    "action": "Using the fair-work-compliance and gst-basics skills, review this code for Australian business compliance issues."
  }
}

Warning

Keep command actions clear but not too long. If it's complex, write it as a skill file instead.

Key Takeaways

  • Custom commands save time on repetitive tasks
  • Define in .claude/commands.json
  • Include description and action
  • Make project-specific commands
  • Reference skills for domain expertise