WEBVTT

00:00:00.080 --> 00:00:03.820
Back here in my project,
I can add a local skill which is

00:00:03.860 --> 00:00:07.630
available in the project by again going to
the .Claude folder and

00:00:07.680 --> 00:00:10.400
adding a skills subfolder in there.

00:00:10.440 --> 00:00:13.490
You can also create global skills,
and I'll get back to that.

00:00:13.580 --> 00:00:17.360
In that skills subfolder,
which also must be named skills, by the

00:00:17.400 --> 00:00:21.140
way, you then add one subfolder per skill.

00:00:21.180 --> 00:00:25.080
So, for example,
here since we're in a React project,

00:00:25.220 --> 00:00:26.480
a

00:00:26.560 --> 00:00:31.700
modern-best-practice-react-components

00:00:32.240 --> 00:00:35.500
skill. So my folder is named

00:00:35.560 --> 00:00:39.480
modern-best-practice-react-components,
and it's in that skills folder.

00:00:40.120 --> 00:00:43.930
And in that folder, so in
that modern-best-practice-react-components

00:00:44.000 --> 00:00:47.910
folder, in my case here,
you then add a Skill.md file, and that

00:00:48.060 --> 00:00:51.900
must be named Skill.md. In that Skill.md

00:00:52.020 --> 00:00:56.000
file, you then add some Markdown metadata,
and you must have

00:00:56.060 --> 00:01:00.010
a name and a description in there.
You can add more, I'll get back

00:01:00.040 --> 00:01:03.640
to it, but these two are required.
And these two will help

00:01:03.700 --> 00:01:07.080
Claude Code discover and load that

00:01:07.140 --> 00:01:10.920
skill when it needs to,
because the idea behind skills

00:01:11.020 --> 00:01:14.720
is that you can put quite a lot of text
into

00:01:14.760 --> 00:01:18.740
those skills if needed.
You should still be as concise as

00:01:18.800 --> 00:01:22.620
but you can add all the information in
here that makes up that

00:01:22.630 --> 00:01:26.220
skill.
But all those skills will not be loaded

00:01:26.260 --> 00:01:30.250
context window by default,
unlike Claude MD which is always

00:01:30.280 --> 00:01:33.740
loaded, as you learned. But instead,
they're discovered and

00:01:33.800 --> 00:01:37.670
loaded dynamically. So, for example,
if I have a skill that has

00:01:37.700 --> 00:01:41.660
something to do with React components,
it should be discovered whenever

00:01:41.700 --> 00:01:44.940
Claude Code works on React components.

00:01:44.960 --> 00:01:47.810
Now, the name must be the name of
that folder.

00:01:47.840 --> 00:01:51.800
So that's not a human readable name
necessarily, but that is the

00:01:51.840 --> 00:01:54.650
name of that skill,
must be the same as the folder.

00:01:54.650 --> 00:01:58.630
And, of course,
that name should include some important

00:01:58.660 --> 00:02:02.140
gives Claude Code some ideas on
when to use that skill.

00:02:02.160 --> 00:02:04.960
But the even more important part will be
the description.

00:02:05.000 --> 00:02:08.720
So here that could be something like build
clean modern React components that apply

00:02:08.820 --> 00:02:12.390
common best practices
and avoid common pitfalls and so on.

00:02:12.420 --> 00:02:16.180
By the way, you find the finished skill
or skills, since I built

00:02:16.220 --> 00:02:19.100
multiple skills for this project here,
attached.

00:02:19.140 --> 00:02:22.340
Now, this description
is important because combined with this

00:02:22.400 --> 00:02:25.989
title,
Claude Code will decide whether to use

00:02:26.060 --> 00:02:29.630
not. So all the titles
and descriptions of all your skills

00:02:30.080 --> 00:02:34.040
will be loaded into the Claude Code
context window, but only

00:02:34.080 --> 00:02:37.890
that. And the rest of the skills,
so whatever goes into the main file, will

00:02:37.940 --> 00:02:41.540
then only be loaded
if Claude Code determines that a skill

00:02:41.580 --> 00:02:45.400
Now you can also add more fields to
that skill

00:02:46.000 --> 00:02:49.360
metadata here. Attached you, again,
find a link to the official

00:02:49.380 --> 00:02:52.360
documentation that lists all metadata
fields.

00:02:52.440 --> 00:02:55.760
Name and description
are the only required ones though.

00:02:55.800 --> 00:02:59.780
But you can give Claude Code access to
certain tools when it

00:02:59.860 --> 00:03:03.260
uses that skill.
So you could restrict that

00:03:03.300 --> 00:03:07.220
by setting up some allowed tools.
If you don't do that,

00:03:07.300 --> 00:03:10.840
all the tools with that skill.
You can define which

00:03:10.920 --> 00:03:14.560
model to use with that skill,
if it should open up a new

00:03:14.620 --> 00:03:17.960
context window by setting context to fork.

00:03:18.020 --> 00:03:21.600
Otherwise,
it will use the context window off the

00:03:21.620 --> 00:03:25.520
used the skill.
Now I'm fine with all the defaults where

