Documentación

Introducción

Cómo usar estas docs

Convenciones que usamos para que no te pierdas.

Cada página de estas docs sigue convenciones simples. Conocerlas te ahorra tiempo.

Componentes visuales que vas a ver

Prompts para Cursor

Los bloques azulados son prompts listos para copiar y pegar en Cursor:

Prompt para Cursor
Crea un componente Button con variantes primary, secondary y ghost. Usa DaisyUI.

Cajas de comandos (para copiar y pegar en la terminal)

Los bloques grises con fondo oscuro son comandos de terminal. Tienen un botón de copiar en la esquina — úsalo en vez de seleccionar el texto a mano, así evitas copiar espacios de más.

Terminal
yarn install

Cada uno de estos comandos hace algo específico: instala paquetes, sube tu base de datos, arranca el servidor, etc. Antes de pegarlo en tu terminal, lee la frase que lo acompaña — ahí te decimos qué hace ese comando y si necesitas correrlo desde una carpeta en particular.

Ojo: algunos comandos traen partes que DEBES cambiar

No todos los comandos son "copiar, pegar, enter". Algunos incluyen un placeholder — un pedazo de texto que representa algo tuyo (tu usuario, tu proyecto, tu key) y que no funciona tal cual está escrito.

Ejemplo clásico, al clonar tu repo:

Terminal
git clone https://github.com/TU-USUARIO/VibeFast.git

Aquí TU-USUARIO no es el usuario real — es un ejemplo. Tienes que cambiarlo por tu usuario de GitHub antes de correr el comando. Si lo pegas tal cual, va a fallar porque esa carpeta no existe.

Cómo reconocerlos: siempre que veas texto en MAYÚSCULAS, entre < y >, entre llaves {así} (en los prompts para Cursor, ej. {describe tu producto en 1 frase}), o una palabra como tu-proyecto / tu-usuario / tu-key, es una señal de que ese pedazo es tuyo, no un valor real. Cuando el comando lo requiera, vas a ver una nota justo arriba o abajo del bloque, tipo "aquí tienes que cambiarlo por tu usuario de GitHub", que te dice exactamente qué reemplazar y de dónde sacarlo.

Regla rápida antes de pegar cualquier comando

Lee el comando completo una vez antes de correrlo. Si ves algo que se ve "genérico" (TU-USUARIO, tu-project-ref, <tu-key>), reemplázalo por tu valor real. Si no ves nada así, cópialo y pégalo tal cual.

Callouts

Info

Notas explicativas — léelas pero no son críticas.

Cuidado

Errores comunes que vas a cometer si no lees con atención.

Buena práctica

Patrones recomendados.

No hagas esto

Antipatterns que rompen producción.

Checkpoints

Al final de cada paso de tutorial hay un checkpoint:

Checkpoint

Si todo va bien, abre localhost:3000 y deberías ver tu landing con el nombre de tu producto. ¿No la ves? → Troubleshooting.

StackBadges

Cada tutorial empieza con una fila de chips mostrando qué tecnologías toca:

Next.jsSupabaseOpenAI

Tablas de referencia

Algunas páginas traen tablas para consultar de un vistazo (comandos, keys, dónde configurar algo). No hay que leerlas de corrido: son para volver cuando busques un dato puntual.

EjemploPara qué
Comando → qué haceCheat-sheet de terminal
Servicio → dónde sacar la keySetup de cuentas

Estructura de los tutoriales semanales

Cada semana-N sigue siempre la misma estructura:

  1. Qué vas a tener al final — checklist visual del entregable.
  2. Lo que debes tener antes — link a semanas previas.
  3. Pasos 1, 2, 3… — cada uno con un PromptBox.
  4. Entregable — qué subir al docente.
  5. Si te sobra tiempo — extensiones opcionales.

Lee los pasos en orden. No saltes.