Skip to main content

Menciones de Contexto (@file, @folder, @codebase)

Mecanismo de control preciso del contexto en editores de IA modernos (Cursor, Windsurf). Permite adjuntar rápidamente archivos específicos (@file), carpetas completas (@folder), documentación (@docs) o todo el proyecto (@codebase) a la consulta mediante el símbolo @.

1. Visión general del concepto y problema sistémico

Cuando trabajas en un gran proyecto de 100 archivos y escribes en el chat: “Arregla el botón de autorización”, el modelo se encuentra confundido. ¿En cuál de los 10 archivos se encuentra este botón? ¿Qué estilo utiliza? ¿Dónde se almacenan las contraseñas?

Menciones de contexto (símbolo @) — es una herramienta quirúrgica en vibecoding. Al igual que etiquetas a amigos en Telegram o Instagram con el símbolo @, en los editores Cursor y Windsurf puedes etiquetar recursos de tu proyecto.

Al presionar @, abres una lista de sugerencias y le indicas claramente al modelo: “Mira @Header.tsx y utiliza los colores de @theme.ts.

Analogía práctica: habilidad clave que evita alucinaciones y reduce el tiempo de espera de respuesta en tres veces.

2. Taxonomía arquitectónica y modelo mental

┌─────────────────────────────────────────────────────────────┐
│                 MENÚ DE MENCIONES EN EDITORES DE CÓDIGO    │
├─────────────────────────────────────────────────────────────┤
│ 📄 @Files:                                                  │
│    Adjunta un archivo específico: por ejemplo `@Button.tsx` │
│    (Máxima precisión, mínimo consumo de tokens)             │
├─────────────────────────────────────────────────────────────┤
│ 📁 @Folders:                                                │
│    Adjunta toda una carpeta: por ejemplo `@src/components`  │
│    (Cuando necesitas revisar todos los componentes relacionados juntos) │
├─────────────────────────────────────────────────────────────┤
│ 🌐 @Codebase:                                               │
│    Escanea todo el proyecto mediante búsqueda vectorial     │
│    (Ideal para preguntas: “¿Dónde se maneja la API en el proyecto?”) │
├─────────────────────────────────────────────────────────────┤
│ 📚 @Docs:                                                   │
│    Conecta la documentación oficial actualizada de frameworks│
├─────────────────────────────────────────────────────────────┤
│ 💻 @Terminal:                                               │
│    Transmite al chat el texto del último error de la consola │
└─────────────────────────────────────────────────────────────┘

3. Pipeline técnico y mecánica interna

01. Corrección de un componente específico

No escribas frases generales. Escribe:

“Mira @LoginForm.tsx. Haz que aparezca una advertencia roja debajo del campo de entrada cuando la contraseña sea incorrecta.”

02. Creación de nuevo código a partir de un existente

Si deseas crear una nueva página en el mismo estilo que la anterior:

“Crea una nueva página @src/app/about/page.tsx con la misma estructura y estilos que en @src/app/contact/page.tsx.”

03. Análisis de un error desde la terminal

Si aparece un texto rojo de error en la consola, escribe en el chat:

“Aquí está el error de @Terminal. Explica en qué archivo ocurrió el fallo y cómo solucionarlo.”

4. Escenarios prácticos de ingeniería en producción

01. Por qué el contexto puntual es mejor que el completo @codebase

Cuantos menos archivos innecesarios envíes al modelo, más clara será su atención. Si la tarea se refiere a un solo botón, especificar @Button.tsx dará resultados 10 veces mejores que buscar en todo el repositorio de código.

/ Preguntas frecuentesSchema.org FAQPage

FAQ: Menciones de Contexto (@file, @folder, @codebase)

La inteligencia artificial intentará adivinar 'a ciegas' a qué archivo o función te refieres, o comenzará a buscar en todo el repositorio. Esto consume tiempo innecesario, quema tokens y a menudo resulta en que el modelo modifica el archivo incorrecto.
/ Enlaces internos
Todos los términos