Claude Code: todo lo necesario para ser peligroso/a

Guía avanzada de Claude Code para desarrolladores profesionales: patrones, estrategias y ejemplos prácticos para transformar tu workflow frontend con IA de forma real, aplicable y eficiente.

No exagero al decir que Claude Code ha cambiado la forma en la que utilizo asistencia AI en mi trabajo.

No es Copilot. No es Cursor. No tiene GUI. Es un agente que trabaja desde tu terminal con acceso completo a tu sistema.

La diferencia entre usar Claude Code como un "ChatGPT con acceso a archivos" y aprovecharlo como el multiplicador de productividad que realmente es, se reduce a IMHO, saber dirigirlo correctamente.

Después de varias semanas de uso intensivo en proyectos “reales”, he descubierto que la curva de aprendizaje es alta - pero la recompensa es proporcional.

Este artículo recopila todo lo que desearía haber sabido desde el primer día.

Beneficios

El terminal: tu terreno conocido

Claude Code vive donde ya trabajas. No hay nueva interfaz que aprender, no hay extensiones que instalar, no hay workflows que cambiar. Terminal + tu editor favorito. Punto.

Da igual si eres de Vim, VSCode, o IntelliJ - el terminal es el denominador común de todos los desarrolladores. Claude funciona con tu setup actual, no contra él.

Sin intermediarios

Anthropic fabrica tanto el motor como el coche. Crean Claude (el modelo más usado para programación) y Claude Code (la mejor herramienta para aprovecharlo).

Mientras Cursor, Copilot y otros construyen sobre APIs ajenas —añadiendo capas, latencia y márgenes— tú accedes directo al origen. Sin middlemen. Sin markup. Máximo valor por tu dinero.

Asistencia, no dependencia

Diferencia sutil pero crucial: Claude Code no vive pegado a tu editor sugiriendo cada línea. Te da espacio para pensar.

No es autocomplete agresivo que te convierte en espectador de tu propio código. Es un colaborador que aparece cuando lo necesitas y desaparece cuando no. Mantienes el control de la arquitectura, las decisiones críticas, el flujo de trabajo.

Es complicado de explicar hasta que lo pruebas, pero hay una diferencia abismal entre sentir que programas con una herramienta versus sentir que la herramienta programa por ti.

Configuración inicial

CLAUDE.md: El cerebro compartido con tu agente

l84rR8zpC47W6kfz9Bdqw1gBHbSH8FJFzTk8bL5S.gif

Claude Code busca automáticamente archivos CLAUDE.md al iniciar. Es tu oportunidad de programar su comportamiento una vez en lugar de repetir las mismas instrucciones en cada sesión.

Un ejemplo super simplificado (en el “mundo real” merece mucho más detalle):

# Project: Vue 3 + TypeScript E-commerce

## Commands
- pnpm dev: Start Vite dev server (port 5173)
- pnpm test:unit: Run Vitest tests
- pnpm type-check: Run vue-tsc

## Code Standards
- ALWAYS use <script setup lang="ts">
- Pinia for global state, composables for logic
- Props: withDefaults() for complex defaults
- NEVER use @ts-ignore (use @ts-expect-error)

## Project Structure
- /composables: use* prefix (e.g., useAuth.ts)
- /stores: *Store suffix (e.g., cartStore.ts)
- /api: Typed API client modules

## Common Patterns
Always handle errors in composables:
const { data, error } = await useAsyncData('key', () => $api.get())
if (error.value) return handleError(error.value)

El snippet de arriba es solo una reducción para ilustrar la idea. En un proyecto real en Cloudecode, lo importante es dedicar tiempo a documentar de verdad: media hora, tres cuartos o lo que necesites. Parece una pérdida de tiempo, pero en realidad lo estás ganando.

Ese rato extra debería servirte para:

  • Pensar en la arquitectura que quieres y plasmarla.
  • Detallar convenciones y estándares de código.
  • Incluir referencias externas, enlaces útiles, snippets reales que alguien pueda copiar y ejecutar.
  • Señalar antipatrones que quieres evitar.
  • Definir composición y stack tecnológico de manera explícita.

De esta forma, tu CLAUDE.md no se queda en una nota rápida, sino que se convierte en un documento vivo que cualquiera en tu equipo (o tu yo del futuro) puede consultar para entender el porqué de cada decisión.

Puedes crear el archivo (CLAUDE.md) de forma manual o a través del comando /init. Claude examinará tu proyecto y generará un resumen inicial con todo el contexto. También puedes tener múltiples CLAUDE.md: uno en la raíz del proyecto, otros en subdirectorios, todos serán tenidos en cuenta y procesados.

Incluso puedes crear uno en tu directorio raíz (~/CLAUDE.md) con tus preferencias globales y compartir las instrucciones en todas tus sesiones. Claude los combina inteligentemente. Usa CLAUDE.local.md para configuración que no va a git (tokens, rutas locales).

