Transcription
Hey everyone, how's it going? Welcome back with me, Nathan. In this video, I want to show you how to use Speckit on existing projects as well as adding specific features to it.
So, after my last video on how to get started with Speckit, many of you are asking about how to use Speckit on existing projects as well as developing specific features one by one instead of trying to build everything in one shot. That's why in this video I'm going to show you how to do just that.
To use specket on existing projects is actually very easy. First you need to open the project you have in your editor. Here I have VS Code ready. And on the left side I have this CRM dashboard project that's currently on progress. This app is created using Nex.js, TypeScript, Tailwind, and for database it uses Drizzler library and SQLite.
Now let's try to run this project and see what it looks like. So open the terminal and then run `npm run dev`. So here it is. It's a full stack CRM dashboard that manages customer relations, allowing the sales team to record customers and deals, as well as track the progress. Right now, some parts of the app have been developed such as the customers page here. Uh, we can search customers and then we can also filter them. We can also add customer. And then we can also delete existing ones. But there are parts that still under development such as the deals page here. It only displays the deals data. And then the add button here isn't working. And there's no way to search, filter, or edit the data. So we're going to continue developing this project with specit.
On the terminal here, open a new terminal tab and then just type `speckit init`. Of course, you need to have specket already installed and then run the init command with the `--here` option. Basically, this option will initialize speckit on this project folder instead of creating one from scratch. Press enter and it will ask for your confirmation. Uh, let me expand it here. Okay. So, just say yes and then it will ask what coding agent you want to use. Um, I will select kilo code again here and then the script type, uh, select shell here and then specit will generate the scripts and templates required to start spec-driven development. As usual, in the `.killcode` folder we can see all the custom commands and in the `speckit` folder we have the scripts and templates.
Now, before we jump into the exciting part, don't forget to subscribe to my YouTube channel so you won't miss new videos that can really help you level up your skills. Also, don't forget to click on the bell to get notified whenever a new video comes out. Thanks a lot for supporting the channel. You really help me make useful videos just like this one.
All right, we can now start by running the `speckit constitution` command just like in a fresh project. So, I will open kilo code here on the right side and then type `/` and here, uh, select `speckit constitution` and then I will describe the app. So, it's an Next.js JS app using tailwind for styling and typescript for the program. Database used drizzle and sqlite, and for the principles I want to create as few components as possible, reuse as much components and style, no testing required. Okay, that's it for now. Uh, run the prompt here and let kilo code process the request. It will read over the speckit templates and files and then create a constitution markdown file, which we can see over here. And then after a while, it will also update the rest of the templates accordingly. I will skip a bit as this process will take a bit of time and when the constitution is ready, we can review it here. So, there is the core principles which serve as guidelines for creating new specifications and then there is the node testing policy here, followed by the reason and the enforcement of the policy, and after that, we have technology adherence, type safety, code quality, and so on. You can review the constitution here and make changes if you need to. But once it's all done, it's time to continue to the next step, which is to run the `speckit specify` command.
So, uh, what I want to do here is to improve the deals page. I want to add the ability to create, read, update, and delete deals. Display as many useful data in the table as possible. Press enter. And now the agent will start working to create the specification. It will use the constitution as guidelines when making this document. After a while, it will be completed and we can review the specifications. As before, there will be user stories here where each story will describe what can be done with the feature. And then below that, there are also edge cases and we can review all of this before moving to the next step.
Now, what I want to do next is to run the `speckit clarify` command. This is an optional command that we haven't tried in the previous video. Basically, the AI will review the specification document and then ask us for more details about the requirements that are not clear or not yet included in the spec. So, let's type `speckit clarify` here and then press enter. So, the AI will check back on the specification and when there is something unclear, it will let us know. H, all right, it has generated a clarified document over here. Uh, so, let's skip ahead to when it's finished. Okay. Now we have things to clarify in this document. For example, the first question is customer selection interface. Should we have customer selection as a drop-down for option A or B here, searchable drop-down, or C, a separate modal complete with search and pagination? Now, when the application scales later, we will definitely need a customer modal. But for now, we can use a simple drop-down UI. And then the second question here, the modal implementation. Should it stay in client-side only or server rendered so that the URL can be bookmarked? I will say just let it stay on the client side. So, it's A and yeah, we can send the answers to these questions in the prompt. So, I will just provide the answer to these questions quickly. All right. Now we have all the answers for the document over here. I have finished reading all the feedback. So, just submit the prompt and then the agent will revise the specified document, adding new details to it. So, that's basically how the clarify command works.
And now we can continue to the next step, which is to run the `speckit plan` command. So, let's do that over here. Uh, submit the new prompt and then after a while, the agent will generate the plan documentation for us. We can review it again as usual. And once you think it's ready, it's time to run the `speckit tasks` command to generate the step-by-step implementation plan for the feature. Okay, we have the tasks here. So, we can review it as well. There is the phase one, the foundational phase where new components required by the feature will be created, and then phase two will try to complete the first user story, and then phase three and so on. But yeah, with the tasks now generated, I want to run one more optional command, and that is the `speckit analyze` command. Essentially, this command will check for consistency between the spec, plan, and task markdown files and look if there is any part that needs our attention. So, just run the `speckit analyze` command here and then this analysis will take a while. Uh, so I will skip ahead when it's completed. Okay, now the analysis is completed and we can take a look at the chat box. Uh, I will expand this a bit and there we go. The result here says it's okay to go with the implementation. Although there are four medium severity issues that should be addressed. It should be quick to do so. Uh, all right, let's scroll up here and, uh, we can see the constitution alignment here to see if there's anything that violates the constitution. It's all good here. So, that's good to know. Up next, and here is the coverage that requires verification. So, basically, there are some parts of the tasks that's kind of ambiguous. For example, there is no explicit statement that the deals need to be sorted by the newest first. So, the recommendation here is to verify the result is sorted by created date in a descending order. And then there is currency formatting here. So, needs to use the `toLocaleString` function to format the currency. And yeah, so just like in the clarify step, you can address this by simply responding in the chat box. Uh, down here, the AI asked if it can apply the recommended fixes. So, I would just say yes, apply the recommended fixes, and then it will slightly adjust the tasks here, and after that, we're now ready to run the final step, which is to implement the feature.
So, let's just do that. Uh, run the `speckit implement` command over here. Let the AI process the request for a while, and then it will generate a task list, and then the agent will start coding the feature. If you like this video and would love to support the channel, you can consider donating to my channel through the Super Thanks option below. Or you can consider joining my YouTube membership where you can use this channel's emojis, get early access to new videos, plus a lot more.
And now the implementation is finished, and we can see the details in the chat box here. The task lists were all implemented successfully. So, let's open the page in the browser and here it is. We can scroll to the right side and we have these buttons to edit or delete deals data. Let's try to edit one here and maybe just this one and then change, change the customer here and then save. Okay, we can save the deal. It's updated. Now, let's try to create a new deal. Um, let's just name it as "Hardware Procurement" and then the total value will be $1 million. Fill in the rest of the details here and then press save. Okay, now we have the deal over here. Uh, so, very good. Now, let's try to delete this deal. Uh, press the delete icon and then confirm it, and there goes away our $1 million deal. Uh, so, yeah, overall, that's how you develop or add a feature to an existing project using specit.
Now, if you want to add more features to the app, it's really simple. Uh, you can just run the `speckit specify` command again and then describe what you want to add. For example, uh, suppose I want to improve the pipelines page over here. Back in kilo code, I will start a new chat. Type the `speckit specify` command and then I will just say, "Improve the pipelines page. Create a drag and drop board where users can move the stages of the deal card. Add insights and allow users to edit deals data in the card." Press enter, and then the agent will work on the new request. Now, sometimes you might want to generate the new specs in the wrong location. Uh, we can see here it wants to generate a new spec at a root folder using the `mkdir` command. If that happens with you as well, then you can simply instruct the AI and for example, here, tell it to generate the specs on the `speckit/specs` folder. That way, we keep the structure clean. And that's it. After a while, the new spec document will be created, and we can review this document, change it if necessary, before moving on to either the clarify or plan command.
And that brings us to the end of this video. Now you know how to use specit on existing projects. I hope you all enjoyed today's video and got some value out of it. Let me know your thoughts and questions in the comments below. I'll join the conversation and reply as often as I can. Also, if you're new to the channel, my name is Nathan, and I hope you learn how to code and use AI tools. Make sure you subscribe if that's something you find useful. Don't forget to like this video, turn on the notification bell, all the good stuff, as it really helps the channel to grow. With that being said, thanks so much for watching until the end. I hope you have a great day, and I'll see you in other videos. Bye-bye.
[Music]