elsabro 2.0.0

package/skills/auth-setup.md

@@ -0,0 +1,180 @@
+---
+name: auth-setup
+description: Skill para implementar autenticación en cualquier proyecto. Usa este skill cuando el usuario quiere login, registro, o manejo de usuarios.
+---
+
+# Skill: Setup de Autenticación
+
+<when_to_use>
+Usar cuando el usuario menciona:
+- "login"
+- "registro"
+- "usuarios"
+- "autenticación"
+- "cuentas"
+- "sesiones"
+- "contraseñas"
+</when_to_use>
+
+<before_starting>
+## Investigación Obligatoria
+
+**ANTES de implementar, detectar el proyecto y buscar la mejor opción:**
+
+```
+1. Detectar tipo de proyecto:
+   - Next.js → NextAuth v5
+   - Expo → expo-auth-session + Supabase/Firebase
+   - Node/Express → Passport o custom JWT
+
+2. Buscar en Context7:
+   mcp__plugin_context7_context7__resolve-library-id("nextauth")
+   mcp__plugin_context7_context7__query-docs(id, "getting started v5")
+
+3. Verificar mejores prácticas:
+   WebSearch: "authentication [framework] [año] best practices"
+```
+</before_starting>
+
+<options_by_project>
+## Opciones por Tipo de Proyecto
+
+### Next.js → NextAuth v5
+
+**Pros:**
+- Integración nativa con Next.js
+- Múltiples providers (Google, GitHub, Email)
+- Session management automático
+
+**Setup:**
+```bash
+npm install next-auth@beta
+```
+
+### Expo/React Native → Supabase Auth
+
+**Pros:**
+- SDK para React Native
+- Social login fácil
+- Sincroniza con database
+
+**Setup:**
+```bash
+npx expo install @supabase/supabase-js
+```
+
+### API/Backend → JWT Custom
+
+**Pros:**
+- Control total
+- Sin dependencias externas
+- Ligero
+
+**Librerías:**
+- `jose` para JWT (mejor que jsonwebtoken)
+- `bcrypt` para passwords
+</options_by_project>
+
+<nextauth_setup>
+## Setup NextAuth v5 (Next.js)
+
+### Paso 1: Instalar
+```bash
+npm install next-auth@beta
+```
+
+### Paso 2: Crear auth.ts
+```typescript
+// src/lib/auth.ts
+// VERIFICAR patrón actual con Context7
+import NextAuth from "next-auth"
+import Credentials from "next-auth/providers/credentials"
+
+export const { handlers, auth, signIn, signOut } = NextAuth({
+  providers: [
+    Credentials({
+      credentials: {
+        email: {},
+        password: {},
+      },
+      authorize: async (credentials) => {
+        // Verificar contra tu DB
+        // IMPLEMENTAR según tu caso
+      },
+    }),
+  ],
+})
+```
+
+### Paso 3: Crear route handler
+```typescript
+// src/app/api/auth/[...nextauth]/route.ts
+// VERIFICAR con Context7
+import { handlers } from "@/lib/auth"
+export const { GET, POST } = handlers
+```
+
+### Paso 4: Crear middleware
+```typescript
+// src/middleware.ts
+// VERIFICAR con Context7
+export { auth as middleware } from "@/lib/auth"
+
+export const config = {
+  matcher: ["/dashboard/:path*", "/api/:path*"],
+}
+```
+</nextauth_setup>
+
+<verification>
+## Verificación
+
+### Automática
+```bash
+npm run build
+```
+
+### Manual (para usuario)
+```
+Para ti (Usuario):
+
+1. Abre http://localhost:3000/login
+2. Ingresa cualquier email y contraseña
+3. Si implementaste providers (Google, etc), prueba ese botón
+
+¿Qué debería pasar?
+- Con credenciales correctas: redirige a /dashboard
+- Con credenciales incorrectas: muestra error
+- Sin sesión: /dashboard redirige a /login
+
+¿Funciona como se describe?
+```
+</verification>
+
+<common_issues>
+## Problemas Comunes
+
+### "NEXTAUTH_SECRET missing"
+- Crear en .env.local: `NEXTAUTH_SECRET=tu-secret-aleatorio`
+- Generar con: `openssl rand -base64 32`
+
+### "Callback URL not allowed"
+- Verificar NEXTAUTH_URL en .env
+- Agregar URLs permitidas en config
+
+### "Session not persisting"
+- Verificar cookies en devtools
+- Verificar que middleware está configurado
+- Verificar NEXTAUTH_URL es correcto
+</common_issues>
+
+<security_checklist>
+## Checklist de Seguridad
+
+- [ ] Passwords hasheados con bcrypt
+- [ ] HTTPS en producción
+- [ ] Tokens con expiración
+- [ ] Rate limiting en login
+- [ ] CSRF protection habilitado
+- [ ] Secrets en variables de entorno (no en código)
+</security_checklist>

