elsabro 2.1.0 → 2.2.0

package/skills/expo-app.md

@@ -1,6 +1,15 @@
 ---
 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).
+tags:
+  - mobile
+  - react-native
+  - expo
+  - ios
+  - android
+  - typescript
+difficulty: intermediate
+estimated_time: 30-45 min
 ---
 
 # Skill: Crear App Expo (React Native)
@@ -16,6 +25,30 @@ Usar cuando el usuario menciona:
 - "aplicación móvil"
 </when_to_use>
 
+<pre_requisites>
+## Pre-requisitos
+
+### Conocimientos
+- JavaScript/TypeScript basico
+- React fundamentals (components, hooks, state)
+- Terminal/CLI basico
+
+### Software
+- Node.js 20+ LTS
+- npm o yarn
+- Editor de codigo (VS Code recomendado)
+
+### Para desarrollo movil
+- **iOS:** Mac con Xcode 15+ (opcional, puede usar Expo Go)
+- **Android:** Android Studio con emulador (opcional, puede usar Expo Go)
+- **Expo Go app** en tu celular (recomendado para empezar)
+
+### Cuentas (opcionales para empezar)
+- Cuenta de Expo (gratis) para EAS Build
+- Apple Developer ($99/year) para publicar en App Store
+- Google Play Developer ($25 una vez) para publicar en Play Store
+</pre_requisites>
+
 <before_starting>
 ## Investigación Obligatoria
 
@@ -42,8 +75,8 @@ Usar cuando el usuario menciona:
 
 | Tecnología | Propósito | Verificar |
 |------------|-----------|-----------|
-| Expo SDK 52+ | Framework React Native | Context7 |
-| React Native 0.76+ | UI móvil | Context7 |
+| Expo SDK 52.x | Framework React Native | Context7 |
+| React Native 0.76.x | UI movil | Context7 |
 | Expo Router | Navegación file-based | Context7 |
 | TypeScript | Type safety | Context7 |
 | NativeWind | Estilos (Tailwind) | Context7 |

package/skills/full-stack-app.md

