Dominar Claude Code Parte 4: Comandos Personalizados

.claude/commands/
├── review.md          → /review
├── test.md            → /test
└── git/
    ├── commit.md      → /git:commit
    └── pr.md          → /git:pr

Mkdir -p .claude/commands

Cat > .claude/commands/review.md << 'EOF'
Review the staged changes for:
- Security vulnerabilities
- Performance issues
- Missing error handling
- Type safety problems

Format as: Critical (must fix) → Warnings → Suggestions
EOF

/review

# .claude/commands/explain.md

Explain how $ARGUMENTS works in this codebase.
Show me the key files, the data flow, and any gotchas.

/explain the authentication system
/explain the payment processing flow
/explain how websockets connect to the backend

# .claude/commands/fix-issue.md

Fix GitHub issue #$1.

Priority: $2
Additional context: $3

1. Read the issue description
2. Find the relevant code
3. Implement the fix
4. Write tests
5. Create a commit referencing the issue

/fix-issue 1234 high "user reported login failures on mobile"

---
Description: Review code for security issues
Argument-hint: [file-or-directory]
---
Review $ARGUMENTS for security vulnerabilities including:
- SQL injection
- XSS
- Authentication bypasses

---
Description: Smart git commit
Allowed-tools: Bash(git add:*), Bash(git status:*), Bash(git commit:*), Bash(git diff:*)
Argument-hint: [optional message]
---
Analyze the staged changes and create a commit.

If a message is provided, use it: $ARGUMENTS
Otherwise, generate a descriptive message following conventional commits.

Requirements:
- Use format: type(scope): description
- Keep summary under 72 characters
- Body explains WHY, not WHAT

---
Description: Deep architecture analysis
Model: claude-sonnet-4-5-20250929
---
Analyze the architecture of $ARGUMENTS.

Consider:
- Design patterns in use
- Coupling between modules
- Scalability implications
- Technical debt indicators

---
Description: Quick code explanation
Model: claude-3-5-haiku-20241022
---
Briefly explain what $ARGUMENTS does in 2-3 sentences.

---
Description: Format and commit
Hooks:
  PostToolUse:
    - matcher: "Edit|Write"
      hooks:
        - type: command
          command: "npx prettier --write $FILE_PATH"
---
Make the requested changes to $ARGUMENTS.
After each edit, files will be auto-formatted.

.claude/commands/
├── git/
│   ├── commit.md      → /git:commit
│   ├── pr.md          → /git:pr
│   ├── branch.md      → /git:branch
│   └── squash.md      → /git:squash
├── test/
│   ├── unit.md        → /test:unit
│   ├── e2e.md         → /test:e2e
│   └── coverage.md    → /test:coverage
└── docs/
    ├── readme.md      → /docs:readme
    └── api.md         → /docs:api

Tu-proyecto/.claude/commands/

~/.claude/commands/

---
Description: Comprehensive code review
Argument-hint: [file or leave empty for staged changes]
---
Review $ARGUMENTS (or staged changes if not specified).

## Check For
- Security: OWASP Top 10, auth issues, data exposure
- Performance: N+1 queries, memory leaks, blocking calls
- Correctness: Edge cases, error handling, type safety
- Maintainability: Complexity, naming, duplication

## Output Format
### 🚨 Critical (blocks merge)
### ⚠️ Warnings (should fix)
### 💡 Suggestions (nice to have)

---
Description: Analyze changes and create commit
Allowed-tools: Bash(git *)
---
1. Run `git diff --staged` to see changes
2. Analyze what was changed and why
3. Create a commit message:
   - Format: type(scope): description
   - Types: feat, fix, refactor, docs, test, chore
   - Under 72 chars
   - Body explains WHY if non-obvious
4. Execute the commit

---
Description: Generate comprehensive tests
Argument-hint: [file-to-test]
---
Generate tests for $ARGUMENTS.

## Include
- Happy path (expected usage)
- Edge cases (empty, null, boundaries)
- Error scenarios (invalid input, failures)
- Integration points (mocks for external deps)

## Requirements
- Match existing test patterns in this project
- Use the testing framework already in use
- Clear test names: "should [expected] when [condition]"

---
Description: Debug an issue systematically
Argument-hint: [description of the problem]
---
Debug: $ARGUMENTS

## Process
1. Clarify: What's expected vs actual behavior?
2. Reproduce: What triggers the issue?
3. Isolate: Which component/function is responsible?
4. Trace: Follow the data flow
5. Fix: Implement and verify the solution

## Output
- Root cause
- Affected code paths
- Fix with explanation
- Prevention strategy

---
Description: Security vulnerability scan
Argument-hint: [file, directory, or leave empty for full scan]
Allowed-tools: Read, Grep, Glob
---
Audit $ARGUMENTS for security vulnerabilities.

## Check For
- Injection: SQL, command, XSS, template
- Auth: Weak passwords, session issues, CSRF
- Data: Exposure, logging secrets, insecure storage
- Config: Debug mode, default creds, missing headers
- Dependencies: Known CVEs

## Output
Severity-ranked findings with:
- Location (file:line)
- Risk explanation
- Remediation steps