00:03:25.580 --> 00:03:28.780
main agent could use that skill
and can use all the tools.

00:03:28.820 --> 00:03:32.220
So here, I then set up a basic React

00:03:32.260 --> 00:03:35.620
component skill as I might want to use it
with certain

00:03:35.720 --> 00:03:39.540
conventions and patterns I want to use
when building React

00:03:39.600 --> 00:03:43.320
components. And obviously,
if you're a React developer, you

00:03:43.360 --> 00:03:47.260
can fine-tune or extend
that skill exactly as you need it

00:03:47.360 --> 00:03:50.920
for your projects.
Now there's one important thing about this

00:03:51.100 --> 00:03:55.000
specific skill here though. I have one

00:03:55.080 --> 00:03:58.380
extra document which I want to connect to
this skill.

00:03:58.900 --> 00:04:02.660
And you can do that because you want to
keep your skills

00:04:03.320 --> 00:04:07.140
fairly concise. Yeah,
they will only be loaded dynamically,

00:04:07.180 --> 00:04:11.040
they're loaded, they, of course,
still take up space in the context

00:04:11.100 --> 00:04:13.240
window. So you want to keep them concise.

00:04:13.260 --> 00:04:17.110
But when it comes to React,
there actually are some additional

00:04:17.140 --> 00:04:20.860
rules I want the AI to be aware of

00:04:20.959 --> 00:04:23.980
when working with a feature called
useEffect.

00:04:24.040 --> 00:04:27.480
You don't need to know it.
It's a React-specific feature

00:04:27.540 --> 00:04:31.539
complex, which is why there
are some specific rules related to that.

00:04:31.860 --> 00:04:35.570
I don't always want to load that,
but instead only when working with

00:04:35.660 --> 00:04:39.200
useEffect.
And the dynamic discoverability of

00:04:39.240 --> 00:04:43.080
skills doesn't stop with the skill itself,
because even after

00:04:43.120 --> 00:04:46.760
this skill was loaded, more skill-related

00:04:46.770 --> 00:04:50.080
documents and resources can be loaded
dynamically by the

00:04:50.140 --> 00:04:53.060
AI if it determines that it needs them.

00:04:53.120 --> 00:04:56.540
That's why I'm putting these useEffect
specific rules into a separate

00:04:56.580 --> 00:05:00.120
file. And the common convention for
that is to add a

00:05:00.140 --> 00:05:02.720
references folder in the skill folder.

00:05:02.740 --> 00:05:05.140
So in this specific skill folder, the

00:05:05.200 --> 00:05:09.120
modern-best-practice-react-components
folder, in there I add

00:05:09.200 --> 00:05:13.140
references. And in that references folder,
I then add another

00:05:13.180 --> 00:05:16.640
Markdown file,
and that's all part of the attached skills

00:05:16.680 --> 00:05:19.340
find. And this Markdown file,

00:05:19.400 --> 00:05:22.760
YouDon'tNeedUseEffect.md, is the file

00:05:23.280 --> 00:05:27.140
referenced here.
So I'm pointing at it to tell the AI,

00:05:27.200 --> 00:05:31.100
if you need more information,
if you're working with useEffect,

00:05:31.140 --> 00:05:35.100
at this file, please." And in there,
I then got more rules related to useEffect

00:05:35.180 --> 00:05:38.700
which I did not want to include in the
main skill, because I got

00:05:38.720 --> 00:05:42.320
examples in there and all that. And
that is all very useful

00:05:42.480 --> 00:05:46.320
and something you want to do. That
is exactly why skills exist.

00:05:46.380 --> 00:05:50.360
It gives you a powerful tool for providing
more context and more

00:05:50.420 --> 00:05:54.240
information to the AI.
But you want to build them such that

00:05:54.300 --> 00:05:57.860
they're dynamically built up
and dynamically

00:05:57.900 --> 00:06:01.380
discoverable,
because that's the main advantage of this

00:06:01.540 --> 00:06:04.796
featureNow, I added a bunch of skills now.

00:06:04.836 --> 00:06:08.676
Skills related to Next.js, to TypeScript,
Bun,

00:06:08.736 --> 00:06:12.496
and you absolutely can
and should extend these skills

00:06:12.616 --> 00:06:16.276
as you need. These
are not necessarily the best or

00:06:16.336 --> 00:06:20.246
final skills you can write here,
but these are just some skills we can use

00:06:20.276 --> 00:06:24.016
project to hopefully achieve better
results when working with

00:06:24.076 --> 00:06:27.946
React, Next.js, and so on. Now, of course,
you can also have

00:06:27.976 --> 00:06:31.916
global skills just as you can have global
sub-agents in

00:06:31.976 --> 00:06:35.776
your root cloud configuration folder on
your system, so

00:06:35.856 --> 00:06:39.796
outside of your project.
You can add a skills folder and add

00:06:39.896 --> 00:06:43.716
any skills you want to share across
projects in there so

00:06:43.796 --> 00:06:47.756
that they would be available in all
projects you manage with Cloud

00:06:47.836 --> 00:06:50.156
Code,
not just the one you're currently on.

