Construyendo Proyectos Completos con Cursor - Vibe Coding: Programación Asistida por IA

De Idea a Producción con Cursor

Aprende a construir aplicaciones completas usando Cursor como tu copiloto arquitectónico.

Proyecto Ejemplo: SaaS Todo App

Construiremos una app completa paso a paso.

Fase 1: Scaffolding

// Composer:
"Crear estructura Next.js 14 SaaS:
- App Router + TypeScript
- Prisma + PostgreSQL
- NextAuth con GitHub/Google
- Tailwind + shadcn/ui
- tRPC para API
- Stripe para pagos
Estructura:
/src
  /app (routes)
  /components
  /lib (utils, db, auth)
  /server (tRPC routers)
  /types
/prisma
  schema.prisma
Configs: tsconfig, tailwind, next.config
Setup: .env.example, README"
// Cursor genera TODA la estructura:
// ✓ 50+ archivos configurados
// ✓ Dependencies en package.json
// ✓ Prisma schema inicial
// ✓ Auth setup completo
// ✓ README con instrucciones

Fase 2: Autenticación

// Composer:
"Implementar auth completa:
1. NextAuth config:
   - Providers: GitHub, Google, Email
   - Prisma adapter
   - Session strategy: JWT
   - Callbacks para user data
2. Prisma models:
   - User, Account, Session
   - VerificationToken
3. Components:
   - SignInButton
   - UserMenu dropdown
   - Protected layout
