Slash Commands for Web Developers: The Prompts You'll Use Every Day

Slash commands are pre-defined prompts stored as markdown files. When you type /command-name, Claude Code loads the file contents and executes them as if you'd typed the full prompt.

How Commands Work

┌─────────────────────┐
│ You type: /commit   │
└──────────┬──────────┘
           │
           ▼
┌─────────────────────────────────┐
│ Claude Code loads:              │
│ .claude/commands/
commit.md
     │
└────────────────┬────────────────┘
                 │
                 ▼
┌─────────────────────────────────┐
│ File contents become prompt:    │
│                                 │
│ "Review staged changes and      │
│ create a descriptive commit     │
│ message following conventional  │
│ commits format..."              │
└────────────────┬────────────────┘
                 │
                 ▼
┌─────────────────────────────────┐
│ Claude executes the command     │
└─────────────────────────────────┘

Command Locations

Project commands appear as /project:command-name, while global commands appear as /user:command-name.

Claude Code includes several built-in commands:

Most Useful Built-ins for Daily Work

/compact - When your context is getting full:

> /compact

Compacting conversation...
Previous: 45,000 tokens
After: 12,000 tokens
Key context preserved.

/context - Check how much context you've used:

> /context

Context Usage:
████████████░░░░░░░░ 58%

Breakdown:
- System prompt: 12%
- 
CLAUDE.md
: 8%
- Conversation: 35%
- File contents: 3%

/rewind - When you need to undo:

> /rewind

Available checkpoints:
1. 2 minutes ago - "Created Header component"
2. 8 minutes ago - "Started session"

Select checkpoint (1-2): 1

Rewinding code and conversation to checkpoint 1...

Basic Command Structure

Create a markdown file in .claude/commands/:

<!-- .claude/commands/
review.md
 -->
---
description: Review code for best practices
---

Review the current changes for:
1. Code quality and readability
2. Potential bugs or edge cases
3. Performance considerations
4. Security vulnerabilities

Provide specific, actionable feedback.

Frontmatter Options

---
description: Short description shown in command list
arguments:
  - name: file
    description: File to process
    required: true
  - name: format
    description: Output format
    required: false
    default: markdown
---

Using Arguments

Arguments are accessed with {{argument_name}} or $ARGUMENTS:

<!-- .claude/commands/
analyze.md
 -->
---
description: Analyze a specific file
arguments:
  - name: file
    description: Path to file
---

Analyze {{file}} for:
- Code structure and organization
- Potential improvements
- Documentation gaps

Usage:

> /project:analyze src/components/Header.tsx

Inline Bash in Commands

Pre-compute information before Claude processes:

<!-- .claude/commands/
commit-push-pr.md
 -->
---
description: Commit, push, and create PR
---

Current git status:

!git status --short

Current branch:

!git branch --show-current

Recent commits:

!git log --oneline -5

Based on the staged changes above:
1. Create a descriptive commit message
2. Commit the changes
3. Push to origin
4. Create a pull request with summary

The ! prefix executes bash and injects output into the prompt.

Variable Interpolation

# Using named arguments
{{file}}              # Single argument
{{file | default}}    # With default value

# Using positional arguments  
$ARGUMENTS            # All arguments as string

Conditional Content

