Up & Running with GitHub Spec Kit #8 - Implementing Tasks

Key Takeaways

So then my friends, we have run every command so far except the final one which is the implement command. And this is the command that actually takes that task list, runs through each one and implements them. So this is the first time we'll be instructing the model to actually generate working code for the project. And I know this has been a fairly long and drawn out process to get here, but keep in mind that we've also run two optional commands along the way, the clarify and analyze ones. And we've run the constitution command as well, which typically we won't need to do every time we have a new feature. Plus, I've been recording this whole process and explaining certain things along the way. So, in reality, it would be much quicker to implement new features. Anyway, let's go ahead now and use this final implement command. All right, so before we ask the model to go ahead and implement all those tasks, I just want to switch to a brand new chat session. And the reason I'm doing that is because in this other one, we have done everything so far. We've done the constitution. We've done the spec, the planning, the clarifying, the analyzing, building the task list, and we've built up one hell of a chat history. And all that is in the context window. Now, I found that when the chat history gets bloated and you've got a lot of context in the window, then it becomes harder for the AI to stay on track later on to implement these tasks. That's just my experience. It might not be for you, but I want to create a new chat for implementing the tasks. So, I'm going to make sure agent is selected. I'm also going to choose Claude Sonic 4.5, which is a fairly fe uh recent release. And I'm just going to give this a whirl. And then we're going to use the implement command like this. Now, if you wanted to, you could add some user input. I think pretty much all of these accept user input. If we open this, we can see the user input is the arguments. But again, I've seen no reason to really give it any input when I've been using it so far. If you've come up with a reason to do this, please let me know in the comments. Anyway, down here, basically, it's a prompt to tell the coding agent to go through all of the tasks and execute each one. So, let's press enter over here and see if it does it correctly. And I'm just going to click on enable for this new model right now. So, right now, you can see that it's created these 22 to-dos. So, we have 22 tasks, right? And it's created a to-do, I think, for each one of those to keep track of them. The first one was to install Shard CNN, which it's just asked me to do, and I've just said, "Yeah, you can go ahead and do that." [Music] All right, then. So, it's all done now. And if we scroll up here to where it finished, it says, "Implementation complete. Tick. I've successfully executed all 22 tasks from the implementation plan from the uh for the do it goal tracking app. So this is what we accomplished the setup phase. We've done all these tasks, all these ones as well. It's just letting us know it's done everything basically. So if we scroll right down, we get big checks next to all of these different features as well. It's also started the dev server for me as well, which is nice. So I can go ahead and check this out in a browser. Before we do that though, I'm going to take a very quick look at the different files it's added. So let me close all these. Open up the explorer and let's have a look inside source. So in app, well, it's changed these two files. The globals.css. So we've got all these different theme colors. And then in the page, we have the goals list hopefully somewhere. Do we have that? Yeah. Okay. So the goals are down here. This is the goals list component. And we've got another goal list component as well. These are for the completed goals, I guess, and these are for the active goals. All right. Cool. So, it's using the same component for both lists, even though some are going to be displaying differently on the right. That's uh that's nice. Let's have a look at that. So, the goal list is right here. So, we're taking these props, the goals, uh the title, and these functions as well. And then we output each goal in a goal card. All right. We also add this text if there's no goals in the list as well, which is good. Let's have a look at the goal card. These are the props the goal itself. Um, okay. Days remaining. So, we are going to show when the end date is is urgent. Okay. Yeah. So, I think I said that when it reaches the end date or within 3 days of the end date or something like that, then we should highlight it. So, I guess that's what this is doing. If we scroll down here, yep, we conditionally apply a different class if it is urgent to highlight it. Good. All right. So, we've got these different bits of template down here. We've got a button for completing, for deleting, for cancelling. All right. Yes. So we have a checkbox which if we check unchecked. So handle checkbox change. Let's see what this does. Show uh set show choice. And then down here. Ah I see. Yeah. So next to each goal then there should be a check box. And when we tick that checkbox, it then shows these options. So what we want to do with that particular goal. So we can either complete it, we can delete it, or cancel the action. All right. Yeah, that's good. Okay. So that is the goal component. We've got a form to add a new goal. So yeah, we're inputting a title, an end date. These are form errors, I presume. All right. Dialogue. Yeah. I mean, I'm not going to go through every line of code. It seems to look okay. There's the goal list which we've seen UI components. So the button and we have the checkbox, the dialogue, the input. Okay, so it's made a custom input as well. All right, what else have we got? Have we got any hooks? Yes, we have hooks down here. We should have one for use goals and we have some goal state is loading. Um, clean up overdue goals. What's it doing? All right. So, we're creating a goal. Do we have anything to do with local storage here? Let's have a look. Delete goal. Set goals. Was deleted. Was deleted. I mean, I'm not seeing it. However, it might be elsewhere. Let's have a look in the lib folder. Storage. Okay. So, these functions load goals. Ah, these were being used in this file, weren't they? If we go up here. Yeah. So load goals and save goals we used inside this file to load and save goals and they are coming from this file the storage one which is using local storage. Awesome. So we are persisting the goals in local storage and then we have this final one which is just a utility function for TWIN merge. All right. Cool. Yeah. So this looks all pretty good. Again I've not gone through this thoroughly. I would do if I was working on not a throwaway project. But now what I'd like to do is view this in the browser. All right. So, moment of truth. Does it all work? Now, first impressions, it does look basic, but I've not really given it any specific design instructions, so I can't blame it for that. I'm going to click on this to see if this works because we have no goals in either column yet. So, add goal. Um, okay, that's nice. It's given us a little hint right there as well. Learn TypeScript. I'm going to say finish this series. And then let's give an end date of I don't know in like 3 days time. Add the goal. And yeah, it says right here 3 days left. Cool. We've got this little check box right here as well. So I think this is going to be the urgent goal because it's red. Let's add another goal with a date further in the future. We'll just be like buy milk or something. And then not much of a life goal, is it? 25th. Add goal. Okay. Yeah. So when we are within 3 days or it could be 5 days, I don't know, we get the goal styled a little differently. That shows that this is an urgent goal. Let's try and complete something. All right, cool. So when we check this or click on it, we don't see a check icon, by the way, do we? We just click it and we don't see it. That might be to do with the styling. Is it checked? Um data slot. All right. So, no, we don't see one. I would have to look at that. I'm not going to do that in this series. The functionality is working, but we can either delete that, cancel it, or mark as complete. Let's do that. All right. Cool. Yeah. So, it goes over to the right. Now, what I'm going to do is refresh the page because now these should be stored in local storage, right? So, we should see these when we load it again. Yeah. Awesome. We do. Okay. So, if I click on this again, we don't see the tick, but we can delete these as well. And that works. Awesome. Now, I just want to try one more thing because I noticed in the globals.css file, it created a load of dark theme colors, but we don't see any dark theme over here. And that's good because I didn't ask it to do that, but it created the colors. I want to see what happens if we come to the body tag. I'm going to edit this and just give it a class of dark. Now, I'm not expecting this to work, but we shall see. Oh, it does. Okay, cool. So, that looks pretty nice. We have a dark theme as well. Everything's dark. Let's say finish this series again. And we'll give this an end date, which is pretty soon, to see what that highlighted goal looks like. Add goal. Okay, it's still red. Yeah, I mean, I'm pretty happy with this. We've got a dark theme, we've got a light theme. Uh, we can delete this. Awesome. Okay. So, I don't know what you think, but I think using SpecKit and those different stages to spec out the new feature, plan it, create the tasks, and all those other things, I think that's kept the AI model on track a lot more. If I tried to do something like this without Spec Kit, even though it's quite simple, I would still find myself going back to the AI quite frequently, saying, can you change this? Can you do this? Can you do this? And then maybe reverting some changes as well, sometimes scrapping it and starting it again. And I think using those different stages with SpecKit has definitely kept it on track to create this feature. Next up, then we'll try and do all of this again, but we're going to condense this into a much smaller video to add another feature.