Composer y Edición Inteligente

Cursor: IDE Construido para IA

Más que VS Code con IA. Diseñado desde cero para desarrollo asistido.

Ventajas sobre VS Code + Copilot

• Chat con conocimiento de proyecto completo
• Edición multi-archivo simultánea
• Composer para cambios arquitectónicos
• Mejor contexto y memoria
• GPT-4, Claude, modelos locales

Cmd+K: Edición Inline

// Selecciona código + Cmd+K
// Antes:
function fetchUsers() {
  fetch("/api/users")
    .then(res => res.json())
    .then(data => console.log(data));
}
// Prompt: "Convertir a async/await con error handling"
// Después:
async function fetchUsers() {
  try {
    const response = await fetch("/api/users");
    if (!response.ok) {
      throw new Error(`HTTP ${response.status}`);
    }
    const data = await response.json();
    return data;
  } catch (error) {
    console.error("Error fetching users:", error);
    throw error;
  }
}

Cmd+L: Chat Contextual

// Chat conoce TODO el proyecto
"¿Cómo funciona la autenticación?"
// → Analiza AuthContext, useAuth, API routes
"¿Qué componentes usan el hook useCart?"
// → Lista archivos y líneas específicas
"¿Tenemos tests para UserService?"
// → Muestra coverage y gaps

Composer (Cmd+Shift+I)

Feature killer: cambios multi-archivo coordinados.

Ejemplo: Sistema de Roles

// Prompt en Composer:
"Agregar sistema de roles de usuario:
1. Prisma:
   - Model Role (id, name, permissions)
   - Relación User → Role
   - Seed roles: admin, editor, viewer
2. Backend:
   - tRPC middleware checkRole()
   - Procedures protegidos por rol
3. Frontend:
   - Hook useHasRole(roleName)
   - Component ProtectedRoute
   - UI conditional por rol
4. Tests:
   - Tests middleware
   - Tests hook
   - E2E role enforcement"
// Cursor edita SIMULTÁNEAMENTE:
// ✓ schema.prisma
// ✓ seed.ts
// ✓ auth.middleware.ts
// ✓ user.router.ts
// ✓ useHasRole.tsx
// ✓ ProtectedRoute.tsx
// ✓ auth.test.ts
// ✓ e2e/roles.spec.ts
// Muestra diff de cada archivo
// Acepta/rechaza cambios individuales

Ejemplo: Feature Completa

// "Implementar sistema de favoritos:
// Backend:
// - Tabla favorites (userId, productId)
// - Endpoints: add, remove, list
// - Validar producto existe
// Frontend:
// - FavoriteButton component
// - useFavorites hook
// - Página MyFavorites
// - Optimistic updates
// Seguir patterns del proyecto existente"
// Cursor:
// 1. Analiza cómo se hacen features similares
// 2. Mantiene consistencia de estilo
// 3. Usa mismas herramientas (Prisma, tRPC)
// 4. Genera tests siguiendo patrón
// 5. Actualiza tipos TypeScript

Tab Awareness

Cursor analiza archivos abiertos para contexto:

// Tabs abiertas:
// 1. types.ts (interface User)
// 2. UserService.ts
// 3. UserList.tsx
// En UserList escribes:
const handleDelete = async (userId) => {
  // Cursor sugiere usando UserService de tab 2
  await UserService.deleteUser(userId);
  // Y con tipos de User de tab 1
}

@-Mentions

// Chat con referencias específicas:
"@UserService.ts ¿cómo mejorar performance?"
"@schema.prisma @user.router.ts sincronizar estos"
"@src/components optimizar re-renders en carpeta completa"

.cursorrules

Configuración persistente del proyecto:

// .cursorrules en root
# Project Context
This is a Next.js 14 e-commerce with:
- TypeScript strict mode
- Prisma + PostgreSQL
- tRPC for API
- Tailwind for styles
# Code Style
- Functional programming (no classes)
- Arrow functions
- Explicit types (no any)
- async/await (no .then)
# Components
- Named exports
- Props interface above component
- PropTypes validation
- Accessibility required
# Testing
- Vitest for unit
- Playwright for e2e
- Coverage > 80%
# AI Instructions
- Always suggest tests
- Security-first approach
- Performance-conscious
- Mobile-responsive default

Codebase Indexing

Cursor indexa proyecto completo:

// Preguntas sobre codebase:
"¿Dónde se define el schema de autenticación?"
// → Encuentra en múltiples archivos relacionados
"Muestra todos los usos de deprecated API"
// → Lista completa con contexto
"¿Qué archivos no tienen tests?"
// → Identifica gaps de coverage

Cmd+K Multi-Select

// Selecciona múltiples bloques (Cmd+D)
// Selecciona todas las funciones similares:
function createUser(data) { ... }
function createPost(data) { ... }
function createComment(data) { ... }
// Cmd+K: "Agregar try/catch y logging"
// Aplica a TODAS las funciones seleccionadas

Flujos de Trabajo

Refactoring Grande

1. Cmd+L: "Analiza este componente"
2. Identificar issues
3. Composer: "Refactor siguiendo best practices"
4. Review changes
5. Cmd+K inline para ajustes
6. Tests automáticos

Nueva Feature

1. Composer: Descripción completa feature
2. Genera scaffolding multi-archivo
3. Cmd+L: Preguntas específicas
4. Cmd+K: Ajustes inline
5. Review y test

Bug Fix

1. Cmd+L: "Tengo este error [pegar]"
2. Cursor identifica archivo y línea
3. Sugiere fix
4. Cmd+K para aplicar
5. Genera regression test

Tips Pro

1. .cursorrules: Define context una vez, Cursor lo recuerda
2. Tabs abiertas: Más context = mejores sugerencias
3. Composer para arquitectura: Cambios grandes coordinados
4. Cmd+K para details: Ediciones pequeñas precisas
5. @-mentions: Referencia archivos específicos

Limitaciones

• Requiere buenos specs para Composer
• Puede generar mucho código (review necesario)
• API costs con GPT-4 (usa límites)
• Learning curve vs autocomplete simple

Comparación

Cursor = arquitectura y features complejas. Copilot = autocompletado rápido.