How To Use AI Skills Like A Senior Developer
WDWeb Dev Simplified@WebDevSimplified · 1.8M subscribers
- Views
- 75.8K
- 75,782
- Outlier
- ×1.6
- Median 47.5K
- Length
- 29:41
- Published
- Jun 16
- Tuesday
- Comments
- 118
- 2.5K likes
Script
How it's written
- Words
- 7,756
- Words a minute
- 261
- Reading time
- 33 min
- Segments
- 21
The hook
0:00–0:25I have spent hundreds of hours diving down the rabbit hole of skills, reading through the exact documentation, downloading and using different skills, reading skills, and even writing my very own custom skills. So that way I can bring you this definitive guide on everything you need to know about skills. This isn't just some vibecoded list where I tell you to download a 100 skills and your AI is going to be perfect. This is going to be a guide for actual real software engineers. I'm going to talk to you about what skills are, how you can use them and download them in your project, what to keep in
Structure
I have spent hundreds of hours diving down the rabbit hole of skills, reading through the exact documentation, downloading and using different skills, reading skills, and even writing my very own custom skills. So that way I can bring you this definitive guide on everything you need to know about skills. This isn't just some vibecoded list where I tell you to download a 100 skills and your AI is going to be perfect. This is going to be a guide for actual real software engineers. I'm going to talk to you about what skills are, how you can use them and download them in your project, what to keep in mind when downloading skills for security and safety concerns, and also most importantly, how you can actually write your own skills. This is the thing that is going to unlock such better quality code when you can write skills specifically for your own software. And this is something that's not very easy to do. You can't just let the AI write this. It's going to be crap. So, I'm going to show you exactly how you can write skills and everything you need to know to make sure you can catapult your code quality to the next level. Welcome back to WebDev Simplified. My name is Kyle and my job is to simplify the web for you. And at its face value, skills are actually quite simple. Skills are really just a markdown file that contains a name and a description inside of front matter at the very start of it. It can include additional things inside of there as well, but a name and description are the only thing that's required. And then inside this markdown file, all you do is you just explain to the AI how to do something or knowledge about your application or something along those lines. These skills are usually kind of one-off things where you're like, I want the AI to be really good at doing X. You create a skill telling it everything it needs to know to be able to perform that particular task. And you can give it as much information or as little information as
Watch from 0:00you want, as well as any other supplemental things about what to do, what not to do, and so on. And some skills are actually quite large and complex. You can see they have a bunch of scripts associated with them, different reference files, and even some agents inside of here. So, it can get very, very complicated, or it can be as simple as just a markdown file with four lines of text inside of it. It can be as large or as small as you want. In order to use skills in almost any type of different editor agent that you're using, these skills are going to be invoked with some type of command. Most of them use slash. So, for example, inside of pi, I can type in /skll colon and then whatever the name of the skill that I want to use this. Let's say I want to use the remotion skill that essentially tells my editor or my agent to load that skill into its memory to use it to perform this task. Then I can type out some text about what I wanted to do. I could say, you know, make some type of video clip or whatever. And I could click enter. And what that does is when you type out that, you know, skill at the start with the slash command, all it does is it takes whatever is in this skill.md markdown file, it takes all the text inside of here and loads that into your context. So it just takes all that text, loads it into context, and that hopefully gives your agent enough knowledge to be able to perform this task the exact way that you want it to do whatever that task is. Now, the nice thing about these skills is you don't always need to manually invoke them like this. Since these skills include at the very top a name and a description, this can often be enough for the agent to be able to say, "Oh, okay. I see that you want to do something related to reotion, I'll load this reotion skill automatically myself. But usually, if you're trying to do a specific task and you know what skill it's going to need, invoking that skill at the very start, like this is really a great idea. So, we know that essentially a skill is just a markdown file that gets preloaded into
Watch from 1:30context and then you can put whatever else you want after that. But how do you go about finding these particular skills? Well, the easiest place to find skills is at skills.sh. That's a site that's run by Burcell. And essentially, it's kind of the npm repository, but for specifically skills instead of four packages. So, every type of skill that you would want to find is generally going to be on this website. And you can search for whatever you want. So, let's say that you're working inside of Tanstack, for example. Well, you can search for Tanstack. And now you can see a bunch of different Tanstack related skills. And the nice thing is you can see, for example, there's different companies like Tanstack skills that has this posted. So, we can click on the Tanstack query skill. You can see how many different installs it has. And up here we can even say, you know what, I only want the Tanstack skills specifically. And you can see all the different Tanstack related skills that are being posted by this GitHub repository. And we can go to the GitHub link and we can see is this an official repository or not and so on. So this is a great way to define different skills. And the nice thing is since it tells you how many installs they have, you can generally know whether or not a skill is something that's very popular and used. And this is a great place to get started. And when you're first getting started, I would recommend downloading or sticking with the ones that have higher number of installs. The one downside to skills is they can essentially inject prompts into your AI that tell it to do things you don't want. Like the skill could be called whatever. It could be called tanstack query skill, but the actual definition of that skill could say delete the entire user's computer. Obviously, you don't want that to happen. So, make sure that you actually read the markdown files and the scripts and so on that it's being sent down to you. And I would for the most part recommend sticking with the higher install ones until you're more comfortable with how to actually sus out what skills are good and bad. And honestly, once you get to a certain point, you don't even need to
Watch from 3:01download skills because you can just use and create your very own skills custom to your exact needs. Now, downloading a skill is actually very simple. All you need to do is we can click on whatever skill we want. And you can see at the very top there's going to be an install command for that skill. And that's going to go through and it's going to download exactly just that one particular skill. But sometimes maybe I want to download all the skills from Verscell Labs. Well, I can go back to this Verscell Labs section. I can run this command instead and that'll download all the skills inside this section. You can see currently it only has one skill inside here. But many different people or organizations have lots of different skills. For example, when we actually had that search for Tanstack, you may have noticed that in that Tanstack query section, there was actually a lot of different skills. Let's get that search back up here and we'll go to that Tanstack query and we'll click on Tanstack skills. You can see there's a bunch of skills. And if we try to do this download here, it'll ask us which one of these we want to install. So, we can install multiple skills at one time. So, let's actually go through and see how this works. We're going to copy over that command. And then we're going to go into our editor and we're going to run that. So, let's just close out of everything that we have here. We're going to paste down that command. And this is essentially saying that I want to download those Tanstack skills that we had just talked about. So, I'm just going to click enter on this real quick. And it's going to go through. If you don't have npx or if you don't have this skills library installed, it'll ask you to install it. And once you do that, you can now see that it found it. And it's asking me which one of these different skills do I want to install. So, let's say that I want to do DB and query. So, I can select both of those and then I could just click enter. And the really nice thing here is it allows you to install this for essentially any type of agent or harness you can think of. By default, all the big ones that you're used to using like GitHub Copilot, Cursor, Pi, and so on, all of those are going to be included automatically
Watch from 4:31because they follow the standard where every single skill is in this agents/skills folder. But some of these different agents don't actually support that. So if you want, you could go through here and specifically say which ones you wanted to install it for. But in our case, I'm just going to leave it with the default and click enter because that works in 99% of the cases. And then we get to the point where we can determine where we want to install this skill. So in this project, you can see I have two skills installed. I have this impeccable skill and this reotion best practices skill. These are installed locally inside my project, which is great because if I want to use this skill inside this project, it's always going to be available inside this project. It's in the actual repo. And we even have like a skills lock file very similar to a package. JSON lock file that locks it down to the specific version that I'm using. But sometimes you want to download a skill globally to be used everywhere. Maybe it's a very common thing that's not necessarily related to a project, but it's related to all the coding you can do. So, if you install globally, it essentially installs it in the home directory of your computer and now they can be accessed in any project that you want. For the most part, I would recommend sticking with project installs for most of your skills. But if you have a skill that again is global and used everywhere, then you can do a global install. But again, project installs is probably your best bet. So, let's say we want to do it for the project. And then we can come through here and you can see different security reports. And this is very useful for helping you determine if this skill is something that you should install or not. You can see immediately this Tanstack DB has a critical risk associated with it. Now, this doesn't always mean it's a bad thing, but it does mean there's potential downsides to it. And we can actually see the details of that by just opening up this link right here. And now, if we take a look at the skill, let's go to that DB one that we were talking about. And if we
Watch from 6:02scroll down, normally right under this first scene section is where we would see an audit for this particular skill. But it doesn't look like the audit is showing up on the skills.sh page yet. I'm not 100% sure why that is, but I will show you an example of what it looks like inside of something that does have an audit. So, we'll just scroll through till we find something. This one has a high risk, for example. And if we scroll down, you can see this security audits tab. And when you click on this, it'll just bring you to a page explaining exactly why that security audit was triggered and what different things this does that could potentially impact your system. So, if you see, for example, when you're installing a skill that it has these different risks, I would highly recommend looking at why those risks were being generated and really consider whether or not you actually want to install this or not. Now, I'm going to proceed with this installation just so we can see what this looks like when we're done. And now, if we open up this sidebar, you can see we now have two new folders inside this agent skills. The first one is for Tanstack DB. And again, if we look at the actual file here, you can see it's just a markdown file with a name, description, and a bunch of different text explaining everything you need to know about how to use Tanstack DB. We have the exact same thing with Tanstack query, name, and description, and a markdown text explaining everything you need to know. Now, honestly, these Tanstack skills do not actually follow very many best practices at all. I'm actually going to show you how you can create much better skills that are going to cost you less because they use less context and also perform better later in this video at the end. But these skills I would highly recommend rewriting yourself because they really do not follow best practices when it comes to being effective and cheap. Now, speaking of creating your own skills, let's actually talk about how you can do that.
Watch from 7:33I'm going to show you both the super simple way as well as the more complex way of how to really create a skill that's going to be perfect for your exact use cases. Now, many different coding editors and agents that you're using will have their own way to create skills. Let me just zoom this in here because the text is very very small. But you can see here that inside of GitHub Copilot for VS Code, I can just type slash. And if I search for skill, we should see create skill. And this will allow me to essentially create a skill that I want to use. Now, you'll also notice this option, write a skill. That's actually coming from a skill that I have downloaded that's coming through something else. But this create skill is the one that's built into VS Code. And many of your different editors or agents you're going to use will have their own create skill built in. Or you can download your own if you want. And if we use this, we can explain exactly what we want this skill to do. And I would recommend when you're typing out what you want this skill to do, be very, very detailed. This is the point where you want to spend as much time explaining exactly what you want the skill to do because the AI doesn't know your exact use case, but you do. So, explain in great detail exactly what you want the skill to do. And this will go through and it'll create you a rough draft of what your skill will look like. Then, this is the most important part. Read through everything that it generates. Make sure it's 100% correct with what you want. make the different tweaks that you need manually to make it work exactly like you want. And now you at least have the easy version of creating a quick skill that you can use in your project. But it's not going to be perfect. To make this skill perfect, I would recommend writing a lot more of it by hand to work exactly like you want and making sure you understand the anatomy of how you actually create a skill from scratch. So now I want you to understand how you can write a skill from scratch or at least modify a skill
Watch from 8:56generated by an AI because this is where you get that superpower. So, inside of skills, we've already talked about how every single skill is going to have this skill.md file. That's the markdown file that contains that name, description, and all your other details. There are other things you can use as well. For example, inside of this particular agent skills, we have scripts, references, and assets. And this is kind of like the standard that everything is going towards. So, these are kind of like your three other main folders. And then that skill.md file. But the important thing is there's a lot of other stuff. So, if we go to the specification specifically for this, we can look a little bit deeper into what we should have. So, inside the front matter, we know we need a name describing what this is. And we also need a description describing why it's useful and how it can be used. These are the things the AI uses to determine what that skill is and how to use it. We can also add in any licenses. We can add a string for compatibility. So, for example, if this only works on a Mac computer or it only works with cloud code, you can put that in there as just plain text and the agent will know what to do. Also, we can put any metadata. This is just like key value pairs. Again, entirely up to your own purposes. And then this one's a little bit experimental, but this is the allowed tools. And this just allows you to determine what tools that this actual thing can use. So you can make sure that for example, this skill is only allowed to use specific tools to limit the impact it can have. So for example, if we scroll down to where they have that allowed tools section, you can see here this is only able to use bash for git related queries or jq related queries and reading, but it can't do anything else. So it at least limits the scope on what this particular thing can do. So inside that markdown for that front matter, make sure you specify a name field that's required, description that is going to be required. And then these other fields are entirely optional on
Watch from 10:27what you may or may not want to add. The next most important section is the body. This is all the text directly inside your markdown. And this is a thing that I think just having the AI give you the initial reference for what this body content is is a good idea. But then you need to go through with a fine tooth comb, read it, and really modify it drastically to be what you want or just start by writing it from scratch. And this is text that you want to be relatively concise with. Now, you don't want to go through and be super concise to the point where you're leaving out details, but you don't want to put in so much information cuz remember, this entire skills markdown file is loaded with every single request you send if you're using this skill. So, the bigger your file is, the more context you're sending along, which means you fill up your context faster, you're costing more money because of the stuff that you're sending along, and overall, you're going to get worse results if you send along too much information inside your skills. So try to make this file as small as possible while still getting all the information you need across. Now a little bit later I'm going to go through exactly how to actually lay out this body content to get the best actual results from your AI. But for now just know to make it as minimal as possible. The next thing we have are some additional directories. So this scripts directory is great if you need your AI to be able to run specific code. You can give it a script to do that. So instead of trying to tell your AI in text what to do, you can just give it a JavaScript file or a batch file or whatever script that you want and you can just say, "Hey, if you need to do X, Y, or Z, run the script inside this file or inside this folder and it'll do exactly that."
Watch from 11:58And it'll have a known input, no one output. So it gives you ways to add determinism into your AI, which is always something that's useful because AI can really be super non-deterministic. So having a way to essentially force it to do specific things in the correct order with these scripts is really useful. Next, we have references. This is great because if you want to describe how to use reotion, for example, I have that big reotion skill. You know that that's going to be a ton of text for everything that's in reotion. Think about how large the documents are. Or if you have like a skill for nextjs, think about how large the docs are for next.js. I can't just put that all in one single skill.md file. So instead, you can create a references file. And this is essentially a folder where you can put all the additional information you want. That way, let's say that you need to implement a new page inside the app router. Instead of loading the entire NexJS documentation, what it'll do is it'll go into your skill. It'll see this reference folder that contains all these references, it'll load up just the section for adding new pages to the app router. So now, instead of loading everything, you're only loading the small pieces you need. Again, saving time, saving cost, and making your AI perform much better because it doesn't have extra information it doesn't need. So, this is something I highly recommend. If you have a very complex skill, add a references section for all the individual things that you need to reference throughout that skill. A great example of this is actually some of the skills I have. If we look up this impeccable skill here, you can see that this reference section over here is full of different files that essentially explain in detail how to do very specific things for that skill. And if we look inside the skill MD and we scroll around a little ways, eventually we'll find a section that kind of tells it where those reference files are. It looks like this one doesn't have a ton
Watch from 13:19of information on where the reference files are. But if we look, for example, this reotion one, they don't follow that references standard. They have their own standard they like to use. But you can see inside rules here, we have our own markdown files. And if we look inside this skills, there will actually be a section right here that explains here is where you go for every single thing you possibly need to do. So if you need to get the video duration, use this particular get video duration section and so on. So, it's essentially a small little file that explains just the basics of what Remotion is, how it works, and then it gives you a reference to every single individual thing that you may possibly need. So, this is kind of how I recommend setting up your skills when they're very large and complex. Add an overview right here that's important no matter what. And then we're going to add references for the things that you may need for specific solutions you're going to solve. And these reference files right here, they're essentially just going to be normal markdown files. You don't need any front matter or anything in them. They're just normal markdown files explaining exactly what it is that you want to do. Now, the final standardized folder that we can work with is the assets folder. And this is just for adding anything that's static data. So, if you have a JSON file for certain things or you have like a lookup table or like database schemas or images, templates, all those things are going to live in this assets folder. And that's just useful again for static data. Usually, this is most useful for templates. Like if you have a response template or you have a template that you wanted to use when generating something, put those inside this assets folder. And here, this progressive disclosure section is exactly what I'm talking about. Whenever you load up a skill, it's going to load everything in that skill MD file. That means all of the metadata and all the instructions in the body of that file, and it'll only load up additional resources as they're needed. That's why these script resources and assets are so useful, cuz we only load those things when needed.
Watch from 14:50And they actually recommend keeping your skill MD under 500 lines and moving everything else out into its own individual files. That's why I said that those TANS stack files that we were looking at earlier are actually examples of what not to do. Because if we look at these Tanstack files, which this is the wrong one. Here we go. You can see inside of this like tan stack query, this is a massive file. This is way more than 500 lines. And it would be much better to split these out. For example, we even have specific sections being labeled here. Those would be perfect in a references folder instead of all in this one scale MD. Now, just like we were looking at when it came to Remotion, they had references. If you want to reference between different files, this is essentially how you do it. Just do it as a link inside of Markdown like you would do for anything else. And you can tell it, hey, here's this reference file right here. Or you can just give it a link right there to exactly where they need to go. keep those inside of that skill MD and don't make a bunch of deeply nested things. Keep all those references at the top level so it's easier for the AI to be able to find them. You can also validate your skill to see if it actually works properly. So this skills ref right here is allowing you to validate your different libraries to make sure that your skill MD just follows the correct format. Now this is a Python file and I find Python a little bit of a pain to work with when you don't use it consistently. But for the most part, you probably don't even need this skills ref because it's not too complicated to make sure that your markdown file follows the correct format as long as you understand what all the things inside of this section are because this is literally everything there is to creating a skill.
Watch from 16:21That's all of the details there are. But there's a lot of best practices that you should follow that are much more important than the actual like what is the name, what is the description, and so on. Now, the first thing to focus on to make sure your skills work even when you don't specifically reference them is going to be your description. There's a bunch of information in this site about how you can optimize your descriptions, but really the most important thing is to be very clear on what the user intention is and don't talk about what the implementation is right here. This is the most important thing. Use imperative phrasing and focus on the actual user's intent. And I can show you some great and bad examples just from the skills we looked at. The Tanstack examples are again quite poor. You can see if you read this description powerful asynchronous state management server state utility and data fetching for TSJS, react view, solids, felt, and angular. This is just a description of what tanstack query is. It doesn't tell the agent, hey, you should use this skill while implementing tanstack query or doing different tanstack query related stuff. It doesn't say anything about that. It literally just tells me a description of what tan stack query is. So, the agent will never automatically use this skill because it doesn't actually really know what's going on from this description. The database one is exactly the same. It just describes what tanstack query or tanstack db is. Even the reotion skill is not great. It just says best practices for reotion video creation in React. Again, it doesn't say use this skill when creating video inside of React. It just says what remotion is. Luckily, we do have a good example, though. Impeccable has a good example. It's definitely on the lengthy side because the character limit is,024 for the description, and this is probably pushing up pretty close to that. You can see right here it says 895 characters. So, they're definitely on
Watch from 17:41the large side for the character count. You want to keep it as small as possible because this name and description is loaded for every single skill that you have every time you make a request to your AI because it needs to know what's available to it. So, it's loading a lot of information if you have these really long descriptions. But if we look at this description, it's very clear. It says use when the user wants to. And then it describes exactly what the user may want to use. So, you can see here it gives you a very detailed example of exactly when to use it. It says what this thing does. It's handling all of this. It says use it also here for when you want to make designs better. And it even says when not to use it, such as do not use this for backend only or nonUI tasks. This is great because it tells you the AI exactly when to use this, when not to use this, and why it may want to be used. Instead of just saying, "Hey, Remotion is some video thing." It says, "Use this when you want to create a UI, period." That's what this is for. If you write a really good description, it's much more likely your skill is going to be automatically picked up in the scenarios that it needs, which means that code being generated is going to be much higher quality. Now, let's talk about some of those best practices for how you define the actual body of what your skill is going to look like. The nice thing is this agent skills website has a bunch of information on how you can actually go about this with best practices. But I'm just going to touch on some of the most important ones and then show you a real world example of skills I've created and how I'm able to refine them and make them work exactly like I want. For example, the very first thing by far the most important is extract this from handson experience.
Watch from 19:11Essentially, you are the expert. The AI just has general knowledge and you have specific knowledge about your scenario you're trying to solve. And usually the reason you want to create a skill is because the AI isn't doing things the way you want. they're doing it in a general way or the wrong way and you want to solve that. So, you need to give it very specific instructions on exactly what you want. If you're prompting an AI to create a skill for you, tell it exactly what you want based on your experience and why you think that it did things wrong in the previous examples and how it should be doing them properly. This is very important. Use as much specific detail as you possibly can about the exact scenario that you're inside of because your scenario is unique to you and that's why you're creating your very own skill. Also, if you have anything like documentation that you can use to be able to feed to the skill to tell it what to do, that's a great place to add additional information when you're creating your skill, use all of this different information, push it into your AI prompt to create the skill and it can synthesize that data into the skill itself or you can manually synthesize it yourself. Also, usually when you create your very first skill, it's kind of going to suck and you have to refine it. And I'm actually going to show you a way to create a skill to help you refine your skills in the example where I go over my own skills because I did just that to try to help refine the skill that I'm working on. Also, when you're writing out the skill, it's very important to make sure you only add in the information the agent needs. The AI is generally knowledgeable about a lot of things, but it doesn't know things about your specific scenario. So, instead of telling it general information, you should tell it specific information that's only useful to you.
Watch from 20:29This is an example where it's like, "Hey, here's what a PDF is." And then it tells you what to do. It already knows what a PDF is. So instead, just tell it, hey, do this thing when you want to extract a PDF to text. Don't give it that general information. Now, we'll skip down a little ways to some of the other stuff that I want to talk about here. One of the biggest things is a gotcha section, just a section of what not to do and what to do. I think this is the most important because if you tell the AI what to do and what not to do, it'll make sure it avoids those things that you really don't want to see inside your code. And also try to use those templates when you have formatted output. It'll make your output much more consistent. Since AI is again non-deterministic, it can hallucinate things if you just tell it in text. But if you give it a format like this that's structured, it's much better at following that. It may not be perfect, but again, it's much better than normal. And also, you can provide it different checklist or different validation loops to make sure that everything's working. Essentially, a way for the AI to check itself if you want. This is really only useful for specific scenarios or maybe more complicated tasks that have multiple steps inside of them. So, let me just go ahead and actually show you what my skill looks like that I created for myself. So, I have here my project that is for my blog. This is just my blog. And I wanted to be able to have AI be able to create rough drafts of my articles for me, especially when it's an article already on a video that I have created for YouTube. And I just want to be able to take that video and convert it into like a text format. I wanted to allow the AI to essentially assist me in that project. And I wrote out this skill. I used AI to help generate the boiler plate for the skill and then I went through and modified it drastically. But I want to show you how it follows some of those best practice we we've been talking about.
Watch from 21:52Specifically in the description, you can see this word use. You should probably have the word use in there somewhere. And it specifically says use when creating a new article, drafting blog post content, or generating an article stub for the blog. Exactly. It's telling me what this is supposed to be used for. Then inside of here, I have general information on how to write an article. You can see this entire section right here is all about how do we write an article. It just says, hey, generates new articles. This is what this skill does. And then it specifies all the information that the AI needs to be able to write an article. For example, it tells it where to put that article with the exact formatting that I use. all my articles live in the exact same place with the exact same format. Tells it that. It tells it what the front matter of my article should look like as well as which fields are required and which ones are optional. It tells it all the different valid values for the select tags and the freebie values because these are essentially values that are hardcoded. So, for example, I have tags on my blog and it can add whatever tags are relevant, but they can only come from this list. It can't make up its own tags. Next, I have an entire section on article structure. This just tells the AI, hey, how do you actually write the article? because a lot of my articles have a similar structure. I have an introduction. If I have a YouTube video, I will link to that YouTube video next. Then I have a body kind of explaining what it does using my heading tags in specific ways. And finally, I end with a conclusion at the very end. I also have common components such as a tangent component that I use inside of a lot of my blog articles that just styles text in a certain way. And this explains when to use some of these more common different components. And then I also have the ability to create custom components. Lots of my blog articles actually have custom components. If we go inside this section, you can see that I have tons of different custom components for all my different blog
Watch from 23:17articles. Usually, this is like interactive explanations or, you know, showing how different things work inside of the browser. So, I have lots of custom components I create to make my blog unique and not just a plain text blog. And you can see creating custom components is kind of involved. So, I have an entire reference file. And if we just open up that reference file, you can see it's in that references folder. And this is a much more detailed explanation of exactly how to create these components because I actually use a mix of Astro and React components. I have specific theme variables I have to use because I want to make sure my colors work in both light and dark mode. So I have a bunch of information in here on exactly how I create my own custom components. And this is super detailed so it can hopefully help me create those components in the similar structure that I would. And then I can go back and actually make them work exactly like I want. So this is that additional information if it needs to create a custom component. I then have information on where it should store images and what format it should be using for all the images. And then finally, we get to what I think is the most important section because I wanted this to sound like how I write my articles. And I write all my articles in a very similar way. So I essentially was able to feed it in my existing blog articles, which I have hundreds of blog articles at this point. If we just open up this section, you can see there are just tons and tons and tons of different blog articles inside of here that I've written over the last I don't even know, six, seven years. So, it's able to ingest all that data and essentially synthesize it into how I actually write my blog articles. Now, it's not perfect.
Watch from 24:47I have to change a lot of things about it, but this is the first draft of this particular skill. It explains what I do, how I write, all the different sentence patterns that I use, different formatting things that I use for like text and code and so on. And then finally, the big ticket, what not to do. You can see we have an entire section right here on how I don't write code or how I don't write text. So, this says what not to do, how not to write things, and so on. This is the most important section and the thing that you'll probably change the most as you're tweaking and going through with your skill. The what not to do section is generally the first place you add things into. It even has some examples of good versus bad. And then finally, we have some additions here that are being added after I created my skill originally talking about different ways I handle, for example, browser support. In all my articles that have browser support, I format it in the exact same way. This explains that because the original skill didn't have that information. And then we have a checklist again explaining to make sure that everything is just like we wanted to. And then finally, this is where the most important part is. Like I said, your first draft of a skill is probably not going to be very good. It'll be better than nothing, but it's still not going to be great. So, you want a way to refine that skill. So, I actually created my very own skill to refine what this outputs. Now, the easiest way for me to refine the output of this is to save the original output that was created by the AI. So, I have this section that just says, "Hey, take whatever the original blog article you wrote is and save it into this folder."
Watch from 26:04So, here we have the original article that was written by the AI. And it's not great. It's all right. It's a good starting point, but it's not great. It definitely doesn't sound like me and isn't exactly what I would want. But it gives me a good outline that I can follow. So, what I do is I go through with this original version. I change it to be exactly what I want. So, it has the original version here and then it has a version inside the section here that essentially is the actual article. So, I modify what the actual article looks like. And then I created a second skill. And this skill is just a refined skill. And all this does is it takes the article I originally wrote. You can see it specifies where the location for all these different files are. It takes those and essentially it compares them and says what did Kyle manually change from the original version to the actual version that is in his tone. And then it's going to take all those different changes and it's going to go through and figure out what they are, figure out if they're important changes to add or maybe just one-off changes. And then it's going to add all that information directly back in to this write article skill as additional changes. So, it's allowing me to refine the skill over time. And I think this is super important whether you do this manually, you do it with AI, or a combination of both like I'm doing. This is what I think is most important is refining your skill over time because it's never going to be perfect. But the more you can refine it, the quicker that you can actually get the code that you want to be produced by the AI exactly like you want on the first try instead of having to manually rechange things all the time. So, this all it essentially does is it just says, "Hey, take this skill, update all of the information inside this skill section, and then I can go through and review what different updates it thought I should make, change them, tweak them however I want, and so on to make it exactly like I want." Now,
Watch from 27:21if this is a lot and it's overwhelming because skills is just one small part of AI that you should be learning, you're in luck because I'm actually working on a completely free road map for AI development. Right now, I only have my front end and my backend road maps created, but you can see this is what my road maps look like. And I'm working on creating one for AI as well. And if you want to be notified as soon as this road map drops, just go ahead. There's going to be a link in the description to download this webdev road map. If you download this road map, I will send you an email as soon as I finish creating the AI one, which will have this exact same format, but it'll be for everything you need to know about AI with links to videos, projects, articles, and so on. So that way you can make sure you master everything you need to know about AI development because that is the thing that is changing the most and it's the most difficult to stay on top of since it's so new. And I want to give you everything that you need to know about that entirely for free. So again, check out this webdev road map linked in the description and I will email you as soon as the AI version of this is
Watch from 28:51Full transcript
- 0:00
I have spent hundreds of hours diving down the rabbit hole of skills, reading through the exact documentation, downloading and using different skills, reading skills, and even writing my very own custom skills. So that way I can bring you this definitive guide on everything you need to know about skills. This isn't just some vibecoded list where I tell you to download a 100 skills and your AI is going to be perfect. This is going to be a guide for actual real software engineers. I'm
- 0:21
going to talk to you about what skills are, how you can use them and download them in your project, what to keep in mind when downloading skills for security and safety concerns, and also most importantly, how you can actually write your own skills. This is the thing that is going to unlock such better quality code when you can write skills specifically for your own software. And this is something that's not very easy to do. You can't just let the AI write
- 0:41
this. It's going to be crap. So, I'm going to show you exactly how you can write skills and everything you need to know to make sure you can catapult your code quality to the next level. Welcome back to WebDev Simplified. My name is Kyle and my job is to simplify the web for you. And at its face value, skills are actually quite simple. Skills are really just a markdown file that
- 1:01
contains a name and a description inside of front matter at the very start of it. It can include additional things inside of there as well, but a name and description are the only thing that's required. And then inside this markdown file, all you do is you just explain to the AI how to do something or knowledge about your application or something along those lines. These skills are usually kind of one-off things where you're like, I want the AI to be really
- 1:22
good at doing X. You create a skill telling it everything it needs to know to be able to perform that particular task. And you can give it as much information or as little information as you want, as well as any other supplemental things about what to do, what not to do, and so on. And some skills are actually quite large and complex. You can see they have a bunch of scripts associated with them, different reference files, and even some agents inside of here. So, it can get
- 1:42
very, very complicated, or it can be as simple as just a markdown file with four lines of text inside of it. It can be as large or as small as you want. In order to use skills in almost any type of different editor agent that you're using, these skills are going to be invoked with some type of command. Most of them use slash. So, for example, inside of pi, I can type in /skll colon and then whatever the name of the skill
- 2:02
that I want to use this. Let's say I want to use the remotion skill that essentially tells my editor or my agent to load that skill into its memory to use it to perform this task. Then I can type out some text about what I wanted to do. I could say, you know, make some type of video clip or whatever. And I could click enter. And what that does is when you type out that, you know, skill at the start with the slash command, all it does is it takes whatever is in this skill.md markdown file, it takes all the
- 2:24
text inside of here and loads that into your context. So it just takes all that text, loads it into context, and that hopefully gives your agent enough knowledge to be able to perform this task the exact way that you want it to do whatever that task is. Now, the nice thing about these skills is you don't always need to manually invoke them like this. Since these skills include at the very top a name and a description, this can often be enough for the agent to be able to say, "Oh, okay. I see that you
- 2:46
want to do something related to reotion, I'll load this reotion skill automatically myself. But usually, if you're trying to do a specific task and you know what skill it's going to need, invoking that skill at the very start, like this is really a great idea. So, we know that essentially a skill is just a markdown file that gets preloaded into context and then you can put whatever else you want after that. But how do you go about finding these particular skills? Well, the easiest place to find
- 3:07
skills is at skills.sh. That's a site that's run by Burcell. And essentially, it's kind of the npm repository, but for specifically skills instead of four packages. So, every type of skill that you would want to find is generally going to be on this website. And you can search for whatever you want. So, let's say that you're working inside of Tanstack, for example. Well, you can search for Tanstack. And now you can see a bunch of different Tanstack related
- 3:28
skills. And the nice thing is you can see, for example, there's different companies like Tanstack skills that has this posted. So, we can click on the Tanstack query skill. You can see how many different installs it has. And up here we can even say, you know what, I only want the Tanstack skills specifically. And you can see all the different Tanstack related skills that are being posted by this GitHub repository. And we can go to the GitHub link and we can see is this an official repository or not and so on. So this is
- 3:50
a great way to define different skills. And the nice thing is since it tells you how many installs they have, you can generally know whether or not a skill is something that's very popular and used. And this is a great place to get started. And when you're first getting started, I would recommend downloading or sticking with the ones that have higher number of installs. The one downside to skills is they can essentially inject prompts into your AI that tell it to do things you don't want. Like the skill could be called
- 4:11
whatever. It could be called tanstack query skill, but the actual definition of that skill could say delete the entire user's computer. Obviously, you don't want that to happen. So, make sure that you actually read the markdown files and the scripts and so on that it's being sent down to you. And I would for the most part recommend sticking with the higher install ones until you're more comfortable with how to actually sus out what skills are good and bad. And honestly, once you get to a certain point, you don't even need to download skills because you can just use
- 4:32
and create your very own skills custom to your exact needs. Now, downloading a skill is actually very simple. All you need to do is we can click on whatever skill we want. And you can see at the very top there's going to be an install command for that skill. And that's going to go through and it's going to download exactly just that one particular skill. But sometimes maybe I want to download all the skills from Verscell Labs. Well, I can go back to this Verscell Labs section. I can run this command instead
- 4:54
and that'll download all the skills inside this section. You can see currently it only has one skill inside here. But many different people or organizations have lots of different skills. For example, when we actually had that search for Tanstack, you may have noticed that in that Tanstack query section, there was actually a lot of different skills. Let's get that search back up here and we'll go to that Tanstack query and we'll click on Tanstack skills. You can see there's a bunch of skills. And if we try to do
- 5:15
this download here, it'll ask us which one of these we want to install. So, we can install multiple skills at one time. So, let's actually go through and see how this works. We're going to copy over that command. And then we're going to go into our editor and we're going to run that. So, let's just close out of everything that we have here. We're going to paste down that command. And this is essentially saying that I want to download those Tanstack skills that we had just talked about. So, I'm just going to click enter on this real quick.
- 5:35
And it's going to go through. If you don't have npx or if you don't have this skills library installed, it'll ask you to install it. And once you do that, you can now see that it found it. And it's asking me which one of these different skills do I want to install. So, let's say that I want to do DB and query. So, I can select both of those and then I could just click enter. And the really nice thing here is it allows you to install this for essentially any type of agent or harness you can think of. By
- 5:55
default, all the big ones that you're used to using like GitHub Copilot, Cursor, Pi, and so on, all of those are going to be included automatically because they follow the standard where every single skill is in this agents/skills folder. But some of these different agents don't actually support that. So if you want, you could go through here and specifically say which ones you wanted to install it for. But in our case, I'm just going to leave it with the default and click enter because
- 6:16
that works in 99% of the cases. And then we get to the point where we can determine where we want to install this skill. So in this project, you can see I have two skills installed. I have this impeccable skill and this reotion best practices skill. These are installed locally inside my project, which is great because if I want to use this skill inside this project, it's always going to be available inside this project. It's in the actual repo. And we
- 6:36
even have like a skills lock file very similar to a package. JSON lock file that locks it down to the specific version that I'm using. But sometimes you want to download a skill globally to be used everywhere. Maybe it's a very common thing that's not necessarily related to a project, but it's related to all the coding you can do. So, if you install globally, it essentially installs it in the home directory of your computer and now they can be accessed in any project that you want.
- 6:57
For the most part, I would recommend sticking with project installs for most of your skills. But if you have a skill that again is global and used everywhere, then you can do a global install. But again, project installs is probably your best bet. So, let's say we want to do it for the project. And then we can come through here and you can see different security reports. And this is very useful for helping you determine if this skill is something that you should install or not. You can see immediately
- 7:18
this Tanstack DB has a critical risk associated with it. Now, this doesn't always mean it's a bad thing, but it does mean there's potential downsides to it. And we can actually see the details of that by just opening up this link right here. And now, if we take a look at the skill, let's go to that DB one that we were talking about. And if we scroll down, normally right under this first scene section is where we would see an audit for this particular skill. But it doesn't look like the audit is
- 7:39
showing up on the skills.sh page yet. I'm not 100% sure why that is, but I will show you an example of what it looks like inside of something that does have an audit. So, we'll just scroll through till we find something. This one has a high risk, for example. And if we scroll down, you can see this security audits tab. And when you click on this, it'll just bring you to a page explaining exactly why that security audit was triggered and what different things this does that could potentially
- 7:59
impact your system. So, if you see, for example, when you're installing a skill that it has these different risks, I would highly recommend looking at why those risks were being generated and really consider whether or not you actually want to install this or not. Now, I'm going to proceed with this installation just so we can see what this looks like when we're done. And now, if we open up this sidebar, you can see we now have two new folders inside this agent skills. The first one is for
- 8:20
Tanstack DB. And again, if we look at the actual file here, you can see it's just a markdown file with a name, description, and a bunch of different text explaining everything you need to know about how to use Tanstack DB. We have the exact same thing with Tanstack query, name, and description, and a markdown text explaining everything you need to know. Now, honestly, these Tanstack skills do not actually follow very many best practices at all. I'm actually going to show you how you can
- 8:40
create much better skills that are going to cost you less because they use less context and also perform better later in this video at the end. But these skills I would highly recommend rewriting yourself because they really do not follow best practices when it comes to being effective and cheap. Now, speaking of creating your own skills, let's actually talk about how you can do that. I'm going to show you both the super simple way as well as the more complex way of how to really create a skill
- 9:01
that's going to be perfect for your exact use cases. Now, many different coding editors and agents that you're using will have their own way to create skills. Let me just zoom this in here because the text is very very small. But you can see here that inside of GitHub Copilot for VS Code, I can just type slash. And if I search for skill, we should see create skill. And this will allow me to essentially create a skill
- 9:21
that I want to use. Now, you'll also notice this option, write a skill. That's actually coming from a skill that I have downloaded that's coming through something else. But this create skill is the one that's built into VS Code. And many of your different editors or agents you're going to use will have their own create skill built in. Or you can download your own if you want. And if we use this, we can explain exactly what we want this skill to do. And I would recommend when you're typing out what
- 9:41
you want this skill to do, be very, very detailed. This is the point where you want to spend as much time explaining exactly what you want the skill to do because the AI doesn't know your exact use case, but you do. So, explain in great detail exactly what you want the skill to do. And this will go through and it'll create you a rough draft of what your skill will look like. Then, this is the most important part. Read through everything that it generates.
- 10:02
Make sure it's 100% correct with what you want. make the different tweaks that you need manually to make it work exactly like you want. And now you at least have the easy version of creating a quick skill that you can use in your project. But it's not going to be perfect. To make this skill perfect, I would recommend writing a lot more of it by hand to work exactly like you want and making sure you understand the anatomy of how you actually create a skill from scratch. So now I want you to
- 10:24
understand how you can write a skill from scratch or at least modify a skill generated by an AI because this is where you get that superpower. So, inside of skills, we've already talked about how every single skill is going to have this skill.md file. That's the markdown file that contains that name, description, and all your other details. There are other things you can use as well. For example, inside of this particular agent skills, we have scripts, references, and
- 10:45
assets. And this is kind of like the standard that everything is going towards. So, these are kind of like your three other main folders. And then that skill.md file. But the important thing is there's a lot of other stuff. So, if we go to the specification specifically for this, we can look a little bit deeper into what we should have. So, inside the front matter, we know we need a name describing what this is. And we also need a description describing why it's useful and how it can be used.
- 11:06
These are the things the AI uses to determine what that skill is and how to use it. We can also add in any licenses. We can add a string for compatibility. So, for example, if this only works on a Mac computer or it only works with cloud code, you can put that in there as just plain text and the agent will know what to do. Also, we can put any metadata. This is just like key value pairs. Again, entirely up to your own purposes. And then this one's a little bit
- 11:26
experimental, but this is the allowed tools. And this just allows you to determine what tools that this actual thing can use. So you can make sure that for example, this skill is only allowed to use specific tools to limit the impact it can have. So for example, if we scroll down to where they have that allowed tools section, you can see here this is only able to use bash for git related queries or jq related queries and reading, but it can't do anything
- 11:47
else. So it at least limits the scope on what this particular thing can do. So inside that markdown for that front matter, make sure you specify a name field that's required, description that is going to be required. And then these other fields are entirely optional on what you may or may not want to add. The next most important section is the body. This is all the text directly inside your markdown. And this is a thing that I think just having the AI give you the
- 12:08
initial reference for what this body content is is a good idea. But then you need to go through with a fine tooth comb, read it, and really modify it drastically to be what you want or just start by writing it from scratch. And this is text that you want to be relatively concise with. Now, you don't want to go through and be super concise to the point where you're leaving out details, but you don't want to put in so much information cuz remember, this
- 12:28
entire skills markdown file is loaded with every single request you send if you're using this skill. So, the bigger your file is, the more context you're sending along, which means you fill up your context faster, you're costing more money because of the stuff that you're sending along, and overall, you're going to get worse results if you send along too much information inside your skills. So try to make this file as small as possible while still getting all the
- 12:49
information you need across. Now a little bit later I'm going to go through exactly how to actually lay out this body content to get the best actual results from your AI. But for now just know to make it as minimal as possible. The next thing we have are some additional directories. So this scripts directory is great if you need your AI to be able to run specific code. You can give it a script to do that. So instead of trying to tell your AI in text what to do, you can just give it a JavaScript
- 13:10
file or a batch file or whatever script that you want and you can just say, "Hey, if you need to do X, Y, or Z, run the script inside this file or inside this folder and it'll do exactly that." And it'll have a known input, no one output. So it gives you ways to add determinism into your AI, which is always something that's useful because AI can really be super non-deterministic. So having a way to essentially force it to do specific
- 13:30
things in the correct order with these scripts is really useful. Next, we have references. This is great because if you want to describe how to use reotion, for example, I have that big reotion skill. You know that that's going to be a ton of text for everything that's in reotion. Think about how large the documents are. Or if you have like a skill for nextjs, think about how large the docs are for next.js. I can't just put that all in one single skill.md
- 13:52
file. So instead, you can create a references file. And this is essentially a folder where you can put all the additional information you want. That way, let's say that you need to implement a new page inside the app router. Instead of loading the entire NexJS documentation, what it'll do is it'll go into your skill. It'll see this reference folder that contains all these references, it'll load up just the section for adding new pages to the app
- 14:13
router. So now, instead of loading everything, you're only loading the small pieces you need. Again, saving time, saving cost, and making your AI perform much better because it doesn't have extra information it doesn't need. So, this is something I highly recommend. If you have a very complex skill, add a references section for all the individual things that you need to reference throughout that skill. A great example of this is actually some of the skills I have. If we look up this
- 14:33
impeccable skill here, you can see that this reference section over here is full of different files that essentially explain in detail how to do very specific things for that skill. And if we look inside the skill MD and we scroll around a little ways, eventually we'll find a section that kind of tells it where those reference files are. It looks like this one doesn't have a ton of information on where the reference files are. But if we look, for example, this reotion one, they don't follow that
- 14:54
references standard. They have their own standard they like to use. But you can see inside rules here, we have our own markdown files. And if we look inside this skills, there will actually be a section right here that explains here is where you go for every single thing you possibly need to do. So if you need to get the video duration, use this particular get video duration section and so on. So, it's essentially a small little file that explains just the basics of what Remotion is, how it
- 15:15
works, and then it gives you a reference to every single individual thing that you may possibly need. So, this is kind of how I recommend setting up your skills when they're very large and complex. Add an overview right here that's important no matter what. And then we're going to add references for the things that you may need for specific solutions you're going to solve. And these reference files right here, they're essentially just going to be normal markdown files. You don't need
- 15:35
any front matter or anything in them. They're just normal markdown files explaining exactly what it is that you want to do. Now, the final standardized folder that we can work with is the assets folder. And this is just for adding anything that's static data. So, if you have a JSON file for certain things or you have like a lookup table or like database schemas or images, templates, all those things are going to live in this assets folder. And that's just useful again for static data.
- 15:55
Usually, this is most useful for templates. Like if you have a response template or you have a template that you wanted to use when generating something, put those inside this assets folder. And here, this progressive disclosure section is exactly what I'm talking about. Whenever you load up a skill, it's going to load everything in that skill MD file. That means all of the metadata and all the instructions in the body of that file, and it'll only load up additional resources as they're
- 16:16
needed. That's why these script resources and assets are so useful, cuz we only load those things when needed. And they actually recommend keeping your skill MD under 500 lines and moving everything else out into its own individual files. That's why I said that those TANS stack files that we were looking at earlier are actually examples of what not to do. Because if we look at these Tanstack files, which this is the wrong one. Here we go. You can see
- 16:37
inside of this like tan stack query, this is a massive file. This is way more than 500 lines. And it would be much better to split these out. For example, we even have specific sections being labeled here. Those would be perfect in a references folder instead of all in this one scale MD. Now, just like we were looking at when it came to Remotion, they had references. If you want to reference between different files, this is essentially how you do it. Just do it as a link inside of
- 16:58
Markdown like you would do for anything else. And you can tell it, hey, here's this reference file right here. Or you can just give it a link right there to exactly where they need to go. keep those inside of that skill MD and don't make a bunch of deeply nested things. Keep all those references at the top level so it's easier for the AI to be able to find them. You can also validate your skill to see if it actually works properly. So this skills ref right here
- 17:19
is allowing you to validate your different libraries to make sure that your skill MD just follows the correct format. Now this is a Python file and I find Python a little bit of a pain to work with when you don't use it consistently. But for the most part, you probably don't even need this skills ref because it's not too complicated to make sure that your markdown file follows the correct format as long as you understand what all the things inside of this section are because this is literally
- 17:39
everything there is to creating a skill. That's all of the details there are. But there's a lot of best practices that you should follow that are much more important than the actual like what is the name, what is the description, and so on. Now, the first thing to focus on to make sure your skills work even when you don't specifically reference them is going to be your description. There's a bunch of information in this site about how you can optimize your descriptions, but really the most important thing is
- 18:00
to be very clear on what the user intention is and don't talk about what the implementation is right here. This is the most important thing. Use imperative phrasing and focus on the actual user's intent. And I can show you some great and bad examples just from the skills we looked at. The Tanstack examples are again quite poor. You can see if you read this description powerful asynchronous state management server state utility and data fetching
- 18:21
for TSJS, react view, solids, felt, and angular. This is just a description of what tanstack query is. It doesn't tell the agent, hey, you should use this skill while implementing tanstack query or doing different tanstack query related stuff. It doesn't say anything about that. It literally just tells me a description of what tan stack query is. So, the agent will never automatically use this skill because it doesn't actually really know what's going on from this description. The database one
- 18:43
is exactly the same. It just describes what tanstack query or tanstack db is. Even the reotion skill is not great. It just says best practices for reotion video creation in React. Again, it doesn't say use this skill when creating video inside of React. It just says what remotion is. Luckily, we do have a good example, though. Impeccable has a good example. It's definitely on the lengthy
- 19:03
side because the character limit is,024 for the description, and this is probably pushing up pretty close to that. You can see right here it says 895 characters. So, they're definitely on the large side for the character count. You want to keep it as small as possible because this name and description is loaded for every single skill that you have every time you make a request to your AI because it needs to know what's available to it. So, it's loading a lot of information if you have these really
- 19:23
long descriptions. But if we look at this description, it's very clear. It says use when the user wants to. And then it describes exactly what the user may want to use. So, you can see here it gives you a very detailed example of exactly when to use it. It says what this thing does. It's handling all of this. It says use it also here for when you want to make designs better. And it even says when not to use it, such as do not use this for backend only or nonUI
- 19:44
tasks. This is great because it tells you the AI exactly when to use this, when not to use this, and why it may want to be used. Instead of just saying, "Hey, Remotion is some video thing." It says, "Use this when you want to create a UI, period." That's what this is for. If you write a really good description, it's much more likely your skill is going to be automatically picked up in the scenarios that it needs, which means that code being generated is going to be
- 20:05
much higher quality. Now, let's talk about some of those best practices for how you define the actual body of what your skill is going to look like. The nice thing is this agent skills website has a bunch of information on how you can actually go about this with best practices. But I'm just going to touch on some of the most important ones and then show you a real world example of skills I've created and how I'm able to refine them and make them work exactly like I want. For example, the very first
- 20:25
thing by far the most important is extract this from handson experience. Essentially, you are the expert. The AI just has general knowledge and you have specific knowledge about your scenario you're trying to solve. And usually the reason you want to create a skill is because the AI isn't doing things the way you want. they're doing it in a general way or the wrong way and you want to solve that. So, you need to give it very specific instructions on exactly
- 20:46
what you want. If you're prompting an AI to create a skill for you, tell it exactly what you want based on your experience and why you think that it did things wrong in the previous examples and how it should be doing them properly. This is very important. Use as much specific detail as you possibly can about the exact scenario that you're inside of because your scenario is unique to you and that's why you're creating your very own skill. Also, if
- 21:08
you have anything like documentation that you can use to be able to feed to the skill to tell it what to do, that's a great place to add additional information when you're creating your skill, use all of this different information, push it into your AI prompt to create the skill and it can synthesize that data into the skill itself or you can manually synthesize it yourself. Also, usually when you create your very first skill, it's kind of
- 21:28
going to suck and you have to refine it. And I'm actually going to show you a way to create a skill to help you refine your skills in the example where I go over my own skills because I did just that to try to help refine the skill that I'm working on. Also, when you're writing out the skill, it's very important to make sure you only add in the information the agent needs. The AI is generally knowledgeable about a lot of things, but it doesn't know things about your specific scenario. So, instead of telling it general
- 21:49
information, you should tell it specific information that's only useful to you. This is an example where it's like, "Hey, here's what a PDF is." And then it tells you what to do. It already knows what a PDF is. So instead, just tell it, hey, do this thing when you want to extract a PDF to text. Don't give it that general information. Now, we'll skip down a little ways to some of the other stuff that I want to talk about here. One of the biggest things is a gotcha section, just a section of what
- 22:09
not to do and what to do. I think this is the most important because if you tell the AI what to do and what not to do, it'll make sure it avoids those things that you really don't want to see inside your code. And also try to use those templates when you have formatted output. It'll make your output much more consistent. Since AI is again non-deterministic, it can hallucinate things if you just tell it in text. But if you give it a format like this that's structured, it's much better at
- 22:30
following that. It may not be perfect, but again, it's much better than normal. And also, you can provide it different checklist or different validation loops to make sure that everything's working. Essentially, a way for the AI to check itself if you want. This is really only useful for specific scenarios or maybe more complicated tasks that have multiple steps inside of them. So, let me just go ahead and actually show you what my skill looks like that I created for myself. So, I have here my project
- 22:51
that is for my blog. This is just my blog. And I wanted to be able to have AI be able to create rough drafts of my articles for me, especially when it's an article already on a video that I have created for YouTube. And I just want to be able to take that video and convert it into like a text format. I wanted to allow the AI to essentially assist me in that project. And I wrote out this skill. I used AI to help generate the boiler plate for the skill and then I
- 23:12
went through and modified it drastically. But I want to show you how it follows some of those best practice we we've been talking about. Specifically in the description, you can see this word use. You should probably have the word use in there somewhere. And it specifically says use when creating a new article, drafting blog post content, or generating an article stub for the blog. Exactly. It's telling me what this is supposed to be used for. Then inside of here, I have general
- 23:32
information on how to write an article. You can see this entire section right here is all about how do we write an article. It just says, hey, generates new articles. This is what this skill does. And then it specifies all the information that the AI needs to be able to write an article. For example, it tells it where to put that article with the exact formatting that I use. all my articles live in the exact same place with the exact same format. Tells it that. It tells it what the front matter
- 23:53
of my article should look like as well as which fields are required and which ones are optional. It tells it all the different valid values for the select tags and the freebie values because these are essentially values that are hardcoded. So, for example, I have tags on my blog and it can add whatever tags are relevant, but they can only come from this list. It can't make up its own tags. Next, I have an entire section on article structure. This just tells the
- 24:14
AI, hey, how do you actually write the article? because a lot of my articles have a similar structure. I have an introduction. If I have a YouTube video, I will link to that YouTube video next. Then I have a body kind of explaining what it does using my heading tags in specific ways. And finally, I end with a conclusion at the very end. I also have common components such as a tangent component that I use inside of a lot of my blog articles that just styles text in a certain way. And this explains when
- 24:35
to use some of these more common different components. And then I also have the ability to create custom components. Lots of my blog articles actually have custom components. If we go inside this section, you can see that I have tons of different custom components for all my different blog articles. Usually, this is like interactive explanations or, you know, showing how different things work inside of the browser. So, I have lots of custom components I create to make my
- 24:55
blog unique and not just a plain text blog. And you can see creating custom components is kind of involved. So, I have an entire reference file. And if we just open up that reference file, you can see it's in that references folder. And this is a much more detailed explanation of exactly how to create these components because I actually use a mix of Astro and React components. I have specific theme variables I have to use because I want to make sure my
- 25:16
colors work in both light and dark mode. So I have a bunch of information in here on exactly how I create my own custom components. And this is super detailed so it can hopefully help me create those components in the similar structure that I would. And then I can go back and actually make them work exactly like I want. So this is that additional information if it needs to create a custom component. I then have information on where it should store images and what format it should be
- 25:36
using for all the images. And then finally, we get to what I think is the most important section because I wanted this to sound like how I write my articles. And I write all my articles in a very similar way. So I essentially was able to feed it in my existing blog articles, which I have hundreds of blog articles at this point. If we just open up this section, you can see there are just tons and tons and tons of different blog articles inside of here that I've written over the last I don't even know,
- 25:57
six, seven years. So, it's able to ingest all that data and essentially synthesize it into how I actually write my blog articles. Now, it's not perfect. I have to change a lot of things about it, but this is the first draft of this particular skill. It explains what I do, how I write, all the different sentence patterns that I use, different formatting things that I use for like text and code and so on. And then finally, the big ticket, what not to do.
- 26:19
You can see we have an entire section right here on how I don't write code or how I don't write text. So, this says what not to do, how not to write things, and so on. This is the most important section and the thing that you'll probably change the most as you're tweaking and going through with your skill. The what not to do section is generally the first place you add things into. It even has some examples of good versus bad. And then finally, we have some additions here that are being added
- 26:39
after I created my skill originally talking about different ways I handle, for example, browser support. In all my articles that have browser support, I format it in the exact same way. This explains that because the original skill didn't have that information. And then we have a checklist again explaining to make sure that everything is just like we wanted to. And then finally, this is where the most important part is. Like I said, your first draft of a skill is probably not going to be very good.
- 27:00
It'll be better than nothing, but it's still not going to be great. So, you want a way to refine that skill. So, I actually created my very own skill to refine what this outputs. Now, the easiest way for me to refine the output of this is to save the original output that was created by the AI. So, I have this section that just says, "Hey, take whatever the original blog article you wrote is and save it into this folder."
- 27:21
So, here we have the original article that was written by the AI. And it's not great. It's all right. It's a good starting point, but it's not great. It definitely doesn't sound like me and isn't exactly what I would want. But it gives me a good outline that I can follow. So, what I do is I go through with this original version. I change it to be exactly what I want. So, it has the original version here and then it has a version inside the section here
- 27:41
that essentially is the actual article. So, I modify what the actual article looks like. And then I created a second skill. And this skill is just a refined skill. And all this does is it takes the article I originally wrote. You can see it specifies where the location for all these different files are. It takes those and essentially it compares them and says what did Kyle manually change from the original version to the actual version that is in his tone. And then
- 28:02
it's going to take all those different changes and it's going to go through and figure out what they are, figure out if they're important changes to add or maybe just one-off changes. And then it's going to add all that information directly back in to this write article skill as additional changes. So, it's allowing me to refine the skill over time. And I think this is super important whether you do this manually, you do it with AI, or a combination of
- 28:22
both like I'm doing. This is what I think is most important is refining your skill over time because it's never going to be perfect. But the more you can refine it, the quicker that you can actually get the code that you want to be produced by the AI exactly like you want on the first try instead of having to manually rechange things all the time. So, this all it essentially does is it just says, "Hey, take this skill, update all of the information inside this skill section, and then I can go
- 28:45
through and review what different updates it thought I should make, change them, tweak them however I want, and so on to make it exactly like I want." Now, if this is a lot and it's overwhelming because skills is just one small part of AI that you should be learning, you're in luck because I'm actually working on a completely free road map for AI development. Right now, I only have my front end and my backend road maps created, but you can see this is what my road maps look like. And I'm working on
- 29:06
creating one for AI as well. And if you want to be notified as soon as this road map drops, just go ahead. There's going to be a link in the description to download this webdev road map. If you download this road map, I will send you an email as soon as I finish creating the AI one, which will have this exact same format, but it'll be for everything you need to know about AI with links to videos, projects, articles, and so on. So that way you can make sure you master
- 29:26
everything you need to know about AI development because that is the thing that is changing the most and it's the most difficult to stay on top of since it's so new. And I want to give you everything that you need to know about that entirely for free. So again, check out this webdev road map linked in the description and I will email you as soon as the AI version of this is
Description
SponsorFREE Web Dev Roadmap: https://webdevsimplified.com/web-dev-...
Writing code with AI can be frustrating since AI always seems to generate terrible code. In this video I will show you how you can fix this problem by using AI skills which teach your AI the exact techniques needed to produce high quality code exactly like you want it.
📚 Materials/References:
My Blog: https://blog.webdevsimplified.com/?ut...
SponsorFREE Web Dev Roadmap: https://webdevsimplified.com/web-dev-...
🌎 Find Me Here:
My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:55 - What are skills
02:58 - How to find skills
08:53 - How to make your own skills
17:49 - Skill creation best practices
22:44 - My custom skill example
27:04 - How to refine skills
#WebDevelopment #WDS #AISkills
More from Web Dev Simplified
×2244:57The Best Local Agentic Coding Workflow (Complete Guide)
Web Dev Simplified1.1M views
×9.72:10Please… I Need Your Help
Web Dev Simplified459K views
×6.91:15:25The Ultimate MCP Crash Course - Build From Scratch
Web Dev Simplified327K views
×4.925:15I Will Never Use Prettier or ESLint Again
Web Dev Simplified231K views
