Skip to content

Context engineering is the new vibe coding - it's the way to actually make AI coding assistants work. Claude Code is the best for this so that's what this repo is centered around, but you can apply this strategy with any AI coding assistant!

License

Notifications You must be signed in to change notification settings

vkingw/context-engineering-intro-4-cursor

 
 

Repository files navigation

Cursor Context Engineering Template

A comprehensive template for getting started with Context Engineering for Cursor AI - the discipline of engineering context so Cursor has the information necessary to get the job done end to end with maximum efficiency.

Context Engineering is 10x better than prompt engineering and 100x better than vibe coding.

With Cursor's @ symbols, Agent mode, and real-time web access, context engineering becomes even more powerful!

🚀 Quick Start

# 1. Clone this template
git clone https://github.com/coleam00/Context-Engineering-Intro.git
cd Context-Engineering-Intro

# 2. Set up your Cursor rules
# CURSOR.md contains optimized rules for Cursor's features

# 3. Add examples (highly recommended)
# Place relevant code examples in the examples/ folder

# 4. Create your initial feature request
# Edit INITIAL_CURSOR.md with your feature requirements

# 5. Use Cursor's Agent mode (Ctrl+I) with comprehensive context:
# @INITIAL_CURSOR.md @examples/ @CURSOR.md @Web "latest best practices for [your tech]"
# Then describe your feature implementation request

# 6. For quick iterations, use Ctrl+K with specific context:
# Select code, press Ctrl+K, reference @examples/similar-pattern.js for guidance

📚 Table of Contents

What is Context Engineering for Cursor?

Context Engineering with Cursor represents the next evolution beyond traditional prompt engineering:

Traditional Approach vs Cursor Context Engineering

Traditional Prompt Engineering:

  • Focuses on clever wording and specific phrasing
  • Limited to how you phrase a task
  • Like giving someone a sticky note

Cursor Context Engineering:

  • Leverages Cursor's @ symbol system for comprehensive context
  • Uses Agent mode (Ctrl+I) for end-to-end implementations
  • Combines real-time web access (@Web) with local codebase knowledge
  • Like having a senior developer with perfect project memory and internet access

Cursor-Specific Advantages

🎯 @ Symbol Context System

  • @files and @folders provide instant codebase context
  • @Web brings in real-time best practices and documentation
  • @Docs references official library documentation
  • @symbols targets specific functions and classes

🤖 Agent Mode (Ctrl+I)

  • End-to-end task completion with automatic context understanding
  • Runs commands and fixes errors automatically
  • Perfect for implementing complete features

Inline Editing (Ctrl+K)

  • Quick targeted edits with context awareness
  • Smart code generation at cursor position
  • Ideal for rapid iteration and refinement

🖥️ Terminal Integration

  • Natural language to terminal commands with Ctrl+K
  • Automated setup, testing, and deployment workflows

Template Structure

context-engineering-intro/
├── CURSOR.md                    # Cursor-specific global rules and optimization
├── INITIAL_CURSOR.md           # Template for Cursor feature requests
├── examples/                   # Code examples (critical for @ reference)
│   ├── README.md              # Examples usage guide
│   └── cursor-patterns/       # Cursor-specific patterns
├── cursor-workflows/          # Cursor-optimized workflows
│   ├── feature-development/   # Step-by-step Cursor workflows
│   ├── debugging/            # Error resolution patterns
│   └── refactoring/          # Code improvement workflows
├── context-bank/             # Reusable context snippets
│   ├── project-patterns/     # Common project structures
│   ├── api-integrations/     # API usage patterns
│   └── testing-patterns/     # Test implementation guides
└── README.md                 # This file

Step-by-Step Cursor Workflow

1. Set Up Global Rules (CURSOR.md)

The CURSOR.md file contains Cursor-optimized rules that leverage all of Cursor's capabilities:

  • @ Symbol usage patterns: How to efficiently load context
  • Agent mode strategies: When to use Ctrl+I vs Ctrl+K
  • Web research integration: Using @Web for current best practices
  • Error handling: Leveraging Cursor's automatic error detection
  • Multi-file editing: Patterns for complex refactoring

The provided template is optimized for Cursor's features out of the box.

2. Create Your Cursor Feature Request

Edit INITIAL_CURSOR.md to describe what you want to build:

## FEATURE:
[Describe what you want to build - be specific about functionality and requirements]

## CURSOR CONTEXT REFERENCES:
@examples/similar-feature/ @docs/api-reference.md @Web "latest patterns for [technology] 2024"

## EXAMPLES TO FOLLOW:
@examples/auth-pattern.js - Use this authentication flow
@examples/testing-pattern.test.js - Follow this testing structure

## VALIDATION CRITERIA:
- [ ] Feature works as specified
- [ ] Tests pass (use terminal Ctrl+K: "run all tests")
- [ ] Code follows @examples/ patterns
- [ ] No linting errors (Cursor auto-detects)

## CURSOR IMPLEMENTATION STRATEGY:
1. Use Agent mode (Ctrl+I) for initial implementation
2. Use Ctrl+K for refinements and adjustments
3. Use @Web for research on unfamiliar parts
4. Reference @examples/ throughout development

3. Execute with Cursor Agent Mode

Use Cursor's Agent mode (Ctrl+I) with comprehensive context:

# Load all relevant context
@INITIAL_CURSOR.md @examples/ @CURSOR.md @Web "best practices for [your technology stack] 2024"

# Then prompt Agent mode:
"Implement the feature described in @INITIAL_CURSOR.md, following the patterns in @examples/ and using the latest best practices from @Web research."