{{#if verbose}}
Provide detailed explanations for each finding.
{{/if}}

{{#unless quick}}
Include performance analysis.
{{/unless}}

Multi-line Bash

!cd src && find . -name "*.tsx" | head -20

1. Component Generator

<!-- .claude/commands/
component.md
 -->
---
description: Create a new React component
arguments:
  - name: name
    description: Component name (PascalCase)
  - name: type
    description: Type (client/server)
    default: server
---

Create a new {{type}} component called {{name}}:

1. Create file at `src/components/{{name}}.tsx`
2. Use TypeScript with proper prop types
3. Follow project conventions from 
CLAUDE.md

4. Include JSDoc comments
5. Export as named export

{{#if type === 'client'}}
Add 'use client' directive at top.
{{/if}}

Example structure:

{{#if type === 'client'}}'use client'

{{/if}}interface {{name}}Props {

// Define props

}

export function {{name}}({ }: {{name}}Props) {

return (


    <div>


        {/ _Component content_ /}


    </div>


)

}

2. Git Workflow

<!-- .claude/commands/
commit-push-pr.md
 -->
---
description: Full git workflow - commit, push, PR
---

Current state:

!git status --short

!git diff --stat

Branch:

!git branch --show-current

Steps:
1. Review the changes above
2. Create commit message following conventional commits:
   - feat: new feature
   - fix: bug fix
   - docs: documentation
   - style: formatting
   - refactor: code restructuring
   - test: adding tests
   - chore: maintenance
3. Commit with descriptive message
4. Push to origin
5. Create PR with:
   - Clear title
   - Summary of changes
   - Any breaking changes noted

3. SEO Audit

<!-- .claude/commands/
seo-audit.md
 -->
---
description: Audit page for SEO issues
arguments:
  - name: page
    description: Path to page file
---

Audit {{page}} for SEO:

1. Meta Tags

   • Title tag present and under 60 chars?
   • Meta description present and under 160 chars?
   • Canonical URL set?

2. Heading Structure

   • Single H1 tag?
   • Logical heading hierarchy (H1 → H2 → H3)?
   • Keywords in headings?

3. Images

   • All images have alt text?
   • Alt text is descriptive?
   • Images use modern formats (WebP/AVIF)?

4. Schema Markup

   • Appropriate schema type present?
   • Required properties filled?

5. Performance

   • No render-blocking resources?
   • Images lazy loaded?

Provide specific fixes for any issues found.

### 4. Test Generator


```markdown
<!-- .claude/commands/
test.md
 -->
---
description: Generate tests for a file
arguments:
  - name: file
    description: File to test
---

Generate comprehensive tests for {{file}}:

File contents:

!cat {{file}}

Create tests that:
1. Cover all exported functions/components
2. Test happy path scenarios
3. Test edge cases and error conditions
4. Use descriptive test names
5. Follow AAA pattern (Arrange, Act, Assert)

Place tests in `__tests__/` directory next to source.
Use Vitest syntax.

5. API Route Generator

<!-- .claude/commands/
api-route.md
 -->
---
description: Create a new API route
arguments:
  - name: resource
    description: Resource name (plural, lowercase)
  - name: methods
    description: HTTP methods (GET,POST,PUT,DELETE)
    default: GET,POST
---

Create API route for {{resource}}:

1. Create `src/app/api/{{resource}}/route.ts`
2. Implement these methods: {{methods}}
3. Include:
   - Input validation with Zod
   - Proper error handling
   - Correct status codes
   - TypeScript types

Template:

import { NextResponse } from 'next/server'

import { z } from 'zod'

const schema = z.object({

// Define schema

})

export async function GET(request: Request) {

try {


    // Implementation


    return NextResponse.json({ data })


} catch (error) {


    return NextResponse.json(


        { error: 'Failed to fetch' },


        { status: 500 }


    )


}

}

6. Documentation Generator

<!-- .claude/commands/
document.md
 -->
---
description: Generate documentation for a file or component
arguments:
  - name: target
    description: File or directory to document
---

Generate documentation for {{target}}:

!cat {{target}} 2>/dev/null || find {{target}} -name ".ts" -o -name ".tsx" | head -10

Create documentation that includes:
1. **Overview** - What this code does
2. **Usage** - How to use it with examples
3. **API Reference** - Props, parameters, return values
4. **Examples** - Real-world usage scenarios

Format as a 
README.md
 in the same directory.

Recommended Structure

.claude/commands/
├── git/
│   ├── 
commit.md

│   ├── 
pr.md

│   └── 
review.md

├── generate/
│   ├── 
component.md

│   ├── 
api-route.md

│   └── 
test.md

├── audit/
│   ├── 
seo.md

│   ├── 
accessibility.md

│   └── 
performance.md

└── workflow/
    ├── 
start-feature.md

    ├── 
handoff.md

    └── 
deploy.md

Commands in subdirectories appear as /project:git:commit.

Naming Conventions

Pattern 1: Chained Commands

Create a workflow that calls other commands:

<!-- .claude/commands/workflow/
ship.md
 -->
---
description: Full ship workflow
---

Execute shipping workflow:

1. First, run /project:audit:lint
2. Then, run /project:test:all
3. Finally, run /project:git:commit-push-pr

Pause between steps for approval.

Pattern 2: Interactive Commands

<!-- .claude/commands/
refactor.md
 -->
---
description: Interactive refactoring session
arguments:
  - name: target
    description: File or function to refactor
---

Starting interactive refactor for {{target}}.

First, analyze the code and identify:
1. What could be improved?
2. What are the risks?
3. What's the recommended approach?

Present options and wait for my selection before making changes.

Pattern 3: Template Commands

<!-- .claude/commands/
from-template.md
 -->
---
description: Create from template
arguments:
  - name: template
    description: Template name
  - name: name
    description: New item name
---

Template content:

!cat .claude/templates/{{template}}.md

Create {{name}} based on the template above.
Replace all placeholder values.

Pattern 4: Context-Aware Commands

<!-- .claude/commands/
fix.md
 -->
---
description: Fix the current issue
---

Current errors:

!pnpm typecheck 2>&1 | tail -20

!pnpm lint 2>&1 | tail -20

Fix all errors shown above.
Start with type errors, then lint errors.
Verify each fix before moving to next.

Command Not Found

> /project:mycommand
Error: Command not found

Check:

1. File exists at .claude/commands/mycommand.md
2. File has .md extension
3. Frontmatter is valid YAML
4. No syntax errors in file

Arguments Not Working

> /project:test src/lib/utils.ts
Argument 'file' is undefined

Check:

1. Argument defined in frontmatter
2. Using correct syntax: {{file}} not {file}
3. Argument names match exactly

Bash Not Executing

# This won't work:

git status

# This will work:

!git status

The ! prefix is required for execution.

Version Control

Commit .claude/commands/ to your repository:

# .gitignore
# Don't ignore commands - share them!
# .claude/commands/

# But do ignore personal overrides
.claude/commands/personal/

Documentation

Create a commands README:

<!-- .claude/commands/
README.md
 -->
# Project Commands

• /project:commit - Create conventional commit
• /project:pr - Create pull request

• /project:component <name> - New React component
• /project:api-route <resource> - New API route

• /project:test <file> - Generate tests
• /project:seo-audit <page> - SEO analysis

### Team Standards


Establish conventions:

1. **Naming** - Use consistent verb/noun patterns
2. **Documentation** - Every command has description
3. **Testing** - Test commands before committing
4. **Review** - Include commands in code review

Official Documentation

• Claude Code Slash Commands
• Command Bash Execution

Community Resources

• awesome-claude-code Commands
• Claude Code Tips - Commands Section

Examples

• Boris Cherny's commit-push-pr - Used dozens of times daily by Claude Code team