> ## Documentation Index
> Fetch the complete documentation index at: https://docs.lumi.new/llms.txt
> Use this file to discover all available pages before exploring further.

# Glosario

> Comprende los términos clave para navegar y construir eficazmente con Lumi.

## Conceptos clave

* IA (Inteligencia Artificial): Tecnología que permite a las máquinas simular la inteligencia humana, permitiéndoles aprender, razonar y resolver problemas.
* Prompt: Un comando basado en texto utilizado para instruir a un modelo de IA. Dentro de Lumi, los prompts son la herramienta fundamental que usarás para crear y modificar cada componente de tu aplicación.

## Términos específicos de Lumi

* **Modo Discusión:** Más que un generador de código, Lumi actúa como un socio de desarrollo interactivo. Te guía a través de la planificación, la depuración y el lanzamiento, ayudándote a construir con confianza.
* **Modo Edición:** El entorno para realizar cambios directos en el código y el contenido de tu aplicación.
* **Editar:** Una herramienta impulsada por IA con controles visuales nativos de Tailwind para un refinamiento preciso e intuitivo.
* **Remix:** Duplica cualquier proyecto para usarlo como un nuevo punto de partida. Hacer un remix te permite experimentar con cambios y explorar ideas mientras conservas la versión original.
* **Vista previa:** Una vista interactiva en vivo para probar características y contenido antes de publicar tus cambios.

## Producto y desarrollo

### **Gestión de productos y estrategia**

* **MVP (Producto Mínimo Viable):** La versión más simple de un producto con las características justas para atraer a los primeros usuarios y validar la idea principal.
* **Roadmap:** Un plan de alto nivel que describe la visión, dirección y próximas características de un producto a lo largo del tiempo.
* **Solicitud de característica:** Una sugerencia de usuarios o partes interesadas para una nueva capacidad o mejora.
* **Historia de usuario:** Una descripción breve y simple de una característica desde la perspectiva del usuario final.
* **Recorrido del usuario:** El camino que un usuario sigue para lograr un objetivo dentro de tu producto.
* **Persona:** Un perfil ficticio y detallado de un usuario objetivo, creado a partir de la investigación para guiar las decisiones de diseño y desarrollo.

### **Conceptos de ingeniería**

* **PRD (Documento de Requisitos del Producto):** Un documento que detalla el propósito, las características y las especificaciones técnicas de un producto para guiar al equipo de desarrollo.
* **API (Interfaz de Programación de Aplicaciones):** Un conjunto de reglas que permite que diferentes aplicaciones de software se comuniquen e intercambien datos. Los tipos comunes incluyen las API REST y GraphQL.
* **Refactorizar:** El proceso de reestructurar el código para mejorar su calidad y mantenibilidad sin cambiar su funcionalidad.
* **GitHub:** Una plataforma popular para el control de versiones y el desarrollo de software colaborativo.

### **Datos y analítica**

* **Pruebas A/B:** Comparar dos versiones de una página web o característica para ver cuál funciona mejor.
* **Tasa de conversión:** El porcentaje de usuarios que completan un objetivo específico, como registrarse o realizar una compra.
* **Tasa de cancelación (Churn Rate):** El porcentaje de usuarios que dejan de usar tu producto durante un período específico.
* **Tasa de retención:** El porcentaje de usuarios que continúan usando tu producto a lo largo del tiempo.
* **Seguimiento de eventos:** Monitorear acciones específicas del usuario (como clics o envíos de formularios) para comprender la interacción.

## **UI/UX y desarrollo frontend**

### **Desarrollo frontend**

* **Frontend:** La parte de una aplicación que los usuarios ven e con la que interactúan, incluyendo la interfaz de usuario y la experiencia general.
* **React:** Una popular biblioteca de JavaScript para construir interfaces de usuario dinámicas, especialmente para aplicaciones de una sola página.
* **Gradiente:** Una transición suave entre dos o más colores.
* **Tailwind CSS:** Un framework de CSS "utility-first" para construir rápidamente diseños personalizados directamente en tu HTML.
* **Sistema de diseño:** Una colección estandarizada de componentes reutilizables y directrices que asegura la consistencia del diseño en todo un producto.

