WEBVTT 00:00:00.160 --> 00:00:11.040 Now let's have a look at adding an image to this hero section. Please generate an image of a woman jogging next to the beach. The agent correctly identified that it's got access to our image generator skill. 00:00:11.120 --> 00:00:24.545 And if we have a look at it, we get this image with this little chat bot saying, hey, you got this, keep going. And on this placeholder, once we place with an image generated by Claude code, we can use skills to give our agents access to extra capabilities. 00:00:24.865 --> 00:00:28.545 Like you saw in the intro, we were able to get Claude code to generate images, 00:00:28.990 --> 00:00:31.230 which is something that Claude can't do natively. 00:00:31.470 --> 00:00:45.065 So in this video, you'll learn everything you need to know to get started with using skills from finding and installing skills to creating your very own skills. We'll also have to look at the differences between skills, MCP servers, 00:00:45.145 --> 00:00:46.745 and custom commands. 00:00:46.745 --> 00:00:53.945 And we'll also look at advanced topics like creating skills that rely on sensitive data like API keys. 00:00:54.310 --> 00:01:01.670 So, I think this infographic describes it best. We can use skills to teach Cloud Code how to do something that it couldn't do natively. 00:01:01.830 --> 00:01:03.830 For example, generating images. 00:01:04.150 --> 00:01:07.270 Skills are basically markdown files with very precise instructions. 00:01:07.735 --> 00:01:12.055 And along with those instructions, we can also include any other resources. 00:01:12.215 --> 00:01:20.935 For example, if the agent needs to generate an image, the markdown file will contain precise instructions on how to use a Python script to generate those images. 00:01:21.380 --> 00:01:24.340 Or another example is the front end design skill, 00:01:24.500 --> 00:01:27.460 which provides a lot of context and resources 00:01:27.540 --> 00:01:30.340 for building high quality UI designs. 00:01:30.580 --> 00:01:34.180 So we can use skills to specify very specific workflows 00:01:34.340 --> 00:01:47.005 and even provide domain knowledge. So basically, we can use skills to take the existing knowledge built into Claude along with any tools that it already has access to to execute very specific workflows. 00:01:47.165 --> 00:01:58.800 Skills get confused with MCP servers all the time, but the real difference is that MCP servers simply provide new tools to the agent. So these tools could give the agent access to control a browser window 00:01:58.960 --> 00:02:00.960 or to access a database, 00:02:01.040 --> 00:02:01.680 etcetera. 00:02:01.840 --> 00:02:04.240 And, of course, we can combine skills with tools 00:02:04.645 --> 00:02:07.285 to create very specialized workflows. 00:02:07.285 --> 00:02:10.485 And custom commands are purely reusable prompts. 00:02:10.565 --> 00:02:17.205 So custom commands are not really related to skills or MCP servers in any way. These are simply reusable prompts 00:02:17.380 --> 00:02:21.140 that the user can store to easily access those prompts again. 00:02:21.300 --> 00:02:26.820 Whereas skills is actually auto activated by the agent based on the conversation's context. 00:02:26.980 --> 00:02:52.800 If we ask the agent to generate an image, it will then see it's got access to the image generation skill, pull in that skills markdown file, and then follow the instructions in that file to generate an image. Of course, for the MCP servers and any other tools, those will always be available in the agent's context. So, yes, you could have a tool that can generate images as well, but keep in mind that tool along with all of its metadata 00:02:53.040 --> 00:02:57.200 will be preloaded into the agent's context and consume tokens 00:02:57.280 --> 00:03:04.195 whether or not the agent needs a tool or not. That's why in some instances, skills are preferred over MCP servers 00:03:04.275 --> 00:03:10.675 because as you'll see in this video, skills actually take up very little context. If you are interested in this infographic, 00:03:10.675 --> 00:03:16.660 I'll link to it in the description of this video. I use Claude without any skills or MCP servers 00:03:16.740 --> 00:03:23.300 to create this landing page for a fitness app. So this is very much based on the training data built into Claude. 00:03:23.380 --> 00:03:32.965 And it doesn't look bad, but we will use our skills to greatly improve this design. And of course, towards the end of the video, I'll show you how to create your own skill for generating images, 00:03:33.045 --> 00:03:35.525 and then we'll replace this placeholder 00:03:35.685 --> 00:03:45.520 with our actual AI generated image. So how do we add skills to Claude Code? Luckily, that's super easy. We can download skills from existing marketplaces, 00:03:45.680 --> 00:03:53.520 so skills created by other users, or we can create our very own skills. Let's start by downloading skills from existing marketplaces. 00:03:53.760 --> 00:04:07.985 Now, there are really two ways to do this. Now, one solution, and this is actually the most complex solution, I'll show you an easier way in a second, is to use the built in plugins function within Claude code. So within Claude, we can go to plugin, 00:04:08.420 --> 00:04:15.780 and by default, you won't see any plug ins in this list. What you'll have to do is press right to go to marketplaces 00:04:15.940 --> 00:04:18.100 and then add a new marketplace 00:04:18.260 --> 00:04:20.500 like the official Anthropic marketplace. 00:04:20.625 --> 00:04:24.545 So these marketplaces are typically stored in GitHub repositories. 00:04:24.545 --> 00:04:29.345 And Anthropic has this official repository, which I'll link to in the description as well. 00:04:29.665 --> 00:04:31.105 And in this repo, 00:04:31.345 --> 00:04:33.665 we have access to several plugins. 00:04:33.745 --> 00:04:35.425 So if we go into the plugin folder, 00:04:35.870 --> 00:04:38.510 we can see all these available plugins. 00:04:38.670 --> 00:04:42.270 And within there, we have something like the front end design skill, 00:04:42.430 --> 00:04:45.710 which basically contains a folder for the skill itself 00:04:45.950 --> 00:05:00.065 and this markdown file containing very strict instructions on using this skill. Now, we don't really care about the contents of these files at this stage. If you want, you can definitely read through it, but it's nothing more than very detailed instructions. 00:05:00.065 --> 00:05:09.800 Now, there are many repositories out there and if you note the repository path, all you have to do is copy the URL then we can go to add marketplace, 00:05:10.040 --> 00:05:11.800 paste in that GitHub URL, 00:05:11.960 --> 00:05:16.120 and of course, I'm getting this message because I've already installed this marketplace. 00:05:16.440 --> 00:05:19.400 But for you, you will now see this marketplace, 00:05:19.480 --> 00:05:21.880 you will be able to browse all the plugins, 00:05:22.245 --> 00:05:38.710 and you can simply press space bar to select any plugins you want, like this front end design skill. So after selecting the skill that you want, you can simply press I on the keyboard to install that skill. And then afterwards, if we run the skills command, 00:05:38.950 --> 00:05:42.070 we will see the front end design skill has been installed. 00:05:42.230 --> 00:05:44.950 Now, this has been installed at user level. 00:05:45.110 --> 00:05:49.350 Now, I'm going to show you a way easier way to find and install skills. 00:05:49.715 --> 00:05:53.235 Simply go to this website skills.sh. 00:05:53.315 --> 00:05:59.395 This is a really cool project from Vercel, and this is an open agent skills ecosystem. 00:05:59.555 --> 00:06:09.230 This makes it really easy to search for new skills. You can also view all the training skills, what's hot right now, or just have a look at the all time favorites. 00:06:09.550 --> 00:06:14.510 This is such a cool project. If we have a look at these all time favorite skills, 00:06:14.750 --> 00:06:21.285 the most popular one seems to be this find skills skill. So with this skill, we can ask the agent to automatically 00:06:21.285 --> 00:06:30.885 search this marketplace for a suitable skill, and it will be able to install the skill itself. Another really useful skill is a skill creator skill. 00:06:30.885 --> 00:06:33.640 So with this skill, we can give our agents some instructions 00:06:33.880 --> 00:06:45.800 and it will be able to create the skill itself. There are so many really useful skills here. I do recommend this for Sell React best practices skill if you are using Vite or React or Next. 00:06:46.705 --> 00:06:49.905 And I also really like this front end design skill. 00:06:50.065 --> 00:06:55.505 So let's actually have a look at installing this skill. All we have to do is copy this command, 00:06:55.585 --> 00:07:01.745 then back in our project, let's paste in that command and press enter. Now we can select our tool or CLI. 00:07:02.100 --> 00:07:04.260 So I've got Cloth Code installed 00:07:04.260 --> 00:07:06.980 and I'm also using cursor. 00:07:06.980 --> 00:07:14.900 So I'll just press space to select these tools. Let's press enter. Then we can specify if we want to use the skill at project level or globally 00:07:14.900 --> 00:07:16.580 across all of our projects. 00:07:16.985 --> 00:07:21.945 I like setting up skills at project level because that way I can add them to the repository 00:07:22.105 --> 00:07:26.665 and my entire team will have access to the same skills. Then I'll select Symlink, 00:07:26.665 --> 00:07:28.425 let's proceed with installation, 00:07:28.825 --> 00:07:30.985 and what this did is in the Claude folder, 00:07:31.430 --> 00:07:33.830 we now have this skill subfolder 00:07:33.830 --> 00:07:35.910 with this front end design skill. 00:07:36.070 --> 00:07:41.110 And in here, we've got our skill dot n d file. Since we also selected cursor, 00:07:41.110 --> 00:07:42.390 we can find the 00:07:42.550 --> 00:07:49.915 skill in the cursor folder as well. And as a catch all, it's also created the skill in the dot agents folder. 00:07:50.075 --> 00:07:58.155 A lot of tools and frameworks use the dot agent folder as well. Let's go ahead and install a few more. If you want to create video animations, 00:07:58.580 --> 00:08:02.660 you can install Remotion as well. It's a really cool and fun skill. 00:08:02.820 --> 00:08:06.420 But I'm actually going to install the find skills skill. 00:08:06.580 --> 00:08:10.900 Apologies for saying skills so many times. Then let's install this. 00:08:11.140 --> 00:08:18.755 Cool. Let's also grab the React best practices as I am using Next. Js in this project. Let's install this skill. 00:08:18.915 --> 00:08:29.630 And if we wanted to give our agent access to a browser, we can install the browser use skill as well. And that's it. I think you get the idea. So we've got a skill for using the browser. 00:08:29.870 --> 00:08:32.590 We've got a skill for finding skills in the marketplace. 00:08:32.910 --> 00:08:40.830 And then we have some skills to assist with the front end design and using React. Right. Now, if we open Cloth Code and we go to skills, 00:08:41.305 --> 00:08:54.585 we can see all of our project skills over here. If you don't see the skills, simply restart Clawed Code and they should be available. And look at this. You can see that these skills barely use any tokens. If we run the context command, 00:08:54.950 --> 00:09:07.750 we can see a token usage for the skills over here as well. And although we've added a lot of skills to this project, we're barely using any tokens. And that is because Claude only loads the minimum amount of context into memory 00:09:08.035 --> 00:09:11.635 and only if the skill is needed will it dive into these folders 00:09:11.795 --> 00:09:28.280 to pull in all of these additional files and context. But until then, the context window is really lean. There's actually a very nice way to visualize this by asking Claude code, please create an HTML file in the root of this project listing all of the skills that you have available. 00:09:28.440 --> 00:09:43.295 Do not dive into the details of the skills, only list the context that you have available at this current point in time on this page. And this is the only information that's loaded into context at this point in time. It's just enough for the agent to be aware 00:09:43.455 --> 00:09:46.655 of what skills are available and when to use them. 00:09:46.895 --> 00:09:50.335 Speaking of using skills, let's get taught to fix this UI. 00:09:51.110 --> 00:09:55.590 Please, can you use your front end design skill to fix up this user interface? 00:09:55.750 --> 00:09:59.830 The website looks really bland and it's very sort of AI sloppish. 00:09:59.910 --> 00:10:03.430 So use your front end design skill to create something that looks modern, 00:10:03.905 --> 00:10:23.460 that represents an AI powered fitness app. The only thing I want you to keep is the Euro section with a placeholder image. We'll load the image after the fact. Now you might have noticed that I asked Broad explicitly to use the skill. Now you don't have to do that. The agent should be able to identify the skill and then use it automatically. 00:10:23.620 --> 00:10:30.340 But I personally like to nudge the agent towards using these skills. And look at that. The agent now loaded the skill into memory, 00:10:30.580 --> 00:10:38.625 and it's only at this point in time that all of this context, everything in here, and you can see this is really a large file, 00:10:38.705 --> 00:10:40.145 all of this context 00:10:40.145 --> 00:10:48.570 is only loaded into the conversation at this point in time. Unlike MCP servers where the tools along with their documentation 00:10:48.810 --> 00:10:55.290 is always sitting in memory. So Claude is currently cooking and this app should look very different in a few moments. 00:10:55.530 --> 00:11:00.410 Once Claude made these changes, but let's also get it to verify the changes by using the browser. 00:11:00.810 --> 00:11:15.025 Please use your browser use skill to verify your changes. The UI needs to look correct. And there you go. I'm not pressing anything. This is the agent actually just going through the page itself and checking if everything is okay. 00:11:15.700 --> 00:11:29.220 I did ask the agent not to run the browser in headless mode because I wanted to see the browser myself. I think the colors and the font work way better with a fitness brand, and I also like the new logo. Everything else just looks really professional. 00:11:29.755 --> 00:11:40.315 Let's have a look at adding an image to this hero section. Now, by default, Claude can't generate images. So what we could do is give it a skill to teach it how to generate images. 00:11:40.555 --> 00:11:44.315 Creating skills is really easy. Of course, you can try to do it yourself 00:11:44.730 --> 00:11:46.570 by going through this documentation 00:11:46.570 --> 00:11:48.730 and then just following the instructions. 00:11:49.050 --> 00:11:56.890 Or what you can do is simply just copy the content of this page, give it to Claude, and say, hey. I want you to create a skill based on this documentation, 00:11:57.485 --> 00:12:27.905 and this is the skill that I want you to create. An even easier solution is to simply download the skill creator skill. So copy this command, then let's run the skill. I'll select Claude code. We'll install the project level, And now our agent has access to a skill creator skill. I'll just restart Claude code. Now this is really up to you. I'm going to use Nano Banana Pro, which is a paid service for generating these images. But I think for fun and as an added bonus, 00:12:28.145 --> 00:13:13.050 I'll also show you how to use an open source model, which is completely free and it should work on everyone's hardware. But before we create our own skill, you might want to join my school community. This is a fantastic place for accessing all the resources in my videos, and you can share ideas and get assistance from like minded people in this community. So if you want a structured way to learn all of these different skills, then this is the place for you. I also started uploading exclusive videos and q and a live streams. And I've only priced this at $7 a month, which is a complete steal for the value and you will be supporting my channel. Now as I mentioned, we will be using Nano Banana Pro to generate these images, but I do want to prove to you that it is possible to use open source models as well. So in this other repository, 00:13:13.290 --> 00:13:27.005 I created this local image gen skill. This will use a free open source model to generate the images. So you don't need an API key, you don't need accounts, there's no cost involved, nothing. The agent will simply run this Python script, 00:13:27.245 --> 00:13:40.980 and this script uses a really tiny model for generating these images, which means we can simply ask Claude Code, please use your local image gen skill to generate an image of a dog. Please store it in the open images folder. 00:13:41.140 --> 00:13:46.515 And let's just send that. It's just for fun. The agent is loading in that local image gen skill. 00:13:46.675 --> 00:13:53.875 It's now running the underlying Python script for generating the image. And now we have this dog dot PNG file, 00:13:53.955 --> 00:14:01.580 which is a little bit tiny, but indeed it is an image of a dog. Now I probably won't use this to generate anything photorealistic, 00:14:01.660 --> 00:14:04.220 but this could be useful for generating icons 00:14:04.380 --> 00:14:06.300 or user profile images. 00:14:06.460 --> 00:14:18.525 And, of course, you don't have to use this specific model either. You can go on Hugging Face and generate something that will work on your hardware setup. If you are interested in playing around with a skill, I'll upload it to the community. 00:14:18.605 --> 00:14:21.405 But what you're interested in is building your own skills. 00:14:21.645 --> 00:14:35.180 So how can we create a nano banana image generation skill that Claude Code can use? The first thing is to figure out what that workflow actually looks like. So we need to find a skill. Remember, skills are really these predetermined 00:14:35.180 --> 00:14:37.260 or procedural workflows 00:14:37.420 --> 00:14:43.695 that you want the agent to go through whenever performing an action. For generating images with Nano Banana Pro, 00:14:43.935 --> 00:14:49.695 we need the agent to use a script. And the easiest way to do that is to create a working example. 00:14:50.015 --> 00:15:01.610 So I'll send the guy to a I studio dot Google dot com, and I'll select the Nano Banana Pro model. Then for the aspect ratio, I'll just select an example like this, a woman 00:15:01.850 --> 00:15:03.850 running on the 00:15:04.170 --> 00:15:05.050 beach. 00:15:05.450 --> 00:15:07.530 I'll just add photo realistic. 00:15:07.530 --> 00:15:13.595 Let's run this. And cool. We now have this image, so let's go to get code. 00:15:13.675 --> 00:15:35.120 And now we have this example code snippet. So I'm actually going to copy this. Then back in our project, let's say I need you to create a new skill using your skill creator skill. This skill will allow us to generate images using the nano pen nano pro model from Google. Here is an example code snippet for generating images. 00:15:35.360 --> 00:15:43.565 Keep in mind that images can be one k, two k, or four k. Always default to one k unless otherwise specified. 00:15:43.645 --> 00:15:45.165 For the aspect ratio, 00:15:45.325 --> 00:15:48.125 generate square images by default. 00:15:48.285 --> 00:15:53.565 Always store the images in the following folder. Then I'll just type public slash 00:15:53.670 --> 00:15:54.870 generated 00:15:54.950 --> 00:15:55.670 images. 00:15:55.830 --> 00:16:00.230 But here is a really important topic, working with sensitive data, 00:16:00.470 --> 00:16:03.830 including things like API keys. The Gemini API, 00:16:03.910 --> 00:16:06.630 as with many other SDKs and APIs, 00:16:06.870 --> 00:16:26.210 require an API key to work. So this is actually expecting the Gemini API key to be passed to it. Now you do not want to hard code these keys in the skills because if you deploy that skill or maybe even share it with someone else, you're going to leak your API key. So how do you store sensitive data 00:16:26.290 --> 00:16:28.530 and securely pass it to these skills? 00:16:28.690 --> 00:16:35.695 Well, in this instance, what we have to do is create a new file in the root of the project and call it dot env. 00:16:35.855 --> 00:16:41.695 This dot env file should always be excluded by Git and should never be published to the repository. 00:16:41.695 --> 00:16:43.775 So in your dot ignore file, 00:16:43.935 --> 00:16:46.815 always ensure that you are excluding dot env files. 00:16:47.220 --> 00:16:54.820 And if you don't have a dot ignore file in your project, simply create one. Then in this file, I'm going to create this variable. 00:16:55.140 --> 00:17:18.460 So in AI Studio, I'll go to get API key. You can just create a new key or I'll just reuse this one. And I'm going to do this off camera, but all you have to do is paste in your key and save this dot ENV file. Now, I'm going to tell Claude, I have already created a dot ENV file and I stored the Gemini API key in that file under this variable 00:17:18.860 --> 00:17:20.140 like so. 00:17:20.380 --> 00:17:23.980 So just always keep in mind, if you are working with sensitive data, 00:17:24.220 --> 00:17:26.380 please do not pass it to Claude directly 00:17:26.585 --> 00:17:51.220 and please don't ask Claw to hard code it in the skills itself. Right. Let's run this. And as you can see, the skill creator skill was loaded, and of course, it's asking a few questions like, you mentioned an example code snippet for generating images with a Nano Banana Pro model, but it wasn't included. Alright. That's my bad. So I'm just going to pass that to Claude. Alright. So we now have this image generator skill. If we have a look at the skills file, 00:17:51.380 --> 00:17:52.820 we have a description 00:17:53.545 --> 00:17:59.785 and all the instructions for using the script, as well as all of the different sizes and aspect ratios. 00:17:59.785 --> 00:18:01.145 This is really, 00:18:01.145 --> 00:18:07.705 really cool. Now the secret sauce behind the skill is this script. So in the scripts folder, we have this Python file, 00:18:08.110 --> 00:18:12.270 and it's this Python file that's going to use the Gemini SDK 00:18:12.270 --> 00:18:18.510 to generate the image. And this is grabbing the Gemini API key from our environment variables. 00:18:18.510 --> 00:18:25.175 It's not hard coded in the script at all. So let's test it out. I'm actually going to exit out of Claude. 00:18:25.175 --> 00:18:26.695 Let's go back in. 00:18:26.855 --> 00:18:34.535 Let's say, please generate an image of a woman jogging next to the beach. There should be a little AI 00:18:33.890 --> 00:18:37.570 assistant floating just behind her shoulder, motivating 00:18:37.570 --> 00:18:41.970 her to keep going. I accidentally pressed escape, so let's just say resume. 00:18:42.050 --> 00:18:46.290 The agent correctly identified that it's got access to our image generator skill. 00:18:46.450 --> 00:18:52.285 It's running the Python script. Alright. So we've got our new file in this generated images folder. 00:18:52.605 --> 00:19:06.090 And if we have a look at it, we get this image with this little chat bot saying, hey, you got this, keep going. This will be the perfect image to use on our website. But the problem is if we have a look at the file size, this is over 600 kilobytes, 00:19:06.170 --> 00:19:14.570 which is way too big for a website. So thankfully, what we can do is create a new skill. So let's say, please create a new skill. 00:19:14.730 --> 00:19:22.065 What I want the skill to do is I'm going to provide a link to a to an image, and this image needs to be optimized 00:19:22.065 --> 00:19:23.585 for a website. 00:19:23.585 --> 00:19:26.225 At the moment, these images are massive, 00:19:26.625 --> 00:19:30.385 so I want them to be resized for use in a website, 00:19:30.545 --> 00:19:33.665 and they should be high quality enough to be used in a euro section, 00:19:34.130 --> 00:19:37.010 and they should be converted to WebP. 00:19:37.010 --> 00:19:41.010 These converted images should then be moved to the public folder. 00:19:41.090 --> 00:19:43.490 I'm actually just going to type public slash 00:19:43.570 --> 00:19:44.530 assets 00:19:44.530 --> 00:20:06.870 like that. Alright. Let's send this. So now in the Cloud folder under skills, we now have this image optimizer skill, which also uses a Python script for resizing the images and converting them to WebP. So I'll just restart Cloud Code again, and it say, please use your optimized image skill on this image. Then let's throw in this image that we generated earlier. 00:20:07.030 --> 00:20:12.710 Let's send this. And just as a reminder, this image is 631 00:20:12.710 --> 00:20:15.605 kilobytes. And now we have this assets folder, 00:20:15.685 --> 00:20:22.485 and in here, let's open up this version of the image. And as you can see, the details are all there. This looks fantastic. 00:20:22.565 --> 00:20:25.125 But this version of the image is only 56 00:20:25.125 --> 00:20:25.925 kilobytes. 00:20:25.925 --> 00:20:29.670 That's way better. Please, can you replace the placeholder 00:20:29.670 --> 00:20:32.630 on the home page with this optimized image? 00:20:32.870 --> 00:20:46.886 And it's in this. And now this placeholder was replaced with an image generated by Cloth code. How awesome is that? If you enjoyed this video, please hit the like button and subscribe to my channel for more Claude code and agentic coding tutorials. 00:20:46.886 --> 00:20:51.446 Then also check out this other video, and I'll see you in the next one. Bye bye.