✨ VibeCoding with Cursor: Best Practices for AI-Powered Development

May 18, 2025 (2mo ago)

Why VibeCoding? The Future of AI-Powered Development

VibeCoding is a modern methodology embracing AI tools to revolutionize software creation. It's not just about coding; it's about an efficient AI-assisted development workflow.

  • 🚀 Boost your developer productivity, speed, and efficiency to craft programming solutions in an incredible way!
  • 🦄 Faster MVP and PMF, to iterate project faster in natural language.
  • 🧑🏻‍💻 It's technology agnostic but much better when you know your technology stack to leverage the AI tools even faster ~

That's the future way to building and crafting web apps.

Getting Started with Cursor: Your AI Coding Assistant

Before diving into VibeCoding techniques, let's learn how to effectively use the Cursor AI editor, a powerful AI coding assistant, to make the most of its features. If you are familiar with Cursor, you can skip this part. Or you can directly to Cursor Docs to learn more about Cursor.

Basic Code Editing with Cursor AI

  • Tab Engineer: use tab to let the code completion happen quickly
  • Multi-Line Edits: tab can work with multiple lines at once or jump to the next target position to edit
  • Smart Rewrites: use tab to rewrite the code quickly

Using Cursor Chat for Codebase Interaction & AI Assistance

Cursor Chat allows you to interact with an AI that has context of your codebase, acting as a responsive AI programming assistant. The chat can always see your current file and cursor, so you can ask it things like: "Is there a bug here?". You can add particular blocks of code to the context with ⌘+Shift+L or "@." You can chat with your entire codebase with ⌘+Enter.

  • Instant Apply
  • Codebase Answers
  • Directly Reference Code
  • Images using multi-modal to generate code
  • Ask web use @Web indicator (search)
  • Add documentation address as more ctx. for RAG process

AI Code Generation & Edits with Cmd+K in Cursor

The ⌘ K command in the Cursor editor is your gateway to powerful AI code generation and modification. To edit, try selecting some code, click "Edit," and describe how the code should be changed. To generate completely new code, just type ⌘ K without selecting anything.

  • Fast Edits
  • Terminal Cmd + K
  • Quick Questions
  • Inline Generations
  • Inline Edits

Leveraging Cursor Rules for Enhanced AI Context

Cursor Rules are powerful context-sharing tools within the Cursor AI editor that bridge the gap between composers and chat interactions, crucial for effective AI-assisted development.

Cursor Rules serve as collections of thoughts, rules, and documentation that can be:

  • Shared between different parts of your development environment
  • Referenced using the @ syntax
  • Enhanced with file attachments
  • Used as dynamic templates for various development scenarios

General Scenarios

  1. Dynamic Boilerplate Generation

    • Create templates for common code patterns
    • Store project-specific scaffolding rules
    • Maintain consistent code structure across your team

  2. Architecture Documentation

    • Frontend specifications
    • Backend design patterns
    • Data model documentation
    • System architecture guidelines

  3. Development Guidelines

    • Coding standards
    • Project-specific rules
    • Best practices
    • Team conventions

My experience guide:

  • use .context folder to collect all the related context, try to use git submodule to manage the context sharing across different projects.
  • use .cursor directory to manage all the cursor related files, including .cursorrules, .cursorignore, etc and manage them via cursor app it self.
  • .cursor can reference .context folder for context sharing.

Managing Cursor Editor Settings with the .cursor Folder

Obey the rules of Cursor Editor and is the main entry for cursor related files.

For more cursor rule guide, you can refer to Awesome Cursor Rules.

Cursor Agent Mode: Your Proactive AI Coding Partner

Cursor's Agent mode provides an AI coding assistant that lives directly in your editor, proactively helping with your development tasks. It helps you explore code, write new features, and modify existing code without leaving your workflow. Use ⌘I to open it, and ⌘N to create a new Composer.