package/skills/database-setup.md

@@ -0,0 +1,238 @@
+---
+name: database-setup
+description: Skill para configurar base de datos en cualquier proyecto. Usa este skill cuando el usuario quiere guardar datos, usuarios, productos, etc.
+---
+
+# Skill: Setup de Base de Datos
+
+<when_to_use>
+Usar cuando el usuario menciona:
+- "guardar datos"
+- "base de datos"
+- "usuarios" (para persistencia)
+- "productos"
+- "almacenar"
+- "database"
+- "Supabase"
+- "PostgreSQL"
+</when_to_use>
+
+<before_starting>
+## Investigación Obligatoria
+
+**ANTES de configurar, entender las necesidades:**
+
+```
+1. Preguntar al usuario:
+   - ¿Qué datos necesitas guardar?
+   - ¿Cuántos usuarios esperas?
+   - ¿Necesitas búsqueda en tiempo real?
+
+2. Decidir tipo de DB:
+   - Relacional (PostgreSQL) → Datos estructurados
+   - NoSQL (MongoDB) → Datos flexibles
+   - Serverless (Supabase/PlanetScale) → Sin administración
+
+3. Buscar en Context7:
+   mcp__plugin_context7_context7__resolve-library-id("prisma")
+   mcp__plugin_context7_context7__query-docs(id, "getting started")
+```
+</before_starting>
+
+<recommended_stack>
+## Stack Recomendado
+
+### Para la mayoría de proyectos:
+
+| Necesidad | Solución | Por qué |
+|-----------|----------|---------|
+| ORM | Prisma | Type-safe, migrations fáciles |
+| Database | Supabase (PostgreSQL) | Gratis para empezar, escala |
+| Alternativa | PlanetScale (MySQL) | Serverless, branching |
+</recommended_stack>
+
+<prisma_setup>
+## Setup Prisma + Supabase
+
+### Paso 1: Instalar Prisma
+```bash
+npm install prisma @prisma/client
+npx prisma init
+```
+
+### Paso 2: Configurar DATABASE_URL
+```bash
+# .env
+DATABASE_URL="postgresql://postgres:[PASSWORD]@[HOST]:5432/postgres"
+```
+
+Para Supabase:
+1. Ir a supabase.com
+2. Crear proyecto
+3. Settings → Database → Connection string
+
+### Paso 3: Crear schema
+```prisma
+// prisma/schema.prisma
+// VERIFICAR sintaxis actual con Context7
+
+generator client {
+  provider = "prisma-client-js"
+}
+
+datasource db {
+  provider = "postgresql"
+  url      = env("DATABASE_URL")
+}
+
+model User {
+  id        String   @id @default(cuid())
+  email     String   @unique
+  name      String?
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+}
+```
+
+### Paso 4: Crear migración
+```bash
+npx prisma migrate dev --name init
+```
+
+### Paso 5: Generar client
+```bash
+npx prisma generate
+```
+
+### Paso 6: Usar en código
+```typescript
+// src/lib/db.ts
+// VERIFICAR patrón actual con Context7
+
+import { PrismaClient } from '@prisma/client'
+
+const globalForPrisma = globalThis as unknown as {
+  prisma: PrismaClient | undefined
+}
+
+export const prisma = globalForPrisma.prisma ?? new PrismaClient()
+
+if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma
+```
+</prisma_setup>
+
+<supabase_setup>
+## Setup Supabase (Alternativo)
+
+Si prefieres usar el SDK de Supabase directamente:
+
+### Paso 1: Instalar
+```bash
+npm install @supabase/supabase-js
+```
+
+### Paso 2: Configurar client
+```typescript
+// src/lib/supabase.ts
+// VERIFICAR con Context7
+
+import { createClient } from '@supabase/supabase-js'
+
+const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!
+const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
+
+export const supabase = createClient(supabaseUrl, supabaseKey)
+```
+
+### Paso 3: Variables de entorno
+```bash
+# .env.local
+NEXT_PUBLIC_SUPABASE_URL=https://xxx.supabase.co
+NEXT_PUBLIC_SUPABASE_ANON_KEY=xxx
+```
+</supabase_setup>
+
+<verification>
+## Verificación
+
+### Automática
+```bash
+# Verificar conexión
+npx prisma db pull
+
+# Verificar schema
+npx prisma validate
+
+# Ver datos (opcional)
+npx prisma studio
+```
+
+### Manual (para usuario)
+```
+Para ti (Usuario):
+
+1. Ejecuta: npx prisma studio
+2. Se abre una ventana en tu navegador
+3. Deberías ver las tablas de tu base de datos
+
+¿Lo ves?
+- SÍ → La base de datos está conectada
+- NO → Verifica DATABASE_URL en .env
+```
+</verification>
+
+<common_patterns>
+## Patrones Comunes
+
+### Crear registro
+```typescript
+const user = await prisma.user.create({
+  data: {
+    email: 'test@example.com',
+    name: 'Test User'
+  }
+})
+```
+
+### Buscar registros
+```typescript
+const users = await prisma.user.findMany({
+  where: {
+    email: { contains: '@example.com' }
+  }
+})
+```
+
+### Actualizar registro
+```typescript
+const user = await prisma.user.update({
+  where: { id: 'xxx' },
+  data: { name: 'New Name' }
+})
+```
+
+### Eliminar registro
+```typescript
+await prisma.user.delete({
+  where: { id: 'xxx' }
+})
+```
+</common_patterns>
+
+<common_issues>
+## Problemas Comunes
+
+### "Can't reach database server"
+- Verificar DATABASE_URL
+- Verificar que la DB está corriendo
+- Verificar firewall/whitelist IP en Supabase
+
+### "Migration failed"
+- Verificar permisos en la DB
+- Verificar que schema es válido
+- Probar: `npx prisma migrate reset` (BORRA DATOS)
+
+### "Prisma Client not generated"
+- Ejecutar: `npx prisma generate`
+- Reiniciar TypeScript server en VS Code
+</common_issues>

