Copilot CLI Tutorial #7 - Skills

Okay, then gang. In this lesson we're going to talk about something called skills, which are slowly becoming a bit of a standard when it comes to agentic coding tools. So, Cloud Coders then, uh the Code CLI, Copilot, they all use skills, and I think the Gemini CLI uses them as well. And skills are a way to essentially teach these agentic coding agents repeatable tasks that incorporate our own preferences for the application and also as developers. So, for example, if you are using Copilot to make commits and commit messages, but want all your commit messages written in a very specific format, you could create a skill for that, and then Copilot will use that skill automatically whenever you ask it to make a new commit. Another example might be a skill for designing interfaces, which outlines certain procedures or design guidelines you want Copilot to follow whenever it's designing something. In this lesson, we're going to be adding a skill for implementing new features, which tells Copilot that whenever we start work on a new feature, we should create a new branch, switch to that branch, and then commit on that branch when the work is done. And hopefully, whenever I ask it to add a new feature in the future, it's going to automatically use that skill and follow those instructions. So then, how do we make this skill? Well, the first thing we need to do is add a skills folder to the .github folder within this project. So, let's do that first of all, and then inside that skills folder, we need another folder for each skill that we make. So, I'm going to make a folder called adding-new-features. All right? So, that's going to be essentially the name of the skill I'm creating. Then inside that new skill folder, we need to make a skill.md file, where skill is all uppercase. And the name here is important. It must be called skill.md. And then inside here is where we create the skill. So, the first thing we need to do in this skill file is add a bit of front matter at the top. And front matter is like metadata for the file, where we can specify things like the name of the skill, a description, which tells you a little bit about what the skill is for, and importantly, when the skill should be used by Copilot autonomously. So, let's make that front matter first then, which we can do by adding three dashes on either side of it. And inside those, we can add the name of the skill first of all, which is going to be called adding new features with hyphens between them. And once we've done that, we can add a description property below it as well. Now, it's important that in the description you explicitly state when Copilot should be using this skill autonomously because we don't always directly invoke a skill. Copilot can automatically use them when it thinks it's appropriate to do so. So, for the description, I'm going to paste in the following. Guide for setting up branches before implementing any new feature or plan. Use this whenever asked to build, add, or implement something new. So, notice here that I'm telling Copilot when to trigger and use the skill, which is when we're asking Copilot to add some new feature or something. All right? So, that's all we need for the front matter, and next we can add the skill content itself, which is basically a set of instructions to the AI model on how to work. Now, I'm not going to write all of this out from scratch, and instead I'm going to paste it in and then walk through it because I prepped the skill ahead of time before I started recording this lesson. And in fact, I added the skill file already to the public folder right here. So, if you downloaded the course files, you can copy the content from this file as well. So then, let me just grab all of that, and I'm going to head back to the new skill file I just created so we can paste it back in, and then we'll go through it. Okay, so let's just scroll back up to the top, and you can see it's quite a small skill. We've got a few different steps, and the first step right here is to check for uncommitted changes. So, we're going to run this command get status, and if there's any uncommitted changes or untracked files, we're going to warn the user and we're going to ask the user. So, this right here is actually a tool built into Copilot. And we're telling Copilot to use that tool to ask us whether we want to continue on the current branch or stop to commit and stash first. Or commit or stash, should I say. So, if we say stop, we're going to pause and wait until that's done. And if they say continue, skip to the implementation and we're going to do that on the same branch. Now, if there's no uncommitted changes or anything like that, then we're going to go ahead and generate a new branch. So, it says if the working tree is clean, derive a branch name from the feature description or plan title. So, the format is this. So, CP first of all, then forward slash feat, then forward slash whatever the slug is. So, this stands for Copilot, then feature, and then the slug. So, it's going to be lowercase, hyphen separated, max five words for the feature right here. And it's going to derive that branch name from how we describe the feature. So, after that, we're going to run git branch list to confirm the name is not already taken for that branch. If it is, then we're just going to append a short numeric disambiguator to the branch. So, for example, two. All right. So, after that, we're going to ask the user using the ask user tool if we want to switch to that current that new branch that we just created. So, we'll switch to it if we say yes. And then finally, we're going to generate a commit message and then we can commit the changes. So, either way, we're going to begin the implementation right here in this step. To be honest, we could have added that as a separate step right here as four and then this could be five, but it doesn't really matter. We're going to begin the implementation once we switch to that branch. All right, cool. So then, now we've got the skill created. Let's try seeing if it gets used. Now, whenever I make a new skill, like with the custom instructions, I tend to quit the current Copilot session, which I'll do now, and then I start a new one or even just resume the same one. That way, I know that Copilot's going to be then aware of the skill. If I don't do this, then generally speaking, Copilot is not going to know about it. So then, once we're back in a session again, we can verify that Copilot knows about the skill by running the skills command, which is going to list all the skills currently available. And on that list, you should see the new one we just created, as well as a skill baked into Copilot uh called customized cloud agent. Anyway, let's hit escape to exit the screen, and now let's try asking it to work on something new. So, when you want Copilot to explicitly work on a skill, you can actually invoke that skill directly as you would a slash command. So, now, if I hit forward slash and then start typing add new feature, we should see in this list. So, when we use this command and then follow it with a prompt, we can be 100% sure that the skill is going to get used. Now, ideally, we shouldn't need to manually invoke the skill, and instead Copilot figures out when to autonomously use it instead. But in my experience, it doesn't always work. So, if I definitely know that I want this uh skill to be used, I sometimes manually invoke it at the start of the prompt like this. But definitely play around with both attempts. Now, I'm going to keep it here for this recording just to make sure it runs. So, now I'm going to paste in the following prompt, which says, "Can you work on this new feature? Create a footer component with a copyright notice and double links like uh to socials, and then add it to the bottom of the layout. Style the component to match the rest of the site." Then I'm going to hit enter, and hopefully, we'll see the skill being used. All right, so you can see that it's detected untracked files. So, it's these files we just added, this one in fact. And it's asking us if we want to continue on the current branch, or do we want to stop to commit or stash first? So, I'm going to stop right here. I'm going to choose option two to commit, and let's see what happens. All right, so you can see it says pausing here. Please commit or stash your changes, then let me know when you're ready to continue. So, I'm going to enter into shell mode, and I'll just say get add, and then I'll do a commit as well. So, get commit, and then we'll say add new skill, like so, and press enter. And oops, I didn't add the M flag, so let me do that again. Enter into shell mode. Get commit M add new skill, like so. All right, then. So, now what I'm going to do is just run the skill again using the previous prompt. Press enter. Okay, so this time the working tree is clean, and it's come up with this branch name right here, CP/feat/footer do we want to switch to that new branch or stay on the current branch? So, I'm going to select switch to the new branch right here. And now it's asking us for permission to do that, so I'm going to say yes, and don't ask again. All right, and next it's asking for permission to add this file, so let's say yes, and don't ask again. And now it wants to build the application to verify no errors, so same again, option two. All right, and finally it says the footer is complete. Would you like to commit with this message? And it's come up with a message for us right here. So, I'm going to say yes, commit it. And then it wants permission to run that commit, so I'm going to say yes again down here. All right, and now it's done. So, we've got a summary of what was added. We've got this new component right here, the dynamic copyright year, dummy social links. It's styled to match the site, and it's added it to the base layout. So, let's just have a very, very quick look. We'll go into components down here, and then we should have a footer somewhere. There it is. Okay, cool. So, we can see that footer, very simple with some styles as well. And then if we open up the layout file, which is in the layout folder right we should see that it's been added to the layout as well. There it is. Awesome. Okay, and now in the browser we can see that new footer at the bottom. Awesome. So, that's how we can use skills in Co-Pilot, and they can be used for a bunch of different kinds of repeatable tasks. For example, how to structure database schemas, custom types, query database, and so on. In the next lesson, we're going to talk about MCP servers.