In the previous lecture, I showed you that you can edit
your instructions or your prompts and resend them and
revert changes, which is important to know.
However, there is one thing I did here in this
which I'd rather not do inside of a prompt, and that's this
instruction regarding the code style that should be used.
Because, of course, if this were a real project, I would
probably add more and more code and work on different
files, and I don't want to paste this
instruction into every single prompt I send to the
AI when I start a new chat, for example, because all the context is
lost there. And that's where a feature called
cursor rules comes into play. And for that, I'll switch back to editor
mode because it's a bit easier to see there.
With cursor rules, you can set up some rules
followed by the AI without you re-specifying them in
every new chat you start. And you can add a new rule
simply with help of the new cursor rule command
or by going to your cursor settings, and then
there under
Rules/Memories/Commands, you can
click on Add Rule. And you can either set up general
user rules which apply to all your projects or project
rules which just apply to this project.
And for the React-specific code styles, I'll add a rule for this
specific project instead of a general user
rule. Now once you click that,
you should enter a title which typically
looks something like
react-code-style, anything like that.
So all lowercase with dashes instead of blanks, which
aren't allowed. So I'll hit Enter, and this opens an
editor which allows me to define that rule.
It also adds it as a physical file in a
.cursor/rules folder. And, of course, you can also simply create those
files manually if you wanna do that.
Just important that the extension is .mdc.
Now it all starts with determining when that rule should be
used, if it should always be applied to all
applied intelligently hoping that the agent will pick it up when it's
appropriate, which can and cannot work, if it should apply to
specific files, or if you wanna apply it manually.
If you choose that and you save that file, you would have to use Add and then
specify that rule file like this to apply that
rule. Now here
I'll choose Apply to specific files and
choose this file extension, so any
file with any name that ends with .tsx, which is the extension used
for React component files in this case.
In a Python project, you might be using a *.py.
Here it's *.tsx. And then in that rule
file, you use plain text to describe the rule
like, for example, "Create functions via the function
keyword, not as arrow functions. Exception, anonymous
functions, closures are arrow
functions." And, of course, you can add more, though
you should keep your rule files focused and not make them too
complex because the more you add here, the higher the
danger of the AI getting lost at some point.
You can, of course, also add multiple rules and, for example,
a rule for how CSS code should look like, that certain
features should be used or not and so on.
So you can add as many rules here as you want.
Now cursor rules are one useful feature.
Alternatively to those cursor-specific rule
files, you can also add a file called
agents.md to your project. And you can
add that file in different places.
You can add it in the root project
folder, so here next to all these configuration
files. In that case, it will always be applied because the
thing about this file is that even without
explicitly referencing it, which you could, of course, do
though, but even without doing that, cursor should
load it into the chat invisibly just like it loads rules
that apply to the chat based on your rule application
rules. So agents.md is loaded automatically and if it's in
the root project folder, it will be applied to all chats.
If it's in some other folder, it will smartly be applied depending
on whether you're working on one of these files in that
folder or a subfolder or not. So if
I had a components folder here and I added agents.md in
there, this file would only be loaded into the
if I had some instruction, some task for the AI
that involves working on some files in that components
folder. So if I had a todo-list.tsx file in
there, which currently is empty, then whenever working on that
file, this file here should be taken into
account. And you can then define rules that
should apply to the AI agent in that agents.md file just
as you did it in the cursor rules files.
However, what's important is that, of course, this agents.md file
now needs to merge all the rules that should potentially apply to the
files it will be loaded for. You can also have multiple
agents.md files in different levels.
So if I had a styles folder, I could also have an agents.md file in
and put my style-specific rules in here.
And again, these different agents.md files should be
needed automatically depending on which files are touched by
cursor for a given task. If you wanna be sure that they're
loaded, you can always explicitly reference them,
Here I kept it rather simple and now with that agents.md
file added, I'll add a new task for my AI here
and tell it to move the to-do list management and rendering logic from the
app.tsx file to todo-list.tsx. I could add more
instructions and also switch to plan mode but this is rather straightforward so
it should be fine if I just send it like this in agent mode.
So now here it's done and it updated two files effectively
pulling all that to-do list-related management code out of the app.tsx
file and moving it into todo-list.tsx.
The app still works fine just as before, so I'll just
accept all those changes.