👉 Note: The composer is now full integrated into the sidebar (v0.43). The functionality is almost the same.

Hey! Welcome back. We’re gonna dig into something super useful – how to use the @files and @folders annotations to make your coding life easier. I know from experience that when you’re deep in a project, managing files and keeping everything organized can get tricky. The cool thing about @files and @folders is that they help the AI understand the bigger picture of what you're working on. This way, it can give you better suggestions. So, by the end of this lesson, you’ll know how to give the AI access to specific project files and folders, which will make your code generation and editing way more accurate. Alright, let’s break it down step by step. Let’s see how to use @files and @folders to work with a website project in Cursor. Using @files, you can focus the AI on specific files, like index.html, while @folders allows you to target entire directories, like css or js, for a broader context. In the project shown here, we have several files and folders: index.html: The main HTML structure of the site. css/style.css: Contains styling rules. js/script.js and js/counter.js: JavaScript files for added functionality. Let’s say we want to add a feature that shows a list of recipes on our website. For this we will add a new javascript file called recipes.js. Then, open a new conversation in the Composer by with CMD+SHIFT+I and press the + button here. Now choose the recipes.js and write: “create a list of recipes with title, description and placeholder image” once the code generation is finished it will create the new code only in this file. Now lets reject this change and I show you how you can achieve the same with @files symbol. Again write the prompt and now add @recipes.js to the prompt. So again you will only reference the recipe.js file. Let’s apply this try it out. So nothing happens and nothing has changed since we just created an isolated recipes.js file but didn’t call this anywhere. We didn’t tell the html where and how we want to show this script. Let’s do it another way. Now delete the recipe.js again and let’s try again. Write now this prompt “create a list of recipes with title, description and placeholder image in @recipe.js, then import the recipes in @script.js and show it in @index.html” Now hit enter and see what happens. Alright let’s see what happened here. First we have our recipe.js. This file holds our list. Everything related to our recipe list is stored and organized here. But it’s decoupled and it never gets imported from our website. Look now at the script.js here we “import” our recipe data and we prepare and inject it into our website. This happens here to get a connection between index.html and recipe.js Cursor has created a selector for it. Now let’s try this and you can see that our recipe list is loaded correctly. So what happened here. We have told Cursor exactly where and how we want to use our functionality. For this small example, this doesn't have much impact, but for a codebase, working with such symbols or annotations is crucial. Alright not always you need this kind of detailed selection. In most cases you can just use folders or even @codebase which we will handle in the next lesson. But first let’s give it another try for the folders dir. What if we decided that we don’t want two “DOMContentLoaded” events. Like we just want to register the event listener once in our script.js. So for this just write a prompt and tag the js folder. Add the counter and recipe elements in content loaded event listener only once in the script.js file @js. Hit enter and see what happens. Let’s look at the diffs.