Copiar     Copiar     
# Project Overview
Vector es una aplicación de productividad impulsada por IA que ayuda a los usuarios a gestionar tareas y notas. La aplicación ofrece una experiencia sin fricciones con agentes de IA trabajando en segundo plano.

# Personality
Actúa como un desarrollador senior con 15+ años de experiencia en desarrollo web. Prioriza la simplicidad y la eficiencia. Explica tu razonamiento de forma clara y concisa.

# Tech Stack
- Frontend: Next.js 14, React, Tailwind CSS
- Backend: Node.js, Express, FastAPI (Python)
- Database: Supabase (PostgreSQL)
- Authentication: Auth0
- Hosting: Vercel

# Processes
## Error Fixing Process
1. Explica el error en términos simples
2. Identifica la causa raíz
3. Propón una solución mínima y limpia
4. Verifica que la solución no introduce otros problemas

## Code Review Process
1. Verifica la funcionalidad
2. Evalúa la legibilidad y mantenibilidad
3. Sugiere optimizaciones si son necesarias
4. Asegúrate de que sigue las mejores prácticas

# Environment Variables
- DATABASE_URL: URL de conexión a Supabase
- AUTH0_SECRET: Clave secreta para Auth0
- AUTH0_BASE_URL: URL base para Auth0
- AUTH0_ISSUER_BASE_URL: URL base del emisor Auth0
- AUTH0_CLIENT_ID: ID de cliente de Auth0
- AUTH0_CLIENT_SECRET: Secreto de cliente de Auth0
- ANTHROPIC_API_KEY: Clave API para Claude

# Current File Structure
project/
├── src/
│   ├── app/
│   │   ├── api/
│   │   │   └── tasks/
│   │   │       └── route.js
│   │   ├── dashboard/
│   │   │   └── page.jsx
│   │   ├── tasks/
│   │   │   └── page.jsx
│   │   └── layout.jsx
│   ├── components/
│   │   ├── TaskItem.jsx
│   │   ├── TaskList.jsx
│   │   └── Sidebar.jsx
│   ├── lib/
│   │   ├── db.js
│   │   └── utils.js
│   └── styles/
│       └── globals.css
├── public/
├── .env
└── package.json

# Most Important Instructions
- Escribe código limpio y mantenible
- No elimines comentarios existentes
- Añade comentarios para explicar lógica compleja
- Piensa como un desarrollador senior
- Prioriza la experiencia de usuario

# Other Context
El proyecto está en fase MVP, priorizando funcionalidad sobre características avanzadas.

# Comments
Asegúrate de que cada función tenga un comentario que explique su propósito, parámetros y valor de retorno. Documenta cualquier decisión de diseño no obvia.

Copiar   .env
.env.local
node_modules/
.next/
dist/
build/
*.log

En Configuración > Modelos:

• ✓ Claude 3.5 Sonnet (20241022)
• ✓ Gemini Pro
• ✓ Gemini Flash
• ✓ GPT-4o
• ✓ Claude 3 Opus
• ✓ Claude 3 Sonnet (reasoning)
• ✓ Claude 3 Sonnet mini (reasoning)

Copiar   Necesito una función que valide direcciones de email. Por favor, mantenla simple y eficiente. The fewer lines of code, the better.

Este prompt evita que el modelo intente impresionarte con código innecesariamente complejo.

Copiar   Tengo un problema con mi sistema de autenticación en Next.js. Los tokens no se están renovando correctamente. Proceed like a senior developer para diagnosticar y resolver este problema.

Mejora la calidad del código y el enfoque de resolución de problemas.

Copiar   Necesito implementar un componente de calendario que permita a los usuarios programar tareas. Debe incluir vista mensual, semanal y diaria, y permitir arrastrar y soltar eventos. Do not stop working until you've implemented this feature fully and completely.

Reduce la "pereza" del modelo y evita que deje implementaciones a medias.

Copiar   Hay un error en este componente React. Cuando intentamos actualizar el estado, la aplicación se bloquea con el error "Cannot read properties of undefined (reading 'map')". Start by writing three reasoning paragraphs analyzing what the error might be. Do not jump to conclusions.

