elsabro 2.1.0 → 2.3.0

package/skills/nextjs-app.md

@@ -1,6 +1,15 @@
 ---
 name: nextjs-app
-description: Skill para crear aplicaciones web con Next.js. Usa este skill cuando el usuario quiere crear una página web, dashboard, o aplicación web.
+description: Skill para crear aplicaciones web con Next.js. Usa este skill cuando el usuario quiere crear una pagina web, dashboard, o aplicacion web.
+tags:
+  - web
+  - nextjs
+  - react
+  - typescript
+  - tailwind
+  - fullstack
+difficulty: intermediate
+estimated_time: 20-30 min
 ---
 
 # Skill: Crear App Next.js
@@ -17,6 +26,28 @@ Usar cuando el usuario menciona:
 - "blog"
 </when_to_use>
 
+<pre_requisites>
+## Pre-requisitos
+
+### Conocimientos
+- JavaScript/TypeScript basico
+- React fundamentals (components, hooks, state)
+- HTML/CSS basico
+- Terminal/CLI basico
+
+### Software
+- Node.js 20+ LTS
+- npm, yarn, o pnpm
+- Editor de codigo (VS Code recomendado)
+- Navegador moderno (Chrome, Firefox, Safari, Edge)
+
+### Extensiones recomendadas (VS Code)
+- ES7+ React/Redux/React-Native snippets
+- Tailwind CSS IntelliSense
+- Prettier
+- ESLint
+</pre_requisites>
+
 <before_starting>
 ## Investigación Obligatoria
 
@@ -43,7 +74,7 @@ Usar cuando el usuario menciona:
 
 | Tecnología | Propósito | Verificar |
 |------------|-----------|-----------|
-| Next.js 15+ | Framework React | Context7 |
+| Next.js 15.x | Framework React | Context7 |
 | TypeScript | Type safety | Context7 |
 | Tailwind CSS 4 | Estilos | Context7 |
 | App Router | Routing | Context7 |

package/skills/payments-setup.md

@@ -1,6 +1,15 @@
 ---
 name: payments-setup
 description: Skill para integrar pagos en cualquier proyecto. Usa este skill cuando el usuario quiere cobrar, vender, suscripciones, o Stripe.
+tags:
+  - payments
+  - stripe
+  - billing
+  - subscriptions
+  - e-commerce
+  - checkout
+difficulty: advanced
+estimated_time: 45-60 min
 ---
 
 # Skill: Setup de Pagos
@@ -17,6 +26,30 @@ Usar cuando el usuario menciona:
 - "e-commerce"
 </when_to_use>
 
+<pre_requisites>
+## Pre-requisitos
+
+### Conocimientos
+- JavaScript/TypeScript intermedio
+- Conceptos de API REST
+- Async/await y Promises
+- Conceptos basicos de seguridad web (HTTPS, tokens)
+
+### Software
+- Node.js 20+ LTS
+- Proyecto existente (Next.js, Hono, o similar)
+- Stripe CLI (para desarrollo local)
+
+### Cuentas requeridas
+- Cuenta de Stripe (gratis para test mode)
+- Stripe CLI instalado: `brew install stripe/stripe-cli/stripe`
+
+### Antes de produccion
+- Cuenta bancaria verificada en Stripe
+- Documentacion de negocio completada
+- Politicas de reembolso definidas
+</pre_requisites>
+
 <before_starting>
 ## Investigación Obligatoria
 
@@ -59,6 +92,48 @@ Usar cuando el usuario menciona:
 | PayPal | Audiencia que lo prefiere |
 </recommended_stack>
 
+<project_structure>
+## Estructura de Proyecto
+
+### Archivos de Stripe en Next.js
+```
+src/
+├── lib/
+│   ├── stripe.ts              # Cliente servidor (secret key)
+│   └── stripe-client.ts       # Cliente frontend (publishable key)
+├── app/
+│   ├── api/
+│   │   ├── checkout/
+│   │   │   └── route.ts       # Crear sesion de checkout
+│   │   ├── subscribe/
+│   │   │   └── route.ts       # Crear suscripcion
+│   │   ├── portal/
+│   │   │   └── route.ts       # Customer portal
+│   │   └── webhooks/
+│   │       └── stripe/
+│   │           └── route.ts   # Webhook handler
+│   ├── success/
+│   │   └── page.tsx           # Pagina post-pago exitoso
+│   ├── cancel/
+│   │   └── page.tsx           # Pagina pago cancelado
+│   └── pricing/
+│       └── page.tsx           # Pagina de precios
+└── components/
+    ├── BuyButton.tsx          # Boton de compra
+    ├── SubscribeButton.tsx    # Boton de suscripcion
+    └── ManageSubscription.tsx # Acceso a portal
+```
+
+### Variables de entorno
+```bash
+# .env.local
+STRIPE_SECRET_KEY=sk_test_xxx           # Solo servidor
+NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_xxx  # Cliente
+STRIPE_WEBHOOK_SECRET=whsec_xxx         # Webhooks
+NEXT_PUBLIC_URL=http://localhost:3000   # URL base
+```
+</project_structure>
+
 <stripe_setup>
 ## Setup Stripe (Recomendado)
 
