Por qué existe este proyecto

Avocato es un proyecto piloto para experimentar con:

1. Agentes de código — Evaluar si un agente de IA puede navegar, comprender y modificar un codebase real sin cometer errores.
2. Skills de OpenCode — Probar skills como frontend-design, vue, tailwind-css-patterns, vitest, entre otros, en un contexto práctico.
3. Convenciones de proyecto — Verificar si un agente respeta paletas de color, arquitectura de componentes, y reglas de negocio preexistentes.

El repositorio incluye un archivo AGENTS.md con instrucciones específicas para agentes de IA que trabajen en el proyecto.

Agentes de IA — Análisis Nutricional y Generación de Recetas

La app integra dos agentes de IA con fallback automático para analizar comidas y generar recetas personalizadas. El sistema intenta el proveedor primario y, si falla, recurre al secundario sin intervención del usuario.

Arquitectura del sistema de IA

Frontend (Vue)  →  /api/analyze-meal   →  Groq (primario)  →  Respuesta JSON
                          ↓ (si falla)
                     Cerebras (fallback)  →  Respuesta JSON

Frontend (Vue)  →  /api/generate-recipe →  Groq (primario)  →  Respuesta JSON
                          ↓ (si falla)
                     Cerebras (fallback)  →  Respuesta JSON

Analizador de comidas (/api/analyze-meal)

1. El usuario describe una comida en texto libre (ej: "ensalada de pollo con aguacate y pan integral").
2. El frontend envía la descripción a /api/analyze-meal (Vercel serverless function).
3. El endpoint usa un system prompt estructurado que obliga al modelo a responder con un JSON válido que incluye:
   • Nombre del plato y calorías estimadas
   • Macronutrientes (proteínas, carbohidratos, grasas) en gramos, calorías y porcentaje
   • Lista de ingredientes con cantidades estimadas
   • Score nutricional (1-100) con justificación
   • Consejos de bienestar prácticos
   • Nivel de confianza (low / medium / high)
4. La respuesta se valida contra el schema antes de mostrarla al usuario.
5. El usuario puede agregar el resultado analizado directamente a su registro diario de comidas.

Componentes del analizador

Generador de recetas (/api/generate-recipe)

1. El usuario configura preferencias dietéticas, alérgenos a excluir, ingredientes preferidos e instrucciones adicionales.
2. El frontend envía la configuración a /api/generate-recipe junto con el objetivo nutricional del perfil del usuario.
3. El endpoint construye un prompt con todas las restricciones y genera una receta personalizada con:
   • Nombre y descripción del plato
   • Tiempos de preparación y cocción
   • Ingredientes con cantidades métricas
   • Pasos de preparación numerados
   • Información nutricional (calorías, proteínas, carbohidratos, grasas)
   • Consejos prácticos
4. La receta se adapta al objetivo calórico del usuario si tiene perfil configurado.
5. Los alérgenos seleccionados se excluyen estrictamente de la receta.

Cálculo de BMI y Metas Calóricas

IMC (Índice de Masa Corporal)

Se calcula con la fórmula estándar de la OMS:

BMI = peso (kg) / altura (m)²

Peso ideal se calcula con la fórmula: 22 × altura (m)²

El BMI Gauge en el perfil muestra un indicador lineal con gradiente de color (verde a rojo) que posiciona el BMI actual en el rango 15–40, con un pill flotante que muestra el valor numérico. Junto al gauge se muestran: peso actual, peso ideal, peso deseado, kg de sobrepeso y tiempo estimado para alcanzar el objetivo (~3 kg/mes).

Metas calóricas (Mifflin-St Jeor)

La app calcula el gasto calórico diario en 3 pasos:

1. TMB (Tasa Metabólica Basal) — Fórmula de Mifflin-St Jeor:

   • Hombres: 10 × peso + 6.25 × altura - 5 × edad + 5
   • Mujeres: 10 × peso + 6.25 × altura - 5 × edad - 161

2. TDEE (Gasto Calórico Total) — TMB × factor de actividad:

   • Sedentario: ×1.2
   • Ligero: ×1.375
   • Moderado: ×1.55
   • Activo: ×1.725
   • Muy activo: ×1.9

3. Meta diaria — TDEE × ajuste de objetivo:

   • Perder peso: ×0.8 (déficit del 20%)
   • Mantener: ×1.0
   • Ganar masa: ×1.15 (superávit del 15%)

Se distribuyen automáticamente en macronutrientes: 30% proteínas, 45% carbohidratos, 25% grasas.

Arquitectura