Fuerza al modelo a analizar el problema a fondo antes de proponer soluciones.

Copiar   ¿Cuáles son las mejores prácticas para implementar el manejo de estado en una aplicación React grande? Answer in short.

Obtiene respuestas concisas cuando no necesitas explicaciones detalladas.

Copiar   Refactoriza esta función para mejorar su rendimiento. Do not delete comments.

Evita que el modelo elimine la documentación importante del código.

Copiar   Before we proceed, I need you to give me a summary of the current state of our task management implementation. What files we've modified, what funcionalidades have been implemented, and what issues remain pending. Describe as if you were a senior developer briefing another programmer who's just joined the project.

Útil cuando necesitas transferir contexto entre sesiones del compositor.

Copiar   Estoy considerando dos enfoques para la arquitectura de datos de mi aplicación:
1. Usar GraphQL para todas las consultas de datos
2. Utilizar REST API con endpoints específicos

Before you answer, I want you to write two detailed paragraphs, one arguing for each of these Solutions. Do not jump to conclusions. Seriously consider both approaches. Then after you finish, tell me which one of these solutions is obviously better for a small-to-medium app con ~5000 usuarios and why.

Obtiene un análisis equilibrado cuando estás decidiendo entre alternativas.

Copiar   Your task is to write a one paragraph search query as if you were telling a human researcher what to find, including all the relevant context. Format the paragraph as clear instructions commanding a researcher to find what we're looking for. Ask for code snippets or technical details when relevant.

Necesito entender cómo implementar correctamente la autenticación JWT en una aplicación Next.js 14 con App Router y cómo manejar la renovación de tokens.

Optimiza búsquedas web en Perplexity o ChatGPT.

Copiar   Analiza por qué este componente React podría estar causando re-renders innecesarios. You should start the reasoning paragraph with lots of uncertainty and slowly gain confidence as you think about the item more.

Mejora el proceso de razonamiento de los modelos, evitando conclusiones prematuras.

Copiar   Quiero crear un sistema de notificaciones en tiempo real para mi aplicación web.

Archivos relevantes:
- src/components/Notification.jsx
- src/lib/notificationService.js
- src/context/NotificationContext.jsx

Quiero usar WebSockets para las notificaciones en tiempo real y mostrar un toast cuando llegue una nueva notificación. Las notificaciones deben agruparse si hay muchas y permitir al usuario marcarlas como leídas.

Contexto adicional:
- Estamos usando Socket.io en el backend
- Las notificaciones se almacenan en Supabase
- Cada notificación tiene: id, userId, message, type, createdAt, read

---

Necesito que implementes primero el servicio de notificaciones, luego el contexto, y finalmente el componente que mostrará las notificaciones. Piensa como un desarrollador senior y asegúrate de manejar los casos extremos. El código debe ser limpio y bien comentado.

Copiar   # Database Structure - Supabase.md

## Tables

### users
- id: uuid (primary key, generated by auth)
- email: text (unique, not null)
- name: text
- avatar_url: text
- created_at: timestamp with time zone (default: now())

### tasks
- id: uuid (primary key)
- title: text (not null)
- description: text
- due_date: timestamp with time zone
- priority: integer (1-3, default: 2)
- status: text (default: 'pending')
- user_id: uuid (foreign key to users.id)
- created_at: timestamp with time zone (default: now())
- updated_at: timestamp with time zone (default: now())

### notes
- id: uuid (primary key)
- content: text (not null)
- user_id: uuid (foreign key to users.id)
- task_id: uuid (foreign key to tasks.id, nullable)
- created_at: timestamp with time zone (default: now())
- updated_at: timestamp with time zone (default: now())

## RLS Policies

### users
- SELECT: authenticated user can only view their own record
- UPDATE: authenticated user can only update their own record

### tasks
- SELECT: authenticated user can only view their own tasks
- INSERT: authenticated user can only create tasks for themselves
- UPDATE: authenticated user can only update their own tasks
- DELETE: authenticated user can only delete their own tasks

