elsabro 2.0.0

package/skills/nextjs-app.md

@@ -0,0 +1,206 @@
+---
+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.
+---
+
+# Skill: Crear App Next.js
+
+<when_to_use>
+Usar cuando el usuario menciona:
+- "página web"
+- "sitio web"
+- "aplicación web"
+- "dashboard"
+- "admin panel"
+- "landing page"
+- "e-commerce"
+- "blog"
+</when_to_use>
+
+<before_starting>
+## Investigación Obligatoria
+
+**ANTES de crear cualquier archivo, verificar versiones actuales:**
+
+```
+1. Resolver Next.js:
+   mcp__plugin_context7_context7__resolve-library-id("next.js")
+
+2. Buscar setup actual:
+   mcp__plugin_context7_context7__query-docs(id, "getting started app router")
+
+3. Verificar TypeScript config:
+   mcp__plugin_context7_context7__query-docs(id, "typescript configuration")
+
+4. Verificar Tailwind setup:
+   mcp__plugin_context7_context7__resolve-library-id("tailwindcss")
+   mcp__plugin_context7_context7__query-docs(id, "installation next.js")
+```
+</before_starting>
+
+<standard_stack>
+## Stack Estándar (Verificar con Context7)
+
+| Tecnología | Propósito | Verificar |
+|------------|-----------|-----------|
+| Next.js 15+ | Framework React | Context7 |
+| TypeScript | Type safety | Context7 |
+| Tailwind CSS 4 | Estilos | Context7 |
+| App Router | Routing | Context7 |
+| Server Components | Rendimiento | Context7 |
+</standard_stack>
+
+<project_structure>
+## Estructura de Proyecto
+
+```
+my-app/
+├── src/
+│   ├── app/                    # App Router
+│   │   ├── layout.tsx          # Layout principal
+│   │   ├── page.tsx            # Página de inicio
+│   │   ├── globals.css         # Estilos globales
+│   │   └── (routes)/           # Rutas agrupadas
+│   ├── components/
+│   │   ├── ui/                 # Componentes base (Button, Input, etc.)
+│   │   └── [feature]/          # Componentes por feature
+│   ├── lib/                    # Utilidades y helpers
+│   └── types/                  # TypeScript types
+├── public/                     # Assets estáticos
+├── package.json
+├── tsconfig.json
+├── tailwind.config.ts
+└── next.config.ts
+```
+</project_structure>
+
+<setup_steps>
+## Pasos de Setup
+
+### Paso 1: Crear proyecto
+```bash
+# Verificar comando actual con Context7 antes de ejecutar
+npx create-next-app@latest my-app --typescript --tailwind --eslint --app --src-dir
+```
+
+### Paso 2: Verificar que funciona
+```bash
+cd my-app
+npm run dev
+# Debe abrir http://localhost:3000
+```
+
+### Paso 3: Limpiar boilerplate
+- Eliminar contenido de `src/app/page.tsx`
+- Simplificar `src/app/globals.css`
+- Crear estructura de carpetas
+
+### Paso 4: Configurar para el proyecto
+Basado en lo que el usuario quiere crear, agregar:
+- Rutas necesarias
+- Componentes base
+- Configuración de Tailwind personalizada
+</setup_steps>
+
+<common_patterns>
+## Patrones Comunes (Verificar con Context7)
+
+### Layout con Sidebar
+```typescript
+// src/app/layout.tsx
+// VERIFICAR patrón actual con Context7 antes de usar
+```
+
+### Página con Data Fetching
+```typescript
+// src/app/[route]/page.tsx
+// VERIFICAR Server Components pattern con Context7
+```
+
+### API Route
+```typescript
+// src/app/api/[route]/route.ts
+// VERIFICAR Route Handlers pattern con Context7
+```
+
+### Client Component
+```typescript
+// src/components/[name].tsx
+// VERIFICAR "use client" directive con Context7
+```
+</common_patterns>
+
+<verification>
+## Verificación
+
+Antes de continuar, confirmar:
+
+1. **Build funciona:**
+   ```bash
+   npm run build
+   ```
+
+2. **Dev server funciona:**
+   ```bash
+   npm run dev
+   # Abrir http://localhost:3000
+   ```
+
+3. **TypeScript sin errores:**
+   ```bash
+   npx tsc --noEmit
+   ```
+
+4. **Usuario confirma:**
+   "¿Puedes ver la página en http://localhost:3000?"
+</verification>
+
+<user_testing>
+## Guía de Prueba para Usuario
+
+Si la IA no puede verificar algo, dar instrucciones claras:
+
+```
+Para ti (Usuario):
+
+1. Abre tu navegador
+2. Ve a http://localhost:3000
+3. Deberías ver [descripción de lo esperado]
+
+¿Lo ves?
+- SÍ → Todo funciona, continuamos
+- NO → Dime qué ves y te ayudo
+```
+</user_testing>
+
+<common_issues>
+## Problemas Comunes
+
+### "Module not found"
+- Verificar que las dependencias están instaladas
+- Verificar imports relativos vs absolutos
+- Verificar configuración de paths en tsconfig.json
+
+### "Hydration mismatch"
+- Server y Client renderizan diferente
+- Verificar uso correcto de "use client"
+- Verificar que no usas APIs de browser en Server Components
+
+### "Build failed"
+- Ejecutar `npm run lint` para ver errores
+- Verificar TypeScript con `npx tsc --noEmit`
+- Buscar error específico con WebSearch
+</common_issues>
+
+<next_steps>
+## Después del Setup
+
+Una vez que el proyecto base funciona:
+
+1. **Si necesita autenticación:** → @skills/auth-setup.md
+2. **Si necesita base de datos:** → @skills/database-setup.md
+3. **Si necesita pagos:** → @skills/payments-setup.md
+4. **Si necesita monitoreo:** → @skills/sentry-setup.md
+
+O continuar con `/elsabro:plan` para planificar las features.
+</next_steps>