00:06:50.216 --> 00:06:54.096
Unlike with sub-agents, the question
is whether you want to do that though,

00:06:54.116 --> 00:06:57.516
different projects may be using very
different tech stacks.

00:06:57.536 --> 00:07:01.506
And even though skills
are discovered dynamically,

00:07:01.536 --> 00:07:05.496
a certain skill does not matter to a
certain project at all because,

00:07:05.536 --> 00:07:09.376
for example, Next.js isn't used,
you might want to avoid loading

00:07:09.456 --> 00:07:12.796
anything related to that skill,
even just the name and

00:07:12.896 --> 00:07:16.716
description.
And you want to avoid the skill

00:07:16.776 --> 00:07:20.396
used by the AI.
That's why I typically prefer

00:07:20.596 --> 00:07:24.436
local project-specific skills,
but you can also set up global ones

00:07:24.556 --> 00:07:28.416
as mentioned.
With those skills added though, we can try

00:07:28.456 --> 00:07:32.396
moving on with this project. So,
for example, we could define

00:07:32.456 --> 00:07:36.156
a prompt like this
and rely on Cloud Code automatically

00:07:36.216 --> 00:07:40.026
discovering the relevant skills in reading
the Cloud MD file, and

00:07:40.036 --> 00:07:42.236
therefore, understanding the project.

00:07:42.256 --> 00:07:45.616
So, therefore,
here I just ask it to add a proper

00:07:45.656 --> 00:07:49.476
authentication route page content to this
app, and I tell that we only

00:07:49.516 --> 00:07:53.196
have email plus password authentication,
that users should be able to switch

00:07:53.216 --> 00:07:57.096
between modes with help of search params,
and that we don't

00:07:57.136 --> 00:07:59.956
need password resetting in this demo app.

00:08:00.016 --> 00:08:02.796
And I'll then again run this in plan mode.

00:08:02.806 --> 00:08:06.696
And now,
it should use the different sub-agents we

00:08:06.736 --> 00:08:10.026
Explorer in our case,
and also load skills as

00:08:10.056 --> 00:08:12.105
needed to build these components.

00:08:12.116 --> 00:08:16.036
And it's up to Cloud to decide whether it
needs a certain skill or

00:08:16.076 --> 00:08:20.046
not. And it gives me a plan that sounds

00:08:20.116 --> 00:08:23.416
almost good to me,
though I don't want users to enter a

00:08:23.425 --> 00:08:25.696
I just want to use their email for that.

00:08:25.736 --> 00:08:29.516
So, I'll deny this plan
and ask Cloud Code to check if we

00:08:29.596 --> 00:08:32.655
need to collect the name, and if we do,
I just want to use the email.

00:08:32.976 --> 00:08:36.796
So, here we go. We'll use the email.
We get an updated plan.

00:08:36.876 --> 00:08:39.796
I'll clear the context
and accept all edits.

00:08:39.876 --> 00:08:43.696
And I'll do something you can actually
always do, I'll inject a message

00:08:43.776 --> 00:08:47.616
whilst it's working,
and I'll tell it to use modern,

00:08:47.676 --> 00:08:51.296
JSX, and Tailwind code to give us a

00:08:51.436 --> 00:08:54.796
higher likelihood of it using the
appropriate skills

00:08:55.236 --> 00:08:57.296
under the hood.
And you can always do that.

00:08:57.336 --> 00:09:01.256
Whilst it's working
or whilst it's planning,

00:09:01.296 --> 00:09:04.796
will not be sent automatically. Instead,
they will be injected

00:09:05.596 --> 00:09:08.076
when there is time for it, so to say.

00:09:08.096 --> 00:09:11.516
So, here,
I didn't get any feedback related to my

00:09:11.536 --> 00:09:15.476
this follow-up message here to Cloud Code
before I manually

00:09:15.516 --> 00:09:19.466
review the code. And, of course,
behind the scenes, it's very likely that

00:09:19.496 --> 00:09:22.856
it also did explore
and use the skills we gave it

00:09:23.316 --> 00:09:26.516
to solve these tasks
or to handle these different

00:09:26.596 --> 00:09:29.496
prompts. So,
that's all looking good to me.

00:09:29.556 --> 00:09:33.526
This page also looks good to me. And
if I go to the

00:09:33.526 --> 00:09:37.016
Authenticate page,
I have a nice sign-in box.

00:09:37.076 --> 00:09:39.756
If I click Sign Up, I switch to that mode.

00:09:39.816 --> 00:09:43.496
So, that's all looking good. Now,
I'll try creating an account here,

00:09:43.846 --> 00:09:47.756
and this is only locally,
so I'll use a test email and a made-up

00:09:47.765 --> 00:09:50.866
password. So, looks like
that sign-up worked.

00:09:50.956 --> 00:09:54.946
I also have no error message here in the
server side log for my development

00:09:54.996 --> 00:09:58.906
server, and therefore,
we can continue with the next steps now

00:09:58.976 --> 00:10:02.366
also giving Cloud Code some useful skills
it can use when it needs

00:10:02.415 --> 00:10:03.236
them