### notes
- SELECT: authenticated user can only view their own notes
- INSERT: authenticated user can only create notes for themselves
- UPDATE: authenticated user can only update their own notes
- DELETE: authenticated user can only delete their own notes

## Indices
- tasks(user_id)
- tasks(due_date)
- notes(user_id)
- notes(task_id)

## Functions
- function_update_timestamp(): Actualiza el campo updated_at automáticamente

## Triggers
- update_tasks_timestamp: Actualiza tasks.updated_at cuando se modifica
- update_notes_timestamp: Actualiza notes.updated_at cuando se modifica

Escribiendo (lento):

Copiar   Necesito crear un componente para mostrar un gráfico de líneas que visualice el progreso del usuario en completar tareas durante la semana. Debe usar la biblioteca recharts, mostrar los días de la semana en el eje X y el número de tareas completadas en el eje Y. Necesita ser responsivo y mostrar tooltips cuando el usuario pasa el cursor sobre los puntos de datos. Los colores deben coincidir con nuestro tema de la aplicación.

Hablando (rápido) con Whisper Flow:

Copiar   Necesitamos un componente de gráfico de progreso para el dashboard. Usamos recharts para esto. En el eje X ponemos los días de la semana, lunes a domingo. En el eje Y el número de tareas completadas cada día. Hay que hacer que sea responsivo, así que debe ajustarse bien tanto en móvil como en escritorio. Quiero tooltips cuando el usuario haga hover sobre los puntos de datos, mostrando el día exacto y número de tareas. Los colores deben seguir nuestra paleta principal: azul primario para la línea principal, verde para tareas completadas si añadimos esa métrica después. Necesitamos manejar el caso de que no haya datos también, mostrando un mensaje amigable. Y añade una leyenda en la parte inferior.

Copiar   /**
 * TaskPriorityManager - Gestiona la priorización automática de tareas
 * 
 * Este componente analiza las fechas de vencimiento, dependencias entre tareas
 * y patrones históricos del usuario para sugerir prioridades.
 * 
 * @param {Array} tasks - Lista de tareas a priorizar
 * @param {Object} userPreferences - Preferencias del usuario para la priorización
 * @returns {Array} - Lista de tareas con prioridades sugeridas
 */
function TaskPriorityManager({ tasks, userPreferences }) {
  // Ordenamos primero por fecha de vencimiento (las más próximas primero)
  // Esto establece una base inicial para la priorización
  const sortedByDueDate = [...tasks].sort((a, b) => {
    if (!a.dueDate) return 1;  // Sin fecha de vencimiento = baja prioridad
    if (!b.dueDate) return -1; // Sin fecha de vencimiento = baja prioridad
    return new Date(a.dueDate) - new Date(b.dueDate);
  });
  
  // Aplicamos factores de ajuste basados en preferencias del usuario
  // Por ejemplo, algunos usuarios priorizan tareas profesionales sobre personales
  const withUserPreferences = sortedByDueDate.map(task => {
    let priorityScore = getBasePriorityScore(task);
    
    // Ajustamos según categoría (trabajo, personal, etc.)
    if (userPreferences.categoryWeights[task.category]) {
      priorityScore *= userPreferences.categoryWeights[task.category];
    }
    
    // Ajustamos según historial de completado del usuario
    // Las tareas similares a las que el usuario suele completar rápido reciben boost
    const completionFactor = getHistoricalCompletionFactor(task, userPreferences);
    priorityScore *= completionFactor;
    
    return {
      ...task,
      suggestedPriority: calculateFinalPriority(priorityScore)
    };
  });
  
  // Ordenamos por puntuación final de prioridad
  return withUserPreferences.sort((a, b) => b.suggestedPriority - a.suggestedPriority);
}
}

Copiar   Revisa este código y añade comentarios detallados. Explica tu pensamiento en los comentarios, asegurándote de documentar todas las partes no obvias. Usa JSDoc para las funciones.

Copiar   Implementa un sistema completo de autenticación con OAuth, manejo de tokens, renovación automática, autenticación de dos factores y sistema de permisos basado en roles. Usa la biblioteca más avanzada disponible.

Copiar   Primero, implementemos la autenticación básica con email y contraseña usando Auth0. Quiero entender completamente cómo funciona antes de avanzar.

