Vibe Coding Workflow

General Coding

• Write clear, concise, maintainable code
• Avoid unnecessary abstraction
• Add JSDoc/docstrings for public APIs and complex logic
• Handle errors explicitly with user-friendly messages
• Consider security (SQL injection, XSS, API key exposure)
• Choose efficient algorithms and data structures

Test-Driven Development

1. Write comprehensive tests first (positive, negative, edge cases)
2. Implement minimum code to pass tests
3. On failure: web search or official docs before each fix attempt
4. Max 3 attempts on same error - ask user for help if stuck

Feature Implementation Workflow

1. Planning

• Analyze requirements
• Present implementation plan to user
• Get approval before proceeding

2. Step-by-Step Implementation

• Break into logical small units
• Add logging (console.group/log) for debugging
• Test each step before proceeding
• Remove debug logs after stabilization

Context Management

File Documentation (First 100 Lines)

/**
 * @file UserProfile.tsx
 * @description User profile page component
 *
 * Main features:
 * 1. Display user info (name, email, avatar)
 * 2. Edit profile
 * 3. Upload profile image
 *
 * Core logic:
 * - Supabase Auth for user authentication
 * - React Query for data fetching/caching
 * - React Hook Form for form validation
 *
 * @dependencies
 * - @supabase/ssr
 * - @tanstack/react-query
 * - react-hook-form
 */

Organization

• Keep files under 500 lines
• Follow existing directory structure and naming conventions
• Reference .cursor/todo.md, .cursor/prd.md for project context

Refactoring

• Incremental, small changes
• Get user approval for large refactors
• Maintain existing code style
• Run tests before and after

Error Resolution Loop

1. Encounter error
2. Web search / context7 MCP for solution
3. Apply fix
4. Test
5. If same error after 3 attempts → ask user for help

Quality Automation

When linter/static analyzer shows errors:

1. Search for solution (web/docs)
2. Apply fix
3. Repeat until clean
4. Max 3 attempts per error type