@@ -0,0 +1,543 @@
+---
+name: full-stack-app
+description: Crear aplicacion full-stack completa con Next.js 15, React 19, Tailwind CSS, Prisma y PostgreSQL. Incluye autenticacion con NextAuth v5 y deploy a Vercel.
+tags: [nextjs, react, tailwind, prisma, postgresql, nextauth, vercel, fullstack]
+difficulty: intermediate
+estimated_time: 30min
+---
+
+# Skill: Full-Stack App
+
+<when_to_use>
+Usar cuando el usuario menciona:
+- "crear app full-stack"
+- "aplicacion web completa"
+- "app con base de datos"
+- "proyecto Next.js con auth"
+- "webapp con backend"
+</when_to_use>
+
+<pre_requisites>
+## Pre-requisitos
+
+- Node.js 20+
+- PostgreSQL (local o Neon/Supabase)
+- Cuenta de Vercel (para deploy)
+</pre_requisites>
+
+<tech_stack>
+## Stack Tecnologico
+
+| Categoria | Tecnologia | Version |
+|-----------|------------|---------|
+| Framework | Next.js | 15.x |
+| UI | React | 19.x |
+| Styling | Tailwind CSS | 4.x |
+| ORM | Prisma | 6.x |
+| Database | PostgreSQL | 16.x |
+| Auth | NextAuth.js | 5.x |
+| Deploy | Vercel | - |
+</tech_stack>
+
+<project_structure>
+## Estructura de Proyecto
+
+```
+my-app/
+├── src/
+│   ├── app/
+│   │   ├── (auth)/
+│   │   │   ├── login/page.tsx
+│   │   │   └── register/page.tsx
+│   │   ├── (dashboard)/
+│   │   │   ├── layout.tsx
+│   │   │   └── page.tsx
+│   │   ├── api/
+│   │   │   └── [...nextauth]/route.ts
+│   │   ├── layout.tsx
+│   │   ├── page.tsx
+│   │   └── globals.css
+│   ├── components/
+│   │   ├── ui/
+│   │   │   ├── button.tsx
+│   │   │   ├── input.tsx
+│   │   │   └── card.tsx
+│   │   └── providers.tsx
+│   ├── lib/
+│   │   ├── auth.ts
+│   │   ├── db.ts
+│   │   └── utils.ts
+│   └── actions/
+│       └── user.ts
+├── prisma/
+│   └── schema.prisma
+├── public/
+├── .env.local
+├── next.config.ts
+├── tailwind.config.ts
+├── tsconfig.json
+└── package.json
+```
+</project_structure>
+
+<setup_steps>
+## Pasos de Setup
+
+### Paso 1: Crear proyecto Next.js
+
+```bash
+npx create-next-app@latest my-app --typescript --tailwind --eslint --app --src-dir --import-alias "@/*"
+cd my-app
+```
+
+### Paso 2: Instalar dependencias
+
+```bash
+npm install prisma @prisma/client next-auth@beta bcryptjs
+npm install -D @types/bcryptjs
+```
+
+### Paso 3: Configurar Prisma
+
+```bash
+npx prisma init
+```
+
+Editar `prisma/schema.prisma`:
+
+```prisma
+generator client {
+  provider = "prisma-client-js"
+}
+
+datasource db {
+  provider = "postgresql"
+  url      = env("DATABASE_URL")
+}
+
+model User {
+  id            String    @id @default(cuid())
+  name          String?
+  email         String    @unique
+  emailVerified DateTime?
+  password      String?
+  image         String?
+  accounts      Account[]
+  sessions      Session[]
+  createdAt     DateTime  @default(now())
+  updatedAt     DateTime  @updatedAt
+}
+
+model Account {
+  id                String  @id @default(cuid())
+  userId            String
+  type              String
+  provider          String
+  providerAccountId String
+  refresh_token     String? @db.Text
+  access_token      String? @db.Text
+  expires_at        Int?
+  token_type        String?
+  scope             String?
+  id_token          String? @db.Text
+  session_state     String?
+  user              User    @relation(fields: [userId], references: [id], onDelete: Cascade)
+
+  @@unique([provider, providerAccountId])
+}
+
+model Session {
+  id           String   @id @default(cuid())
+  sessionToken String   @unique
+  userId       String
+  expires      DateTime
+  user         User     @relation(fields: [userId], references: [id], onDelete: Cascade)
+}
+```
+
+### Paso 4: Configurar variables de entorno
+
+Crear `.env.local`:
+
+```env
+DATABASE_URL="postgresql://user:password@localhost:5432/myapp"
+NEXTAUTH_SECRET="tu-secret-super-seguro-generado-con-openssl"
+NEXTAUTH_URL="http://localhost:3000"
+```
+
+### Paso 5: Crear cliente de base de datos
+
+Crear `src/lib/db.ts`:
+
+```typescript
+import { PrismaClient } from "@prisma/client";
+
+const globalForPrisma = globalThis as unknown as {
+  prisma: PrismaClient | undefined;
+};
+
+export const db = globalForPrisma.prisma ?? new PrismaClient();
+
+if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = db;
+```
+
+### Paso 6: Configurar NextAuth
+
+Crear `src/lib/auth.ts`:
+
+```typescript
+import NextAuth from "next-auth";
+import Credentials from "next-auth/providers/credentials";
+import { PrismaAdapter } from "@auth/prisma-adapter";
+import bcrypt from "bcryptjs";
+import { db } from "./db";
+
+export const { handlers, signIn, signOut, auth } = NextAuth({
+  adapter: PrismaAdapter(db),
+  session: { strategy: "jwt" },
+  pages: {
+    signIn: "/login",
+  },
+  providers: [
+    Credentials({
+      credentials: {
+        email: { label: "Email", type: "email" },
+        password: { label: "Password", type: "password" },
+      },
+      async authorize(credentials) {
+        if (!credentials?.email || !credentials?.password) {
+          return null;
+        }
+
+        const user = await db.user.findUnique({
+          where: { email: credentials.email as string },
+        });
+
+        if (!user || !user.password) {
+          return null;
+        }
+
+        const isValid = await bcrypt.compare(
+          credentials.password as string,
+          user.password
+        );
+
+        if (!isValid) {
+          return null;
+        }
+
+        return {
+          id: user.id,
+          email: user.email,
+          name: user.name,
+        };
+      },
+    }),
+  ],
+  callbacks: {
+    async jwt({ token, user }) {
+      if (user) {
+        token.id = user.id;
+      }
+      return token;
+    },
+    async session({ session, token }) {
+      if (session.user) {
+        session.user.id = token.id as string;
+      }
+      return session;
+    },
+  },
+});
+```
+
+### Paso 7: Crear API route de NextAuth
+
+Crear `src/app/api/auth/[...nextauth]/route.ts`:
+
+```typescript
+import { handlers } from "@/lib/auth";
+
+export const { GET, POST } = handlers;
+```
+
+### Paso 8: Crear Server Actions
+
+Crear `src/actions/user.ts`:
+
+```typescript
+"use server";
+
+import { db } from "@/lib/db";
+import { signIn } from "@/lib/auth";
+import bcrypt from "bcryptjs";
+import { redirect } from "next/navigation";
+
+export async function register(formData: FormData) {
+  const email = formData.get("email") as string;
+  const password = formData.get("password") as string;
+  const name = formData.get("name") as string;
+
+  if (!email || !password) {
+    return { error: "Email y password son requeridos" };
+  }
+
+  const exists = await db.user.findUnique({ where: { email } });
+  if (exists) {
+    return { error: "El usuario ya existe" };
+  }
+
+  const hashedPassword = await bcrypt.hash(password, 10);
+
+  await db.user.create({
+    data: {
+      email,
+      password: hashedPassword,
+      name,
+    },
+  });
+
+  redirect("/login");
+}
+
+export async function login(formData: FormData) {
+  const email = formData.get("email") as string;
+  const password = formData.get("password") as string;
+
+  try {
+    await signIn("credentials", {
+      email,
+      password,
+      redirectTo: "/dashboard",
+    });
+  } catch (error) {
+    return { error: "Credenciales invalidas" };
+  }
+}
+```
+
+### Paso 9: Crear componentes UI basicos
+
+Crear `src/components/ui/button.tsx`:
+
+```typescript
+import { ButtonHTMLAttributes, forwardRef } from "react";
+import { cn } from "@/lib/utils";
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "primary" | "secondary" | "outline";
+}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant = "primary", ...props }, ref) => {
+    return (
+      <button
+        ref={ref}
+        className={cn(
+          "px-4 py-2 rounded-lg font-medium transition-colors",
+          variant === "primary" && "bg-blue-600 text-white hover:bg-blue-700",
+          variant === "secondary" && "bg-gray-200 text-gray-900 hover:bg-gray-300",
+          variant === "outline" && "border border-gray-300 hover:bg-gray-50",
+          className
+        )}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = "Button";
+```
+
+Crear `src/lib/utils.ts`:
+
+```typescript
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+```
+
+Instalar clsx:
+
+```bash
+npm install clsx tailwind-merge
+```
+
+### Paso 10: Crear paginas
+
+Crear `src/app/login/page.tsx`:
+
+```typescript
+import { login } from "@/actions/user";
+import { Button } from "@/components/ui/button";
+
+export default function LoginPage() {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-50">
+      <div className="w-full max-w-md p-8 bg-white rounded-xl shadow-lg">
+        <h1 className="text-2xl font-bold text-center mb-6">Iniciar Sesion</h1>
+
+        <form action={login} className="space-y-4">
+          <div>
+            <label htmlFor="email" className="block text-sm font-medium mb-1">
+              Email
+            </label>
+            <input
+              id="email"
+              name="email"
+              type="email"
+              required
+              className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+
+          <div>
+            <label htmlFor="password" className="block text-sm font-medium mb-1">
+              Password
+            </label>
+            <input
+              id="password"
+              name="password"
+              type="password"
+              required
+              className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+
+          <Button type="submit" className="w-full">
+            Entrar
+          </Button>
+        </form>
+
+        <p className="mt-4 text-center text-sm text-gray-600">
+          No tienes cuenta?{" "}
+          <a href="/register" className="text-blue-600 hover:underline">
+            Registrate
+          </a>
+        </p>
+      </div>
+    </div>
+  );
+}
+```
+
+Crear `src/app/(dashboard)/page.tsx`:
+
+```typescript
+import { auth, signOut } from "@/lib/auth";
+import { redirect } from "next/navigation";
+import { Button } from "@/components/ui/button";
+
+export default async function DashboardPage() {
+  const session = await auth();
+
+  if (!session) {
+    redirect("/login");
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <nav className="bg-white shadow">
+        <div className="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
+          <h1 className="text-xl font-bold">Dashboard</h1>
+          <form
+            action={async () => {
+              "use server";
+              await signOut({ redirectTo: "/" });
+            }}
+          >
+            <Button variant="outline" type="submit">
+              Cerrar Sesion
+            </Button>
+          </form>
+        </div>
+      </nav>
+
+      <main className="max-w-7xl mx-auto px-4 py-8">
+        <div className="bg-white rounded-xl shadow p-6">
+          <h2 className="text-lg font-semibold mb-4">
+            Bienvenido, {session.user?.name || session.user?.email}
+          </h2>
+          <p className="text-gray-600">
+            Esta es tu area privada. Aqui puedes agregar tu contenido.
+          </p>
+        </div>
+      </main>
+    </div>
+  );
+}
+```
+
+### Paso 11: Ejecutar migraciones
+
+```bash
+npx prisma migrate dev --name init
+npx prisma generate
+```
+</setup_steps>
+
+<verification>
+## Verificacion
+
+### 1. Iniciar servidor de desarrollo
+```bash
+npm run dev
+```
+
+### 2. Verificar paginas
+- http://localhost:3000 - Home
+- http://localhost:3000/login - Login
+- http://localhost:3000/register - Registro
+
+### 3. Probar flujo completo
+1. Registrar nuevo usuario
+2. Login con credenciales
+3. Verificar acceso a dashboard
+4. Logout
+
+### 4. Verificar Prisma Studio
+```bash
+npx prisma studio
+```
+</verification>
+
+<deploy>
+## Deploy a Vercel
+
+### 1. Push a GitHub
+```bash
+git init
+git add .
+git commit -m "Initial commit"
+git remote add origin <tu-repo>
+git push -u origin main
+```
+
+### 2. Conectar a Vercel
+```bash
+npx vercel
+```
+
+### 3. Configurar variables de entorno
+En Vercel Dashboard:
+- DATABASE_URL (usar Neon o Supabase para production)
+- NEXTAUTH_SECRET
+- NEXTAUTH_URL=https://tu-dominio.vercel.app
+</deploy>
+
+<common_issues>
+## Problemas Comunes
+
+### "PrismaClientInitializationError"
+- Verificar DATABASE_URL en .env.local
+- Ejecutar `npx prisma generate`
+
+### "NEXTAUTH_SECRET is not set"
+- Generar secret: `openssl rand -base64 32`
+- Agregar a .env.local
+
+### "Module not found: @prisma/client"
+- Ejecutar `npx prisma generate`
+</common_issues>