Learn how to create and use custom slash commands in Claude Code, enabling faster and more efficient workflows for your projects.
Understanding Slash Commands in Claude Code
Slash commands are a powerful feature in Claude Code, designed to simplify and automate repetitive tasks. By typing / followed by a command name, users can perform predefined actions, such as clearing contexts or managing directories. While built-in commands are highly useful, creating custom slash commands allows you to define task-specific workflows and expand your productivity. These custom commands act as reusable tools, tailored to your specific project needs.
Prerequisites for Custom Slash Commands
To get started with custom slash commands in Claude Code, make sure you are equipped with the following:
prerequisites
- Claude Code installed and operational on your computer.
- An active project directory that includes a
.clawfolder. If the folder does not exist, you'll need to create it. - Familiarity with Markdown syntax to define command logic and metadata.
Steps to Create a Custom Slash Command in Claude Code
Follow these steps to build and enable your first custom slash command:
steps
Create the Commands Folder
Inside your project's.clawdirectory, create a folder namedcommandsif it doesn’t already exist.Define the Custom Command
In thecommandsfolder, create a new Markdown file. Name it based on the intended command name (e.g.,UI-component.mmd).Add Instructions
Open the.mmdfile and provide specific instructions for the command. For example, include folder paths, naming conventions, or additional directives to Claude Code.Restart Claude Code
Exit and restart Claude Code to enable the new custom command.
Example Command
Here is a basic example of a custom slash command file to generate a UI component:
---
description: "Create a UI component"
---
Make a UI component with the following properties:
- Location: `/components/UI/`
- Naming: Pascal case (e.g., `MyComponent`)
- Test: Include a test file in the same directory
- Variants: Primary, Secondary, Warning
Add the component to the preview page for browser integration.Run the newly created command via the slash menu to verify its functionality.
Enhancing Commands with Arguments
You can enhance custom commands by defining arguments, making them more adaptive for various use cases. Arguments are passed dynamically when invoking the command.
steps
Modify the Command File
Add a frontmatter section at the top of your command file to define metadata and expected arguments:markdown--- description: "Create a UI component" argument_hint: "name|summary" ---Process Arguments
Use Markdown and special syntax to extract and use arguments in your instructions. For instance:markdown[name]: Extract the first argument as the name of the component. [summary]: Extract the second argument as the component's purpose. Create a UI component called $[name] with the following details: - Purpose: $[summary]Restart Claude Code
Exit and restart Claude to load the updated command configuration.Invoke with Arguments
Use slash commands followed by arguments separated by a pipe (|), like so:/UI-component Icon|An icon component with a circular background
Debugging and Verifying Custom Commands
Custom command issues may arise due to syntax errors, misunderstood instructions, or incorrect argument usage. Use these strategies to debug and refine:
Advanced Tips for Effective Custom Commands
Here are some best practices to optimize your custom commands:
Takeaways on Custom Commands
Custom slash commands in Claude Code are an invaluable tool for automating repetitive tasks and enhancing productivity. By incorporating arguments and descriptive metadata into your commands, you can build reusable workflow automations tailored to your project requirements. Regularly debugging and exploring new possibilities will help you leverage Claude Code to its fullest potential.
FAQ
How do I access the .claw folder if it is missing?
If the .claw folder is missing, create it manually at the root level of your project directory.
Why does Claude Code require a restart for new commands?
Claude Code caches command configurations at startup. Restarting it ensures the latest command definitions are loaded.
Can I use external libraries in custom commands?
Yes, you can direct Claude Code to reference libraries within your project as part of the command's instructions.
Official reference: Claude Code documentation.