package/skills/expo-app.md

@@ -0,0 +1,261 @@
+---
+name: expo-app
+description: Skill para crear aplicaciones móviles con Expo/React Native. Usa este skill cuando el usuario quiere crear una app para celular (iOS/Android).
+---
+
+# Skill: Crear App Expo (React Native)
+
+<when_to_use>
+Usar cuando el usuario menciona:
+- "app para celular"
+- "app móvil"
+- "iOS"
+- "Android"
+- "React Native"
+- "app nativa"
+- "aplicación móvil"
+</when_to_use>
+
+<before_starting>
+## Investigación Obligatoria
+
+**ANTES de crear cualquier archivo, verificar versiones actuales:**
+
+```
+1. Resolver Expo:
+   mcp__plugin_context7_context7__resolve-library-id("expo")
+
+2. Buscar setup actual:
+   mcp__plugin_context7_context7__query-docs(id, "create expo app getting started")
+
+3. Verificar Expo Router:
+   mcp__plugin_context7_context7__query-docs(id, "expo router installation")
+
+4. Verificar NativeWind (Tailwind for RN):
+   mcp__plugin_context7_context7__resolve-library-id("nativewind")
+   mcp__plugin_context7_context7__query-docs(id, "installation expo")
+```
+</before_starting>
+
+<standard_stack>
+## Stack Estándar (Verificar con Context7)
+
+| Tecnología | Propósito | Verificar |
+|------------|-----------|-----------|
+| Expo SDK 52+ | Framework React Native | Context7 |
+| React Native 0.76+ | UI móvil | Context7 |
+| Expo Router | Navegación file-based | Context7 |
+| TypeScript | Type safety | Context7 |
+| NativeWind | Estilos (Tailwind) | Context7 |
+</standard_stack>
+
+<project_structure>
+## Estructura de Proyecto
+
+```
+my-app/
+├── app/                        # Expo Router (file-based routing)
+│   ├── _layout.tsx             # Layout raíz
+│   ├── index.tsx               # Pantalla de inicio
+│   ├── (tabs)/                 # Grupo de tabs
+│   │   ├── _layout.tsx         # Tab navigator
+│   │   ├── home.tsx            # Tab Home
+│   │   └── profile.tsx         # Tab Profile
+│   └── [dynamic]/              # Rutas dinámicas
+├── components/
+│   ├── ui/                     # Componentes base
+│   └── [feature]/              # Componentes por feature
+├── lib/                        # Utilidades
+├── assets/                     # Imágenes, fonts
+├── package.json
+├── app.json                    # Config de Expo
+├── tsconfig.json
+└── tailwind.config.js
+```
+</project_structure>
+
+<setup_steps>
+## Pasos de Setup
+
+### Paso 1: Crear proyecto
+```bash
+# Verificar comando actual con Context7 antes de ejecutar
+npx create-expo-app@latest my-app --template tabs
+cd my-app
+```
+
+### Paso 2: Verificar que funciona
+```bash
+npx expo start
+# Escanear QR con Expo Go app o usar simulador
+```
+
+### Paso 3: Agregar NativeWind (Tailwind)
+```bash
+# Verificar instalación actual con Context7
+npm install nativewind tailwindcss
+npx tailwindcss init
+```
+
+### Paso 4: Configurar NativeWind
+```javascript
+// tailwind.config.js - VERIFICAR con Context7
+module.exports = {
+  content: ["./app/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"],
+  presets: [require("nativewind/preset")],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+```
+
+### Paso 5: Configurar babel
+```javascript
+// babel.config.js - VERIFICAR con Context7
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: [
+      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
+      "nativewind/babel",
+    ],
+  };
+};
+```
+</setup_steps>
+
+<common_patterns>
+## Patrones Comunes (Verificar con Context7)
+
+### Layout con Tabs
+```typescript
+// app/(tabs)/_layout.tsx
+// VERIFICAR Expo Router tabs pattern con Context7
+```
+
+### Pantalla con Lista
+```typescript
+// app/[route].tsx
+// VERIFICAR FlatList pattern con Context7
+```
+
+### Navegación Stack
+```typescript
+// app/_layout.tsx
+// VERIFICAR Stack navigation pattern con Context7
+```
+
+### Componente con Estilos NativeWind
+```typescript
+// components/Button.tsx
+// VERIFICAR NativeWind className usage con Context7
+```
+</common_patterns>
+
+<verification>
+## Verificación
+
+Antes de continuar, confirmar:
+
+1. **Metro bundler funciona:**
+   ```bash
+   npx expo start
+   ```
+
+2. **App carga en dispositivo/simulador:**
+   - Expo Go app
+   - iOS Simulator
+   - Android Emulator
+
+3. **TypeScript sin errores:**
+   ```bash
+   npx tsc --noEmit
+   ```
+
+4. **Usuario confirma:**
+   "¿Puedes ver la app en tu celular/simulador?"
+</verification>
+
+<user_testing>
+## Guía de Prueba para Usuario
+
+Si la IA no puede verificar algo, dar instrucciones claras:
+
+```
+Para ti (Usuario):
+
+OPCIÓN A - Con tu celular:
+1. Descarga "Expo Go" de la App Store/Play Store
+2. Escanea el código QR que aparece en la terminal
+3. La app debería abrirse en tu celular
+
+OPCIÓN B - Con simulador:
+1. Presiona 'i' para iOS Simulator (necesitas Mac)
+2. Presiona 'a' para Android Emulator
+
+¿Puedes ver la app?
+- SÍ → Todo funciona, continuamos
+- NO → Dime qué ves y te ayudo
+```
+</user_testing>
+
+<common_issues>
+## Problemas Comunes
+
+### "Unable to resolve module"
+- Limpiar cache: `npx expo start --clear`
+- Verificar que la dependencia está instalada
+- Verificar imports
+
+### "Metro bundler error"
+- Cerrar otras instancias de Metro
+- Limpiar: `npx expo start --clear`
+- Reinstalar node_modules
+
+### "App crashes on start"
+- Revisar logs en terminal
+- Verificar que no usas APIs web-only
+- Verificar configuración de babel/metro
+
+### "NativeWind styles not working"
+- Verificar babel.config.js
+- Verificar tailwind.config.js content paths
+- Reiniciar Metro con --clear
+
+### "Expo Go can't connect"
+- Verificar que estás en la misma red WiFi
+- Probar con tunnel: `npx expo start --tunnel`
+</common_issues>
+
+<development_options>
+## Opciones de Desarrollo
+
+### Expo Go (Más fácil)
+- Sin necesidad de instalar Xcode/Android Studio
+- Limitado a APIs de Expo
+- Ideal para prototipos
+
+### Development Build (Más potente)
+- Necesita Xcode/Android Studio
+- Acceso a cualquier librería nativa
+- Necesario para producción
+
+### EAS Build (En la nube)
+- Builds en servidores de Expo
+- Sin necesidad de configurar ambientes locales
+- Costo por builds
+</development_options>
+
+<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 notificaciones push:** → Buscar en Context7 "expo notifications"
+4. **Si necesita monitoreo:** → @skills/sentry-setup.md
+
+O continuar con `/elsabro:plan` para planificar las features.
+</next_steps>