Además, puedes presionar # durante una sesión para añadir reglas automáticamente.

Gestión de permisos

1CIRStN4gZmUmodCflb5sSrYuFBZQvfSzpS1IGfK.gif

Una queja recurrente sobre Claude Code es pide permiso para todo (sobre todo para operaciones sensibles). Siendo una herramienta que tiene acceso tu línea de comando, ¿acaso podría ser de forma diferente?.

Lo que pocos conocen que puedes configurar qué permisos otorgar a Claude Code.

Puedes hacerlo gradualmente, mientras trabajas, o modificar la configuración para que Claude Code no te vuelva a preguntar nunca más.

Algunos ejemplos:

  • Guarda un archivo settings.json que puedes ser procesado por tu control de versiones y compartido con tu equipo.
// .claude/settings.json (va a git - config del equipo)
{
  "allowedTools": [
    "Edit", // <- All edit operations
    "CreateFile",
    "Bash(pnpm test:*)", // <- Specific shell commands
    "Bash(git diff*)",
    "Bash(git commit*)"
    "WebFetch(domain:github*)" // Specific domains
  ]
  • De igual forma, puedes configurar globalmente los permisos de Claude Code si guardas el archivo en tu home.
// ~/.claude.json (global - tu máquina)
{
  "neverAllow": ["Bash(rm -rf*)", "Bash(*sudo*)"],
  "domains": {
    "allowlist": ["vuejs.org", "vitejs.dev"]
  }
}
  • Durante na sesión de trabajo puedes elegir "Always allow" a la hora de validar un cambio (luego hablaremos de esto).
  • Puedes usar el comando /permissions para ajustar todos los permisos (añadir y quitar) sobre la marcha.
  • Para automatización o experimentos, claude --dangerously-skip-permissions desactiva todo (úsalo en contenedores Docker ya que no tienen conectividad externa).

Invoca a Claude desde GitHub

Esto te va a interesar: Claude ahora puede integrarse directamente con tus repositorios de GitHub mediante el comando /install-github-app.

wAZ57igGdtlrmqEMqBDCqzB3kX2tFBZ13W3vLKNl.jpg

Una vez completada la autenticación (gh auth login), la instalación de la App y la adición del workflow en el repositorio, tienes acceso a dos flujos principales:

  1. Revisión conversacional: etiqueta a @claude en cualquier pull request o issue para obtener respuestas, explicaciones o sugerencias de mejora directamente en el hilo. Claude no solo contesta: razona, explica y propone cambios estructurados.
  2. Revisión automática en CI/CD: configura un workflow para que Claude revise automáticamente cada PR como parte de tu pipeline. Ideal para detectar code smells, incoherencias o violaciones de estilo antes de que pase a revisión humana.

MGdK6OB3YqvUFmDFCRvKpgz7j779oL4uvXi6ghia.jpg

Desde entonces, Claude se ha convertido en un primer filtro muy eficaz. En más de una ocasión me ha ahorrado tener que revisar una PR entera, señalando solo los puntos críticos.

Es como tener un revisor técnico incansable embebido en tu flujo de desarrollo.

Patrones que aumentan la adherencia

Tu entorno bash heredado

Claude Code hereda tu terminal completo: aliases, funciones, scripts, etc.

Puede ejecutar el flag --help de cualquier herramienta para entender cómo usarla, pero más allá de los comandos estándar, es buena práctica documentar tus herramientas personalizadas en CLAUDE.md, como vimos antes.

## Custom Scripts
- ./scripts/reset-db.sh: Reset local database with seeds
- npm run studio: Open Prisma Studio on port 5555
- deploy-staging: Alias for deployment script

## Tool Versions
- Node 20.x required (uses .nvmrc)
- pnpm 8.x for package management

Así Claude no tiene que "descubrir" cada vez, ya sabe exactamente cómo quieres que use esa herramienta. Es la diferencia entre dejar que Claude explore vs. darle un manual de operaciones claro.

Ambos funcionan, pero uno es mucho más rápido y predecible (y además de ahorras unos cuantos tokens).

Claude Code hereda tu terminal

Uno de los puntos más potentes —y menos comentados— de Claude Code es su capacidad para trabajar dentro de tu entorno bash real. Esto incluye aliases, funciones, scripts personalizados y configuraciones específicas de tu stack.

Claude puede ejecutar --help en cualquier comando, pero fuera de los binarios estándar, es buena práctica documentar tus herramientas internas en un archivo como CLAUDE.md. Ejemplo real:

## Custom Scripts
- ./scripts/reset-db.sh: Resetea la base de datos local con seeds
- npm run studio: Abre Prisma Studio en el puerto 5555
- deploy-staging: Alias del script de despliegue a Staging

## Tooling
- Node 20.x (via .nvmrc)
- pnpm 8.x como gestor de paquetes

Este archivo actúa como un manual de operaciones: evita que Claude tenga que inferir cómo funcionan tus herramientas y acelera su tiempo de respuesta. En vez de depender del context crawling, le das un plano claro de tu entorno.

¿La diferencia? Con documentación explícita, Claude pasa de intuir tu flujo a operar como un desarrollador más del equipo. Más velocidad, menos fricción, menos tokens malgastados.

MCP: Conecta Claude con servicios externos

Ya he hablado de qué es MCP y las posibilidades que abre, pero para resumir Model Context Protocol permite a Claude comunicarse con servicios especializados. No son simples HTTP calls (no es una API), son herramientas con interfaces bien definidas.

// .mcp.json (project config)
{
  "servers": {
    "puppeteer": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-puppeteer"]
    },
    "database": {
      "command": "mcp-server-postgres",
      "env": {
        "DATABASE_URL": "${DATABASE_URL}"
      }
    }
  }
}