4. Middleware:
   - Protected routes /app/*
   - Public: /, /signin, /signup
5. Utils:
   - getServerSession helper
   - useSession hook wrapper"
// Cursor implementa todo coordinadamente

Fase 3: Core Features

// Composer:
"Feature: Gestión de Todos
1. Prisma:
   model Todo {
     id, title, description, completed
     userId, projectId
     dueDate, priority, tags
   }
   model Project {
     id, name, color
     userId, todos
   }
2. tRPC Routers:
   todo.router:
     - list (paginado, filtros)
     - create, update, delete
     - toggle completed
     - reorder
   project.router:
     - CRUD completo
3. Frontend:
   - TodoList (virtual scroll)
   - TodoItem (inline edit)
   - TodoForm (validación Zod)
   - ProjectSidebar
   - Filters (status, priority)
4. Features:
   - Drag & drop reorder
   - Keyboard shortcuts
   - Optimistic updates
   - Offline support (local storage)
5. Tests:
   - Unit tests routers
   - Component tests
   - E2E user flows"
// Cursor genera feature completa

Fase 4: Payments

// Composer:
"Integrar Stripe:
1. Plans:
   - Free: 10 todos max
   - Pro: Unlimited, $10/month
2. Backend:
   - Webhook handler
   - Create checkout session
   - Customer portal
   - Subscription status check
3. Database:
   - User.stripeCustomerId
   - User.subscriptionStatus
   - User.subscriptionEnd
4. Middleware:
   - Check plan limits
   - Upgrade prompts
5. UI:
   - Pricing page
   - Upgrade modal
   - Subscription settings
   - Usage indicators"
// Full payment system implementado

Fase 5: Polish

// Series de prompts específicos:
1. "Agregar loading states a todos los forms"
2. "Error boundaries en componentes principales"
3. "SEO: metadata, og images, sitemap"
4. "Analytics: PostHog integration"
5. "Email notifications: Resend setup"
6. "Dark mode con persistencia"
7. "Responsive mobile optimization"
8. "Accessibility audit y fixes"

Patrones de Prompts Efectivos

Para Arquitectura

"Diseña sistema de [feature]:
- Database schema (Prisma)
- API layer (especificar tech)
- Frontend components
- State management
- Error handling
- Tests
Seguir patterns del proyecto."

Para Features

"Implementar [feature name]:
1. Backend:
   - [especificar endpoints]
   - [validaciones]
   - [reglas de negocio]
2. Frontend:
   - [componentes necesarios]
   - [interacciones]
   - [estados UI]
3. UX:
   - [loading, empty, error states]
   - [optimistic updates]
   - [keyboard shortcuts si aplica]
4. Tests:
   - [casos importantes]"

Para Optimización

"Optimizar [component/feature]:
- Performance:
  * Reduce re-renders
  * Lazy loading
  * Code splitting
  * Caching
- UX:
  * Loading skeletons
  * Transition animations
  * Error recovery
- Accessibility:
  * ARIA labels
  * Keyboard nav
  * Screen reader
- SEO (si aplica):
  * Meta tags
  * Structured data"

Debugging con Cursor

Error en Producción

// Cmd+L:
"Error en prod:
Stack trace:
[pegar error completo]
Context:
- Ocurre al crear todo
- Solo algunos users
- Desde ayer
¿Qué pasó y cómo arreglar?"
// Cursor:
// 1. Analiza stack trace
// 2. Revisa cambios recientes (git)
// 3. Identifica línea específica
// 4. Sugiere fix + test
// 5. Propone hotfix + rollback plan

Performance Issue

// Cmd+L:
"TodoList muy lento con 1000+ items.
Problemas:
- Scroll laggy
- Filtros tardan
- Re-renders constantes
[pegar componente]
¿Cómo optimizar?"
// Cursor sugiere:
// 1. Virtual scrolling (react-window)
// 2. Memoización (React.memo, useMemo)
// 3. Debounce filtros
// 4. Pagination en backend
// 5. Implementa y muestra benchmarks

Code Review con Cursor

// Antes de PR:
Cmd+L: "Review todo este feature branch:
1. Code quality
2. Potential bugs
3. Security issues
4. Performance concerns
5. Test coverage
6. Documentation
@src/features/notifications"
// Cursor analiza carpeta completa:
"## Review Feature: Notifications
### ✅ Good:
- Clean component structure
- Proper error handling
- Good TypeScript types
### ⚠️ Issues:
1. Security:
   - Line 45: Unvalidated user input in query
   - FIX: Add Zod validation
2. Performance:
   - NotificationList re-renders on every change
   - FIX: React.memo + useCallback
3. Bugs:
   - Race condition in useNotifications
   - Missing cleanup in useEffect
4. Tests:
   - No tests for webhook handler
   - Missing edge case tests
### 📝 Suggestions:
[código mejorado para cada issue]"

Refactoring Legacy Code

// Composer:
"Refactor legacy UserManagement:
 Actualmente:
 - Class components
 - Redux complejo
 - Props drilling
 - No TypeScript
 - No tests
 Migrar a:
 - Functional + hooks
 - React Query
 - Context API
 - TypeScript strict
 - Tests completos
 Mantener:
 - Misma funcionalidad
 - Compatibilidad API
 - No breaking changes
@src/legacy/UserManagement"
// Cursor:
// 1. Analiza código legacy
// 2. Crea nuevos componentes
// 3. Migra estado a React Query
// 4. Agrega tipos
// 5. Genera tests
// 6. Plan de migración gradual

Tips para Proyectos Grandes

Start small: Scaffolding → Auth → Core → Features
.cursorrules detallado: Cursor aprende tu estilo
Composer para arquitectura: Cambios coordinados
Cmd+K para detalles: Ajustes finos
Iterativo: Build → Review → Refine
Tests desde inicio: Pide tests siempre
Review frecuente: No acumules código sin revisar

Workflow Completo

1. Planning:
   - Cmd+L: "Arquitectura para [proyecto]"
   - Review y ajustar plan
2. Scaffolding:
   - Composer: Estructura completa
   - Review configs y setup
3. Features (iterativo):
   a. Composer: Feature completa
   b. Cmd+L: Preguntas específicas
   c. Cmd+K: Ajustes inline
   d. Review código generado
   e. Tests y fixes
   f. Commit
4. Polish:
   - Cmd+L: "Audit [aspecto]"
   - Aplicar mejoras
5. Pre-deploy:
   - Cmd+L: "Security audit"
   - Cmd+L: "Performance audit"
   - Fix issues
6. Deploy & Monitor:
   - Deploy
   - Usar Cursor para debugging prod

Con Cursor, construye apps completas 5x más rápido manteniendo calidad.