Claude Starter Kit

Claude Code Starter Kit

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

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:

1. Valida el nombre de carpeta
2. Te pregunta el tech stack (Next.js, Vite, etc.)
3. Ejecuta create-next-app o equivalente
4. Instala dependencias
5. Configura CLAUDE.md y MCPs
6. 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.

Opcion 3: Descargar ZIP

1. Descargar ZIP
2. Renombrar carpeta a nombre valido (minusculas, guiones)
3. Abrir en VSCode
4. Ejecutar /setup en Claude Code

Automatizacion Semi-Automatica (Trigger → Accion)

Claude ejecuta acciones automaticamente cuando detecta ciertos triggers:

Triggers de UI (OBLIGATORIO)

Triggers de Codigo

Triggers de Workflow

Error Recovery

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

Git & Deploy

Desarrollo

Testing & Debug

Analisis & Review

Documentacion & Arquitectura

Flujo de Desarrollo

No necesitas memorizar todos los comandos. Claude sugiere automaticamente el siguiente paso:

┌─────────────┐     ┌────────┐     ┌──────────┐     ┌───────────┐     ┌────────────────┐
│ /brainstorm │ ──▶ │ /plan  │ ──▶ │ /create  │ ──▶ │ /enhance  │ ──▶ │ /refactor-code │
│  Explorar   │     │Planear │     │Construir │     │  Mejorar  │     │    Limpiar     │
└─────────────┘     └────────┘     └──────────┘     └───────────┘     └────────────────┘
       │                                                                       │
       │                    ┌──────────────────────┐                          │
       └──────────────────▶ │ Si ya sabes que hacer│ ◀────────────────────────┘
                            │   salta a /create    │
                            └──────────────────────┘

Ejemplo completo:

# 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)

Skills (20)

Web Development

Backend

DevOps & Security

Testing

Mobile & i18n

SEO & Code Quality

Herramientas & Gaming

MCPs

Archivos de Configuracion

tu-proyecto/
├── .claude/
│   ├── agents/       # 11 agentes especializados
│   ├── commands/     # 19 workflows
│   └── skills/       # 17 skills de tecnologia
├── .mcp.json         # Config de MCPs
├── CLAUDE.md         # Instrucciones del proyecto
├── GUARDRAILS.md     # Comportamientos fijos
└── DECISIONS.md      # Log de decisiones

CLAUDE.md

Instrucciones especificas de tu proyecto:

## 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

Licencia

MIT