Plan, Specify, and Implement with Spec Kit — Transcript

Full transcript

1. 0:04[Music] Hey Dan, how's it going? Hey James, good  seeing you. It's good seeing you again. I see
2. 0:08Master Chief is Master Chief. It's the holidays.  We're ready. We're ready. Let's do this. Ready.
3. 0:13Uh well, let's get in our Warth Hog and let's  ride, baby. Okay. If you know me and Den at all,
4. 0:18we love just talking about uh everything including  planning, specking, and doing real planning. real
5. 0:27planning, real development on top of plans. Yes.  I think so far today people have seen a lot of
6. 0:32things with GitHub copilot with VS Code with  Visual Studio, right? And often I think when
7. 0:38we're demoing or we're actually writing software,  we're just having an idea or a bug or assigning
8. 0:44it and telling the agent what to do, right? And  I was just meeting uh with a company and I said,
9. 0:49you know, how I worked 2 months ago is so  different to how I work now because I was
10. 0:55doing what I just sort of described, which I had  this idea in my head. I would write two or three
11. 0:59sentences and let the AI figure it out for me,  right? And there's pros to that, which is it went
12. 1:04from my head into code pretty quick. But then  there's a downside to that. And that downside
13. 1:09often is that I haven't really given it the rails.  haven't given it the the the plan, the spec on how
14. 1:16to do it, right? Uh like I would normally get from  my PM team that's assigning work uh our way or at
15. 1:21least me assigning myself work, coming up with an  idea. So plan mode inside of VS Code allows us to
16. 1:27do a lot which is like I have an idea and turn it  into a plan that I can then execute. When we think
17. 1:32about spec driven development, that's a little bit  different. And that's what we want to kind of talk
18. 1:36about today. Yeah. Yeah. So what is spec driven  development then? And why do people care? Yeah. So
19. 1:41spectrum development is basically a practice like  people think about it as some magical new thing
20. 1:46right it's like oh it's all this agentic workflow  and spec driven and it's all magic in reality it's
21. 1:52essentially us formalizing the guard rails for  AI models right because one of the things that
22. 1:58if you talk to a lot of customers and they have  tried vibe coding like all of us have right it's
23. 2:03kind of exciting you start building things and  you're like oh I'm going to tell the AI to build
24. 2:07this website you start building my like the  style and the buttons and the header and then
25. 2:12you see it all light up and it's kind of cool.  But if you start building production software,
26. 2:17software that needs to be maintained by somebody,  software that needs to evolve down the line beyond
27. 2:22your initial prototype, that vibe coding approach  doesn't really scale because the AI doesn't have
28. 2:28necessarily the sense of taste or conventions  that you need to be applying. So naturally,
29. 2:34the model that you're using is going to make its  own architectural choices, right? like it's going
30. 2:38to decide to use a specific web framework if you  didn't give it instructions. It's going to use
31. 2:42a specific way to organize components and CSS  and everything else. And that is problematic at
32. 2:48scale because a lot of these decisions are  not necessarily one-way doors like you can
33. 2:53reverse them, but down the line once you build  things out and then you realize that oh I want
34. 2:58to add the shopping cart to my site and then you  realize that the libraries that you use are now
35. 3:03incompatible with some of the things that you're  trying to build. So you start putting yourself in
36. 3:08this corner where now you're like okay now I need  to figure out a way out of this and spec driven
37. 3:13development is a process by which we essentially  frontload a lot of the thinking that you have to
38. 3:18do and thinking with the help of LLMs right where  you can say I am building an e-commerce site and
39. 3:24I want to do X Y and Z and by the way my company  is using Stripe for payments I'm using you know
40. 3:31the Shopify front end for my store and you can  assemble all these things together and a cohesive
41. 3:36way and then have the AI help you build the things  that you want to build in the way that also will
42. 3:40scale in the future. So it essentially allows you  to think first and get the outcome you want rather
43. 3:46than offload that to the LLM itself to go and  make the decisions for you. So I'm a developer
44. 3:52now. I'm sort of want to live and breathe in the  code, right? I want to live in my my repo. So how
45. 3:58should I as a developer? I think that makes a lot  of sense if I'm I'm like an architect or I'm a PM.
46. 4:02But what if I'm a developer and I'm like okay I  just want to write I want to jam on some code. How
47. 4:07should I be thinking about spec driven development  because maybe I'm a solo developer and I'm just
48. 4:10like building and I want to build something or  maybe I'm at a large enterprise or a startup or
49. 4:14something like that. How should I as a engineer?  Why is it important to me as an engineer to think
50. 4:20spectrum and development? Well because one of  the key pieces of data that you need for good
51. 4:25software with the help of LLMs is context. Context  on your codebase context on the decisions that you
52. 4:31made. Right? Like if you throw an existing code  base like let's say you take something as complex
53. 4:36as VS code you know it's an open source project  you go and you ask the LM to go and implement
54. 4:40some feature it has no context as to like why  did you decide the uh you know your status bar
55. 4:46to be a certain color a certain style why did you  decide the iconography to be a certain way right
56. 4:51so the LM is going to start guessing when you  have specs in place the LM can go and parse out
57. 4:56and say okay let me look at how you've previously  thought about styling okay now I understand well
58. 5:02understand right but uh it essentially is going to  look at it and have the context when you ask it to
59. 5:09do other decisions around your product even  though you're mostly in code but having that
60. 5:15extra context is super helpful to make sure that  any future code is going to be exactly what you
61. 5:19wanted I see so in this instance once I've created  some sort of infrastructure if I will then that
62. 5:27infrastructure will continue to be followed yes  now we have things like um uh custom instructions,
63. 5:33agent MD files. How is this different? Because I'm  hearing guard rails. I think about instructions
64. 5:37and prompt files and those are my art own sort of  guard rails. Yeah. When the agent is making code,
65. 5:43how does this different than that? It actually  uses a lot of them. It actually relies on a
66. 5:47lot of them because specs themselves, if we  think about the concept of spec development,
67. 5:52there are certain artifacts that folks might  have heard from previous videos and blog posts
68. 5:56like we have the spec. MD file which is the  specification that outlines the functional
69. 6:00requirements for you're trying to build. There  is the plan which is a technical plan. There is
70. 6:06a set of tasks which is a broken down basically a  list of things that allow LLM needs to execute to
71. 6:12get you to the state that you want to get to. And  all of these are just markdown files. And then you
72. 6:16have agents.mmd to set up the uh instructions for  the codebase which is by the way now supported by
73. 6:22copilot uh the CLI. It's in VS code. You can use  agents and dd everywhere. Everywhere, right? So,
74. 6:28which is great. I love standards. I just love not  to have to reimplement it over and over. But it
75. 6:33it relies on a lot of these conventions and it  basically assembles them together. Like this is
76. 6:37what we launched, GitHub spec kit. And again,  when I when I talk to people, they assume that
77. 6:41this is like this magical product. Like it's just  a bunch of prompts and scripts. All right, we just
78. 6:46assembled them together to make it easy for folks  to get started and see how they can leverage a lot
79. 6:52of these spec driven workflows to build software  in a more deterministic way than an LM typically
80. 6:58could. Was this inspired like internally teams  at Microsoft and GitHub or like where did it
81. 7:03come about? Why did it come about like I think  that sometimes like oh we built a thing but then
82. 7:08like why did you build a thing? Okay. Yeah, that  was actually a very fun story and I think I wish
83. 7:12we had John Lamb here to to talk about this,  but John is one of my colleagues who actually
84. 7:16was the one that bootstrapped uh spec kit and a  lot of the spec driven work inside Microsoft and
85. 7:21the reason it was built is because John was using  the clawed sonet models and as we both know sonet
86. 7:27models can get a little bit overeager and you ask  it to you know I want to build a website and it's
87. 7:31going to go oh great let me write a whole new web  framework first before you get build a website
88. 7:36uh develops a programming language develops a  programming language everything right the run
89. 7:41time. Yeah. Exactly. And and using uh the spectral  novel processes essentially set the guard rails
90. 7:46for okay I want you to build X Y and Z only based  on this plan. I see. And that's where it kind of
91. 7:54started. But after that John quickly realized like  oh there's actually value in this beyond. And this
92. 8:01is where I work with him to like help productize  this a little bit and then get it into the shape
93. 8:05that we see now. Get our sweat kit. Well, I want  to see it because it is one of the most popular
94. 8:08repos on GitHub with over 53,000 stars. Let's  bring up your machine here. Yeah. And let's
95. 8:16take a look. Okay, cool. 53.6,000. Hopefully more  after a when we recorded our video for VS Code,
96. 8:25how many stars was it? Like 24,000 or something  like that. And that was not that long ago. No.
97. 8:29Yeah. No, it's it's wild. People are loving  it. Okay, so what is this? So, SpecKit itself,
98. 8:34as I mentioned, it's in its core, all it  has is just a bunch of prompts and scripts,
99. 8:41okay? Like that that's all it is. Prompts and  scripts. Prompts and scripts. So, it's not like
100. 8:44a uh it's not like a a package that you're like  a like a npm package that you're installing. No,
101. 8:49you're like you have to like you're not installing  something into your project. No. Exactly. Because
102. 8:55if you really wanted to like we have a helper  CLI that I will show you in a second. It's called
103. 8:59specify or specify, whichever way you pronounce  it. uh you tell us uh but the CLI is actually
104. 9:05not required because what you can do is you could  go to releases you look at specit templates you
105. 9:10just scroll scroll scroll and you find the agent  that you want and the script language that you
106. 9:16want like for example if I'm using codeex from  openai I have a shell script or a powershell
107. 9:21you can just download that right like if I get a  powershell one and let's see let's download this
108. 9:27let's let's pop it open and then we'll see it in a  second that there is two folders in there. There's
109. 9:34codeex that has a bunch of prompts, right? Specit,  analyze, checklist, clarify, and so on. And we'll
110. 9:40show you that in a second. And there's a bunch of  metadata files like specified. There's scripts,
111. 9:45there's some templates, right? Like again, it's  all markdown files and scripts, nothing else.
112. 9:50No batteries, no. And you said there's a bunch of  different I'm seeing uh claw and kodakiler gemini.
113. 9:59So, so this is really it's from GitHub, but it is  you think of agent HQ like agents be everywhere.
114. 10:05All agents can use this like an so it's almost a  standardization but I'm assuming you've crafted
115. 10:10them because these agents all work a little and  require a little bit different setup. Right.
116. 10:14Right. All right. They're a little bit different  and also we are you heard it here first. We're
117. 10:19working on spec kit v2. Well, that is going to  remove the need for having these custom scripts
118. 10:25per agent because it's all going to be bundled  into specify CLI and it just like the agent will
119. 10:30invoke, but we'll we'll we'll get to that. Um,  but essentially when you are creating new projects
120. 10:35with specify, you can you can install it and there  is instructions if you go to the website and or
121. 10:40the the repository here, you'll have instructions  for using UV. We are big fans of UV if you're a
122. 10:46Python developer. And that just happens because  the specified CLI itself was written in Python,
123. 10:51right? Like there's no Python requirement  beyond this. Like you don't need to have it. Um,
124. 10:57and again, you can install it. You can install  it globally or for your instance. And then what
125. 11:01you can do is you can do specify. Pump it up a  little bit more for me. All right, let's do that.
126. 11:06Beautiful. Let's let's let's clear it to make sure  it's all aligned. Uh, all right. Nice. So specify
127. 11:11and then init to initialize a new project. And  then we're going to give it a project name. So
128. 11:16we're going to call it test demo. So what's going  to happen here is you'll see that again this was
129. 11:22designed not with copilot in mind but with any  agent in mind. So we have this uh beautiful ASKI
130. 11:29arc here. Um and we have a selection of agent  like what agent do I want to use and I can use
131. 11:34my arrow keys because we use terminal interfaces  as usual and I can pick any of them and all all
132. 11:40this does is downloads the templates that I want.  We're going to use copilot because of course we're
133. 11:45going to be of showing copilot and then I'm being  prompted to enter the shell that I'm going to be
134. 11:49using. If I'm using PowerShell on Linux, you can  use PowerShell on Linux. If you use shell scripts,
135. 11:53you can use shell scripts. I'm going to use  PowerShell. Just going to download it. Boom.
136. 11:58Done. And all this did is basically just the the  releases that you saw, the zip files that you saw,
137. 12:02it just pulled them locally, extracted them, and  made it ready for your project. That's it. So, we
138. 12:07can go to our folder for test demo. And let's take  a look here. If I look at inside the folder and I
139. 12:13have the GitHub.specified vscode because copilot  we designed it around VS Code. Got it. Okay. Now,
140. 12:20here's one question for you. You did this in a  brand new folder. Yes. Right. Because you're like,
141. 12:24"Oh, I'm brand new project." And probably the  majority of people watching this and streaming
142. 12:29this in right now are like, I have an existing  project. Yeah. Then like how do I do I add this
143. 12:35to do I do the same thing on, you know, my web  app on my solution? What do I do? For example,
144. 12:40let's go just back just one folder and we're  going to create a new folder test demo existing
145. 12:47and we're going to go to cd test demo existing  and here now I can do specify in it and I can
146. 12:55do either here or just use the dot just that's  it boom so and this is going to bootstrap the
147. 13:02project in the current folder. So if I do again  same workflow it's all console based you don't
148. 13:07actually need to go through this interface it  completely can be automated by using parameters
149. 13:12or arguments in the terminal but I just happen  to like the the two so I can show you how to how
150. 13:17to navigate it but so this so this is nice and I  want to point out that is because a lot of times
151. 13:20we get the questions which is like hey yeah I'm  already in an existing app right does spec kit
152. 13:26make sense for me yes even if I already have  an app that I've been maybe releasing in to the
153. 13:31wild for years absolely Absolutely. Absolutely.  You can use it with existing project. I have a
154. 13:37YouTube video for it, too. Oh, nice. We'll link  to that. We'll link to that. But, um, so we have
155. 13:41our test demo project and here I can just start  VS Code right from the folder. So, we'll see this
156. 13:46uh light up in our Visual Studio Code instance.  We're going to make this full screen and let's
157. 13:52zoom in just a little bit. Beautiful. Just  a little bit all the way. But notice certain
158. 13:56things here. So, when we started that now there's  suggested actions here. See this? So I don't as
159. 14:03a developer because we have the GitHub specify  all these folders that we talked about. We now
160. 14:07have a suggested action for me to get started. I  don't need to guess what's the command. I say oh
161. 14:12constitution the constitution is a starting point.  The whole idea behind a constitution with specit
162. 14:18is that there's a set of non-negotiable principles  for your project. We're actually in spec merging
163. 14:23that into agents.mmd. So it's not going to be  a constitution but for now there is. And the
164. 14:27the purpose of this is to make sure that whatever  decisions you make down the line for your project,
165. 14:32for your functional spec, technical spec,  the tasks, you're always following specific
166. 14:36requirements like I always want to deploy  to Azure. I always want to make sure that
167. 14:40the packages that this tool is going to use are  Azure specific and not pulling some other cloud
168. 14:45provider, right? Because this where I'm deploying  things. So establishing the constitution is very
169. 14:49important. So in our example like we can do  something like if I'm building let's say a
170. 14:54um podcast website right I can just say it's  a static website with minimal dependencies
171. 15:04right like we we can make it more complex. Yeah.  But I think that that's a good starting point.
172. 15:10Now are you specifying like what technologies  you're using because this is okay this is just
173. 15:15generic like this is this is very generic. Right.  And notice that also in the latest version of
174. 15:20specket, we use the agent switcher. So for every  instruction here, every command, we're actually
175. 15:28using custom agents. Oh, I see. I can see it  down here in the bottom that it it automatically
176. 15:33switched Yeah. to this agent. So that would  that means that it kind of works everywhere.
177. 15:36If you're on GitHub, you you actually you could  use the same exact agent. So it's not just like
178. 15:40a prompt. Yes. Exactly. Very cool. And the the  agent itself is going to invoke a prompt. Okay.
179. 15:45for constitution and then it's going to run all  the scripts that it needs to be. But this allows
180. 15:49us to do things like handoffs, right? Where  once the constitution is finished, I can say,
181. 15:54"Oh, and now go write the spec. Oh, and now go  do the technical plan and kind of jump around,
182. 15:59right?" So again, for a lot of the things that you  see here with the constitution and the the spec
183. 16:06creation and design that we're going to see later,  all of this can be done manually. Like you don't
184. 16:11actually need to use specit for this. you can just  manually type the commands but like come on we can
185. 16:18do we can do better than that right so um here's  a good question for you if I was in an existing
186. 16:23project let's say I had an existing blazer web  app or react you know application could I say hey
187. 16:29go like look at this project and then create the  constitution based off of what I have absolutely
188. 16:34you could you can absolutely do that and this  is when you saw me kind of prompt it you could
189. 16:38totally ask it to just like go and first inspect  the project and then give me the content I Gotcha.
190. 16:44So, and notice that now it provides me a handoff,  right? Like proceed from spec constitution build
191. 16:48specification. Beautiful. So, the shout out to  VS Code team who actually implemented this. Yeah,
192. 16:53it's really neat. Very similar if you're using  plan mode. It's like I create the plan then I do
193. 16:56the next thing. You pull man hand off XYZ. Right.  So, what's in this constitution? So, what's in the
194. 17:01constitution? Let's hide chat mode for a second.  So, we'll see that it has a definition for static
195. 17:05website, right? So, minimal dependencies, great  requirement. Static first also great requirement.
196. 17:10I love it. simplicity, complexity must always  be justified and yagney. There you go. Yeah,
197. 17:16there we go. Um there's some performance standards  and there's also this misconception that oh you
198. 17:23use these commands it creates these artifacts and  this is like ah now I have to go to chat and start
199. 17:27like asking you to change things. It's a markdown  file. Yeah. Just just go change it yourself. Like
200. 17:32you don't you don't want the the change 3G to  LTE and Right. Exactly. like or you know like
201. 17:37things like governance or things like development  workflow if you see like oh I actually don't want
202. 17:42to test against Safari because I'm just remove  it. What else would go in here Dan? Like you know
203. 17:47it did some performance stuff like you know you  very simplified but when I'm thinking about as a
204. 17:51developer what else would I think about maybe I  might want to add in in my own constitution here
205. 17:56things that you want to be non-negotiable for  your project. Right? So if you want like every
206. 18:01developer that touches this project, I want to  make sure that you're always using the latest
207. 18:05version of TypeScript. This is where you go. I  want to always use this particular package for
208. 18:10logging. This is where it goes. Right? Like things  that you want to make sure that are consistent
209. 18:14across the project. I see. Got it. Okay. And  that can include both technical requirements and
210. 18:18non-technical requirements. I see. Gotcha. In this  case, there's not a lot of technical requirements.
211. 18:23There's kind of there's performance stuff, but  it's not like talking about frameworks or this.
212. 18:26It does talk about lighthouse performance,  things like that, which is kind of nice.
213. 18:29Uh, but so I'd be like, hey, always make sure  I'm on the the LTS release of this thing of node
214. 18:35orn net or something like that. And that's that's  where I would specify this here. Or for example,
215. 18:39if I want to say like it's a static site and I  want to make sure it's always built with Hugo. Ah,
216. 18:42got there you go. Like you can just say that.  All right. But uh we're going to go to the chat
217. 18:46and now I can click the build specification  and notice that it's switched my agent to
218. 18:50specit.specify command. Yes. Or the specify  agent. And we can I'm just going to remove
219. 18:55this placeholder here. And we can just say I want  to build a podcast website with featured episodes
220. 19:07like that, right? So minimal format again.  And notice that also as I type this in,
221. 19:12I enter the command. Now it gives me handoffs  for other steps like I can build a technical
222. 19:18plan or I can clarify spec requirements which  is very important and we'll we'll get to that
223. 19:23because we recognize the fact that once you build  specifications like the we just oneotted it here
224. 19:28like oh I'm going to ask the command to go and  build the spec document and we're going to have
225. 19:32the document here in a second but that on itself  is not enough. I might be missing something. I
226. 19:38might not know something that I required it to  go and design in a way that I did not intend to.
227. 19:44Under specification is also a problem. So here  you've you know green field it here. So you said
228. 19:50here I'm going to build this website. Yeah. Um  again I think about this existing application
229. 19:55that I may have. Um should I like retroactively  go back and create like a default specification
230. 20:02for what the app is first or should I think about  should I break it down into features? Like for
231. 20:07example here you're like yeah I want to create  this page featured episodes should I should I
232. 20:11think about it of this first even if I'm creating  and going for the first time should each sort of
233. 20:17uh fe specification be a feature like hey I'm  creating a podcast website so create just the
234. 20:23base website and then I'm going to have another  specification for um episodes another one for
235. 20:29guests another one for is that how I think  about or should I try to oneshot everything
236. 20:32in one huge specification first I think from my  experience and us running this spec for a while
237. 20:39with different projects. Mhm. The workflow you  described probably would work best. Okay, that is
238. 20:43and the reason for that is very simple is because  you want to make sure that you chunk the context,
239. 20:48right? When you start to kind of offload  everything into one like it it could work,
240. 20:53but then you have to be somewhat hands-on or  have basically like an agent fleet to go and
241. 20:58like check each other and be like, "Oh, is this  right? Is it rendering correctly?" Versus start
242. 21:02minimally. But also we'll get to that because for  Greenfield projects what we've actually done is at
243. 21:08the spec stage because here I'm building a whole  new podcast website. It's an end to- end thing,
244. 21:13right? Um, we make a lot of assumptions and we  make a lot of experience pieces, but it's very
245. 21:20hard to dissect from it. Like what exactly  is the minimal product that I want? The MVP,
246. 21:24right? Yeah. Yeah. But once we get to the last  stage of tasks, we are actually smart about
247. 21:30identifying what needs to go into the MVP and  start with that and then incrementally build
248. 21:35on top of it. So, you don't actually have to do  that decision yourself. Well, let's take a look at
249. 21:39the spec real quick. So, you created a new specs  folder. We have our spec.mmd in our feature folder
250. 21:46001 podcast website. So, we're going to look at  spec.md. I'm going to close the terminal and we're
251. 21:50just going to keep all these changes because we  just going to blindly trust the AI. So, notice
252. 21:57that it broke it down for me in user story. So,  I have browse featured episodes and landing page.
253. 22:02Great. It has some scenarios. If you're a product  manager, these might seem familiar. Love this. Uh
254. 22:08you episode details. Great. Like notice I did not  specify that I want to view episode details, but
255. 22:12it just kind of assumed because you're building  a podcast website. I kind of need it. And this is
256. 22:15kind of interesting too because it's it's saying  like do you want to even play episodes? It's going
257. 22:19to assume that you want a audio player. So you  may not. So you might want to edit that right
258. 22:23in that instance. And this is the the interesting  part. So we have the edge cases here and all the
259. 22:27functional requirements. Notice that it broke it  down into way that I can easily see them and see
260. 22:31exactly what needs to be. But let's say that I  read through this and say, "Oh, this this sounds
261. 22:36reasonable. This sounds great." Yeah. Like, but I  don't actually know what I don't know. Yeah. So,
262. 22:41this is where we use clarify. I never know what  I don't know. I never know what I know. So,
263. 22:45we're going to use the clarify command. I  just onecllicked it and it just bootstrapped
264. 22:49the clarify agent with the clarify command. And  what this is going to do, it's going to use the
265. 22:54LLM again, use the model to look over the spec  and then start thinking through like what are
266. 23:00the things that are missing, right? And we kind  of see this here where it created this table for
267. 23:05us. that says coverage. Oh, there we go. That's my  new favorite button. Yeah, today I learned. There
268. 23:11you go. That's a great button. I love it. Um, so  we see this table that I created, right? So like,
269. 23:16oh, you have things like core user goals, they're  pretty clear, like, okay, makes sense. Things that
270. 23:22are out of scope are not defined. Things like user  roles and personas not defined because, oh, hey,
271. 23:29visitor like is this a new versus returning?  Is it a podcast owner because you're right,
272. 23:33which makes sense. It's a podcast website.  Uh, identity and uniqueness rules, all the
273. 23:38stuff that's missing here, which is like, yeah, I  like this. And then it starts asking me questions.
274. 23:45I like that. We limit it to five questions  to start just because we want to make sure
275. 23:49that we don't overwhelm you too much. But it's  actually going to ask the question itself. So,
276. 23:55how will episode data be managed and added to  the website? And it recommends you an option,
277. 24:01but also it gives you other options. Oh, nice.  Right. So, it's like, oh, you can import things
278. 24:06from an RSS. You can static JSON define things.  And I think option B makes sense. So, I can just
279. 24:11literally be lazy and say B. Oh, it's going to  do one question at a time. Oh, nice. Interesting.
280. 24:16Okay. I've recorded this answer. I like it. Okay,  cool. Because it not only records the answer,
281. 24:21but actually goes into the spec and it adds  it. So, see it says clarifications and it has
282. 24:26a session from today. Nice. And it's gonna  Oh, okay. Let me add this to the plan. And
283. 24:30then it's gonna like let's look at the changes.  And it actually added the requirement here. Oh,
284. 24:34nice. Now it jumps to the second question here,  which is like what is the expected episodes
285. 24:39catalog size this website needs to support? And  it's like 10 to 50 episodes. I like D. I wanted
286. 24:44this to be a popular podcast, so I'm going to use  the 200 episodes. Podcasting forever, right? So
287. 24:50you can be lazy and answer these with just one  letters or you can give a short answer yourself.
288. 24:54So you can say, actually, none of this is correct.  Yeah. Uh, so you can kind of go through the the
289. 24:59the steps here and we're not going to go through  all the five questions because you get the idea,
290. 25:03but like it it questions you and makes you rethink  the assumptions that you have because it it's your
291. 25:09step of like ask me questions about this and see  what you say. This is my favorite part of plan
292. 25:14mode when I'm thinking about planning just like  a small implementation, right? In this instance,
293. 25:18we're planning like bigger things as well and  you could be planning things in plan mode. But
294. 25:22I love the questions cuz it's thinking of things  that I would have never thought of. Maybe I would
295. 25:25have thought it but I just wouldn't have put  it into a prompt to like fire off and even to
296. 25:28create. Exactly. Yeah. Yeah. So once we're good  with the spec we can build a technical plan and
297. 25:33this is where we are establishing the technical  requirements. So I can just say I am building with
298. 25:41Hugo because I want a static site. You love Hugo  and I can just add it you know like Tailwind CSS
299. 25:48for styling. I don't know you can use any other  libraries. But basically this this is where you
300. 25:55come in and add all the technical requirements  that you want to have for your project all
301. 26:00of them. And the more detailed the problem the  better right like you want to avoid the LM making
302. 26:04assumptions and in this case again if you're in  an existing application you have the technical
303. 26:09correct because you you have the project so you  just say go look at it figure it out. Exactly.
304. 26:14And then review it to make sure and you might find  some things maybe aren't what you expected. Right.
305. 26:19Right. Right. Exactly. I notice also that VS code  smartly enough does that it it has this kind of a
306. 26:25set of stages that it goes through right because  my my planning has several stages to it like I
307. 26:30needs to generate a research file data model the  contracts the quick start and so it's going to go
308. 26:36and do all of this plan or setting the technical  details is probably the more time consuming part
309. 26:41of this gotcha it's gonna it's going to go and  think a lot it's going to go and think now you
310. 26:47also are using a opus model here when you are  thinking about these different tasks. Do you
311. 26:51just kind of stick with one model? Do you move  around? I mean uh there's new models every week,
312. 26:56every day, you know, like how are you think about  this? Because uh I was just did a a recording for
313. 27:01the VS Code podcast with Julia and we're talking  about the exact same thing. What model use when
314. 27:06XYZ for these different scenarios? It it really  depends on your mood uh or well okay there there's
315. 27:12more to that of course but it it depends on what  you're trying to do. I am personally a fan of the
316. 27:16anthropic models like the cloud models because  they're much more I would say creative and much
317. 27:23more like oh you're writing a spec document let  me think through the various things that you can
318. 27:27include in that spec. I think GPD5 for example  can be a bit more reserved like it's not going
319. 27:32to go as far about giving you all the options and  it can actually sometimes interrupt and like oh
320. 27:37it's I wrote this section for the spec. Would you  like to me to continue thinking about the spec and
321. 27:42like I I just don't like that. I I I let Claude  like either Opus or Sonnet just go and run with it
322. 27:48and then I can always interfere and then say nope  stop let's do something else. Um but ultimately
323. 27:54it depends on also scenarios like I've seen uh  a lot of the sonnet models be really really good
324. 28:01with C# code for example and GPD5 is like can hit  or miss right but if you use GBD5 at TypeScript
325. 28:09it's somehow better. So you have to try this out  by yourself and then see see what it does. Yeah,
326. 28:15and that's kind of the cool part is it's going to  be part of your source code and I saw it created
327. 28:20a branch automatically so you could always be  committing rolling back as well if it wasn't
328. 28:25exactly right and this actually something that  we're looking at adding in spec v2 where you
329. 28:29can autocommit things because we're already on a  branch as it goes to different stages and you go
330. 28:34from spec technop plan it commits it so then you  can say nope never mind revert it back now I will
331. 28:40also add that something that I love about the fact  that you have this spec driven workflow in place
332. 28:47in a repository is that it allows you to build  multiple implementations, multiple variations.
333. 28:53Like let's say we're building a podcast website  right now and notice like I could have stopped at
334. 28:57the spec and not even go into the plan and say  I want to have one with Hugo but the other one
335. 29:03what if we use Nex.js with a stat static site  rendering. Yeah. What would that look like?
336. 29:08What would that look like? And not just that, but  maybe you want to compare the performance. I want
337. 29:12to make sure like which one is faster, which one  is going to be like better suited for my specific
338. 29:18cloud provider. And if you have just one spec, you  can easily fork that and start implementing like
339. 29:24two, three, four, five different variations with  Saab agents. Yeah. Right. Uh and they can create
340. 29:30their own branches and you can use git work trees.  Magical feature by the way. Uh everybody should be
341. 29:35uh aware of git work trees. Yeah. But uh yeah,  this is I I think this is the the thing that
342. 29:41is really really going to change how how we  work is that a lot of the workflows around
343. 29:45spec driven development are heavily leaning into  git based operations. And if you know git and you
344. 29:54can use like this quick like oh did not like  the spec revert back revert back right and and
345. 29:58agents modern agents are really really good at  operating on top of git. Yeah, I like that idea,
346. 30:03too. When we're answering questions earlier on,  there's a lot of different selections. You might
347. 30:06in your mind say, "Okay, actually, I want to do  another version of this with different answers to
348. 30:12those and then be able to actually refine them in  general." Right. All right. You you because you're
349. 30:16not binding yourself to a specific implementation  with the spec. Spec is detached from technical
350. 30:21details. I see. You are able to essentially come  in and say, "I want this to look different. I want
351. 30:26this to be implemented with a different stack."  It still binds itself to the constitution. So if
352. 30:31you have like non-negotiables like it's it still  needs to deploy to Azure successfully. I'm not
353. 30:36going to say minimal stat but it gives you the  ability to then fork off basically and then go
354. 30:42and each iteration can work independently and you  can see the outcomes of each and then decide which
355. 30:50of them are more suited for you trying to do.  That's very cool. Yeah. All right then. So what's
356. 30:55the next step here? So now it's creating these  uh requirements, checklist, what all what all is
357. 31:02happening here? Yeah. So it's going to create the  plan. It's going to give us technical details. And
358. 31:06then the last stage here is just tasks. It's going  to break things down into individual tasks. And
359. 31:12uh you can watch some of the past videos.  We'll have documentation for this. But you'll
360. 31:16essentially have a broken down list of tasks that  the LM can one by one proceed and implement. I
361. 31:22see. And some of them can be parallelized. So,  um, yeah, that's essentially the flow. That's
362. 31:27the the gist of Spec Driven with SpecKit. We try  to make it very straightforward. Like, there's
363. 31:31only a handful of commands that you can just  use and be on your merry way. All right. Well,
364. 31:36before we get out of here, I do want to tap really  quick on to the generated code in here. So, let's
365. 31:42bring your your machine back up here because it's  really close. It's on 80 of 8. So, if we open up,
366. 31:48you know, this folder for this production, I  want to kind of walk through really quick. We
367. 31:52have the requirements. We have contracts, we  have data models, and a plan. Can we just open
368. 31:57them up really quick? Yeah, of course. So, let's  Yeah, let's close the chat here. Let's close the
369. 32:01terminal. Let's take a look at the I'm just going  to keep the changes. And I'm actually we're going
370. 32:04to use a chat and keep all of them so it's easier  to parse that. Uh, but if we look at the plan,
371. 32:09notice that it has a technical context. It  actually structured based on a template that
372. 32:13says okay it needs to use go templates because  we're using Hugo with HTML 5 some dependencies
373. 32:18target platform how we test things the scale the  constitutional check that I mentioned right very
374. 32:24important not to not to be missed uh because it  made sure that okay whatever I generated does it
375. 32:29fit the requirements to define a constitution  minimal dependency static for simplicity perf
376. 32:33and development workflow so it passed so it can  continue it outlined the structure of like how is
377. 32:39the content going to be laid out M this is great  like I love this the archetypes the assets the
378. 32:44content itself in the episode subfolder so this  is great um all these details are now captured
379. 32:49in the plan and again I can modify them if needed  uh the data model itself it defines for example
380. 32:55the entities are operating with because they're  podcast like here's the podcast episodes right
381. 32:59and like which of them are required which of them  are not which again is very very convenient for us
382. 33:04to manage this correctly and if anything stands  out you can you can change it research is a very
383. 33:09important one Because if you are using agents like  claude code, it'll actually go out on the web and
384. 33:16research. And we can probably use beast mode from  our friend Burke. Yeah. To go and and do this. But
385. 33:20right now, because it did not do this in VS Code,  it basically research it from the corpus of data
386. 33:25that it has. Very cool. In a training, right? But  it actually looked and said like, oh, okay, what's
387. 33:29the best way for me to do front matter? Okay, like  this is the format for an episode. Like, okay,
388. 33:34great. So, key findings and document all this  stuff. Tailwind CSS integration with Hugo. Like,
389. 33:38how do I do that? like, okay, I should probably  use an npm build step for this. Makes sense. So,
390. 33:44all the stuff is captured. All the stuff  is now like because it's in a folder,
391. 33:48the 001 podcast website, this means that this is  the context that I can operate on. So, down the
392. 33:54line after this podcast website is implemented,  if I ever need to go back and change something,
393. 33:58it now has the historical like what did you think  about like the data model for podcast episodes?
394. 34:04How is the configuration done? What are the where  are episodes located? This is how context. So then
395. 34:10we create the tasks and at that point is it just  implementing it just like we would normally like
396. 34:14at at this point if you go and create the task  it's just going to go like I didn't need to type
397. 34:18anything. I just clicked the button and it's going  to just break this down based on the plan the spec
398. 34:23and all the details and create a tasks.mmd file.  It's just going to have the list of tasks and
399. 34:29then at that point you just ask it to go and  implement this. In fact there's a button for
400. 34:32it. Implement implement. Yes. Um and you could  fire that off in a background agent or anything
401. 34:36you want to work. Very cool. So this is nice  because you got that really super human in the
402. 34:41loop understanding going through the requirements  going through the specification going through the
403. 34:45plan implementation not for for the first but for  existing for every new feature. So now we're going
404. 34:50to add a guest page. We do the same thing we  created. It'll be a 002 then right. Yes. Yeah.
405. 34:54Exactly. It's going to increment these and then  if you want to add any capabilities you go through
406. 35:00the the process that we just showed you. You don't  need to create a constitution because it already
407. 35:04exists. You can just go straight into spec.  Yeah. And just go from there. Very cool. Den,
408. 35:09this is awesome. We will to put this up in on  demand. We'll put links into the show notes
409. 35:13and all that stuff. Maybe we'll figure out  some way of putting Den's YouTube on here.
410. 35:17And we actually have some great videos on the  the GitHub and the VS Code YouTube as well.
411. 35:21Just look for SpecKit basically and and we'll  go to the the GitHub github.com/githubspec-kit
412. 35:27and you'll find a bunch of videos there. Dan,  thanks so much for coming and showing us this
413. 35:30off. I really appreciate it. Thank you. Awesome.  All right, back to Katie and Christina as we go
414. 35:34into our next episode or next session, whatever  it is. What are we doing? What are we doing here?
415. 35:39Sessions. Sessions. I'm in podcast. I'm in podcast  mode. All right. Thanks, Den. And let us know and
416. 35:44follow up in the Discord and ask questions in  the chat and we'll have Den follow up as well.