---
Description: Refactor while maintaining behavior
Argument-hint: [file-or-function]
---
Refactor $ARGUMENTS.

## Goals
- Reduce complexity
- Improve readability
- Apply DRY
- Better naming
- Smaller functions (single responsibility)

## Constraints
- NO behavior changes
- Keep public API intact
- Existing tests must pass

Explain each change.

---
Description: Explain code for someone new
Argument-hint: [file, function, or concept]
Model: claude-3-5-haiku-20241022
---
Explain $ARGUMENTS.

## Cover
- What it does (purpose)
- How it works (step by step)
- Why it's designed this way
- Dependencies and side effects
- Potential gotchas

Assume reader knows the language but not this codebase.

---
Description: Analyze and optimize performance
Argument-hint: [file-or-function]
---
Analyze $ARGUMENTS for performance.

## Examine
- Time complexity (Big O)
- Space complexity
- I/O operations
- Database queries (N+1?)
- Unnecessary allocations

## Output
- Current bottlenecks
- Specific optimizations
- Expected improvement
- Trade-offs involved

---
Description: Pre-deployment verification
Allowed-tools: Bash(npm *), Bash(git *)
---
Pre-deploy checklist:

- [ ] Tests pass (`npm test`)
- [ ] Lint clean (`npm run lint`)
- [ ] Build succeeds (`npm run build`)
- [ ] No console.log/debugger statements
- [ ] Env vars documented
- [ ] No hardcoded secrets
- [ ] Error handling complete
- [ ] Migrations ready

Run checks and report: Ready 🚀 or Blocked 🛑 with issues.

---
Description: Rebuild context after /clear
Allowed-tools: Bash(git *)
---
I just cleared context. Help me catch up.

1. Run `git diff main...HEAD --stat` to see what's changed
2. Summarize the changes on this branch
3. Read the key modified files
4. Tell me where we likely are in this feature

$ARGUMENTS (if any additional context)

---
Description: Generate a meme using Imgflip API
Argument-hint: "top text" "bottom text" [template]
---
Generate a meme using the Imgflip API.

## API Details
- Endpoint: https://api.imgflip.com/caption_image
- Username: $IMGFLIP_USER
- Password: $IMGFLIP_PASS

## Popular Templates
- drake (181913649) - Drake Hotline Bling
- distracted (112126428) - Distracted Boyfriend
- changemymind (129242436) - Change My Mind
- twobuttons (87743020) - Two Buttons
- pikachu (155067746) - Surprised Pikachu

## Instructions
1. Parse the arguments: $ARGUMENTS
2. Use curl to POST to the API with template_id, text0, text1
3. Return the generated meme URL
4. Download to ./public/assets/blog/ if requested

---
Description: Generate an image using Google Imagen
Argument-hint: "prompt" [output-path]
Allowed-tools: Bash(node *)
---
Generate an image using Google Imagen.

## Instructions
1. Parse the prompt from: $ARGUMENTS
2. Run: node ~/.claude/scripts/generate-image.js "prompt" "./output.png"
3. Report the saved file path

#!/usr/bin/env node
Const https = require('https');
Const fs = require('fs');
Const path = require('path');

Const API_KEY = process.env.GOOGLE_AI_API_KEY || 'your-api-key-here';
// Note: Check https://ai.google.dev/gemini-api/docs/imagen for the latest model ID
Const MODEL = 'imagen-4.0-generate-001';

Async function generateImage(prompt, outputPath) {
  const requestBody = {
    instances: [{ prompt }],
    parameters: {
      sampleCount: 1,
      aspectRatio: '16:9',
      personGeneration: 'dont_allow'
    }
  };

  const body = JSON.stringify(requestBody);
  const options = {
    hostname: 'generativelanguage.googleapis.com',
    port: 443,
    path: `/v1beta/models/${MODEL}:predict?key=${API_KEY}`,
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Content-Length': Buffer.byteLength(body)
    }
  };

  return new Promise((resolve, reject) => {
    const req = https.request(options, (res) => {
      let data = '';
      res.on('data', chunk => data += chunk);
      res.on('end', () => {
        const response = JSON.parse(data);
        if (response.error) {
          reject(new Error(response.error.message));
          return;
        }
        if (response.predictions?.[0]) {
          const imageData = response.predictions[0].bytesBase64Encoded;
          const dir = path.dirname(outputPath);
          if (dir && !fs.existsSync(dir)) {
            fs.mkdirSync(dir, { recursive: true });
          }
          fs.writeFileSync(outputPath, Buffer.from(imageData, 'base64'));
          resolve(outputPath);
        }
      });
    });
    req.on('error', reject);
    req.write(body);
    req.end();
  });
}

Const [prompt, outputPath = `./generated-${Date.now()}.png`] = process.argv.slice(2);
GenerateImage(prompt, outputPath).then(p => console.log(`Saved: ${p}`));

/imagen "a minimalist logo for a coding blog, orange and white"
/imagen "abstract geometric pattern" ./public/hero.png
/imagen "futuristic terminal interface, dark theme, neon accents"