package/skills/payments-setup.md

@@ -0,0 +1,421 @@
+---
+name: payments-setup
+description: Skill para integrar pagos en cualquier proyecto. Usa este skill cuando el usuario quiere cobrar, vender, suscripciones, o Stripe.
+---
+
+# Skill: Setup de Pagos
+
+<when_to_use>
+Usar cuando el usuario menciona:
+- "pagos"
+- "cobrar"
+- "vender"
+- "suscripción"
+- "Stripe"
+- "checkout"
+- "carrito de compras"
+- "e-commerce"
+</when_to_use>
+
+<before_starting>
+## Investigación Obligatoria
+
+**ANTES de implementar pagos, entender las necesidades:**
+
+```
+1. Preguntar al usuario:
+   - ¿Qué vas a vender? (productos, suscripciones, servicios)
+   - ¿Necesitas pagos recurrentes?
+   - ¿En qué países vas a operar?
+
+2. Decidir modelo:
+   - Pago único → Stripe Checkout
+   - Suscripciones → Stripe Billing
+   - Marketplace → Stripe Connect
+
+3. Buscar en Context7:
+   mcp__plugin_context7_context7__resolve-library-id("stripe")
+   mcp__plugin_context7_context7__query-docs(id, "checkout session")
+```
+</before_starting>
+
+<recommended_stack>
+## Stack Recomendado
+
+### Para la mayoría de proyectos: Stripe
+
+| Necesidad | Solución Stripe | Por qué |
+|-----------|-----------------|---------|
+| Pago único | Checkout | Hosted, PCI compliant |
+| Suscripciones | Billing | Maneja todo automáticamente |
+| Marketplace | Connect | Multi-vendor |
+
+### Alternativas
+
+| Proveedor | Cuándo Usar |
+|-----------|-------------|
+| Paddle | SaaS, impuestos automáticos |
+| Lemonsqueezy | Productos digitales |
+| PayPal | Audiencia que lo prefiere |
+</recommended_stack>
+
+<stripe_setup>
+## Setup Stripe (Recomendado)
+
+### Paso 1: Crear cuenta Stripe
+
+```
+Para ti (Usuario):
+
+1. Ve a https://stripe.com
+2. Crea una cuenta
+3. Ve a Developers → API Keys
+4. Copia la "Secret key" (empieza con sk_test_)
+5. Copia la "Publishable key" (empieza con pk_test_)
+```
+
+### Paso 2: Instalar SDK
+
+```bash
+npm install stripe @stripe/stripe-js
+```
+
+### Paso 3: Configurar variables de entorno
+
+```bash
+# .env.local
+STRIPE_SECRET_KEY=sk_test_xxx
+NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_xxx
+STRIPE_WEBHOOK_SECRET=whsec_xxx
+```
+
+### Paso 4: Crear cliente servidor
+
+```typescript
+// src/lib/stripe.ts
+// VERIFICAR con Context7
+
+import Stripe from 'stripe'
+
+export const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
+  apiVersion: '2024-11-20.acacia', // Verificar versión actual
+  typescript: true,
+})
+```
+
+### Paso 5: Crear cliente frontend
+
+```typescript
+// src/lib/stripe-client.ts
+
+import { loadStripe } from '@stripe/stripe-js'
+
+export const stripePromise = loadStripe(
+  process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!
+)
+```
+</stripe_setup>
+
+<checkout_implementation>
+## Implementar Checkout (Pago Único)
+
+### Paso 1: Crear endpoint de checkout
+
+```typescript
+// src/app/api/checkout/route.ts
+// VERIFICAR con Context7
+
+import { stripe } from '@/lib/stripe'
+import { NextResponse } from 'next/server'
+
+export async function POST(request: Request) {
+  const { priceId, quantity = 1 } = await request.json()
+
+  const session = await stripe.checkout.sessions.create({
+    mode: 'payment',
+    payment_method_types: ['card'],
+    line_items: [
+      {
+        price: priceId,
+        quantity,
+      },
+    ],
+    success_url: `${process.env.NEXT_PUBLIC_URL}/success?session_id={CHECKOUT_SESSION_ID}`,
+    cancel_url: `${process.env.NEXT_PUBLIC_URL}/cancel`,
+  })
+
+  return NextResponse.json({ url: session.url })
+}
+```
+
+### Paso 2: Botón de compra
+
+```typescript
+// src/components/BuyButton.tsx
+'use client'
+
+import { useState } from 'react'
+
+export function BuyButton({ priceId }: { priceId: string }) {
+  const [loading, setLoading] = useState(false)
+
+  const handleClick = async () => {
+    setLoading(true)
+
+    const response = await fetch('/api/checkout', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ priceId }),
+    })
+
+    const { url } = await response.json()
+    window.location.href = url
+  }
+
+  return (
+    <button onClick={handleClick} disabled={loading}>
+      {loading ? 'Procesando...' : 'Comprar'}
+    </button>
+  )
+}
+```
+
+### Paso 3: Página de éxito
+
+```typescript
+// src/app/success/page.tsx
+
+export default async function SuccessPage({
+  searchParams,
+}: {
+  searchParams: { session_id: string }
+}) {
+  return (
+    <div>
+      <h1>¡Gracias por tu compra!</h1>
+      <p>Tu pago fue procesado exitosamente.</p>
+    </div>
+  )
+}
+```
+</checkout_implementation>
+
+<subscription_implementation>
+## Implementar Suscripciones
+
+### Paso 1: Crear producto en Stripe Dashboard
+
+```
+Para ti (Usuario):
+
+1. Ve a Stripe Dashboard → Products
+2. Click "Add product"
+3. Nombre: Tu plan (ej: "Pro")
+4. Precio: Selecciona "Recurring"
+5. Configura el precio mensual/anual
+6. Copia el Price ID (empieza con price_)
+```
+
+### Paso 2: Endpoint de suscripción
+
+```typescript
+// src/app/api/subscribe/route.ts
+
+import { stripe } from '@/lib/stripe'
+import { NextResponse } from 'next/server'
+
+export async function POST(request: Request) {
+  const { priceId, customerId } = await request.json()
+
+  const session = await stripe.checkout.sessions.create({
+    mode: 'subscription',
+    customer: customerId, // Opcional: si ya tienes el customer
+    payment_method_types: ['card'],
+    line_items: [
+      {
+        price: priceId,
+        quantity: 1,
+      },
+    ],
+    success_url: `${process.env.NEXT_PUBLIC_URL}/dashboard?subscribed=true`,
+    cancel_url: `${process.env.NEXT_PUBLIC_URL}/pricing`,
+  })
+
+  return NextResponse.json({ url: session.url })
+}
+```
+
+### Paso 3: Portal del cliente (cancelar/modificar)
+
+```typescript
+// src/app/api/portal/route.ts
+
+import { stripe } from '@/lib/stripe'
+import { NextResponse } from 'next/server'
+
+export async function POST(request: Request) {
+  const { customerId } = await request.json()
+
+  const session = await stripe.billingPortal.sessions.create({
+    customer: customerId,
+    return_url: `${process.env.NEXT_PUBLIC_URL}/dashboard`,
+  })
+
+  return NextResponse.json({ url: session.url })
+}
+```
+</subscription_implementation>
+
+<webhooks>
+## Webhooks (Importante)
+
+### Por qué necesitas webhooks
+Stripe notifica a tu app cuando:
+- Un pago es exitoso
+- Una suscripción se cancela
+- Un pago falla
+- etc.
+
+### Paso 1: Crear endpoint de webhook
+
+```typescript
+// src/app/api/webhooks/stripe/route.ts
+// VERIFICAR con Context7
+
+import { stripe } from '@/lib/stripe'
+import { headers } from 'next/headers'
+import { NextResponse } from 'next/server'
+
+export async function POST(request: Request) {
+  const body = await request.text()
+  const signature = headers().get('stripe-signature')!
+
+  let event
+
+  try {
+    event = stripe.webhooks.constructEvent(
+      body,
+      signature,
+      process.env.STRIPE_WEBHOOK_SECRET!
+    )
+  } catch (err) {
+    return NextResponse.json(
+      { error: 'Webhook signature verification failed' },
+      { status: 400 }
+    )
+  }
+
+  switch (event.type) {
+    case 'checkout.session.completed':
+      const session = event.data.object
+      // Actualizar base de datos
+      // Enviar email de confirmación
+      break
+
+    case 'customer.subscription.deleted':
+      // Manejar cancelación
+      break
+
+    case 'invoice.payment_failed':
+      // Notificar al usuario
+      break
+  }
+
+  return NextResponse.json({ received: true })
+}
+```
+
+### Paso 2: Configurar webhook en Stripe
+
+```
+Para ti (Usuario):
+
+En desarrollo:
+1. Instala Stripe CLI: brew install stripe/stripe-cli/stripe
+2. Login: stripe login
+3. Escuchar eventos: stripe listen --forward-to localhost:3000/api/webhooks/stripe
+4. Copia el webhook secret que aparece
+
+En producción:
+1. Ve a Stripe Dashboard → Webhooks
+2. Add endpoint
+3. URL: https://tu-dominio.com/api/webhooks/stripe
+4. Selecciona eventos a escuchar
+5. Copia el signing secret
+```
+</webhooks>
+
+<verification>
+## Verificación
+
+### Con Stripe CLI
+```bash
+# Simular pago exitoso
+stripe trigger checkout.session.completed
+
+# Ver logs
+stripe logs tail
+```
+
+### Manual (para usuario)
+```
+Para ti (Usuario):
+
+1. Abre tu app
+2. Click en el botón de comprar
+3. Usa la tarjeta de prueba: 4242 4242 4242 4242
+4. Fecha: cualquier fecha futura
+5. CVC: cualquier número
+
+¿Qué debería pasar?
+- Se abre la página de Stripe
+- Puedes ingresar la tarjeta de prueba
+- Al pagar, vuelves a tu página de éxito
+
+¿Funcionó?
+```
+</verification>
+
+<test_cards>
+## Tarjetas de Prueba
+
+| Número | Resultado |
+|--------|-----------|
+| 4242 4242 4242 4242 | Pago exitoso |
+| 4000 0000 0000 0002 | Tarjeta declinada |
+| 4000 0000 0000 3220 | Requiere autenticación |
+
+Usa cualquier:
+- Fecha de expiración futura
+- CVC de 3 dígitos
+- Código postal válido
+</test_cards>
+
+<security_checklist>
+## Checklist de Seguridad
+
+- [ ] Secret key solo en servidor (nunca en frontend)
+- [ ] Webhook signature verificada
+- [ ] HTTPS en producción
+- [ ] Precios definidos en Stripe (no enviados desde frontend)
+- [ ] Validar session_id antes de dar acceso
+- [ ] Manejar webhooks idempotentemente
+</security_checklist>
+
+<common_issues>
+## Problemas Comunes
+
+### "No such price"
+- Verificar que el priceId existe en Stripe
+- Verificar que estás usando las keys correctas (test vs live)
+
+### "Webhook signature verification failed"
+- Verificar STRIPE_WEBHOOK_SECRET
+- En desarrollo: usar el secret del CLI
+- Asegurar que el body no fue modificado
+
+### "Invalid API Key"
+- Verificar que STRIPE_SECRET_KEY está configurado
+- Verificar que no hay espacios extra
+- Verificar test vs live mode
+</common_issues>