Una coleccion completa de agentes, comandos, skills y MCPs para potenciar Claude Code.
No necesitas memorizar comandos. Claude te guia automaticamente desde la idea inicial hasta el deploy final.
Que Incluye
Componente
Cantidad
Descripcion
Agentes
15
Especialistas para diferentes tareas
Commands
20
Workflows automatizados
Skills
20
Patrones y best practices
MCPs
3
Memory, Playwright, GitHub
Instalacion
Importante: El nombre de la carpeta debe ser compatible con npm (solo minusculas, numeros y guiones). Ejemplos validos: mi-proyecto, barber-app, ecommerce-2024.
Opcion 1: Proyecto Nuevo (Recomendado)
# 1. Crear carpeta con nombre valido
mkdir ~/Desktop/mi-proyecto && cd ~/Desktop/mi-proyecto
# 2. Importar el starter kit
git clone https://github.com/bryanacuna7/claude-starter-kit.git temp-kit
cp -r temp-kit/.claude .
cp temp-kit/CLAUDE.md temp-kit/GUARDRAILS.md temp-kit/DECISIONS.md .
rm -rf temp-kit
# 3. Abrir en VSCode
code .
Luego ejecuta /setup en Claude Code. El asistente hace TODO automaticamente:
Valida el nombre de carpeta
Te pregunta el tech stack (Next.js, Vite, etc.)
Ejecutacreate-next-app o equivalente
Instala dependencias
Configura CLAUDE.md y MCPs
Inicializa Git
Tu solo respondes preguntas. Claude ejecuta todos los comandos.
Opcion 2: Proyecto Existente
Si ya tienes un proyecto con package.json:
cd tu-proyecto-existente
# Importar solo los archivos del starter kit
git clone https://github.com/bryanacuna7/claude-starter-kit.git temp-kit
cp -r temp-kit/.claude .
cp temp-kit/CLAUDE.md temp-kit/GUARDRAILS.md temp-kit/DECISIONS.md .
rm -rf temp-kit
Luego ejecuta /setup. El asistente detectara tu proyecto existente y solo configurara CLAUDE.md y MCPs.
Renombrar carpeta a nombre valido (minusculas, guiones)
Abrir en VSCode
Ejecutar /setup en Claude Code
Automatizacion Semi-Automatica (Trigger → Accion)
Claude ejecuta acciones automaticamente cuando detecta ciertos triggers:
Triggers de UI (OBLIGATORIO)
Trigger
Accion
Modificar componente .tsx
→ Playwright screenshot para verificar
Usuario dice "se ve mal"
→ Playwright inmediatamente
Crear UI con <img>
→ Verificar que tiene alt
Triggers de Codigo
Trigger
Accion
Modificar auth/** o payment/**
→ Security scan automatico
Modificar src/lib/** o src/utils/**
→ Correr tests relacionados
Import de paquete no instalado
→ npm install automatico
Build falla
→ Analizar error y sugerir fix
Triggers de Workflow
Trigger
Accion
Despues de /create o /enhance
→ Guardar PROGRESS.md + sugerir siguiente paso
Despues de /commit
→ Verificar working tree
Usuario dice "listo" o "funciona"
→ Guardar progreso
Crear API route
→ Actualizar .env.example si usa env vars
Error Recovery
Error
Auto-fix
Puerto 3000 ocupado
→ Kill proceso + restart
node_modules no existe
→ npm install
ESLint/Prettier errors
→ Auto-fix
Tu trabajas. Claude reacciona a lo que haces.
Auto-Routing de Agentes (Real, No Solo Documentacion)
Claude realmente usa los agentes: lee sus instrucciones y aplica su expertise.
Tu: "Agregar autenticacion JWT"
Claude: 🤖 Using @fullstack-developer + @code-reviewer...
[Lee .claude/agents/fullstack-developer.md]
[Aplica patrones de seguridad del agente]
Tu: "El boton se ve mal"
Claude: 🤖 Using @fullstack-developer...
[Arregla el codigo]
[USA PLAYWRIGHT para verificar visualmente] ← OBLIGATORIO
[Muestra screenshot confirmando el fix]
Tu: "El login devuelve error 500"
Claude: 🤖 Using @debugger...
[Lee .claude/agents/debugger.md]
[Sigue protocolo de debugging sistematico]
Verificacion visual obligatoria: Despues de cambios UI, Claude DEBE usar Playwright para screenshot. No mas "deberia verse bien".
Commands (22)
Configuracion
Comando
Descripcion
/setup
Wizard inicial. Configura CLAUDE.md con tu proyecto: nombre, tech stack, comandos de dev, reglas criticas. Configura MCPs (Memory, Playwright, GitHub opcional).
/continue
Retomar sesion. Lee PROGRESS.md. (Automatico al inicio - rara vez necesitas ejecutarlo manualmente)
/save-progress
Guardar estado. (Automatico despues de /create, /commit, /deploy - rara vez necesitas ejecutarlo manualmente)
Git & Deploy
Comando
Descripcion
/commit
Commits inteligentes. Analiza cambios, genera mensaje descriptivo con formato conventional commits, detecta archivos sensibles (.env), ejecuta pre-commit hooks.
/create-pr
Crear Pull Request. Genera titulo y descripcion basado en commits, incluye checklist de testing, crea PR via GitHub CLI.
/deploy
Deploy a produccion. Pre-flight checks (tests, build, lint), deploy a preview o production, rollback si falla.
Desarrollo
Comando
Descripcion
/create
Crear feature/app. Dialogo interactivo para definir requerimientos, genera estructura de archivos, implementa codigo base. Ejemplo: /create sistema de notificaciones push
/brainstorm
Explorar opciones. Presenta multiples enfoques para resolver un problema, pros/cons de cada uno, recomienda el mejor. Ejemplo: /brainstorm autenticacion para mobile app
/plan
Plan de implementacion. Desglosa tarea en pasos, identifica dependencias, estima complejidad, crea checklist.
/preview
Preview local. Inicia servidor de desarrollo, abre browser, verifica que funciona.
/enhance
Mejorar codigo. Refactoring, optimizacion, mejoras de legibilidad sin cambiar funcionalidad.
Testing & Debug
Comando
Descripcion
/test
Correr tests. Ejecuta test suite, analiza failures, sugiere fixes. Soporta Jest, Vitest, Playwright.
/generate-tests
Generar tests. Analiza codigo y genera tests unitarios, de integracion, edge cases. Incluye mocks y fixtures.
/debug
Debug sistematico. Reproduce el error, identifica root cause, propone fix, verifica solucion. Ejemplo: /debug el checkout falla con tarjetas Amex
Analisis & Review
Comando
Descripcion
/code-review
Review de calidad. Analiza seguridad, performance, mantenibilidad, accesibilidad. Genera reporte con severidad.
/explain-code
Explicar codigo. Documenta que hace un archivo/funcion, flujo de datos, dependencias. Util para onboarding.
/refactor-code
Refactorizar. Mejora estructura sin cambiar comportamiento. Aplica SOLID, DRY, patterns.
# 1. No se como implementar auth
/brainstorm opciones de autenticacion
# 2. Claude sugiere: "Tienes un plan? Usa /plan"
/plan implementar JWT con refresh tokens
# 3. Claude sugiere: "Listo para crear? Usa /create"
/create sistema de autenticacion
# 4. Claude sugiere: "Quieres mejorar? Usa /enhance"
/enhance agregar remember me y 2FA
# 5. Claude sugiere: "Codigo listo, limpiar? Usa /refactor-code"
/refactor-code src/auth/
Agentes (15)
Agente
Especialidad
Cuando se usa
fullstack-developer
Frontend + Backend
Features, integraciones, CRUD
frontend-specialist
Frontend
UI complejas, React, estado
backend-specialist
Backend
APIs, bases de datos, auth
devops-engineer
DevOps
CI/CD, Docker, Kubernetes
test-engineer
Testing
Tests, coverage, QA
debugger
Errores
Bugs, crashes, logs
code-reviewer
Calidad
Reviews, seguridad
security-auditor
Seguridad
Vulnerabilidades, auditorias
performance-profiler
Optimizacion
Slow queries, memory leaks
architecture-modernizer
Arquitectura
Refactors grandes, migraciones
documentation-expert
Docs
README, API docs, comments
ui-ux-designer
Diseno
UI, 50+ estilos, 25 paletas
product-strategist
Producto
Roadmap, features, prioridades
prompt-engineer
Prompts
Optimizar prompts para LLMs
context-manager
Coordinacion
Sesiones largas, multi-file
Skills (20)
Web Development
Skill
Contenido
react-patterns
Hooks, state management, performance, custom hooks
## Project Overview
E-commerce de productos artesanales
## Tech Stack
Next.js 14, PostgreSQL, Stripe, Tailwind
## Development Commands
npm run dev # Desarrollo
npm test # Tests
npm run build # Build
## Critical Rules
- TypeScript estricto
- Tests para cada feature
- Code review obligatorio
GUARDRAILS.md
Comportamientos que nunca cambian:
## Baseline Declaration
| Area | Comportamiento |
|------|----------------|
| Auth | JWT con refresh tokens |
| API | Formato { data, error, meta } |
| DB | Soft delete, nunca hard delete |
Ejemplos de Uso
# Crear feature completa
/create sistema de reviews con rating 1-5 estrellas
# Debug especifico
/debug el filtro de precio no funciona en mobile
# Preparar deploy
/deploy preview
# Review antes de merge
/code-review src/components/Checkout.tsx
# Documentar API
/create-architecture-documentation para el modulo de pagos
Troubleshooting
Problema
Solucion
Error npm "name can only contain URL-friendly characters"
Renombrar carpeta a minusculas sin espacios (ej: barber-app)