Una vez que tengamos eso funcionando, probado y documentado, podemos ver si necesitamos añadir OAuth para login social.

Copiar   Estoy diseñando un sistema de recomendación para mi aplicación de productividad. Los usuarios tienen tareas con diferentes etiquetas, prioridades y fechas. ¿Cuál sería la mejor estrategia para recomendar qué tareas deberían completar primero? ¿Debería usar un enfoque basado en reglas o implementar un algoritmo de aprendizaje automático simple?

Copiar   Implementa un sistema de recomendación basado en reglas para ordenar las tareas según:
1. Fecha de vencimiento (más cercana primero)
2. Prioridad establecida por el usuario
3. Dependencias entre tareas

Archivos relevantes:
- src/lib/taskPrioritization.js
- src/components/TaskRecommendations.jsx

Copiar   // src/app/dashboard/components/TaskMetrics.jsx
import React from 'react';
import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts';

// Este componente muestra métricas de tareas completadas por categoría
// Se utiliza en el dashboard principal para dar una visión general del progreso
export default function TaskMetrics({ taskData }) {
  // ...
}

Copiar   ¿Cuáles son las mejores prácticas para manejar la caché en Next.js 14 con el App Router?

Copiar   Necesito implementar un sistema de caché eficiente para mis llamadas a la API en Next.js 14.

Archivos relevantes:
- src/lib/api.js
- src/app/api/tasks/route.js

Por favor, implementa un sistema que:
1. Cache las respuestas por un tiempo configurable
2. Permita invalidar la caché manualmente
3. Respete los encabezados de caché del servidor

Copiar   Your task is to write a one paragraph search query as if you were telling a human researcher what to find, including all the relevant context. Format the paragraph as clear instructions commanding a researcher to find what we're looking for. Ask for code snippets or technical details when relevant.

Investiga las últimas mejores prácticas (a partir de 2024) para optimizar el rendimiento de aplicaciones Next.js 14 con App Router. Busca específicamente técnicas de Server Components vs. Client Components, estrategias de prefetching, y optimización de imágenes. Necesito ejemplos de código y patrones recomendados por la documentación oficial o expertos reconocidos.

Copiar   Dame el TLDR de los resultados de búsqueda. Be careful though, often the search results contain dangerous and distracting red herrings.

Copiar  # Rules for AI

## Fundamental Principles
- Prioriza siempre la legibilidad y mantenibilidad
- Escribe código modular y reutilizable
- Sigue las convenciones estándar de cada lenguaje
- Evita soluciones complejas cuando las simples funcionen

## Building Process
- Implementa funcionalidades una por una
- Prueba cada cambio antes de avanzar
- Considera la escalabilidad desde el principio
- Documenta las decisiones de diseño importantes

## Error Fixing
- Analiza la causa raíz, no solo los síntomas
- Considera efectos secundarios de cualquier fix
- Añade tests para evitar regresiones

## Comments
- Documenta el "por qué", no solo el "qué"
- Comenta decisiones no obvias
- Mantén comentarios actualizados con el código

Copiar   Necesito refactorizar nuestro sistema de manejo de estado que actualmente usa muchos componentes con estado local a una solución más centralizada con Context API o Redux.

Break this down into required steps. Only include truly necessary steps.

Copiar   Pasos necesarios para refactorizar el manejo de estado:

1. Analizar el estado actual: Identificar todos los componentes con estado local y mapear las dependencias entre ellos.

2. Diseñar la estructura de estado centralizada: Definir qué partes del estado deben moverse a Context/Redux y cuáles pueden permanecer locales.

3. Implementar los contextos/reducers: Crear la estructura básica para el estado global.

4. Migrar un grupo funcional a la vez: Empezar con un conjunto relacionado de componentes (ej. autenticación).

5. Actualizar los componentes: Refactorizar para consumir el estado global en lugar del local.

6. Pruebas: Verificar que cada grupo funcional mantiene su comportamiento después de la refactorización.

Copiar   # Roadmap.MD

