Vibe Coding Tutorial and Best Practices (Cursor / Windsurf)

Introduction to Vibe Coding

• Discusses the concept of Vibe coding, using AI agents for coding with minimal manual input.

• Describes agent-based coding in Cursor or Wind Surf, aiming for end-to-end application development.

• Shares setup details, primarily using CLA 3.7 models focused on thinking capabilities.

Model Setup and Customization

• Explains how to set up models in Cursor settings, including adding custom models via API keys.

• Emphasizes the importance of choosing models that support agentic behavior and function calling.

• Recommends writing a detailed specification for applications to guide the AI effectively.

Spec Writing and Implementation

• Uses Grock 3 to write a technical spec for a Twitter clone application with backend in Python.

• Demonstrates pasting specifications into Cursor's AI pane for implementation.

• Highlights the use of rules in Cursor/Wind Surf to guide AI on technology and workflows.

Managing Technology Choices

• Discusses issues faced when AI switches technologies unexpectedly during development.

• Shows how to create project-specific rules within Cursor to maintain consistency in technology usage.

Coding Preferences and Best Practices

• Introduces MTH Access as a generative AI tool offering various LLM options at an affordable price.

• Outlines personal coding preferences emphasizing simplicity and avoiding code duplication.

Understanding Development Environments

• Agents lacked clarity on the distinction between development, testing, and production environments, leading to confusion.

• Emphasized making changes only when requested or well understood to avoid unintended consequences.

• Focus on specific tasks without introducing unrelated changes; avoid new patterns unless necessary.

Code Management Practices

• Exhaust all options for existing implementations before rewriting code; remove old logic to prevent duplication.

• Avoid creating one-off scripts that clutter the codebase; prefer inline execution or deletion post-use.

• Refactor large files (over 200-300 lines); early refactoring prevents breaking tests later.

Data Handling Guidelines

• Avoid using mock data in development or production; ensure proper data scraping functionality.

• Clearly state not to use stubbing or fake data patterns in critical environments.

• Prevent overwriting important files like API keys during operations.

Technical Stack Specifications

• Define a clear technical stack: Python for backend, HTML/JS for frontend, SQL database usage only.

• Specify the need for hosted versions of services like Elasticsearch instead of local setups.

Coding Workflow Preferences

• Write thorough tests for all major functionalities automatically after coding tasks are completed.

• Avoid major architectural changes unless explicitly instructed; focus on fixing existing issues rather than rewriting from scratch.

Best Practices for Managing Context in AI Chats

Understanding Context Limitations

• Be aware of the context you provide; too much can hinder performance.

• Starting a new chat resets context, which may be necessary for better results.

Managing Chat Preferences

• Insert workflow and coding preferences manually to maintain context.

• Keep requests narrow; focus on small fixes and features for effective testing.

Testing Strategies

• Use end-to-end testing rather than unit tests for more accurate results.

• Monitor test fixes closely to avoid unintended production issues.

Choosing Technology Stacks

Importance of Popular Technologies

• Select widely-used stacks (e.g., Python, HTML, JavaScript) for better AI performance.

• Popular technologies have more documentation available for AI research.

Interacting with the AI Agent

Example of Code Interaction

• The agent analyzes code and suggests changes based on its findings.

• Various tools are available within the agent to assist with tasks.

Execution Modes

• Choose between manual approval or YOLO mode for executing changes automatically.

• Auto mode balances between manual approvals and automatic execution.

Managing Test Results and Context

Handling Test Failures

• Review failed tests carefully; the agent will attempt to fix them automatically.

Maintaining Context Efficiency

Coding with AI: Insights and Best Practices

Iteration Challenges

• The coding process is slow, taking 2 to 15 minutes per iteration cycle for testing and fixing.

• Using multiple cursor windows allows working on different branches simultaneously, enhancing productivity.

• Refactoring code can improve organization but should be low-risk to avoid breaking functionality.

Asynchronous Coding Experience

• Making changes becomes challenging after many iterations; prior knowledge could have improved efficiency.

• The ability to issue commands while multitasking makes the process feel asynchronous and flexible.

• A mobile-friendly coding agent would enhance coding feasibility on-the-go, though current options are limited.

Best Practices in Version Control

• Committing changes frequently is crucial for easy rollback if issues arise.

• Built-in chat history allows restoring previous states of code easily, providing a safety net during development.