Guide for creating custom slash commands for Claude Code. Use when adding new commands, defining command arguments, or implementing command workflows.
Creates custom slash commands for Claude Code with arguments and workflows.
npx claudepluginhub vinnie357/claude-skillsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
Guide for creating custom slash commands that extend Claude Code functionality.
Activate this skill when:
Commands are custom slash commands (like /commit, /review) that users can invoke to trigger specific workflows or expand prompts. They are markdown files that can contain:
Commands are defined in markdown files located in:
<plugin-root>/commands/.claude/commands/my-command.mdmy-command.md → /my-command# /my-command
This is the prompt that will be expanded when the user types /my-command.
The entire content of this file will replace the slash command in the conversation.
<!--
description: Brief description of what this command does
-->
# /my-command
Command prompt goes here...
Commands can accept arguments that users provide when invoking the command.
# /greet
Hello, {{arg}}! Welcome to the project.
Usage: /greet Alice → "Hello, Alice! Welcome to the project."
# /create-file
Create a new file at {{arg1}} with the following content:
{{arg2}}
Usage: /create-file src/main.rs "fn main() {}"
# /deploy
Deploy {{environment}} environment to {{region}}.
Configuration:
- Environment: {{environment}}
- Region: {{region}}
- Branch: {{branch}}
Usage: /deploy --environment=production --region=us-east-1 --branch=main
# /analyze
Analyze the {{language}} codebase.
{{#if verbose}}
Provide detailed analysis including:
- Code complexity metrics
- Dependency analysis
- Security vulnerabilities
{{else}}
Provide a summary analysis.
{{/if}}
Reference other files or command outputs:
# /context
Here is the current project structure:
{{file:PROJECT_STRUCTURE.md}}
And the current git status:
{{shell:git status}}
# /full-review
I'll perform a comprehensive code review:
1. First, let me check the git diff:
{{shell:git diff}}
2. Now analyzing code quality...
3. Checking for security issues...
4. Final recommendations:
/analyze-security not /sec/create-component not /compAlways include what the command will do:
# /commit
I'll analyze the current git changes and create a conventional commit message.
Current changes:
{{shell:git diff --staged}}
Based on these changes, here's my suggested commit message:
# /deploy
{{#if staging}}
Deploying to staging environment (safe for testing)
{{else if production}}
⚠️ WARNING: Deploying to PRODUCTION
Are you sure you want to continue? This will affect live users.
{{else}}
Error: Unknown environment. Please specify --staging or --production
{{/if}}
<!--
description: Deploy application to specified environment
usage: /deploy [--environment=<env>] [--region=<region>]
arguments:
- environment: Target environment (staging, production)
- region: AWS region (us-east-1, eu-west-1, etc.)
-->
# /deploy
In plugin.json:
{
"commands": [
"./commands/deploy.md",
"./commands/analyze.md",
"./commands/review.md"
]
}
{
"commands": ["./commands"]
}
This loads all .md files in the commands/ directory.
Organize related commands in subdirectories:
commands/
├── git/
│ ├── commit.md
│ ├── review.md
│ └── cleanup.md
├── deploy/
│ ├── staging.md
│ └── production.md
# /gcm
I'll analyze the staged changes and generate a conventional commit message.
{{shell:git diff --staged}}
Based on these changes, here's my commit message:
# /review-pr
I'll review the pull request changes.
PR Number: {{pr_number}}
{{shell:gh pr diff {{pr_number}}}}
Review checklist:
- [ ] Code quality and style
- [ ] Security considerations
- [ ] Test coverage
- [ ] Documentation updates
# /new-component
Creating a new {{component_type}} component named {{name}}.
I'll create:
1. Component file at src/components/{{name}}.tsx
2. Test file at src/components/{{name}}.test.tsx
3. Storybook file at src/components/{{name}}.stories.tsx
If a command doesn't work:
<!--
description: Analyze {{target}} for {{criteria}}
-->
# /analyze-{{target}}
I'll analyze the {{target}} codebase for {{criteria}}.
{{shell:find {{target}} -type f -name "*.{{extension}}"}}
Analysis results:
<!--
description: Execute {{workflow}} workflow
-->
# /{{workflow}}
Starting {{workflow}} workflow...
Step 1: {{step1_description}}
{{step1_action}}
Step 2: {{step2_description}}
{{step2_action}}
Workflow complete!
Commands can reference skills:
# /elixir-review
I'll review this Elixir code using my Phoenix and OTP knowledge.
Please provide the code to review, and I'll check for:
- Phoenix best practices
- OTP design patterns
- Elixir anti-patterns
- Performance considerations
Never hardcode:
# /deploy
{{#unless environment}}
Error: --environment is required
{{/unless}}
{{#if (validate_environment environment)}}
Proceeding with deployment...
{{else}}
Error: Invalid environment. Must be staging or production.
{{/if}}
Be cautious with shell command execution:
# /safe-deploy
<!-- Only allow whitelisted commands -->
{{shell:./scripts/deploy.sh {{environment}}}}
For more information about Claude Code commands:
This skill should be used when the user asks about libraries, frameworks, API references, or needs code examples. Activates for setup questions, code generation involving libraries, or mentions of specific frameworks like React, Vue, Next.js, Prisma, Supabase, etc.
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.