Con cliente (y servidor, si así lo deseas) MCP, Claude Code puede tomar screenshots de tu app, ejecutar queries en la base de datos, o interactuar con APIs externas.

El poder real aparece al combinar múltiples servidores, por ejemplo: screenshot → detectar error visual → buscar en logs → crear issue, pero esto es solo la punta del iceberg.

Comandos slash personalizados

Esta es una de mis opciones preferidas y, de nuevo, ya he hablado de ella.

Los comandos slash son como macros reutilizables que definen los pasos para realizar una tarea. Piensa en ellos como una receta, donde si realizas todos sus pasos en orden cronológico, puedes tener cierta seguridad a la hora de predecir el resultado.

Además, recuerda: no estamos hablando de un comando inerte, sino de un agente de AI preparado para improvisar y responder. Esto te permite ser mas laxo a la hora preparar el comando, porque sabes que Claude puede adaptarse a cualquier imprevisto.

Para crear un comando, crea un archivo Markdown en .claude/commands/ y, si quieres, añade seguimiento en tu control de versions para que todo el equipo pueda utilizarlos.

<!-- .claude/commands/vue-component.md -->
Create a new Vue component with this structure:

1. Generate component file: src/components/$ARGUMENTS.vue
2. Create test file: src/components/__tests__/$ARGUMENTS.spec.ts
3. Add Storybook story if applicable
4. Register in components index

Use TypeScript, setup syntax, and follow our patterns described in ./CLAUDE.md

Ahora /project:vue-component UserCard genera todo el boilerplate. Puedes crear comandos para cualquier flujo repetitivo.

Recuerda además, que para hacer que los comandos sean más polivalentes tienes acceso a la variable $ARGUMENTS que captura todo lo que pases tras el comando.

Mi workflow preferido: Explorar → Planificar → Ejecutar → Preservar

Este es el flujo de trabajo que uso la gran mayoría de las veces, y uno de los más recomendados por la misma Anthropic.

Uno de los errores más comunes es lanzar a Claude directo a escribir código. ¿Por qué? Porque entre las ganas de ser útil cuanto antes del modelo y tu propia falta de planificación, es muy probable que los avances sean lentos y caóticos, con muchas iteraciones.

Este flujo evita rehacer trabajo, pero te obliga a aproximarte de forma metódica. Te fuerza a pensar antes de actuar.

Explorar

Primero, debes dejar que Claude explore la base de código sobre la que tiene que actuar.

En este punto ayuda mucho si has creado tu archivo CLAUDE.md, como vimos antes. Si has hecho bien tu trabajo, ese archivo ya debería contener la arquitectura, convenciones y patrones que quieres seguir. Lo importante es entender que no es un artefacto estático: puedes y debes ir actualizándolo con los nuevos descubrimientos que haga el agente durante la exploración.

Aquí entra en juego el modo planificación de Claude (que veremos luego), que está pensado para la exploración guiada de la base de código. A través de él, puedes refinar y enriquecer tu CLAUDE.md con los hallazgos.

