Context Mentions (@file, @folder, @codebase)

1. Concept Overview & Systemic Problem

When working on a large project with 100 files and you type in chat: “Fix the login button,” the model is left confused. Which of the 10 files contains this button? What style does it use? Where are the passwords stored?

Context Mentions (the @ symbol) are a surgeon's tool in vibe coding. Just as you tag friends in Telegram or Instagram with the @ sign, in Cursor and Windsurf editors, you can tag resources from your project.

By pressing @, you open a list of suggestions and clearly instruct the model: “Look at @Header.tsx and use colors from @theme.ts.”

Practical analogy: a core skill that prevents hallucinations and reduces response time by threefold.

2. Architectural Taxonomy & Mental Model

┌─────────────────────────────────────────────────────────────┐
│                 CONTEXT MENTIONS MENU IN CODE EDITORS      │
├─────────────────────────────────────────────────────────────┤
│ 📄 @Files:                                                  │
│    Attaches a specific file: e.g., `@Button.tsx`           │
│    (Best accuracy, minimal token waste)                     │
├─────────────────────────────────────────────────────────────┤
│ 📁 @Folders:                                                │
│    Attaches an entire folder: e.g., `@src/components`       │
│    (When you need to review all related components together)│
├─────────────────────────────────────────────────────────────┤
│ 🌐 @Codebase:                                               │
│    Scans the entire project via vector search               │
│    (Ideal for questions like: “Where is the API handled in the project?”)│
├─────────────────────────────────────────────────────────────┤
│ 📚 @Docs:                                                   │
│    Connects to the latest official documentation of frameworks│
├─────────────────────────────────────────────────────────────┤
│ 💻 @Terminal:                                               │
│    Passes the latest error text from the console to chat    │
└─────────────────────────────────────────────────────────────┘

3. Technical Pipeline & Internal Mechanics

01. Fixing a Specific Component

Avoid vague phrases. Write:

“Look at @LoginForm.tsx. Make it so that a red warning appears below the input field when the password is incorrect.”

02. Creating New Code Based on Existing Samples

If you want to create a new page in the same style as an old one:

“Create a new page @src/app/about/page.tsx with the exact same structure and styles as in @src/app/contact/page.tsx.”

03. Analyzing an Error from the Terminal

If a red error text appears in the console, type in chat:

“Here’s the error from @Terminal. Explain which file the failure occurred in and how to fix it.”

4. Production Engineering Scenarios

01. Why Point Context is Better than Full @codebase

The fewer unnecessary files you pass to the model, the cleaner its focus. If the task concerns a single button, specifying @Button.tsx will yield results ten times better than searching through the entire code repository.

02. Enhancing Collaboration with Context Mentions

Using context mentions allows team members to communicate more effectively by providing precise references to files and components, reducing misunderstandings and speeding up development cycles.

03. Streamlining Debugging Processes

By utilizing the @Terminal mention, developers can quickly share error messages, enabling faster troubleshooting and resolution of issues without sifting through logs manually.

5. Pitfalls, Common Mistakes & Security

• Overusing @codebase: Relying on the entire codebase can lead to irrelevant context being provided, increasing the likelihood of hallucinations.
• Neglecting Documentation: Failing to use @docs can result in outdated or incorrect information being referenced, leading to implementation errors.
• Security Risks with @web: Be cautious when using @web to ensure that sensitive information is not inadvertently exposed during online searches.