Enable Agent with ⌘. to get a coding partner that proactively works with your codebase:

  • Automatically pull relevant context (try @Recommended)
  • Run terminal commands
  • Create and modify files
  • Search code semantically
  • Execute file operations

Agent can make up to 25 tool calls before stopping. For now, Agent supports only Claude models.

  • Iterate on lints → Composer attempts to fix linting issues in generated code for most programming languages. If Composer detects lint errors, it will try to fix them automatically when this feature is enabled. Currently, only one iteration is supported.

Cursor x MCP

  • use MCP for your private tools usage, try to encapsulate your tools into MCP server and provide extra context for coding related things to Cursor.
  • example MCP server can be found in awesome-mcp-server and some github awesome lists.

VibeCoding: Core Best Practices for AI-Assisted Development

To truly harness the power of VibeCoding and tools like the Cursor editor, consider the following core best practices for a productive AI-assisted development experience.

Core VibeCoding Principles for Effective AI Collaboration

  • Strategic Prompt Engineering: Crafting clear, contextual, and iterative prompts.
  • Tool-Specific Context Mechanisms: Leveraging features like .cursorrules and custom instructions.
  • Human Oversight and Evaluation: Maintaining critical review of all AI-generated code.
  • Proactive Quality Management: Ensuring maintainability and security in AI outputs.
  • Continuous Learning: Adapting skills alongside AI capabilities, keep learning and evolving.

VibeCoding Manifesto

  • Human-AI collaboration philosophy
  • Choosing the right tech stack
  • Balancing AI assistance with developer expertise

Vibe Manifesto guide the principles of VibeCoding as below:

  • Focus on the problem, not the code. Code is just the medium—what matters is solving the right problems.
  • Taste is the ultimate filter. AI can generate infinite solutions, but only human judgment can pick the right one.
  • Systems thinking beats syntax mastery. The best engineers don't just code—they architect, evaluate, and iterate.
  • AI is your co-creator. The best engineers wield AI to amplify their impact, not just automate tasks.
  • Speed is the new craftsmanship. The highest priority is delivering valuable software continuously and exponentially faster.
  • Deliver in minutes, not days. AI enables a pace where shipping happens as fast as thinking.
  • Change is fuel. Welcome new requirements at any stage—flexibility is a superpower, not a burden.
  • Simplicity scales. The best way to build fast and flexibly is to maximize what you don't build.
  • Code is disposable. If it doesn't work, reroll. Don't get attached.
  • Favor reinvention over patchwork. When a solution no longer meets our needs, we embrace regeneration to achieve greater clarity and efficiency.
  • Optimize for acceleration. The future belongs to those who build with exponential speed in mind.
  • Evolve constantly. Teams should reflect, adapt, and upgrade their tools and workflows regularly.

VibeCoding Strategy

General strategies for VibeCoding:

  • unified prompting engineering: build robust and precise prompts & context engineering for AI tools, see the next section for more details
  • small is beautiful: small projects in mono repos, small is beautiful, small is powerful in large scale view, keep things simple and elegant way, such as file, class, service, and module, even the application itself.
  • breaking complex tasks into manageable components: use techniques like task decomposition, modular design, and microservices to simplify development and enhance collaboration.
  • iterative refinement strategies: continuously improve and adapt your codebase through regular feedback loops and incremental changes.

CodeQuality Strategies:

Refactoring AI-Generated Code

  • Treating AI outputs as initial drafts
  • Proactive and iterative refinement processes
  • Example prompts for effective refactoring

Design Principles

  • Emphasizing reusability in prompts and outputs
  • Clear architecture and modular design
  • Consistent naming conventions

Testing Approaches

  • Test-driven development with AI assistance
  • Writing tests for stability and refactoring
  • Using tests to guide AI code generation

Mastering Context & Prompt Engineering for Cursor AI

Effective context and prompt engineering are fundamental to maximizing the benefits of any AI coding assistant, especially the Cursor AI editor. For basic rules:

  • basic prompting engineering techniques (just learn from internet, there are a lot of resources)
  • precise and contextual prompting requirements
  • use code as examples as few-shot learning demonstrations
  • add software engineering knowledge and experience from real world software engineering in brief and concise way

