How to Create Custom Slash Commands and Skills in Claude Code

# Create project-level commands directory
mkdir -p .claude/commands

# Create a simple command
touch .claude/commands/review.md

Review this code for:
- Security vulnerabilities (injection, XSS, CSRF)
- Performance issues (N+1 queries, memory leaks)
- Code style violations
- Missing error handling
- Potential edge cases

Provide specific line numbers and suggested fixes.

Translate the following code comments and strings to $ARGUMENTS.
Keep all code logic unchanged. Only translate human-readable text.
Preserve formatting and indentation.

Generate comprehensive documentation for $ARGUMENTS in this codebase.

Include:
1. Overview and purpose
2. Function signatures with parameter descriptions
3. Return values and types
4. Usage examples
5. Common pitfalls or gotchas

Format as JSDoc/TSDoc comments ready to paste into the source.

# Commit to version control
git add .claude/commands/
git commit -m "Add team slash commands"

# Create global commands directory
mkdir -p ~/.claude/commands

# New Feature Implementation Workflow

You are implementing a new feature: $ARGUMENTS

Follow these steps in order:

## Step 1: Planning
- Identify affected files and components
- List required changes
- Note potential breaking changes
- Ask clarifying questions if requirements are ambiguous

## Step 2: Implementation
- Create necessary files with proper structure
- Write clean, documented code
- Follow existing project patterns
- Include TypeScript types where applicable

## Step 3: Testing
- Write unit tests for new functionality
- Cover edge cases and error conditions
- Verify tests pass: `npm test`

## Step 4: Documentation
- Update README if needed
- Add inline code comments
- Update API documentation

## Step 5: Review Checklist
Confirm before completing:
- [ ] All tests pass
- [ ] No TypeScript errors
- [ ] Code follows project style guide
- [ ] No sensitive data exposed
- [ ] Changes are backwards compatible

Present a summary of all changes made.

# Pull Request Review

Perform a thorough code review with the following focus areas:

## Security Analysis
- Check for injection vulnerabilities
- Verify authentication/authorization
- Look for exposed secrets or credentials
- Review input validation

## Code Quality
- Assess readability and maintainability
- Check for code duplication
- Verify error handling
- Review naming conventions

## Performance
- Identify potential bottlenecks
- Check for unnecessary computations
- Review database query efficiency
- Look for memory leaks

## Testing
- Verify test coverage
- Check test quality
- Identify missing edge cases

## Output Format

Provide findings in this structure:

### Critical Issues (Must Fix)
- [Issue description with file:line reference]

### Suggestions (Should Consider)
- [Improvement suggestion]

### Positive Observations
- [Good practices noticed]

### Summary
[Overall assessment and recommendation: Approve / Request Changes]

Generate comprehensive tests for $ARGUMENTS.

## Requirements
- Use the project's existing test framework
- Follow existing test file naming conventions
- Include setup and teardown where needed

## Test Categories
1. **Happy Path**: Normal expected usage
2. **Edge Cases**: Boundary conditions, empty inputs, limits
3. **Error Cases**: Invalid inputs, failures, exceptions
4. **Integration**: Interactions with dependencies (mock appropriately)

## Structure Each Test
```javascript
describe('[Component/Function Name]', () => {
  describe('[Method/Scenario]', () => {
    it('should [expected behavior] when [condition]', () => {
      // Arrange
      // Act
      // Assert
    });
  });
});

### Commit Helper Skill

`.claude/commands/commit.md`:

```markdown
# Smart Commit Assistant

Analyze the current staged changes and help create a proper commit.

## Steps

1. Run `git diff --staged` to see changes
2. Analyze the nature of changes (feature, fix, refactor, docs, etc.)
3. Identify the scope/component affected
4. Generate a commit message following Conventional Commits format

## Commit Message Format

### Types
- `feat`: New feature
- `fix`: Bug fix
- `docs`: Documentation only
- `style`: Formatting, no code change
- `refactor`: Code change that neither fixes nor adds
- `perf`: Performance improvement
- `test`: Adding tests
- `chore`: Maintenance tasks

## Output

Provide:
1. Suggested commit message
2. Brief explanation of changes
3. Any concerns or suggestions before committing

.claude/commands/
├── lint.md          # Run linting
├── test.md          # Run tests
├── typecheck.md     # Check TypeScript
├── validate.md      # Combines lint + test + typecheck

# Required Context
Before running this command, ensure:
- You have a file open or selected
- The file is a React component
- Tests exist in __tests__ directory

# Command
[Your command content]

<!-- Version: 1.2.0 | Updated: 2025-01-15 | Author: @teammate -->
[Command content]