WEBVTT

00:00:00.080 --> 00:00:03.700
In the previous lecture, I showed you
that you can edit

00:00:03.780 --> 00:00:07.689
your instructions or your prompts
and resend them and

00:00:07.720 --> 00:00:10.620
revert changes, which
is important to know.

00:00:10.660 --> 00:00:14.560
However,
there is one thing I did here in this

00:00:15.100 --> 00:00:18.620
which I'd rather not do inside of a
prompt, and that's this

00:00:18.660 --> 00:00:21.980
instruction regarding the code style
that should be used.

00:00:22.000 --> 00:00:25.080
Because, of course, if this
were a real project, I would

00:00:25.540 --> 00:00:29.100
probably add more and more code
and work on different

00:00:29.260 --> 00:00:32.640
files, and I don't want to paste this

00:00:32.680 --> 00:00:36.540
instruction into every single prompt I
send to the

00:00:36.600 --> 00:00:40.320
AI when I start a new chat, for example,
because all the context is

00:00:40.380 --> 00:00:43.700
lost there.
And that's where a feature called

00:00:43.780 --> 00:00:47.720
cursor rules comes into play.
And for that, I'll switch back to editor

00:00:47.740 --> 00:00:50.300
mode because it's a bit easier to see
there.

00:00:50.320 --> 00:00:54.220
With cursor rules,
you can set up some rules

00:00:54.260 --> 00:00:57.940
followed by the AI without you
re-specifying them in

00:00:58.020 --> 00:01:01.200
every new chat you start.
And you can add a new rule

00:01:01.880 --> 00:01:05.540
simply with help of the new cursor rule
command

00:01:06.620 --> 00:01:10.340
or by going to your cursor settings,
and then

00:01:10.360 --> 00:01:11.120
there under

00:01:11.180 --> 00:01:15.100
Rules/Memories/Commands, you can

00:01:15.140 --> 00:01:18.700
click on Add Rule.
And you can either set up general

00:01:18.920 --> 00:01:22.640
user rules which apply to all your
projects or project

00:01:22.720 --> 00:01:25.100
rules which just apply to this project.

00:01:25.120 --> 00:01:29.030
And for the React-specific code styles,
I'll add a rule for this

00:01:29.140 --> 00:01:31.940
specific project instead of a general user

00:01:32.040 --> 00:01:35.960
rule. Now once you click that,

00:01:36.040 --> 00:01:39.900
you should enter a title which typically

00:01:39.910 --> 00:01:40.860
looks something like

00:01:42.280 --> 00:01:45.300
react-code-style, anything like that.

00:01:45.360 --> 00:01:49.060
So all lowercase with dashes instead of
blanks, which

00:01:49.120 --> 00:01:52.660
aren't allowed. So I'll hit Enter,
and this opens an

00:01:52.720 --> 00:01:55.100
editor which allows me to define
that rule.

00:01:55.120 --> 00:01:57.380
It also adds it as a physical file in a

00:01:57.460 --> 00:02:01.380
.cursor/rules folder. And, of course,
you can also simply create those

00:02:01.420 --> 00:02:03.200
files manually if you wanna do that.

00:02:03.260 --> 00:02:06.300
Just important that the extension is .mdc.

00:02:06.360 --> 00:02:10.160
Now it all starts with determining
when that rule should be

00:02:10.180 --> 00:02:14.160
used,
if it should always be applied to all

00:02:14.220 --> 00:02:18.010
applied intelligently hoping
that the agent will pick it up when it's

00:02:18.040 --> 00:02:21.780
appropriate, which can and cannot work,
if it should apply to

00:02:21.860 --> 00:02:25.010
specific files, or
if you wanna apply it manually.

00:02:25.040 --> 00:02:28.840
If you choose that and you save that file,
you would have to use Add and then

00:02:28.850 --> 00:02:32.240
specify that rule file like this to apply
that

00:02:32.300 --> 00:02:35.720
rule. Now here

00:02:35.740 --> 00:02:38.570
I'll choose Apply to specific files and

00:02:38.600 --> 00:02:42.520
choose this file extension, so any

00:02:42.540 --> 00:02:46.380
file with any name that ends with .tsx,
which is the extension used

00:02:46.420 --> 00:02:48.960
for React component files in this case.

00:02:49.000 --> 00:02:52.980
In a Python project,
you might be using a *.py.

00:02:53.020 --> 00:02:56.700
Here it's *.tsx. And then in that rule

00:02:56.800 --> 00:03:00.720
file,
you use plain text to describe the rule

00:03:00.920 --> 00:03:04.380
like, for example,
"Create functions via the function

00:03:04.480 --> 00:03:08.430
keyword, not as arrow functions.
Exception, anonymous

00:03:08.500 --> 00:03:10.560
functions, closures are arrow

00:03:10.620 --> 00:03:14.540
functions." And, of course,
you can add more, though

00:03:14.600 --> 00:03:18.100
you should keep your rule files focused
and not make them too

