Copilot CLI Tutorial #4 - Custom Instructions

Okay, then my friends. So far we've seen how to send prompts to Copilot so that it can work on changes in your project, which is cool. However, a lot of the time in those prompts you'll find yourself steering Copilot to write or structure the code in a particular way according to your coding preferences. For example, how to name handler functions or components, or how to structure components, what folders to put them in, whether or not you want to use semicolons, which third-party libraries to use, and all that jazz. Because if you don't add that information to your prompts, then Copilot will basically decide on its own what to use based on your project so far, and it probably won't get those choices right a lot of the time. So, to combat this, we can add some custom Copilot instructions to the project where we can outline all of our coding preferences and application architecture choices. And those instructions will be used by Copilot for every prompt you send it and every task it completes, so that more often it will make the right decisions. The way we do that then is by making a markdown file inside a .github folder called Copilot instructions, and then put all of the instructions in that file. But, when you've already started a project and you have some code already written for the application like we do in this one, then you can also use a built-in command, which is the init command, and that tells Copilot to generate the file for us. And not only will it create the file, it's also going to explore the code base and pick up on any architecture, libraries, and coding styles that we already employ in the project, and it's going to add that information to the file for us. So, let's do this then. Let's use the init command and see what happens. All right, so I'm just going to press enter right now to run this, and let's see what it does. So, you can see right now it's looking at the different files, including the package.json file as well, the different pages, the components, etc., and it's going to gather up all that information so it can write these these project instructions for us. All right, so now we can see it's done that and it's created the .github folder right here and inside it the copilot instructions file. So, let me just clear off some of this to give us a bit more real estate and now let's have a little read through it. So then we've got a bunch of commands up here and it's pulled those from the package.json file so it knows we can run those. Then we've got the project architecture and it says right here it uses Astro and React and it says Astro owns the static structure so routing, pages, layouts, decorative components, etc. And React handles interactive UI which is correct. Then we have the kind of directory structure so the pages, the layouts, the components, they're all in those different folders. Um then it says down here interactive React components are mounted in Astro pages using the client directives client visible which is correct. That's what I'm using at the minute for this particular component. All right and it says exactly what that does right here as well which is nice. So down here we've got some different styling conventions. So three layers each with a distinct purpose. So we've got the is global directive right here on a style tag and that's inside the base layout Astro file so that's correct and that makes the CSS inside that style tag global then to everywhere. We've got style blocks in individual Astro components as well. Uh so that's purely for that component and then we've got CSS modules and they're used exclusively for React components. I mean that was not my intention. It just so happened to be that for that React components I've used a CSS module. All right so then if we go down here we've got some different design tokens. So these are colors that we're using so it's picked up on all the different theme colors and then it can pluck from these in the future if it needs one of those which is nice. Uh and the fonts as well. Then it says down here TypeScript uh strict mode enabled and then Astro component props are typed via an interface props. Yeah, that's correct like this. Um and then that is pretty much it. So, I'm happy with this. I mean, I could add further instructions if I wanted to, if I had particular coding preferences. For example, I don't like using semicolons in JavaScript and TypeScript a lot of the time, so I might add that in. I'm not going to do in this case, but as well, if there are any other things like certain packages you want to use, or you want to limit the amount of packages we use, you could add those instructions in here as well. Okay, then. So, now we've got the custom instructions made. They're basically going to be used by Copilot for every task we set it each time we send a prompt. However, if we use a command called {slash}instructions, which shows us any custom instructions currently being used, then we're probably not going to see it. And that's because we sometimes need to restart the session for Copilot to pick up on the instructions we made. So, let's first of all exit the current session using the exit command. And once we've done that, we can just start up a brand new one by typing Copilot again and hitting enter. So, then once the new chat starts, if we then just use the instructions command again, we should hopefully now see that new instructions file registered, meaning Copilot's going to use it now when it handles prompts that we send to it. So, now we can try sending another prompt, which I'm going to paste in right here, and then also switch to autopilot mode as well by hitting shift and tab twice. And this prompt says, "Can you make a new React component called weekly stats, which should just be a bare component for now with only a title of weekly writing stats. Set up the CSS for the component, too, giving it some space and central alignment. Then import the component into the home page and add it below the word count input." Okay, so I'm asking it here to make a new React component. And there's information in the custom instructions about how we're using React components as client islands in terms of the client visible directive and how we style them using a module, right? So, let's hit enter on this and make sure all permissions are granted. Then we'll see what Copilot does for us. Okay, so it looks like that's all done and I'm now going to take a look at the component. So if we open this up, we can see we now have a weekly stats component right here. And I did ask it to keep it pretty bare to begin with. So it's just added in the H2. We've got a few styles here as well as a module as well. So those were in the instructions, remember? We said make a CSS module for any React components. So some basic styles in there. Okay, so the important part is how we're using that now inside the index page. So we can see the weekly stats component is imported, awesome. And we're using the client visible directive, which is what I wanted. Those were in the instructions. All right, so now I'm going to make sure this is all saved and we're going to view this in a browser. Okay, and there it is. There isn't much to see to be honest. It's just a title, but at least it's sitting in the middle below this other component up here. So so far, so good. All right, so now we have a custom instructions file which informs Copilot of our project structure, uh coding preferences, libraries we use, or anything else important to the application. And it's going to use those instructions whenever we're working on changes. Also, I would advise you to update the instructions file as your application grows and you add more libraries, uh change the architecture, or whatever else. Otherwise, it's going to be using all that outdated information to base its decisions on. Anyway, in the next lesson, we're going to be looking at context.