For tools to better indexing the code:

  • Enable Workspace / Project Indexing
  • General Cursor Rule
  • .cursorrules for project system prompt

High Quality Cursor Rules Example:

# React App Development Instructions
 
## Core Principles
 
- Design first, then implement
- Use appropriate state management (zustand recommended)
- Decompose UI into View, Business, and Basic components
- Enforce data immutability
- Maintain component orthogonality (separation of responsibilities)
- Use object-oriented paradigm with TypeScript for complex business logic
 
## Performance Optimization
 
- Prevent unnecessary re-renders:
 
  - Don't create component classes in render functions
  - Pass state to leaf nodes when possible
  - Pass children as props
  - Use React.memo to prevent downward updates
  - Use useMemo/useCallback for expensive operations
  - Use unique keys for lists
  - Use useMemo for Context values
  - Separate data and API methods in Context
  - Use multiple Context providers instead of one
  - Implement Context Selectors
 
- Decompose components to minimize render scope
- Implement appropriate caching strategies
- Use RenderHighlight in React DevTools to detect render issues
- Optimize package size with TreeShaking
 
## Stability Guidelines
 
- Use mature libraries with version locks
- Prevent circular dependencies in Hooks
- Implement XSS protection
- Add ErrorBoundary for error handling
 
## Maintainability Guidelines
 
- Unify code style with linters
- Standardize directory and project organization
- Apply design patterns and principles
- Strictly separate views and logic
- Limit file length to 500 lines maximum

Make full-use of providing context by use @ symbol, and use @Recommended to get the best context for your code generator.

  • @ Symbol boost
    • Files: auto / full-file / outline / chunks
    • Folders: is especially useful for long context chat where you want to provide a lot of context to the AI.
    • Code : select and add to chat
    • Docs : reference to docs lib in project
    • Git : check the git diff and info
    • CodeBase : Through @Codebase, Cursor Chat goes through these steps until it finds the most important pieces of code to use.
      • Gathering: scanning through your codebase for important files / code chunks
      • Reranking: reordering the context items based on relevancy to the query
      • Reasoning: thinking through a plan of using the context
      • Generating: coming up with a response
    • Web : use extra context searching with web
    • Chat : with specific chat-history / sessions
    • Definitions : symbol adds all nearby definitions to Cmd K as context.
  • PastedLinks
  • .cursorignore : This file allows you to specify which files or directories should be excluded from indexing, ensuring that only relevant content is considered during the context engineering process.

Building Project-Specific Instructions for Cursor AI Code Generation

writing your PRD and tech design inside the .context is better for AI to learn and generate the code.

.context basic folder for all rules and instructions for AI as project folder

  • project.manifest.md - general introduction for the project