00:03:18.140 --> 00:03:21.880
complex because the more you add here,
the higher the

00:03:21.940 --> 00:03:24.860
danger of the AI getting lost at some
point.

00:03:24.900 --> 00:03:28.780
You can, of course,
also add multiple rules and, for example,

00:03:28.840 --> 00:03:32.360
a rule for how CSS code should look like,
that certain

00:03:32.400 --> 00:03:35.470
features should be used or not and so on.

00:03:35.480 --> 00:03:38.400
So you can add as many rules here as you
want.

00:03:38.410 --> 00:03:41.460
Now cursor rules are one useful feature.

00:03:41.540 --> 00:03:44.590
Alternatively to those cursor-specific
rule

00:03:44.720 --> 00:03:47.260
files, you can also add a file called

00:03:47.360 --> 00:03:51.210
agents.md to your project. And you can

00:03:51.280 --> 00:03:53.940
add that file in different places.

00:03:53.980 --> 00:03:56.500
You can add it in the root project

00:03:56.540 --> 00:04:00.090
folder,
so here next to all these configuration

00:04:00.160 --> 00:04:04.140
files. In that case,
it will always be applied because the

00:04:04.180 --> 00:04:07.370
thing about this file is that even without

00:04:07.420 --> 00:04:11.260
explicitly referencing it,
which you could, of course, do

00:04:11.320 --> 00:04:15.060
though, but even without doing that,
cursor should

00:04:15.280 --> 00:04:19.220
load it into the chat invisibly just like
it loads rules

00:04:19.279 --> 00:04:22.680
that apply to the chat based on your rule
application

00:04:22.760 --> 00:04:26.640
rules. So agents.md
is loaded automatically and if it's in

00:04:26.680 --> 00:04:30.580
the root project folder,
it will be applied to all chats.

00:04:30.680 --> 00:04:34.600
If it's in some other folder,
it will smartly be applied depending

00:04:34.660 --> 00:04:38.080
on whether you're working on one of these
files in that

00:04:38.090 --> 00:04:41.980
folder or a subfolder or not. So if

00:04:42.180 --> 00:04:46.100
I had a components folder here
and I added agents.md in

00:04:46.200 --> 00:04:49.740
there,
this file would only be loaded into the

00:04:50.160 --> 00:04:54.100
if I had some instruction,
some task for the AI

00:04:54.280 --> 00:04:57.570
that involves working on some files in
that components

00:04:57.640 --> 00:05:01.540
folder.
So if I had a todo-list.tsx file in

00:05:01.600 --> 00:05:05.020
there, which currently is empty,
then whenever working on that

00:05:05.060 --> 00:05:08.440
file, this file here should be taken into

00:05:08.450 --> 00:05:12.290
account.
And you can then define rules that

00:05:12.320 --> 00:05:16.290
should apply to the AI agent in
that agents.md file just

00:05:16.340 --> 00:05:18.800
as you did it in the cursor rules files.

00:05:18.820 --> 00:05:22.680
However, what's important is that,
of course, this agents.md file

00:05:22.760 --> 00:05:26.680
now needs to merge all the rules
that should potentially apply to the

00:05:26.700 --> 00:05:30.180
files it will be loaded for.
You can also have multiple

00:05:30.240 --> 00:05:33.160
agents.md files in different levels.

00:05:33.180 --> 00:05:36.870
So if I had a styles folder,
I could also have an agents.md file in

00:05:37.180 --> 00:05:40.920
and put my style-specific rules in here.

00:05:40.960 --> 00:05:44.700
And again,
these different agents.md files should be

00:05:44.760 --> 00:05:48.630
needed automatically depending on
which files are touched by

00:05:48.640 --> 00:05:52.420
cursor for a given task.
If you wanna be sure that they're

00:05:52.460 --> 00:05:55.969
loaded,
you can always explicitly reference them,

00:05:56.080 --> 00:05:59.820
Here I kept it rather simple
and now with that agents.md

00:05:59.920 --> 00:06:03.720
file added,
I'll add a new task for my AI here

00:06:04.720 --> 00:06:08.160
and tell it to move the to-do list
management and rendering logic from the

00:06:08.240 --> 00:06:12.060
app.tsx file to todo-list.tsx.
I could add more

00:06:12.100 --> 00:06:16.060
instructions and also switch to plan mode
but this is rather straightforward so

00:06:16.080 --> 00:06:19.050
it should be fine if I just send it like
this in agent mode.

00:06:19.060 --> 00:06:22.860
So now here it's done
and it updated two files effectively

00:06:22.880 --> 00:06:26.820
pulling all that to-do list-related
management code out of the app.tsx

00:06:26.840 --> 00:06:30.380
file and moving it into todo-list.tsx.

00:06:30.460 --> 00:06:33.990
The app still works fine just as before,
so I'll just

00:06:34.020 --> 00:06:35.820
accept all those changes.