Personalmente, suelo utilizar modo Opus para planificar y modo Sonnet para ejecutar (puedes configurarlo con el comando /model), (lo que me permite separar claramente la fase estratégica de la fase operativa. Lo mejor es que, si tu archivo CLAUDE.md ya incluye tu plan, puedes incluso borrar el contexto o iniciar un agente distinto y funcionará igual de bien o incluso mejor, porque todo está documentado.

Ejemplo de instrucción:

Hey Claude, check the codebase, specially all auth-related files. Don't come with any crazy ideas yet, just understand the current implementation.

En este punto no queremos crear ningún artefacto, solo estableciendo el contexto necesario. También puedes complementar el contexto añadiendo referencias a archivos con @, arrastrando y soltando imágenes (mockups, diagramas, diseños de Figma) o ampliando el contexto compartido del proyecto con #.

Algo que también suelo hacer y funciona de maravilla es darle un cue al modelo para que pregunte cualquier duda tras revisar la base de código.

Clave: ¿cómo estar seguro de que puedes avanzar a la siguiente fase? Pregúntate: si Claude fuese un compañero, ¿tendría la información necesaria para comenzar a trabajar?

Planificar

Una vez el agente tiene el contexto necesario, es el momento de indicar aquello que quieres lograr.

Tienes dos opciones: proponer tú mismo la implementación, aunque sea de forma superficial, o dejar que Claude elija cómo actuar.

Ejemplo:

Now, think about how to add OAuth without breaking existing login. Create a detailed plan.

En mi experiencia, si se trata de una base de código muy extensa, legacy o con problemas de legibilidad (el 90% del código en producción), dar tus propias indicaciones al modelo puede ayudar en las primeras iteraciones.

Si compartes tu propio plan, igual que en la fase anterior, es muy útil pedirle a Claude que desafíe tu propuesta. Así evitas sesgos y aseguras mejores soluciones.

Sea como sea, verás que Claude creará su propio plan de implementación, con to-do list incluido. Este es el momento de pedir ajustes o desafiar algunos puntos, porque a partir de aquí comienza la ejecución.

Clave: cuantos más detalles y ejemplos, mejor. Nunca es suficiente. Invertir tiempo extra ahora te lo ahorrará con creces más adelante.

Ejecutar

Con el contexto definido y un plan claro, llega el momento de pasar a la implementación. Aquí quiero ser muy claro: no es como te lo han vendido. Esto no es jazz.

No puedes improvisar “vibe coding” en un proyecto que no sea un CRUD glorificado.

Tu papel debe ser activo, no pasivo.

Implement the plan step by step, running tests after each change (as atomic as possible), creating a commit.

Tras esta instrucción, Claude comenzará a trabajar y en pocos segundos tendrás resultados que deberás validar.

Más adelante podrás permitirle operaciones de edición continuas con “Always allow”, pero en las primeras iteraciones es mejor revisar cada artefacto en detalle para corregir el rumbo lo antes posible.

A medida que avances, Claude debería seguir las instrucciones acordadas, pero ten presente el semantic drift: en procesos iterativos es natural que la implementación se desvíe del objetivo inicial.

Dicho de otro modo: no te frustres, la primera versión casi nunca es la definitiva.

Clave: valida todo lo que el modelo produzca y, sobre todo, entiende cada paso. No tienes que escribir el código, pero sí comprenderlo. Cada vez que sigues adelante sin entender, estás cediendo el control y convirtiéndote en dependiente de un tercero (en este caso, un modelo IA).

Preservar

Por último, y siendo que el agente ha llevado el control de todos los commits creados en el proceso, puedes ir un paso más allá y pedirle que cree la incorporación de cambios.

Lastly, create a Pull Request over `develop` branch. Please BE CONCISE stating the main takeaways (you can use Mermaid diagrams) of the changes and don't self promote.

Como ves, esta última fase requiere de mi permiso explícito. Una vez más estas contramedidas son necesarias para frenar el ímpetu del modelo. Si has trabajado con Claude antes sabes de sobra a qué me refiero.

Clave: en este tipo de operaciones, Claude tiende a ser extremadamente “verbose”. Si no lo acotas con una instrucción clara, es posible que añada cientos (o miles) de palabras detallando cada cambio, garantizando que ningún reviewer quiera procesar tu PR.

Otros workflows

Desarrollo visual iterativo

Q3AqkEfSyCkum1mf4GIY5zP5zHE7es1LCQZlVWP3.gif

Aunque Claude Code no tiene GUI, puedes —y debes— adjuntar recursos externos como contexto siempre que sea posible.

Una imagen vale más que mil tokens.

En mi experiencia, la diferencia entre describir un diseño y mostrarlo es abismal.

  1. Arrastra y suelta una captura con el diseño final que quieres lograr.

    • Pro-tip: si estás en MacOS, puedes copiar y pegar la imagen.
  2. Pide a Claude que examine el diseño y haga las preguntas necesarias hasta estar seguro que “ambos estáis viendo lo mismo”.

    Check the design attached and explain in clear terms what you see.
    
  3. Ahora solicita a Claude que implemente el diseño usando el stack que elijas.

    Now I want you to code it, pixel perfect.
    Ask for any extra clarification along the way.
    

Una vez más, si en tu CLAUDE.md has especificado detalles técnicos y de implementación (como por ejemplo usar Vue y Tailwind como frameworks JavaScript y CSS y BEM como convención), esto debería ser suficiente para empezar.

Ahora bien: controla tu expectativas. Ten en cuenta que este proceso rara vez devuelve el resultado esperado a la primera y suele mejorar con cada nueva iteración.

Si quieres un paso más allá puedes pedirle a Claude que haga capturas de pantalla —y luego las compare con el artefacto producido —usando Puppeteer MCP serveriOS simulator MCP server para móvil, aunque reconozco que en esto último no tengo experiencia.

Modo YOLO seguro

xcG9K5RZ7p0QBdnSqJYtl2RALIuhaHf5Tn2mcyPh.jpg

Para tareas mecánicas sin riesgo (formateo, linting, generación de tipos), puedes darle autonomía total.

El flag -p (o --print) hace que Claude Code:

  1. Ejecute la tarea una vez y termine.
  2. No abra el chat interactivo donde puedes seguir conversando.
  3. Imprima el resultado y cierre la sesión.
# This will run in a Docker container without connectivity
 claude --dangerously-skip-permissions -p "Fix all ESLint errors in src/"
 claude --dangerously-skip-permissions -p "Fix TypeScript issues in components/*.tsx"

Anthropic proporciona configuración de Dev Containers como referencia. Úsalo para migraciones masivas o refactoring mecánico.

Modo Unix

Como has visto, gracias al flag -p Claude Code se integra naturalmente en la filosofía Unix de herramientas que puede personalizarse y componerse.

Esto hace que fuera de so modo interactive, funcione perfectamente con pipes, scripts y workflows automatizados.

# Pipe the output to other tools
claude -p "List all TODO comments" | grep -E "HIGH|CRITICAL"

# Use with find and xargs
find . -name "*.ts" | xargs claude -p "Add JSDoc to exported functions"

# Combine with git workflows  
git diff --name-only | xargs claude -p "Fix linting issues in these files"

# Even in scripts
#!/bin/bash
for component in src/components/*.vue; do
  claude -p "Add error boundaries to $component"
done

Esta capacidad de automatizar refactoring masivo y fixes complejos a través de pipelines Unix abre posibilidades fascinantes para la automatización del desarrollo.

Onboarding más rápido con Claude Code

Uno de los usos más potentes de Claude Code es acelerar el onboarding a un nuevo codebase. Funciona como tener un Frontend Junior disponible 24/7, con acceso completo al proyecto y conocimiento contextual de la lógica de negocio.

Ejemplos de preguntas que puedes hacerle directamente:

How does the authentication flow work?
Where is the cart state managed?
Why do we use this pattern in API calls?
What edge cases does the payment flow handle?
Show me examples of how other components handle loading states
What's the difference between UserService and AuthService?

En lugar de depender de documentación obsoleta o revisar manualmente el repositorio, Claude analiza el código real, entiende los comentarios, revisa el historial de commits y proporciona respuestas precisas con referencias específicas del proyecto.

No requiere prompt engineering ni conocimiento previo de la arquitectura. Basta con preguntar como lo harías en una daily o en Slack.

Claude no reemplaza la lectura crítica, pero sí reduce el tiempo necesario para construir un modelo mental útil del sistema.

Git y GitHub, sin salir del terminal

Claude Code actúa como una capa semántica (ORMish) sobre Git: interpreta tus intenciones, analiza el contexto del proyecto y ejecuta acciones complejas sin que tengas que recordar cada flag o comando.

Preguntas que puedes hacer directamente:

What changes made it into v2.3.0?
Who last modified the auth module and why?
Revert the last 3 commits but keep the changes staged
Cherry-pick the bugfix from main to production
Show me all commits that touched the payment flow this quarter
Create a hotfix branch from the last stable release

Claude no solo entiende Git. Analiza el diff, los mensajes de commit anteriores, la estructura del proyecto y las convenciones del equipo. El resultado: commits descriptivos, revert seguros y flujos de trabajo que no requieren arqueología.

Pero donde realmente destaca es en el manejo de GitHub a través del CLI oficial. Con gh instalado, puedes operar todo el ciclo de colaboración sin salir del terminal:

Create PR from current branch with a detailed description
Fix all review comments on PR #234
Triage open issues and suggest priorities
Check if there are similar closed issues before creating a new one
Draft release notes for all commits since v1.2.0
Find PRs that might have introduced this regression

Claude no solo genera comandos: entiende el propósito de cada PR, analiza el diff, revisa el historial de cambios, resume conversaciones previas y aplica cambios sugeridos directamente.

El resultado es un flujo continuo y sin fricción: rama activa, mensaje claro, PR bien descrito, reviewers asignados y cambios aplicados, todo desde la terminal. Sin copiar y pegar, sin cambiar de contexto.

Claude elimina el ruido operativo para que puedas enfocarte en el impacto real de tus decisiones y no en la API de Git.

Como sacarle todo el partido a Claude Code

Retoma exactamente donde lo dejaste

E8SGx1D5tMmGxN4roC258VzEiDAqBkxhsgAQcnzo.gif

Claude Code permite continuar una sesión anterior usando el flag --resume o el comando /resume. Esta funcionalidad no es trivial: está diseñada para que cada conversación esté contextualizada por directorio.

  1. Aislamiento por proyecto
    • Cada carpeta representa un codebase distinto.
    • Claude mantiene conversaciones separadas para evitar contaminación de contexto.
    • Las respuestas se basan en el código y la configuración disponibles en ese directorio.
  2. Configuración específica
    • Puedes tener un CLAUDE.md por proyecto.
    • Archivos .claude/settings.json definen ajustes y permisos a nivel local.
    • Herramientas como MCP, servicios externos o scripts cambian entre entornos.
  3. Contexto evolutivo
    • El historial de conversación incluye archivos modificados, commits recientes y decisiones tomadas.
    • Una pregunta como “¿Qué cambió en el flujo de autenticación desde ayer?” solo tiene sentido si el contexto del proyecto se conserva.

Importante: esta funcionalidad es local, no está sincronizada en la nube. Si necesitas portarla a otro entorno, puedes usar /export para trasladar el historial de conversación y su contexto asociado.

Cambia de modo sobre la marcha

WI6MdjTzKZkCo9zz8OAIOWbmgXsNiLCv3V6m3Alj.gif

Claude Code permite alternar entre tres niveles de permisos, adaptándose al momento del desarrollo en que estés. Puedes cambiar de modo rápidamente con Shift + Tab.

  1. Modo normal (sin indicador visible)
    • Flujo estándar con confirmaciones por defecto.
    • Claude solicita autorización antes de modificar archivos o ejecutar comandos sensibles.
    • Ideal para revisión, pruebas o tareas con impacto en producción.
    • Ejemplo: Create PR and prepare for deployment.
  2. Modo “Accept edits”
    • Claude puede editar archivos directamente sin pedir confirmación.
    • Acelera tareas repetitivas durante el desarrollo activo.
    • Sigue requiriendo permiso explícito para ejecutar comandos bash.
    • Ejemplo: Implement all the auth improvements.
  3. Modo “Plan only”
    • Claude no modifica nada: solo analiza, lee y propone cambios.
    • Perfecto para auditar un codebase sin tocar una línea.
    • Ejemplo: Analyze the auth system and suggest improvements.

Esta distinción por modos evita accidentes, reduce fricción y te permite trabajar con un asistente que sabe cuándo actuar y cuándo observar.

Sistema de colas: Delega y desconecta

epzbsgoJeLNCEmqQCC05E3UGypaU81yTnDfwwhu8.gif

Claude Code permite encolar múltiples instrucciones consecutivas y las procesa de forma ordenada y contextual:

"Add JSDoc comments to all functions"
"Also fix any TypeScript errors"
"And run the test suite when done"

No se limita a ejecutar tareas en secuencia. Evalúa dependencias, conserva el contexto entre pasos y se detiene automáticamente si necesita input adicional.

Ventajas prácticas:

  • Delegación eficiente: Puedes agrupar tareas relacionadas y continuar con otras actividades.
  • Contexto continuo: Cada paso se ejecuta teniendo en cuenta los cambios anteriores.
  • Control inteligente: Se detiene ante ambigüedades, errores o decisiones que requieren intervención.

Estrategia de uso:

  1. Agrupa tareas relacionadas pero suficientemente independientes.
  2. Revisa el estado periódicamente (cada 15–20 minutos).
  3. Evita colas demasiado largas — a partir de 5–6 tareas puede disminuir la fiabilidad del resultado.

Esto rivaliza en parte con los subagents (de los que hablaremos más adelante), pero está más orientado a tareas lineales y encadenadas dentro del mismo contexto. No es algo que haya usado de forma intensiva, pero cuando lo he hecho el resultado es aceptable.

Ejemplo:

"Refactor UserService to use async/await"
"Update all components that use UserService"
"Fix any resulting TypeScript errors"
"Run tests and fix any failures"
"Create commit with descriptive message"

Claude ejecutará cada paso, preservando el flujo y asegurando una mínima consistencia a lo largo del proceso.

Claude Code incluye tres formas de controlar la navegación y corregir el rumbo, sin perder contexto. Esta navegación temporal es especialmente valiosa en sesiones largas donde quieres ajustar instrucciones sin empezar desde cero.

  1. Escape ESC (una vez):

    • Para la operación actual manteniendo la conversación.
    • Interrumpe ejecuciones largas sin perder el hilo.
    • Útil cuando Claude se va por las ramas (drifting, hallucination, etc).
  2. Doble Escape 2x ESC (rápido):

    • Activa modo edición del mensaje anterior.

    • Aparece campo editable con tu último prompt.

    • Modifica y reenvía con todo el contexto preservado.

    • Caso de uso práctico:

      Tu prompt: "Refactor all components to use Composition API"
      [Claude empieza a trabajar]
      [Te das cuenta que querías solo algunos componentes]
      ESC ESC → Editas a: "Refactor only auth-related components to use Composition API"
      
  3. Flecha arriba ArrowUp:

    • Navega por prompts anteriores.
    • Útil para repetir comandos similares.

Activa el pensamiento profundo

Aunque no está oficialmente documentado, las palabras think, think hard, think harder y ultrathink activan diferentes niveles de razonamiento

La documentación oficial recomienda: "Please think about this problem thoroughly and in great detail" o "Consider multiple approaches and show your complete reasoning”.

Cuando Claude entre en el modo de pensamiento extendido verás su “proceso razonativo” en color gris claro y cursiva.

Úsalo para problemas complejos que requieren análisis real, no para tareas mecánicas.

Especificidad = productividad

Prompts vagos generan código inútil. Prompts específicos generan soluciones exactas.

Abstracto y confuso:

"add form validation"
"improve performance"
"fix the bug"

Efectivo y específico:

"add Zod validation to checkout form. Validate email, phone with Spanish format, and postal code. Show inline errors using our error component"
"add virtual scrolling to ProductList component when items > 100. Use @tanstack/vue-virtual"
"fix the null pointer exception in PaymentService.processRefund() when amount is undefined"

Incluye: tecnologías específicas, archivos concretos, criterios de éxito, y restricciones.

Claude no adivina —especifica o iteras indefinidamente.

Dale espacio a tu contexto

xqOVNHZXvAxezEdvfkAUTqTg8Tnebub7m6MYKmG9.gif

La interfaz de Claude Code puede sentirse estrecha para prompts largos o al pegar código extenso:

Expandir área de texto:

  • Shift + Enter - Añade nueva línea sin enviar (si no funciona, lanza el comando /terminal-setup).
  • Ctrl + J - Expande el área de input (universal).

Para prompts largos:

  • Escribe en tu editor favorito.
  • Copia y pega el prompt completo.
  • O usa archivos: "Read my-prompt.md and implement what it describes".

Especialmente útil para instrucciones complejas, especificaciones técnicas, o cuando necesitas formatear código dentro del prompt.

Menciona archivos específicos

l0gnbvXWhIro5QMgs5bJU2aygaK1cFhr7Vu2pieA.gif

Usa el tabulador tab como auto-completado (tab-completion) para referenciar archivos.

"Refactor <@>src/com<tab>ponents/CartItem.vue<enter> to use the new price formatting composable"

Me refiero a que no solo añadas contexto con la @, sino que auto-completes la ruta a cada archivo usando el tabulador.

URLs para documentación

Claude accede a URLs en tiempo real para documentación y ejemplos actualizados:

Copy-paste manual:

"implement a date picker like the one I saw online"
[copies code from browser]

Referencia directa:

"Implement the date picker following https://vuejs.org/examples/#date-picker"
"Use the pattern described in https://antfu.me/posts/composable-vue-vueday-2021"
"Follow the Tailwind component structure from https://tailwindui.com/components/forms/input-groups"

Optimización de permisos: /permissions

Recuerda que luego puedes añadir reglas como:

  • WebFetch(domain:vuejs.org) - Allow
  • WebFetch(domain:tailwindcss.com) - Allow

Configura dominios frecuentes para evitar confirmaciones repetitivas. Claude siempre accede a la versión más actual de la documentación.

Gestión inteligente del contexto

El contexto es limitado y se degrada con información irrelevante. Para ver el estado del contexto en la sesión actual, usa /context.

Ahora, los dos comandos principales para mantenerlo “limpio”:

  • /clear - Borrón y cuenta nueva:
    • Elimina toda la conversación anterior. Úsalo entre tareas completamente diferentes:
    • Terminaste una feature → /clear → empiezas otra.
    • Cambias de proyecto → /clear.
    • Claude se confunde con contexto obsoleto → /clear.
  • /compact - Compresión inteligente:
    • /compact condensa la conversación manteniendo información relevante.
      • Claude elimina:
        • Iteraciones fallidas de código.
        • Mensajes de debug repetitivos.
        • Exploraciones que no llevaron a nada.
      • Pero mantiene:
        • Decisiones importantes.
        • Código final.
        • Configuración actualizada del proyecto.

Ojo, Claude compacta automáticamente cuando el contexto se llena, pero hacerlo manualmente te da control sobre el momento preciso.

Entrada de datos más allá del chat

Ya vimos el flag -p para salir del modo interactivo, pero hay más formas de alimentar información a Claude sin depender del copy/paste manual:

  # Pipe big logs
  cat error.log | claude -p "analyze these Vue errors"

  # Make Claue read files directly
  "Read ./test-results.json and identify flaky tests"

  # Fetch URLs (even localhost)
  "Analyze the performance profile at http://localhost:3000/__profiler"

Estas alternativas son especialmente valiosas para archivos grandes, logs extensos, o cuando quieres automatizar el análisis.

En lugar de saturar el chat con miles de líneas, dejas que Claude acceda directamente a la fuente.

Subagentes: El multiplicador de fuerza

Esto es una breve introducción, si quieres verlos en práctica echa un vistazo a mi guía de subagentes Claude Code.

Claude puede crear versiones especializadas de sí mismo que trabajan de forma independiente y en paralelo. Son los subagentes, y cambian por completo las reglas cuando entiendes cómo integrarlos en tu flujo de trabajo.

Cómo funcionan

  • Son stateless: cada invocación empieza con un contexto limpio y no arrastra conversaciones previas.
  • Ejecutan tareas de forma autónoma: trabajan sin interacción intermedia hasta devolver un resultado final.
  • Retornan un único mensaje con sus conclusiones.
  • Puedes lanzar varios en paralelo para maximizar el rendimiento y la cobertura.

Cuándo usarlos

  • Búsquedas complejas que requieren varios intentos o enfoques.
  • Investigación extensa en bases de código grandes.
  • Exploración de múltiples archivos o patrones en paralelo.
"Before implementing auth, use subagents to:
1. Research our current session management
2. Analyze security implications
3. Check for existing auth utilities
Then synthesize findings into an implementation plan"

Los subagentes trabajan con un contexto fresco, sin la contaminación de la conversación principal. Es como tener un equipo de juniors investigando mientras el senior mantiene la visión global.

Para sacarles el máximo partido, usa frases explícitas en tus instrucciones:

  • “Use subagents to verify…”,
  • “Have a subagent investigate…”,
  • “Ask subagents to explore alternatives…”.

Quédate con esta idea: úsalos para verificación independiente, exploración de alternativas y análisis profundo sin comprometer el foco del hilo principal.

Experiencia personal

Trabajar con Claude Code me ha enseñado algo que parece obvio, pero que cuesta aplicar: si delegas sin entender, el error siempre vuelve multiplicado. Es como aquel viejo hábito de copiar y pegar de Stack Overflow sin saber qué hacías: tarde o temprano estalla.

La clave es distinta: tú defines la estrategia, Claude se encarga de la ejecución. Tú marcas la visión y los límites, y dejas que el agente planifique y ejecute dentro de ese marco.

El método que mejor me funciona es fragmentar absolutamente todo. No importa lo ambicioso que sea el objetivo: conviértelo en cambios atómicos, pequeños, con commits tras cada paso. Así reduces riesgos y tienes siempre un punto estable al que volver.

Y un recordatorio crucial: no te fíes nunca a ciegas. Claude puede producir auténticas maravillas, pero también introducir capas de complejidad innecesaria —me ha pasado muchas veces. La única manera de evitarlo es validar continuamente, igual que validarías el trabajo de un junior talentoso pero aún sin criterio sólido.

Conclusión

Lo que muchos ven como una carencia —que Claude Code no viva dentro de tu IDE/editor— en realidad es su mayor virtud. Mantenerlo en el terminal te da distancia, perspectiva y, sobre todo, evita que el asistente acabe sustituyendo tu propio criterio. Sigues siendo tú quien toma las decisiones, no una ventana emergente sugiriendo cada línea.

Ese mismo diseño hace que Claude funcione como capa unificadora: no importa si eres frontend, backend, devops, ML engineer o diseñador. Cada uno con su stack, todos con el mismo terreno común: el terminal. Ahí Claude se adapta a tu flujo, en lugar de forzarte a adoptar el suyo.

Y no, Claude Code no es tu reemplazo. Es tu multiplicador. Bien usado puede doblar o triplicar tu impacto: menos fricción, más foco, más velocidad. La condición es simple pero exigente: sentido común. Avanzar despacio, validar cada paso, usarlo para lo que realmente brilla —procesar cantidades enormes de información y generar hipótesis inmediatas.

Esto no es vibe coding. Esto es AI Augmentation: tú piensas, tú decides, Claude acelera.

Main takeways

  • CLAUDE.md es tu cerebro compartido: Configúralo una vez, ahórrate repetir contexto en cada sesión.
  • Permisos granulares: Usa /permissions y archivos settings.json para controlar exactamente qué puede hacer Claude.
  • GitHub CLI = superpoder: Con gh instalado, Claude maneja PR’s, issues y reviews automáticamente.
  • Workflow metódico: Explorar → Planificar → Ejecutar → Preservar. Nunca saltes directamente a código.
  • Contexto es oro: Usa /clear entre tareas, referencia archivos específicos, alimenta URLs directamente.
  • Control activo: Interrumpe con Escape, corrige temprano, mantén el rumbo. No eres espectador.
  • Modo Unix poderoso: Flag -p para salir del modo interactivo y usar junto a scripts, pipes, automatización. Integra Claude en cualquier workflow.
  • MCP y comandos slash: Extiende capacidades con herramientas externas y macros reutilizables.
  • Subagentes para tareas complejas: Delega investigación paralela sin contaminar contexto principal.
  • Especificidad = productividad: Prompts vagos → código inútil. Prompts específicos → soluciones exactas.

Recibe solo lo esencial

Si no hay nada que decir, no escribo. Si hay algo importante, te aviso.

¿Eres desarrollador/a Web profesional?
No

Cancela la suscripción en cualquier momento.