4. Iterate with Cursor Tools

For quick edits: Use Ctrl+K with context

# Select problematic code, press Ctrl+K:
@examples/similar-fix.js Fix this following the pattern shown here

For debugging: Combine multiple context sources

@current-file.js @tests/current-file.test.js @Web "debugging [specific error] in [technology]"

For refactoring: Use Agent mode for complex changes

@entire-module/ @examples/refactored-structure/ Refactor this module following the new structure pattern

Writing Effective INITIAL_CURSOR.md Files

Cursor-Optimized Sections

FEATURE: Be specific and implementation-focused

  • ❌ "Build a web scraper"
  • ✅ "Build an async web scraper using BeautifulSoup that extracts product data from e-commerce sites, handles rate limiting, and stores results in PostgreSQL with proper error handling"

CURSOR CONTEXT REFERENCES: Leverage @ symbols

@examples/scraper-pattern.py - Follow this async pattern
@examples/database-integration.py - Use this DB connection pattern
@docs/beautifulsoup-guide.md - Reference for parsing
@Web "Python async web scraping best practices 2024"
@Web "PostgreSQL connection pooling patterns"

VALIDATION CRITERIA: Use Cursor's capabilities

  • Tests must pass (use terminal Ctrl+K: "run pytest with coverage")
  • Code must follow @examples/style-guide.py patterns
  • No linting errors (Cursor will auto-detect)
  • Performance meets @examples/benchmark-results.md standards

The Cursor Context Engineering Workflow

Research Phase: @Web + @Docs

@Web "latest [technology] patterns 2024"
@Web "[framework] best practices current"
@Docs [Library] # e.g., @Docs React, @Docs Python

Context Gathering: @ Symbols

@project-root/ # Understand overall structure
@examples/ # See existing patterns
@src/relevant-module/ # Current implementation
@tests/ # Testing patterns

Implementation: Agent Mode (Ctrl+I)

  • Load comprehensive context with @ symbols
  • Use Agent mode for complex, multi-step implementations
  • Let Cursor handle error detection and fixes automatically
  • Agent mode understands your entire codebase context

Refinement: Ctrl+K

  • Quick edits with targeted context
  • Iterative improvements
  • Pattern-based modifications
  • Smart code generation

Validation: Terminal Integration

# Use Ctrl+K in terminal:
"run all tests with coverage report"
"check code quality and linting"
"run performance benchmarks"

Using Examples with @ Symbols

The examples/ folder becomes incredibly powerful with Cursor's @ system:

Context Loading Patterns

For new features:

@examples/feature-template/ @examples/testing-template/ @Web "modern [framework] patterns"

For debugging:

@examples/error-handling/ @current-buggy-file.js @Web "debugging [specific error]"

For refactoring:

@examples/refactored-structure/ @target-module/ @Web "code organization best practices"

Example Categories for Cursor

examples/
├── cursor-patterns/           # Cursor-specific usage patterns
│   ├── agent-mode-examples/  # Complex implementations with Agent mode
│   ├── ctrl-k-patterns/      # Quick edit patterns
│   └── context-loading/      # Effective @ symbol usage
├── architecture-patterns/    # System design patterns
├── integration-patterns/     # API and service integrations
├── testing-patterns/        # Test implementation strategies
├── error-handling/          # Error resolution patterns
└── performance-patterns/    # Optimization techniques

Cursor Best Practices

1. Master the @ Symbol System

  • Always start with broad context: @project/ @examples/
  • Drill down specifically: @src/components/Button.tsx
  • Combine local and web context: @examples/ @Web "React hooks 2024"
  • Reference documentation: @Docs TypeScript @examples/ts-patterns/

2. Use Agent Mode Strategically

  • Complex features: Use Ctrl+I with comprehensive @ context
  • Multi-file changes: Agent mode handles cross-file dependencies
  • Error resolution: Let Agent mode fix complex compilation issues
  • End-to-end workflows: Agent mode for complete feature implementation

3. Optimize Ctrl+K Usage

  • Quick edits: Select code, Ctrl+K with specific @ reference
  • Pattern application: @examples/pattern.js apply this pattern here
  • Code generation: Ctrl+K at cursor position with context
  • Incremental improvements: Rapid iteration with targeted context

4. Leverage Real-Time Research

  • Before implementation: @Web "latest [technology] best practices"
  • During debugging: @Web "solve [specific error] in [framework]"
  • For optimization: @Web "performance patterns for [use case]"
  • Stay current: @Web "[library] version [X] new features"

5. Structure Context Efficiently

# Efficient context loading order:
1. @Web "[technology] best practices 2024"        # Latest standards
2. @examples/similar-feature/                     # Local patterns
3. @src/current-implementation/                   # Current state
4. @Docs [relevant-library]                       # Official docs
5. @tests/existing-tests/                         # Testing context

6. Use Multi-Modal Capabilities

  • Drag screenshots for UI implementation guidance
  • Include diagrams for architecture discussions
  • Share error screenshots for debugging context
  • Use design mockups for exact implementation specs

Resources


💡 Pro Tip: Cursor's combination of @ symbols, Agent mode, and real-time web access makes it the most powerful context engineering platform available. Use all three together for maximum effectiveness!

About

Context engineering is the new vibe coding - it's the way to actually make AI coding assistants work. Claude Code is the best for this so that's what this repo is centered around, but you can apply this strategy with any AI coding assistant!

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Python 51.4%
  • TypeScript 44.9%
  • Shell 2.4%
  • Dockerfile 1.2%
  • JavaScript 0.1%