src/
├── design-system/             # Design System
│   ├── tokens/index.css       # Design tokens (colors, spacing, typography, etc.)
│   └── index.ts               # Barrel export de todos los componentes Ds*
├── components/
│   ├── ui/                    # Primitivos UI del Design System
│   │   ├── Button.vue         # Variantes: primary/secondary/ghost/danger/accent
│   │   ├── Input.vue          # Label, helper, error, tamaños sm/md/lg
│   │   ├── Card.vue           # Variantes: default/elevated/warm/surface
│   │   ├── Badge.vue          # Variantes: primary/accent/success/warning/danger/info
│   │   ├── Modal.vue          # Teleport, tamaños sm/md/lg/xl, backdrop blur
│   │   └── Typography.vue     # Variantes: display/h1-h4/body/label/caption
│   ├── layout/                # Componentes de layout
│   │   ├── Container.vue      # Max-width responsive + padding
│   │   ├── Stack.vue          # Flex direction + gap + align + justify
│   │   └── Grid.vue           # CSS Grid responsive con minItemWidth
│   ├── forms/                 # Componentes de formulario
│   │   └── Field.vue          # Wrapper con label/error/helper
│   ├── state/                 # Componentes de estado
│   │   ├── EmptyState.vue     # Estado vacío con icono + action slot
│   │   ├── Loading.vue        # Spinner animado con tamaños
│   │   └── ErrorState.vue     # Error con retry
│   ├── nutrition/             # Analizador de comidas con IA
│   │   ├── MealAnalyzerForm.vue     # Textarea + análisis con loading/error
│   │   ├── NutritionResultCard.vue  # Card con calorías, score, confianza
│   │   ├── MacroDistribution.vue    # Barras de distribución de macros
│   │   ├── IngredientBreakdown.vue  # Lista de ingredientes
│   │   └── NutritionTips.vue        # Consejos de bienestar
│   ├── AppHeader.vue          # Navbar sticky con hamburger menu
│   ├── CalorieRing.vue        # Anillo SVG de progreso calórico
│   ├── FoodCard.vue           # Tarjeta de alimento con Nutri-Score badge
│   ├── FoodDetailModal.vue    # Modal completo con nutrition facts y Nutri-Score
│   └── NutrientCard.vue       # Barra de progreso por macro nutriente
├── hooks/                     # Hooks reutilizables
│   ├── useModal.ts            # Estado open/close/toggle
│   ├── useDebounce.ts         # Debounce genérico con cleanup
│   └── index.ts               # Barrel export
├── composables/               # Composables para lógica reactiva
│   ├── useFoodSearch.ts       # Search state, debounce, performSearch
│   ├── useAddFood.ts          # Modal state, openAddModal, confirmAdd
│   └── useAuth.ts             # Auth state, signIn/signUp/signOut, migración
├── lib/                       # Configuración de servicios
│   └── supabase.ts            # Cliente Supabase singleton
├── views/                     # Vistas principales (todas lazy-loaded)
│   ├── DashboardView.vue      # Pestañas: Mi día, Mis platos, Mis recetas, Perfil
│   ├── ProfileView.vue        # Pestañas: Mi día, Mis platos, Mis recetas, Datos
│   ├── SearchView.vue
│   ├── NutritionAnalyzerView.vue  # Botón guardar plato en favoritos
│   ├── RecipeGeneratorView.vue    # Botón guardar receta en favoritos
│   └── AuthView.vue           # Login/registro con Supabase Auth
├── stores/                    # Almacenes Pinia con persistencia dual
│   ├── userStore.ts           # Perfil de usuario + metas calóricas (localStorage/Supabase)
│   ├── foodStore.ts           # Registro de comidas del día (localStorage/Supabase)
│   ├── savedPlatesStore.ts    # Platos guardados en favoritos (localStorage/Supabase)
│   └── savedRecipesStore.ts   # Recetas guardadas en favoritos (localStorage/Supabase)
├── services/                  # Clientes HTTP
│   ├── openFoodFacts.ts       # API pública de Open Food Facts
│   ├── nutritionAI.ts         # Cliente del analizador IA → /api/analyze-meal
│   └── recipeAI.ts            # Cliente del generador IA → /api/generate-recipe
├── types/                     # Definiciones TypeScript
│   ├── user.ts                # UserProfile, CalorieGoals, ActivityLevel, GoalType
│   ├── food.ts                # FoodItem, MealEntry, NutritionSummary
│   ├── nutrition.ts           # NutritionAnalysis, MacroValue, Ingredient
│   ├── recipe.ts              # Allergen, DietaryPreference, RecipeConfig, GeneratedRecipe
│   ├── supabase.ts            # Database types (5 tablas)
│   └── calculator.ts          # BmiResult, IdealWeightResult
├── utils/                     # Func