@@ -98,7 +173,7 @@ STRIPE_WEBHOOK_SECRET=whsec_xxx
 import Stripe from 'stripe'
 
 export const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
-  apiVersion: '2024-11-20.acacia', // Verificar versión actual
+  apiVersion: '2024-12-18.acacia', // API version 2026
   typescript: true,
 })
 ```

package/skills/review.md

@@ -0,0 +1,331 @@
+---
+name: review
+description: Code review profesional estilo Staff Engineer - correctness, security, performance
+trigger: /elsabro:review
+allowed-tools:
+  - Read
+  - Grep
+  - Glob
+  - Bash
+  - Task
+argument-hint: "[--staged|--pr|file] - scope del review"
+---
+
+# ELSABRO: Code Review
+
+<objective>
+Realizar code review profesional como un Staff Engineer antes de commits o PRs.
+Detectar issues de correctness, security, performance, maintainability y testing.
+Generar reporte estructurado compatible con flujo ELSABRO.
+</objective>
+
+<task_integration>
+## Integracion con Tasks API
+
+Al iniciar review:
+
+```
+TaskCreate:
+  description: "Code review: [scope]"
+  status: in_progress
+```
+
+Actualizar con issues encontrados por categoria.
+Al finalizar, incluir veredicto y checklist.
+</task_integration>
+
+<triggers>
+## Triggers
+
+- `/elsabro:review` - Review de cambios actuales (staged + unstaged)
+- `/elsabro:review --staged` - Solo cambios staged
+- `/elsabro:review --pr` - Review completo estilo PR
+- `/elsabro:review [file]` - Review de archivo especifico
+- `/elsabro:review --save` - Guardar reporte en .planning/REVIEW.md
+</triggers>
+
+<checklist>
+## Review Checklist
+
+### 1. Correctness
+- [ ] El codigo hace lo que deberia hacer?
+- [ ] Maneja edge cases?
+- [ ] Hay off-by-one errors?
+- [ ] Las condiciones son correctas (< vs <=)?
+- [ ] Null/undefined handling?
+
+### 2. Security
+- [ ] Hay inputs no sanitizados?
+- [ ] Se exponen datos sensibles?
+- [ ] SQL injection posible?
+- [ ] XSS posible?
+- [ ] Secrets hardcodeados?
+- [ ] Validacion de permisos?
+
+### 3. Performance
+- [ ] Hay N+1 queries?
+- [ ] Renders innecesarios en React?
+- [ ] Loops dentro de loops evitables?
+- [ ] Memory leaks (event listeners, subscriptions)?
+- [ ] Operaciones bloqueantes?
+
+### 4. Maintainability
+- [ ] Codigo legible y auto-documentado?
+- [ ] Nombres descriptivos?
+- [ ] Funciones pequenas y enfocadas?
+- [ ] DRY - no hay duplicacion?
+- [ ] Principio de responsabilidad unica?
+
+### 5. Testing
+- [ ] Hay tests para el nuevo codigo?
+- [ ] Los tests son significativos?
+- [ ] Cubren edge cases?
+- [ ] Mocks apropiados?
+
+### 6. Project Conventions
+- [ ] Sigue el estilo del proyecto?
+- [ ] Respeta patterns de CLAUDE.md?
+- [ ] No repite errores de mistakes.md?
+</checklist>
+
+<severity_levels>
+## Niveles de Severidad
+
+| Nivel | Emoji | Accion |
+|-------|-------|--------|
+| CRITICAL | [CRITICAL] | Must fix antes de merge |
+| SUGGESTION | [SUGGESTION] | Should fix, no bloqueante |
+| NITPICK | [NITPICK] | Optional, mejora menor |
+| POSITIVE | [POSITIVE] | Lo que esta bien |
+</severity_levels>
+
+<output_format>
+## Formato de Output
+
+```markdown
+# Code Review - [branch/file]
+
+> Fecha: {{DATE}}
+> Reviewer: ELSABRO
+> Scope: {{SCOPE}}
+
+## Summary
+
+| Metrica | Valor |
+|---------|-------|
+| Files changed | 5 |
+| Lines added | +127 |
+| Lines removed | -45 |
+| Risk level | MEDIUM |
+
+---
+
+## [CRITICAL] Issues Criticos (must fix)
+
+### Missing null check in user handler
+
+**File**: `src/api/users.ts:45`
+
+```typescript
+// Current
+const name = user.profile.name
+
+// Suggested
+const name = user?.profile?.name ?? 'Unknown'
+```
+
+**Why**: Will crash if user.profile is undefined
+
+---
+
+## [SUGGESTION] Sugerencias (should fix)
+
+### Consider using early return
+
+**File**: `src/utils/validate.ts:23`
+
+```typescript
+// Current
+if (isValid) {
+  // 30 lines of code
+}
+
+// Suggested
+if (!isValid) return null
+// 30 lines of code (less nesting)
+```
+
+**Why**: Reduce nesting, improve readability
+
+---
+
+## [NITPICK] Nitpicks (optional)
+
+### Variable naming
+**File**: `src/api/users.ts:12`
+
+`data` -> `userData` for clarity
+
+---
+
+## [POSITIVE] Positives
+
+- Good error handling in API calls
+- Follows existing patterns
+- Tests included
+- Clean separation of concerns
+
+---
+
+## Checklist Summary
+
+- [x] Correctness
+- [x] Security
+- [ ] Performance - N+1 query potential in line 67
+- [x] Maintainability
+- [ ] Testing - missing edge case test
+- [x] Conventions
+
+---
+
+## Verdict
+
+**MEDIUM RISK** - Approve with suggestions
+
+Fix the critical null check before merging.
+Consider addressing the performance issue in a follow-up.
+
+---
+
+## Action Items
+
+1. [ ] Fix null check in users.ts:45
+2. [ ] Consider early return pattern in validate.ts
+3. [ ] Add test for empty user profile case
+```
+</output_format>
+
+<interactive_mode>
+## Modo Interactivo
+
+```
+Usuario: /elsabro:review
+
+Claude: "Analizando cambios...
+
+Encontre 3 archivos modificados:
+1. src/api/users.ts (+45, -12) - Risk: HIGH
+2. src/components/UserCard.tsx (+23, -5) - Risk: LOW
+3. src/hooks/useUser.ts (+18, -0) - Risk: MEDIUM
+
+Opciones:
+1. Review completo (todos los archivos)
+2. Solo el mas riesgoso (users.ts)
+3. Elegir archivos especificos
+
+Que prefieres?"
+```
+</interactive_mode>
+
+<challenge_mode>
+## Challenge Mode
+
+Cuando el usuario dice "Grill me" o "Challenge me":
+
+```
+Claude: "Ok, modo dificil activado.
+
+Voy a hacer preguntas sobre tus cambios:
+
+1. En users.ts:45, por que elegiste ese approach?
+2. Que pasa si el API devuelve null aqui?
+3. Como escala esto con 10,000 usuarios?
+4. Probaste el caso de error?
+5. Por que no usaste [alternativa]?
+
+No apruebo hasta que respondas satisfactoriamente."
+```
+</challenge_mode>
+
+<diff_analysis>
+## Analisis de Diff
+
+Mostrar before/after cuando sea util:
+
+```diff
+- const data = await fetch(url)
++ const data = await fetch(url, {
++   headers: { 'Content-Type': 'application/json' },
++   timeout: 5000
++ })
+```
+
+Evaluar:
+- Es el cambio necesario?
+- Introduce nuevos riesgos?
+- Rompe compatibilidad?
+</diff_analysis>
+
+<save_report>
+## Guardar Reporte
+
+Con flag `--save`, guardar en `.planning/REVIEW.md`:
+
+```markdown
+# Code Review History
+
+## Review: {{DATE}} - {{BRANCH}}
+
+[Contenido del review]
+
+---
+
+## Review: {{PREV_DATE}} - {{PREV_BRANCH}}
+
+[Review anterior]
+```
+
+Mantener historial de los ultimos 10 reviews.
+</save_report>
+
+<integration_memory>
+## Integracion con Memoria ELSABRO
+
+Despues del review:
+
+```
+"Encontre patterns problematicos que se repiten:
+- Falta de null checks (3 ocurrencias)
+- Console.logs en codigo (2 ocurrencias)
+
+Quieres que agregue estos a .planning/mistakes.md
+para evitarlos en el futuro?"
+```
+</integration_memory>
+
+<pre_commit_hook>
+## Pre-commit Hook
+
+Sugerir configurar hook para review automatico:
+
+```bash
+# .git/hooks/pre-commit
+#!/bin/bash
+
+# Run ELSABRO review on staged files
+claude --skill review --staged --fail-on-critical
+```
+
+Esto previene commits con issues criticos.
+</pre_commit_hook>
+
+<verdicts>
+## Posibles Veredictos
+
+| Veredicto | Cuando |
+|-----------|--------|
+| APPROVE | Sin issues criticos, codigo solido |
+| APPROVE WITH SUGGESTIONS | Issues menores, puede mergearse |
+| REQUEST CHANGES | Issues criticos que deben resolverse |
+| NEEDS DISCUSSION | Decisiones arquitectonicas pendientes |
+</verdicts>