### **Conceptos de diseño UI/UX**

* **Color de acento:** Un color de contraste utilizado para resaltar elementos clave como botones o enlaces.
* **Tema:** La apariencia general de una aplicación, definida por su esquema de colores, tipografía y diseño.
* **Diseño responsivo:** Un enfoque que asegura que tu aplicación se vea y funcione bien en cualquier dispositivo, desde ordenadores de escritorio hasta teléfonos móviles.
* **Above the Fold:** El contenido visible en una página web sin necesidad de desplazarse. Es un espacio privilegiado para información importante.
* **CTA (Llamada a la acción):** Un aviso, como un botón o enlace, que anima a los usuarios a realizar una acción específica (p. ej., "Registrarse", "Comprar ahora").

### **Estructura de la página y navegación**

* **Encabezados:** Títulos (H1, H2, etc.) que estructuran el contenido y establecen una jerarquía visual clara.
* **Pie de página (Footer):** La sección en la parte inferior de una página web, que generalmente contiene enlaces, información de contacto y avisos legales.
* **Migas de pan (Breadcrumb):** Un rastro de navegación que muestra la ubicación actual de un usuario en un sitio (p. ej., Inicio > Productos > Portátiles).
* **Favicon:** El pequeño icono que representa tu sitio web en la pestaña de un navegador o en los marcadores.
* **Meta Title:** El título de la página que se muestra en los resultados de los motores de búsqueda y en las pestañas del navegador, crucial para el SEO.
* **Meta Description:** El breve resumen de una página web que se muestra en los resultados de búsqueda para atraer clics.
* **URL canónica:** Una etiqueta que indica a los motores de búsqueda la versión preferida de una página para evitar problemas de contenido duplicado.
* **URL Slug:** La parte de una URL fácil de usar que identifica una página específica (p. ej., `/quienes-somos`).
* **Sitemap:** Un archivo que lista todas las páginas de tu sitio web para ayudar a los motores de búsqueda a indexarlas eficazmente.
* **Barra de navegación (Nav Bar):** El menú principal que proporciona enlaces a las secciones clave de tu sitio web.
* **Enlaces de omisión (Skip Links):** Enlaces de accesibilidad que permiten a los usuarios omitir la navegación y saltar directamente al contenido principal.
* **Paginación:** Un sistema para dividir largas listas de contenido en páginas separadas.
* **Enlace de anclaje:** Un enlace que desplaza al usuario a una sección específica en la misma página.
* **Página 404:** Una página de error personalizada que se muestra cuando un usuario intenta acceder a una URL que no existe.

### **Notificaciones y feedback**

* **Toast:** Una pequeña notificación temporal que proporciona una breve retroalimentación sobre una acción.
* **Snackbar:** Similar a un toast, pero a menudo aparece en la parte inferior de la pantalla y puede incluir un botón de acción (p. ej., "Deshacer").
* **Tooltip:** Un cuadro emergente con información adicional que aparece al pasar el cursor sobre un elemento.
* **Insignia (Badge):** Un pequeño marcador visual en un icono o botón para indicar un recuento, estado o notificación.
* **Spinner de carga:** Un icono animado que indica que un proceso se está ejecutando en segundo plano.
* **Barra de progreso:** Una barra visual que muestra el progreso de finalización de una tarea.
* **Skeleton Loader:** Una interfaz de marcador de posición que imita el diseño del contenido final, mejorando la percepción de la velocidad de carga.

### **Superposiciones y pop-ups**

* **Popover:** Una superposición que proporciona contexto adicional u opciones relacionadas con un elemento específico.
* **Diálogo (Modal):** Una ventana que aparece sobre el contenido principal y requiere la interacción del usuario para ser cerrada.
* **Panel lateral (Drawer/Sidebar):** Un panel que se desliza desde un lado, que generalmente contiene navegación o configuraciones.
* **Lightbox:** Una ventana modal que muestra medios como imágenes en una vista ampliada y enfocada.
* **Cuadro de alerta:** Un mensaje del sistema que informa a los usuarios sobre información crítica, errores o advertencias.