/prd the project folder for all PRD, modules and iterations related specifications

  • /main.md - main folder for all the code, description of the project
  • /modules/* - all the modules for the project (optional)
  • /commits/* - so your basic instructions should be persist here and quote by the AI tool for iteration and generation (optional)

/iterations/[iteration-name].md all the production iterations for the code, the trace is important (optional)

/release/[x.x.x].md similar to release logs and feature tags for the project

/tech technology rule folder for all the tech-stack

  • /general-guide.md - general rules for all the tech-stack -> this is for project specific
  • /modules/* - all the modules for the project (optional) tech design
  • /[general-biz].md - tech-stack guide for the project
    • /oo-bp.md: object-oriented programming best practice
    • /react-bp.md: react best practice
    • /next.js.md: next.js best practice
    • ...

/commit commit message rules for all the commit messages

  • /commit-msg.md - rules for commit msg generation

Combo with GithubCopilot or cursor rule file .mdc let's take Github Copilot as an example:

{
  "github.copilot.chat.commitMessageGeneration.instructions": [
    {
      "file": ".github/commit.instruction.md"
    },
    {
      "file": ".context/commit.instruction.md"
    }
  ],
  "github.copilot.chat.codeGeneration.instructions": [
    {
      "file": ".context/project.manifest.md"
    },
    {
      "file": ".context/prd.main.md"
    },
    {
      "file": ".context/tech/general-guide.md"
    },
    {
      "file": ".context/tech/react.js.md"
    },
    {
      "file": ".context/tech/next.js.md"
    }
  ]
}

Repository Management

  • Monorepo with workspaces approach
  • Small, focused projects within larger structures
  • File naming best practices (concrete vs. generic names), avoid use index.ts those easy-to-duplicate names in AI Era

Technology Stack Recommendations for AI-Assisted Software Development

Choosing a mature and elegant tech stack is crucial for any project, especially in AI-assisted software development. Using a well-structured boilerplate can help you start quickly with your AI coding assistant. Here I use next.js as an example.

  • Framework-specific best practices (React, Next.js, etc.)
  • API design guidelines and conventions
  • Database schema standardization

VSCode Features

  • VSCode Extensions and Configs migration
  • Search with Alfred with PROJECT

Typical Scenarios for Using Cursor in AI-Powered Development

Codebase & General QA with Cursor AI

when the code-base index is enabled, you can ask the AI to do the code-base QA and general QA.

use dev-in's wiki to learn open-source code quickly, for private code, you can use @Codebase to get the context of the code to do quick QA.

Starting New Projects: 0 to 1 with VibeCoding and Cursor

start from scratch, build a new project with Cursor and VibeCoding.

  • use boilerplate to start quickly with maturity and elegance, print the BP in code boilerplate
  • prepare the .context folder first according to the project requirements and rules above.
  • start the step by step coding with Cursor and VibeCoding to create the project from scratch.

Iterating on Existing Projects (1 to N) with VibeCoding and Cursor

feature iteration, module iteration, and keep trace in prd dir, and update or promoted your tech in sync with the project level instructions.

AI-Assisted Testing Strategies with Cursor Editor

  • set up the test environment wit mature and elegant test framework, like jest or vitest for unit test, and cypress for e2e test.
  • TDD Approach: write tests first and then implement the code
  • BDD Approach: write tests for the existing code and refactor, do feature iteration

add your test BP to system prompt of AI tool, to maintain the test quality and coverage automatically.

Refactoring Code Efficiently with Cursor AI

target on existing code, refactor the code with Cursor and VibeCoding.

  • consider use TDD to write the test first and then refactor the code, and use Cursor to help you with the TDD process.
  • use container (remote) mode, is a good way to refactor the code, and use Cursor to help you with the TDD process remotely.

AI-Assisted Code Review using Cursor

  • code Review with AI assistance, ask AI to review the code and give suggestions, with @Diff to check the diff of the code locally.
  • in dev-ops, platform may have some code review process, you can use other llm service to help you with the code review process and enable those tools to do the code review with peers and AI, let AI do the dirty job.

Streamlining Bug Fixing with Cursor AI and VibeCoding Principles

  • prepare rich and detailed bug report with the bug description, steps to reproduce, and expected behavior.
  • let ai write local test cases to reproduce the bug, and then fix the bug with AI assistance.
  • let ai write tests for the bug fix, and then run the tests to verify the bug fix.

Generating Documentation with AI Assistance in Cursor

  • write the doc-style you want in system rule
  • just generate the doc with AI assistance and keep in sync when code is modified

Automated Commit Message Generation with Cursor AI

some tools have commit message generation, you can use the commit message generation tool to generate the commit message automatically and add your custom rules to the commit message generation tool is a good way to keep the commit message consistent and easy to read.

Reference

Updates

  • 2025-03-16: add cursor rules and agent related content like .cursor and .context dir usage and examples, and MCP guide.
  • 2025-05-18: upgrade to general vibe-coding guideline

Arno Crafting Apps

ELABORATION STUDIO 🦄

Elaborate your ideas and solve your problems with AI in fully boosted context way ~