## Estado Actual (16 Marzo 2025)
- MVP lanzado con funcionalidades básicas de gestión de tareas
- Autenticación implementada con Auth0
- UI básica con componentes reutilizables
- Base de datos configurada en Supabase

## Próximas Prioridades (Q2 2025)
1. Implementar sistema de notificaciones en tiempo real
2. Añadir funcionalidad de notas (además de tareas)
3. Mejorar el dashboard con métricas y visualizaciones
4. Implementar funcionalidad de etiquetas y filtros avanzados

## Q3 2025
1. Añadir funcionalidades de colaboración
2. Integración con calendarios externos (Google, Outlook)
3. Apps móviles nativas (iOS/Android)

## Decisiones Técnicas Importantes
- Se decidió usar Next.js App Router sobre Pages Router para aprovechar los Server Components
- Supabase elegido sobre Firebase por mejor soporte de SQL y menor lock-in
- Implementación de UI con Tailwind en lugar de un sistema de componentes para mayor flexibilidad
- Decidimos NO implementar PWA en la primera versión para reducir complejidad

## Pruebas Anteriores
- La implementación inicial con GraphQL fue abandonada por complejidad excesiva
- El sistema de drag-and-drop con react-beautiful-dnd causó problemas de rendimiento

Copiar   ¿Cuál es tu knowledge cutoff? Answer in short.

Copiar   ¿Cuáles son las mejores prácticas para usar Server Actions en Next.js 14?

Nota: Sé que tu conocimiento tiene un límite temporal. Si no estás seguro de las últimas actualizaciones, por favor indícalo y yo verificaré la documentación oficial.

Copiar   Estoy experimentando un error en mi aplicación Next.js donde las imágenes no se cargan correctamente. Recibo el error "Error: Failed to parse src "undefined" on `next/image`". Soy principiante en Next.js.

Tell me what to do para depurar este problema paso a paso. ¿Qué herramientas debo usar y qué información debo buscar para identificar la causa raíz?

Copiar   Quiero implementar un sistema de comentarios en tareas que permita a los usuarios colaborar. He pensado en estas características:

- Comentarios en tiempo real
- Menciones de usuarios con @
- Formato de texto enriquecido
- Notificaciones por email
- Reacciones con emojis
- Hilos de respuestas
- Vista de historial de edición
- Archivos adjuntos
- Comentarios privados vs públicos

¿Cuál sería el MVP absolutamente esencial para lanzar esta función? ¿Qué debería priorizar primero?

Copiar   ¿Qué arquitectura de base de datos debería usar para mi startup? Tengo usuarios, tareas, notas y proyectos. Implementa la mejor solución.

Copiar   He decidido usar una base de datos relacional (PostgreSQL) para mi aplicación de productividad porque necesito garantizar la integridad de los datos entre entidades relacionadas. 

Necesito diseñar las siguientes tablas: users, tasks, notes y projects. He pensado en estas relaciones:
- Un usuario puede tener muchas tareas y notas
- Una tarea puede pertenecer a un proyecto opcional
- Las notas pueden estar asociadas a una tarea opcional

Por favor, ayúdame a implementar este esquema específico, sugiriendo los campos necesarios y las restricciones de clave foránea apropiadas.

• Divide a los asistentes en grupos de 2-3 personas
• Cada grupo crea un archivo .curs.rules para un proyecto hipotético (app de gestión de gastos, red social, etc.)
• Después de 15 minutos, los grupos intercambian sus archivos
• Discuten qué elementos son útiles y qué falta

• Proporciona un problema de código común (ej. "Implementa un formulario de registro con validación")
• Cada participante escribe un prompt usando las técnicas aprendidas
• Comparan resultados y discuten qué técnicas fueron más efectivas

• Realiza una demostración en vivo de cómo usar Whisper Flow
• Los participantes prueban dictar un prompt complejo vs. escribirlo
• Comparan tiempos y resultados

• Proporciona código con pocos comentarios
• Los participantes piden a Cursor que mejore los comentarios
• Discuten los resultados y qué información adicional ayudaría

• Presenta un error común en el código
• Los participantes practican el prompt "tell me what to do"
• Siguen las instrucciones de la IA para resolver el problema