### **Navegación y selección**

* **Botón:** Un elemento en el que se puede hacer clic y que desencadena una acción.
* **Interruptor (Switch/Toggle):** Un control que permite a los usuarios cambiar entre dos estados, como encendido y apagado.
* **Pestañas (Tabs):** Un componente que organiza el contenido en diferentes vistas entre las que un usuario puede cambiar.
* **Asistente paso a paso (Stepper/Wizard):** Un proceso guiado de varios pasos que muestra a los usuarios su progreso.
* **Acordeón:** Una serie de paneles plegables utilizados para organizar y revelar contenido.
* **Menú desplegable:** Una lista de opciones que aparece cuando un usuario interactúa con un botón o campo.

### **Formularios y entradas**

* **Formulario:** Un conjunto de campos para recopilar datos del usuario, como un formulario de registro o de contacto.
* **Grupo de botones de radio:** Un conjunto de opciones donde el usuario puede seleccionar solo una.
* **Casilla de verificación (Checkbox):** Un control que permite a los usuarios seleccionar una o más opciones de una lista.
* **Campo de texto:** Un cuadro de entrada estándar para la introducción de texto de una sola línea.
* **Área de texto:** Un cuadro de entrada más grande para texto de varias líneas, como comentarios o mensajes.
* **Selector (Select/Dropdown):** Una lista desplegable para elegir una opción de un conjunto predefinido.
* **Selector de fecha:** Una interfaz de calendario que permite a los usuarios seleccionar una fecha fácilmente.
* **Deslizador (Slider):** Un control para seleccionar un valor de un rango continuo.
* **Carga de archivos:** Un componente que permite a los usuarios subir archivos desde su dispositivo.
* **Autocompletar:** Un campo de entrada que sugiere resultados a medida que el usuario escribe.

### **Estilos y tendencias de diseño**

Usa estos términos en tus prompts para definir la estética que quieres lograr.

* **Neobrutalismo:** Un estilo de diseño crudo y de alto contraste con tipografía audaz y elementos sin refinar.
* **Retro:** Un diseño que evoca nostalgia utilizando estilos de décadas pasadas.
* **Hacker:** Una estética inspirada en las interfaces de terminal, con fondos oscuros y fuentes monoespaciadas.
* **Glassmorphism:** Un estilo que utiliza capas translúcidas similares al vidrio esmerilado para crear profundidad.
* **Nudy:** Un enfoque minimalista que utiliza paletas de colores suaves y neutros para una apariencia discreta.

## **Desarrollo backend y bases de datos**

### **Fundamentos del backend**

* **Backend:** El lado del servidor de una aplicación que maneja datos, lógica y operaciones principales.
* **Webhooks:** Mensajes automatizados enviados desde aplicaciones cuando algo sucede, permitiendo el intercambio de datos en tiempo real.

### **Gestión de bases de datos**

* **CRUD (Crear, Leer, Actualizar, Borrar):** Las cuatro operaciones fundamentales para la gestión de datos.
* **SQL (Lenguaje de Consulta Estructurado):** El lenguaje estándar para gestionar y consultar datos en bases de datos relacionales.
* **PostgreSQL:** Una potente base de datos relacional de código abierto conocida por su fiabilidad y características avanzadas.

### **Seguridad y autenticación**

* **OAuth:** Un estándar de autenticación que permite a los usuarios iniciar sesión con cuentas de terceros como Google o GitHub.
* **Autenticación de dos factores (2FA):** Una capa de seguridad que requiere que los usuarios proporcionen dos formas de identificación para iniciar sesión.
* **CORS (Intercambio de Recursos de Origen Cruzado):** Un mecanismo de seguridad que controla cómo se puede acceder a los recursos de tu servidor desde otros dominios.