🪄 Generador de Prompts para Roo Code

Aplicación web interna (Next.js 14+ App Router + TypeScript + Tailwind CSS + shadcn/ui) que te ayuda a crear, una por una, las 33 páginas de ejemplo de tu portafolio de servicios web.

El flujo es simple: eliges una página del catálogo → un chat te pregunta tus preferencias → la app genera un prompt detallado y listo para copiar en VS Code con Roo Code. La generación es 100% local (templates + datos de ejemplo), sin IA externa: es rápida, gratuita y consistente.

---

✨ Funcionalidades

• Dashboard con las 33 páginas organizadas en 6 categorías (color-coded).
• Tarjetas con dificultad, tiempo estimado, precio (MXN) y estado (pendiente / en progreso / completado).
• Filtros por categoría y dificultad.
• Barra de progreso general: "X de 33 páginas completadas".
• Chat de generación que pregunta preferencias (estilo, complejidad, modo oscuro, animaciones, datos, auth, colores).
• Prompt generado siguiendo una estructura fija: contexto, proyecto ficticio, páginas, stack, modelo de datos, diseño, mock data, flujo, criterios de aceptación y comandos.
• Botones: Copiar al portapapeles, Descargar .txt, Generar variación (simple / completa / estilo alternativo).
• Vista del prompt estilo editor de código con syntax highlighting simulado + mockup visual de la página.
• Persistencia: progreso y prompts guardados en localStorage y sincronizados a Supabase si está configurado.
• 100% responsive y desplegable en Vercel.

---

🗂️ Catálogo (33 páginas)

Categoría	Páginas
Landing Pages	Básica · Multi-sección · Animaciones avanzadas · PWA instalable
Sitios Corporativos	5 páginas · 10 páginas · Blog con CMS headless · Portafolio profesional · Galería/catálogo
Web Apps	Auth · CRUD · Dashboard admin · Mapas · Calendario/citas · Chat · Tickets · PDFs · Notificaciones
E-Commerce	Carrito + WhatsApp · Pasarela de pagos · Cotizador · Reservas/booking · Membresías
Herramientas Internas	Inventario · CRM · Encuestas · Documentos · Empleados · API REST · Scraper · Automatización
Mantenimiento	SEO técnico · Optimización de velocidad

Cada proyecto incluye una empresa ficticia de Tampico / Madero / Altamira con teléfonos lada 833, direcciones realistas y precios en MXN.

---

🚀 Empezar

# 1. Instalar dependencias
npm install

# 2. Variables de entorno (opcional — la app funciona en modo local sin ellas)
cp .env.example .env.local
#   Llena NEXT_PUBLIC_SUPABASE_URL y NEXT_PUBLIC_SUPABASE_ANON_KEY si quieres persistir en la nube.

# 3. Servidor de desarrollo
npm run dev

Abre http://localhost:3000.

Build de producción

npm run build
npm run start

---

🗄️ Supabase (opcional)

1. Crea un proyecto en supabase.com.
2. En el SQL Editor, pega y ejecuta el contenido de supabase/schema.sql.
3. Copia la URL y la anon key a .env.local.
4. Para que la API save-progress use el service role, añade SUPABASE_SERVICE_ROLE_KEY.

Sin estas variables, la app funciona igual: el progreso se guarda en localStorage.

---

🧱 Estructura

app/
  page.tsx                    # Dashboard con grid de 33 páginas
  chat/[id]/page.tsx          # Chat de generación
  prompt/[id]/page.tsx        # Vista del prompt generado
  api/generate-prompt/        # Genera prompt (templates)
  api/save-progress/          # Guarda progreso en Supabase
  api/get-progress/           # Lee progreso de Supabase
components/
  dashboard/  ProjectGrid · ProjectCard · ProgressBar · CategoryFilter · DifficultyBadge · StatusBadge
  chat/       ChatInterface · PreferenceSelector · PromptPreview
  prompt/     PromptViewer · PageMockup · CopyButton · DownloadButton · VariationButton · PromptWorkspace
  ui/         shadcn/ui (button, card, badge, select, dialog, …)
lib/
  catalog.ts          # Catálogo completo de 33 páginas
  mock-data.ts        # Bancos de datos de ejemplo por tipo
  preferences.ts      # Opciones de personalización + paletas
  prompt-templates.ts # Templates de prompts (Handlebars)
  store.ts            # Estado global (Zustand + localStorage)
  supabase.ts         # Cliente Supabase
types/index.ts        # Tipos TypeScript
supabase/schema.sql   # Migración de Supabase

---

🎨 Diseño

• Fondo gris muy claro #f8f9fa, tarjetas blancas con sombra sutil y hover con elevación.
• Categorías color-coded: Landing=azul, Corporativo=verde, WebApp=ámbar, E-Commerce=rojo, Herramientas=gris, Mantenimiento=morado.
• Chat tipo WhatsApp: bot a la izquierda, usuario a la derecha, chips de respuesta rápida.
• Editor del prompt en fondo oscuro #1e1e1e con syntax highlighting simulado.

---

✅ Criterios de aceptación

• Dashboard muestra las 33 páginas organizadas por categoría
• Cada tarjeta muestra dificultad, tiempo estimado y estado
• Filtros por categoría funcionan
• Barra de progreso actualiza al marcar páginas como completadas
• El chat pregunta preferencias antes de generar el prompt
• El prompt generado sigue la estructura definida
• El prompt incluye datos de ejemplo realistas en español
• El prompt incluye empresa ficticia de Tampico/Madero/Altamira
• Botón de copiar al portapapeles funciona
• Botón de descargar .txt funciona
• Botón de generar variación funciona
• Progreso se guarda en Supabase (y localStorage como fallback)
• App es 100% responsive
• Deploy en Vercel funciona
• Sin errores de TypeScript

---

☁️ Deploy en Vercel

npx vercel

Configura las variables de entorno en el panel de Vercel (las mismas de .env.local).