YT YouTube2Text

YouTube2Text → Transcripts → Using GitHub Spec Kit with your EXISTING PROJECTS

Using GitHub Spec Kit with your EXISTING PROJECTS — Transcript

by Den Delimarsky · 8,311 words · 1,199 segments · language en · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

0:00Hi, it's me again talking about SpecKit
0:02and I'm going to be addressing one of
0:04the biggest requests from the community
0:05and that is how do I use SpeckKit with
0:07existing projects? Well, you're in luck
0:10because today is the day we're going to
0:12learn how to do this and we're going to
0:13learn this selfishly on my blog because
0:15my blog is an existing project. I
0:17maintain it for close to a decade and
0:19this or statically close to a decade
0:22because if we look at the reality I've
0:24been writing on my blog for about I want
0:25to say 15 years. So I have my blog repo.
0:29It's a static site that's built with
0:31Hugo. It has no other frameworks. It
0:34uses Tailwind CSS for a bunch of
0:36styling. It is actually Congo mod, a
0:38modified version of that theme as my
0:40core theme because if we go to den.dev,
0:44that's that that's what it is. You'll
0:46see this beautiful website that I
0:48absolutely love how I customize with
0:50some of these things with the intros and
0:51the details. And I have the archives
0:54page which shows me all the posts that I
0:56published which is by the way a
0:57completely custom page format. So I've
0:59done some work on this. Like it looks
1:01nice. I like this. But one of the things
1:04that I wanted to do is introduce a
1:06concept of a reading list. And the
1:08reading list is I'm an avid reader. I
1:10love books. And I wanted to introduce
1:11the capability to actually track the
1:13books that I read and list them on this
1:16site. So somehow I want to embed that
1:18information in maybe like a separate
1:20page. This got inspired, by the way, by
1:22Molly White's book list. Molly is a
1:24fantastic writer. Check out her site at
1:26mollywhite.net. But if you look at her
1:29book page, this is where she documents
1:31all the books that she is reading, which
1:33is kind of cool. Like you you see that
1:35this kind of track list of items that
1:38you might discover, new books that you
1:39like, right? So, this is great. I wanted
1:41something very similar. And for that,
1:45I'm going to use specit. So, I have my
1:48site. We're going to go to VS Code here.
1:50You'll notice that I have my GitHub repo
1:53open. It's only typical Hugo content you
1:56would expect from any Hugo website. Like
1:58nothing here is specific to my blog,
2:00right? Like I have my config files again
2:01as any Hugo site has. It's just TOML. My
2:05content with all the index pages, blog
2:07pages, they're just markdown files.
2:09Again, not a lot of magic here. Themes,
2:12this is where my modified Congo mod
2:14lives. And I can modify different
2:16layouts and styles. And it's a package
2:18JSON because it's a node node managed
2:20theme. So I can actually go in and
2:22modify it and rebuild it. And that's
2:24kind of it, right? But nonetheless, like
2:26there's a lot of stuff that's defined
2:28here. Like there's also like layouts
2:30that you can track. There's all sorts of
2:32short codes that I've introduced and
2:33partials and it's just one of those
2:36things that you have to always be in the
2:39know about the things where they are,
2:41how they change, and how to change them
2:44to introduce any new functionality. So
2:46today we're going to experiment with
2:47specit and we'll try to add a reading
2:49list to our project. So for that I'm
2:52going to jump back here to our CLI to
2:56our terminal. We're going to use our
2:58specify CLI and I'm going to use the d-
3:02here command to actually bootstrap it
3:04directly into my project folder without
3:06me specifying a project name because I
3:08can do this. So we're going to use here
3:10and it's going to warn me that's going
3:12to overwrite existing files and I'll say
3:14sure, yeah, that's fine. There's not a
3:15lot there that needs to be overwritten.
3:17I'm going to use copilot with
3:19PowerShell, of course. And now it's
3:22done. I have the view of my slash
3:23commands here that you might already be
3:25familiar. The there's a constitution,
3:26specify, clarify, plan, task, analyze,
3:28and implement. We're kind of bloating
3:30the command list there. But I'll show
3:31you in a new release of CISFY soon of
3:34how this actually can be separated a bit
3:36more cleanly. But if we look at the
3:38GitHub desktop app here because that's
3:40what I used for diffing and to see like
3:42what changed.
3:44Nothing here is new. We have the
3:47prompts. We have our memory which is the
3:49constitution. We have our helper scripts
3:51and templates. And if I go to VS Code,
3:53you'll see this as well. Right? If I
3:55just collapse on these folders, you'll
3:56see that the GitHub folder where I had
3:58my workflows for GitHub actions is still
4:00there. But now I have a prompts folder
4:03and now I have a specify folder with the
4:06memory scripts and templates stuff
4:08you've seen before. So let's try and
4:11define the constitution first. And for
4:12this I'm going to use sonnet 4 because
4:14it's the model that I use for a lot of
4:16the coding. I will say that depending on
4:20the context you might want to iterate
4:23with different models. You might want to
4:25try GPD5. You might try Gemini 2.5. And
4:29you might be even try a local model.
4:31Maybe you're using Llama. It is helpful
4:34to go and experiment with different
4:36variations to see what the output is
4:38because the output can be varied. I'll
4:41say depending on the model that you
4:43choose. And some of the models, as you
4:45saw in other videos, can be overeager.
4:46Some of them can be a little bit more
4:48restrained and they're going to be
4:50waiting for your input to go and clarify
4:52things. So this is where it's helpful to
4:53get the experimentation going. For me,
4:55Cloud Sonnet 4 is typically the model
4:57that I choose to iterate on a lot of
4:59these things. But now let's go to the
5:02implementation. So for this, I'm going
5:06to switch back to VS Code. And inside VS
5:08Code, I'm going to start by defining the
5:10constitution. So here, constitution.
5:14And we already know what the
5:15constitution for this should be. It's a
5:17static site
5:20with no frameworks.
5:22whatsoever.
5:26This is built with Hugo.
5:31There is a theme in the themes folder.
5:37Always use that for styling.
5:42Even if adding new styles, which is
5:44critical because sometimes we might want
5:46to add new styles that do not exist in
5:47the theme.
5:51All right,
5:53let's see what else should we encode in
5:55the constitution. I think we should also
5:56mention that this uh always
6:00has to be without any extra
6:01dependencies. No extra dependencies
6:05at any point.
6:08No package.json or any other themes
6:12or components, right? Because I want the
6:16site to be exactly as it is right now.
6:18like I'm not rearchitecting the entire
6:19thing. It's an existing project. It
6:21works. I like it. Keep it that way. So,
6:24I'm going to go and let sonnet run and
6:27see if you can get a good constitution
6:29here. And the important part about the
6:32constitution definition is that you have
6:35to check it manually as well to make
6:37sure that it actually reflects the
6:39things you want to see there. Because in
6:41my experiments, what I've seen happen
6:42sometimes is you're going to end up at a
6:44constitution that says all your content
6:46is genuine and written by humans. Like,
6:48yeah, I know everything on my blog is
6:51actually written by me. I don't use AI
6:53to write content. I don't use AI for
6:55drawing or anything like that. Like to
6:57me, those things are irreplaceable by
6:58AI. What that means in practice is that
7:01I do not want those encoding
7:03constitution because they have nothing
7:04to do with the actual project. My actual
7:06project is code. It's the website. It's
7:08the infrastructure. I'm not asking it to
7:10go and write content. We're not using AI
7:12to write content. We're using AI to help
7:14us build out the code and the
7:16infrastructure around the site that I'm
7:17building. So you have to check the
7:19constitution that's being generated to
7:20make sure that it actually reflects the
7:22things that you care about when you're
7:25iterating on your project. So now let's
7:27take a look at what sonnet 4 has
7:30produced for our constitution.
7:34All right. So there is a bunch of
7:35changes being made. So I see my
7:36denomarks blog constitution. Great. It's
7:39It's always good to be reminded what
7:41this is about.
7:42All right.
7:44Static side generator only. Okay, that's
7:46reasonable. Hugo must be the sole built
7:48tool. Yeah. Yep. Absolutely. That makes
7:51sense. Theme based styling must ex Yep.
7:55That makes perfect sense. Content first.
7:59Mhm.
8:01Looks right. Zero external dependencies.
8:07Okay. Yep, that also makes sense to me.
8:10Performance and accessibility first.
8:12All right. Yeah,
8:16that makes sense. Accessibility makes
8:18sense. So, all these things make sense
8:20to me. Like looking at just these
8:21constraints like that seems reasonable
8:23for the site that we're building. And we
8:26also see some content standards here.
8:28Semantic HTML, perfect metadata,
8:31autonomy system, governance. Okay. All
8:35right.
8:37Great. So, this looks good. I think I'm
8:42going to go ahead and just keep it as
8:44is. This seems like the right strategy
8:48for what we're trying to do. And the
8:49Constitution again is going to be
8:50applicable to the entirety of the
8:52project. It's not focused on just one
8:54feature or a bug fix. Constitution is
8:58for everyone. So, we're going to keep
9:00this and say this is good. And I'm going
9:02to go ahead actually and yeah, actually
9:05it's already saved because I keep ke
9:07kept it. All right, so we're good. Now
9:10it's time for us to define our very
9:13first specification.
9:15So for this, I'm going to use the /
9:16specify command. And this is where, as I
9:19mentioned before, it's important to be
9:22very concrete about what you're trying
9:24to do. And before we do this, I could
9:27actually show you that my project builds
9:30so that we're not hypothesizing about
9:33the fact that oh, like you're you're
9:36clear, not seller. Uh it's not just
9:38about me showing you something that's
9:40like, oh, this magical thing is going to
9:42run eventually. I'm I'm in my blog
9:43folder. I'm going to go to CD Dennis
9:47Dell because this is the nested folder.
9:49And here I'm going to do Hugo
9:52server and then
9:55I think the D parameter is correct.
9:57Okay. And we'll see that this actually
10:00renders my website. This is the local
10:03copy of the website that I want to be
10:04able to iterate and test. It's a
10:06localhost 1313. So I'm just going to do
10:08this and we're going to go to the
10:10browser. And there we go. Local host
10:121313. I'm running this locally. So all
10:14of this content here is on my machine.
10:17Right. Right. So if I just scroll
10:18through this and some of this content
10:19loads from the CDN for the record like
10:21the the the the images, the photos that
10:23you see here, this is CDN based, but the
10:26content itself and the site runs
10:28locally. So this is great. I now have my
10:31local version. This is dendev blog which
10:33is remote. So we're going to minimize
10:34this. We don't need it. And we're going
10:36to cancel out of this because we don't
10:38need this either.
10:40Let's get back to VS Code. Now we're
10:41defining the specification for this new
10:43feature that we want for a website. So,
10:46I'm going to be very explicit about what
10:48I'm doing and
10:51going to get back to you looking at me
10:53once I type all of this out. A few
10:56moments later.
10:58>> Okay, so I wrote quite a bit here, but
11:01the gist of it is I am defining the
11:03specific requirements for my books page.
11:05I want to make sure that I'm building a
11:07reading list page. I want to make sure
11:09that it has a books route, right? This
11:11is where on my site I can actually see
11:13them. I want to make sure that the data
11:15is populated from a config folder
11:17similar to other TOML files, right? Like
11:19I want to be modifying TOML files and
11:20when I build the site with Hugo, I
11:23actually see those books render. Notice
11:24something that that that is key here,
11:27right? Like I I am thinking through a
11:28lot of these constraints and these might
11:30seem like constraints that like well you
11:33kind of have to know what you're doing.
11:34If I know how I want to maintain the
11:37books on my site, that's what I need to
11:40do. Like I don't just vibe code this
11:42stuff. like I have inherent knowledge
11:45about the infrastructure, about the
11:46tooling, the things that I have and I
11:49want them to work a certain way and I'm
11:50using AI to steer it in that direction.
11:52That's the superpower. So again, not
11:55negating the need for knowledge. People
11:56think that AI is going to just
11:58completely destroy the need for
11:59engineering knowledge. It's not true.
12:00You still need to know what you're
12:01doing. Uh you're not going to be
12:02introducing security vulnerabilities
12:04with vibe coding. Um that's for sure. So
12:08one of the things that also I'm defining
12:10here is again the what and the why.
12:11Remember the specify command is all
12:13about defining the specification. These
12:15are the requirements for this. We're not
12:17necessarily focusing on a technical
12:18stack. This is not yet the the pieces
12:21that need to be um I want to say like
12:23defined at this stage. We're just
12:25defining the experience. So this is good
12:28enough. Let's go and run it with Cloud
12:31Sonnet 4 and have it run the
12:33specification command. This is going to
12:35bootstrap a new branch. remember because
12:37when we create a new feature is going to
12:38actually go in and uh set this up for
12:41us. Let's run the script
12:44and the branch is created. We have our
12:47new specs folder with a branch name that
12:50by the way it I'm looking at changing
12:52this. I don't like the fact that it's a
12:53001 I want to like that means nothing to
12:55me like I want to what what does it
12:57actually mean? Uh so that's going to
13:00improve but in the meantime it's going
13:02to spin up the the new branch. So now
13:04we're operating in a in a new isolated I
13:07want to say uh environment that doesn't
13:09impact my main blog. I can actually
13:10safely check this in and see how it
13:13renders uh online or even locally
13:15without modifying the core side and
13:17breaking it on accident because we
13:19messed up some template file somewhere
13:20for for the theme. So uh while it's
13:23working you'll also notice here that in
13:25my now I'm on the 001 I want to in my
13:28GitHub desktop client right? So I'm
13:30clearly using a new branch and I can
13:32safely commit these things because now I
13:35can just say like yep this is the
13:36constitution these are the prompts I
13:38want to and blah blah blah whatever else
13:40I want to define here. So we're going to
13:41wait for the the spec to actually be
13:42defined. We'll see the spec file and
13:45we'll see the details pop up here in our
13:49filled out template. So we have our
13:50prompt and then all the details that are
13:53coming in and being filled out
13:55dynamically for us. The nice thing about
13:57this is again I gave it the prompt. I
14:00asked it to build a very specific kind
14:02of experience and that that experience
14:04is being defined for me in a PRD
14:06standard format because we want to make
14:09sure that if you're writing specs that
14:10are consistent and somebody reading them
14:12because specs are still good for humans.
14:14Like this is not just for AI. This is
14:15not just for computers. Specs are good
14:17for humans too. They can go here, read
14:19this and see how this works. So we're
14:21going to keep this and let's take a look
14:22here at what exactly is happening. So,
14:25we have our user scenarios. So, I'm on a
14:27blog homepage. When I navigate to books,
14:29then I see a pageent grid of books with
14:31cover images, titles. Okay, that makes
14:33sense. Mhm. Yep. A lot of these
14:36requirements make sense.
14:40Yep. Makes sense. All these things make
14:42sense. So, if we look at the functional
14:44requirements, so must display a reading
14:46list, page accessible books URI. Okay.
14:49Must books data. Yep. Must display books
14:52in a consistent grid. Makes sense. Book
14:54cover images rounded corners. Again, all
14:57these requirements are custom for what I
14:59want the page to look like.
15:01Book links must not create individual
15:03book detail pages because I don't want
15:05them for now. Like I I thought for a
15:06second I was like, well, maybe I want to
15:08have like a book overview. Maybe I do
15:09like a book review for a certain title.
15:11But that that's overkill. Like for now,
15:13I just want to have a reading list. Must
15:15handle responsive design across
15:17different screen sizes. That all of this
15:19makes sense. Now, the one requirement
15:21here that I kind of missed is I want to
15:23make sure that the actual book list or
15:27the reading list link is displayed only
15:29in the footer. And this this can be a
15:32little of a stretch here, but we'll
15:34include it anyway.
15:36I want the the reading listed
15:42in the footer
15:46along with other links.
15:49And let's take a look at what other
15:50links I have in a footer. So if I go
15:52here to my my website, you'll notice
15:54that I have let me just remove myself
15:56from the view. My tags, workstyle, and
15:59archives, right? So we want to make sure
16:01that alongs alongside these tags, work
16:04style and archive links, I also display
16:07the book list. So like
16:16was it how I work or working with me?
16:17Which one? Which one was it? Work style.
16:20Work style. That's what it was. And work
16:22style. This is controlled
16:28in an existing
16:30TOML config. And again, notice that I'm
16:33I'm guiding it specifically to what I
16:35want it to be within the constraints of
16:38my site. I don't let it guess. The more
16:40you let the LLM guess, the more likely
16:42it's going to go off the rails and do
16:44something that you did not actually
16:45want. So now I have a new requirement.
16:47must add a reading list navigation link
16:49at the footer alongside existing links
16:50tags archives work cell via TOML
16:53configuration that creates a hint for it
16:55to say if I go and add a link I don't
16:58actually need to go and rebuild the
17:01theme and start embedding some links and
17:03some footer HTML code like none of that
17:05I have a I have a tunnel config for this
17:07just just use that okay so this is great
17:10now I want to clarify I want to spot my
17:16blind spots
17:17For that, we're going to use the clarify
17:19command to go and be quizzed on this
17:22particular implementation. So, it's
17:24going to help and identify
17:25underspecified items relevant to me
17:28based on the stuff that I'm building.
17:30So, let's take a look at what the uh LLM
17:32in this case Cloud Sonnet 4 thinks that
17:34I might have underspecified.
17:36And let's see. Pageionation behavior and
17:39data organization needs clarification.
17:41All right. How should books be ordered
17:43on the reading list? Uh-huh. Notice
17:45right away that like in my initial
17:47initial prompt I did not actually talk
17:48about ordering and that's a very
17:50important one. They should be ordered by
17:54date finished reading.
17:57So most recently finished book first.
18:00Yeah, that makes sense. Yeah. So we're
18:02going to say a a is what I want. Notice
18:06again like I I did not think about it in
18:08the initial spec, but now that I'm
18:09actually working through the
18:10requirements here, I was like ah yes,
18:12that that must be that must be the case.
18:14I actually do need to embed that. Let's
18:16see what else is going to ask us. What
18:17did we not think about when we were
18:19creating the reading list? The
18:21pageionation size isn't specified. How
18:23many books should be displayed per page?
18:24Uh-huh. Yes, that's a good point because
18:27for posts, we have a limit, right? If I
18:29go to my website here and I have my
18:32sites or my my blog posts, I believe I
18:35set it to either 10 or 15. I believe
18:37it's 15. But for us, because we have a
18:40bunch of books, right? like they're not
18:43blog posts. We have to pageionate them
18:45properly. So I want to say 20 books. So
18:48let's do a C. I want 20 books per page
18:52and then we're going to pageionate from
18:54there. All right.
18:57Let's see what else. What else did we
18:58not think about? That's why I love this
19:00process is it allows me to actually
19:02clarify my thought and then realize that
19:04I did not have enough coffee today to
19:06think through all of these things. The
19:07star rating display format needs
19:08clarification. How should the stars
19:10rating be displayed? Visual star icons
19:12just numeric rating. Visual star icons
19:14only. No numeric text. H
19:18I I think just visual star icons is
19:22fine. Visual actually. Why am I typing
19:24this? I'll just say a or a and number,
19:28right? Because four out of five. That's
19:30fine.
19:32Okay, let's see what else. I I'm excited
19:35to see this. And this is by the way
19:36again the beauty of the process. Let let
19:38the AI question you. Don't question the
19:40AI all the time. How should books with
19:43start date but no finish date be
19:44handled? Show the topless currently
19:46reading with special styling.
19:49I like that. I like that idea. Show the
19:52top as currently reading.
19:54Don't display until finished. I I like
19:57that. I I Let's Let's show the currently
20:00reading. That's That's a good idea. And
20:01I think Molly White actually had that
20:03and I blanked on it when we were
20:06designing this project. This is great.
20:08So now the last question that needs
20:12clarification.
20:15What will this be? Toml data structure
20:18validation needs. What should happen
20:19when the tommo file has invalid or
20:21missing required data?
20:24Skip invalid entries. Silent display
20:26valid. Show error message.
20:30Error placeholders invalid entries. Hm.
20:33I think it should be fairly lax. Like
20:35I'm not if I forget to add like a finish
20:37date, I just wanted to ignore it. Like I
20:40don't Yeah, a is fine. All right, I
20:44think this is good. I think we we we
20:46actually brought some clarity to the
20:48specification as a product manager need
20:51to think about a lot of these scenarios
20:53and EI helped me think through these
20:55which is great.
20:57Again, we're fighting under under
20:59specifi under specification. We're
21:01fighting against underspecification
21:03because that's the way the a lot of
21:07these models get derailed is you
21:09underspecify things. Okay. So we have
21:13this now we can do plan. So plan
21:17or plan we can say consult the
21:19constitution. Well it's going to consult
21:21the constitution anyway but like consult
21:23the readme for details
21:26but we have no frameworks.
21:30do not introduce new ones.
21:34And we're adding a new template to the
21:40Hugo based website. So, because for my
21:43technical plan, like I'm not reinventing
21:44the wheel here. Like, it's the wheel has
21:46been invented. It's Hugo. I have
21:48templates. I just want to make sure that
21:49we're not reinventing anything new.
21:51We're adding a new template to the Hugo
21:53base template website. Um,
21:56we will not be
22:00using or writing any tests.
22:03I don't need these these this is my
22:04blog. Like I I literally do not care
22:07about tests for my blog because I can
22:09just debug this and diagnose this. It's
22:10not an enterprise app. It's fine if
22:13tests fail or something else because
22:15we're going to we're going to tweak that
22:16later if needed. So, okay, not using any
22:20using or writing any tests. What else?
22:22What else should we include in the plan
22:23here? Um,
22:25I think this is actually a good good
22:27good start. If I could spell read me,
22:30that would be helpful. But I think this
22:32is a good start. I I don't think this is
22:34a terrible set of decisions for this.
22:37And it's going to consult the
22:38constitution. Okay. So, let's take a
22:42look what is going to come up with the
22:43plan. And as with a lot of these
22:45commands, all of this is an iterative
22:47process. Like it's going to go ahead and
22:49create a bunch of artifacts that you
22:51have seen previously. It's going to be
22:53the plan. It's going to be the research.
22:54It's going to be the the data model. But
22:57you don't need to use all of them. It's
22:59an again because it's an iterative
23:01process. You pick and choose the things
23:02that are relevant for your project and
23:04the scale of your project. That's the
23:06most important part because the scale of
23:07the project can be different. You could
23:08be writing an enterprise app or you
23:11could be writing something that is going
23:13to be completely isolated to just
23:16yourself. It's a hobby project. It's a
23:18blog. It's a iPhone app. Right? So for
23:20those things, the scope is different. So
23:22the constraints are different. So don't
23:24feel intimidated by the templates doing
23:25a lot of things. You can always tweak
23:26it. You can always cut things that are
23:28unnecessary. And like in my case, I know
23:29that the plan for a fact in previous
23:32applications was always creating a bunch
23:34of stuff for tests. And I don't want
23:36tests here. I want this to move fast and
23:38I want it to just run and I want to see
23:40my beautiful book list on my website.
23:44And that's that's it. So, we're going to
23:46wait for our agent to go in and finish
23:50the work here and get us to exactly
23:52where we need to be.
23:54>> Don't let your dreams be dreams.
23:57>> Okay, so we now have a plan and that is
24:01great. So, I have my plan file. I have a
24:03bunch of other metadata documents here
24:05that are embedded that are maybe not as
24:07relevant here, but we'll check them out
24:08anyway. So, we're going to keep the
24:09changes. We're going to take a look
24:11here. We have the plan file that
24:13contains the details of our
24:14implementation. Right. So we have our
24:16constitutional checks static site
24:18themebased styling. Yep. Makes sense.
24:20Content first. Yep. Zero external
24:22dependencies. All right. And then we
24:24have the summary, right? The
24:26pageionation. It outlines some of the
24:28the actual context of the research done.
24:32So it has the config the default where
24:33the Hugo configuration is. It outlines
24:36the format of my blog. It actually sees
24:39the content. So it has like oh you have
24:40the theme you have the templates the
24:41layouts static and uh this is where the
24:43stuff is generated. So great it actually
24:45knows the structure. The fact that it
24:46has a structure at hand means that it's
24:49probably going to generate the right
24:50thing. I I am I am hopeful here that
24:52this is going to go the right way. So uh
24:55let's see generate contract test from
24:57contracts one test per file per
24:58endpoint. Like a lot of these things uh
25:00yeah I don't want to do that. So here
25:05because as I mentioned like this this is
25:07a tweakable project. We're going to say
25:09remove anything to do with tests
25:13from the plan. We do not want tests
25:18for this project
25:20because I don't want it to just overkill
25:22this with a bunch of stuff that I did
25:23not ask it to do. So, we're going to ask
25:25it to remove test related stuff from the
25:27plan. See, human in the loop. You still
25:29have to do this stuff. So, let's see.
25:32Generate template contracts from
25:34functional requirements. Hugo template
25:35specification. Yep, makes sense. output
25:37template contracts to contracts. Um,
25:41sure. Okay. Yeah, maybe. Maybe.
25:46And then I remove some test stuff.
25:50Yeah. Okay. Yeah.
25:53Make test pass. Yeah. We're just like
25:55test is just too much. We don't want
25:57test right now. We're we're kind of
25:59specking this in a way that fits my blog
26:01scenario. My blog has never used tests
26:03for better or for worse. So, let's take
26:05a look. So, um I'm going to actually
26:07take do do a very naive thing and I'm
26:10just going to search for test and let's
26:13see phase five validation execute quick
26:15start manual testing performance. All
26:16right, that that's fair. That stuff can
26:18can live there. No test and test per
26:19user specification. Okay, manual testing
26:23and validation. All right, so I think
26:24we're good. It did not actually
26:25overprovision this with a bunch of test
26:27related stuff. Let's see what what did
26:28it put in contracts uh configuration.
26:33Ah, look at that. It actually
26:34understood, remember the links, the toml
26:36files. It actually pulled this in. It's
26:38like, okay, this is how we're going to
26:39introduce this. Okay. Yeah. Nice, nice,
26:41nice, nice, nice. Books index. Okay.
26:44Yep. Yep. That's fair. So, it actually
26:46is going to introduce a new content
26:48page. The same way I have my archives,
26:49by the way, like right like you see this
26:51archives. If you look here, it has a
26:53custom layout that is used for archives.
26:55So, it did the same for books. It
26:57basically said like, oh, you're going to
26:58have a books. I'm going to have an
26:59index.md in the content folder, and this
27:01is where all the content is going to go.
27:03So just a template
27:06um
27:08reading directory structure uh for the
27:12required directory structure.
27:15This is where we can clarify because I'm
27:17reading the plan.
27:22I like the approach of the markdown file
27:24that we can then apply a template layout
27:28to.
27:30Right? because like that's that's what
27:33the beauty of this is. I like having a
27:34markdown file. I keep repeating that
27:36this there's a beauty in this, but there
27:38there really is a kind of a a nice
27:41approach to this process because it
27:43understands. So understand this might be
27:45a stretch for what we're actually doing
27:46here, but it actually has the context of
27:50the codebase that I'm working on and
27:52then it applies that context to the
27:54things that I'm working on throughout
27:56this new feature. So I'm going to keep
27:58this change and okay to clarify some
28:01things. Okay. So now that we have the
28:04plan, let's break this down into tasks,
28:08right? Because we we've we've looked at
28:10the plan. There's a bunch of stuff
28:11related to it. Let's take a look at what
28:14it sees as tasks. So we're going to do
28:15tasks and we don't need anything else.
28:17So, we're just going to run tasks
28:19because I want to see based on the
28:21details that we've provided what set of
28:25things it needs to go and build for us
28:28to be able to see the changes and see
28:30this book list that I want on my site.
28:33I'm in control of the process. I'm in
28:35control of the end to end experience
28:38here. And like I've had these questions
28:41asked on YouTube, on uh GitHub as It's
28:44like, well, if you do this one shot of a
28:46spec, one shot of a plan, and the plan
28:48is not right, does it mean I just have
28:51to redo the entire process from scratch?
28:53No, absolutely not. That's why they're
28:54markdown files. You go in, you change or
28:56you ask the LLM to change it, and then
28:59make sure that is reflected in the plan.
29:00You're operating on a branch. You're
29:02operating in an isolated specs folder
29:04that is dedicated for that project.
29:07That's it. Like, just make the change.
29:08You don't need to reset anything. You
29:10need to rebuild a bunch of stuff. So,
29:12it's it's kind of neat. I like I like
29:14this lightweight approach to it. It's
29:15like I'm not necessarily bound to the
29:17the first generated spec to be the
29:19source of truth forever. So it generated
29:22a task. Let's take a look. I'm going to
29:24scroll here so you can see that I'm
29:25going actually going to the tasks file,
29:27right? It's like I'm going to hide
29:29myself again. So we see the task file.
29:32Let's keep it. Let's take a look at the
29:33tasks. So it has some items here. Let's
29:35look at the sections. So I'm curious
29:37because this is what the breakdown is.
29:38So create data directory.
29:41Create books data file. Then I sell data
29:43books toml with sample book entries per
29:47data model MD structure. I think this is
29:49where
29:52yeah I think similar to this if it's
29:55going to I'm just cross-checking the
29:57folder. So we have my config default and
29:59maybe I'm going to have data here which
30:02I think is reasonable. I think that's a
30:04hug like it's an ideatic Hugo construct.
30:06I think that's fine. I think that should
30:07be okay. and create book data file books
30:11tunnel simple book entries per data
30:12model. Yep. Create book content
30:14directory content book. So it's going to
30:16go into here. Content books with a
30:19index.mdg. Yep. Hugo template and
30:22partials. Create bookcard partial.
30:25Uh yep. This makes sense. I think this
30:27is reasonable. Styling configuration
30:30navigation update footer menu
30:32configuration. Yep. Test Hugo build
30:34process. Hugo server to verify books
30:36page loads.
30:38validation and polish patchworks.
30:41Yeah.
30:44Okay. This this looks reasonable. This
30:47looks reasonable to me. Uh I want to now
30:50run analyze
30:52just to see if there's any kind of
30:54constitutional violations here and the
30:56the the cross of the documents that we
30:58have here. So we have task, we have a
30:59plan, we have the spec. I want to know
31:01if there's anything here that stands out
31:02that's like critical. So we're going to
31:05rerun this. There's a helper script that
31:08just gives me the path for the metadata
31:09documents that exist. And we're going to
31:11see what is out there that might be
31:14conflicting with the specification that
31:17we established in the constitution that
31:18we established for this project. Again,
31:19it sounds looking at the task list. It
31:22sounds reasonable. This sounds like it's
31:23a decent enough set of things to cover
31:27and I'm going to leave it at that. But
31:30maybe I'm missing something because
31:31again, humans are not perfect. Sometimes
31:33you're just going to read through this
31:34and you were tired and like me did not
31:36have enough coffee and all of a sudden
31:37you're looking at potential issues. So
31:40let's take a look at what the
31:41specification analysis like. There's a
31:42severity. So medium, right? And the spec
31:45says config data directory but plan
31:46consistently uses data standardize and
31:49data location standard. Uhhuh. Okay.
31:51Yeah, that makes sense. Standardize on
31:53data location. Hugo standard. Great.
31:55Yeah, this is what I mentioned before
31:56because I was looking at the folder here
31:57and I noticed that it was saying oh
32:00Dennisell content, right? And Dennisell
32:04uh the what is the configuration, right?
32:05Like the the config file was uh for
32:08data. Oh, there we go. There's Dennisell
32:10data and there's a config and I
32:13initially made that assumption like oh
32:15it's going to go in the config file
32:16because that's that's where all the TOML
32:17files are. But it correctly identified
32:19the fact that it's a Hugo standard. Max
32:22title length or truncation behavior in
32:24tasks. Add specific Hugo asset build
32:26instructions.
32:28Mhm.
32:30Add task to test empty missing data
32:32file. Defer to existing theme break
32:35points.
32:37You know some of these things are I
32:39think are valid.
32:41Like I I think this this might be
32:44reasonable.
32:46no constitutional viol violations.
32:48There's improvements, right? So, I want
32:49to do like the I1 and A1.
32:55Like these to me stand out as things
32:57that probably I should cover and the
32:58rest of them are like, eh, it's it's
33:00fine. So,
33:03A1 and I1, let's address them
33:09for truncation.
33:14Actually, let's address them. Let's use
33:16standard Hugo conventions
33:19and also
33:21and for truncation
33:26going to
33:29use standard
33:31or longer titles
33:34beyond the width.
33:43And notice that here I tell it to update
33:45spec plan and task as appropriate
33:47because I want to make sure that this
33:48change is properly reflected and
33:50captured in the specification because as
33:53I'm iterating with the AI, as I'm
33:55working with the LLM on this tasks, I
33:59want to make sure that whatever
34:00decisions I made, they're actually
34:02encoded back into the spec. Now there of
34:05course could be an easier way where I
34:07can just go through these tasks and then
34:08at the end of it say can you please go
34:12and summarize this and introduce this
34:14into the spec. But for now it's easier
34:16for me to just look at this and as I go
34:18through the process ask it to go and
34:21just plug it in into the spec because I
34:22know it's going to happen. So what means
34:24in the for me in the future is that if I
34:27decide to ever rebuild this book page
34:29because I moved my site from Hugo to
34:31some new static site generator that uses
34:34quantum computing in the future, I can
34:36just reuse the exact same spec and have
34:38my past decisions be reflected in that
34:41document. So I don't have to redo this
34:43from scratch over and over and over
34:44again because again I I look at the
34:46specification as a living document that
34:48encodes the specific feature capability
34:50in this case our book list for my site.
34:53It's completely detached from the
34:54implementation of the site because I
34:56could be using Hugo or I might not be
34:57using Hugo. I might need to rewrite this
35:00in a year or two or five or 10 and I can
35:02use the exact same spec to get the exact
35:05experience that I want. Even though that
35:07experience might look a little different
35:08or use different tooling underneath. So,
35:11for now, we're going to wait for the
35:13updates to propagate and get back to
35:16coding in just a little bit.
35:22do it.
35:23>> Okay, it finished the work. It has a
35:26bunch of changes here that we can take a
35:27look at. So, if we look at the spec,
35:30it describes some of the conventions. It
35:32updated the file. Great. It has our
35:34tasks. Yep. Book data. It's a Hugo
35:37standard directory. Makes sense. Makes
35:39sense.
35:41Styling. Okay. Ellipses for long titles.
35:44Yep. It it encoded the requirements that
35:45we wanted. So, let's keep the changes.
35:47This sounds great. Let me commit and say
35:50initial spec changes because this is
35:54what it is. We have our 26 files. We're
35:56going to commit here to our branch.
35:57We're going to publish the branch and
35:58push it
36:00not to production just yet because we
36:02are not yet ready get these things out
36:06the door. We need to we need to actually
36:07get the implementation going. So we're
36:09going to go here and now is the moment
36:12of truth. We're going to run implement.
36:15Going to be the most long riding command
36:16here. And once I start this, there's no
36:18going back. We're going to have this
36:20book page whether we want it or not. So
36:23there we go. Sonnet implement us the
36:25book page.
36:31[Music]
36:37All right, let's take a look here. So
36:39I'm going to keep the changes, right?
36:41And it made a bunch of them. If you look
36:43at the the diff, right? Right. So,
36:46there's the menus. They change the
36:47menus. Great. Here's the index. Yep.
36:50Books has books.css
36:54list, bookcard, a bunch of CSS files,
36:56and updated our task list. But the one
36:59thing that it did not do is actually it
37:01did not rebuild a theme. So, I'm going
37:02to go ahead here in my PowerShell. And
37:05remember, because this is iterative,
37:06we're learning as we go, sometimes it's
37:08going to produce things that are not
37:09correct, and that's fine. So, we're
37:11going to be seeing something go either
37:12horribly wrong or extremely well. Only
37:16those two options. So, now I'm going to
37:18run CD. Actually, I'm already in the
37:20folder. So, I can just do a Hugo server
37:24now that we actually have the things
37:26done and let's see what it produced.
37:29Let's take a look at the actual outcome
37:33of this experiment. The only way to do
37:35this is to build the site with Hugo. So,
37:36we're going to go here to the browser.
37:38Gonna scroll all the way to the bottom.
37:40We see the reading list which is kind of
37:42like what we expected. We see currently
37:44reading. Okay. Some of the things. All
37:48right. Like I see books. I don't see
37:51pages
37:53and I don't see the grid. Right. So like
37:55we we have this thing. We have the kind
37:58of the the the data being populated
37:59based on the book data because if I look
38:01here and we look at the books tunnel, we
38:03have a bunch of them, right? Which is
38:06great. It means the data model is bound
38:10to the page, but it doesn't render the
38:12way we want. It does not actually
38:14produce the grid. So, we're going to go
38:15back to VS Code. We're still using Cloud
38:17Sonnet 4. Actually, I think that's fine.
38:19And we'll mention that we do not
38:21actually have the grid. And then we're
38:24going to continue to iterate. We're
38:26going to tell the AI what to do to bring
38:29this up to the style and format that we
38:31want. And at the same time, we'll make
38:33sure that all that is being encoded back
38:35to the specification. So let's iterate
38:37on this a little bit.
38:42[Applause]
38:43[Music]
39:03All right. So, we finished the
39:05iteration. We've done quite a bit of
39:07work and now I think it looks good. I
39:09actually think that the work that's been
39:11done here to iterate with Claude Sonnet
39:144 and GBD5 I, by the way, I switched
39:16between them just to get it to land on a
39:19good place. And like I said, sometimes
39:21you have to just test different models.
39:23Uh, it landed on this. So, I have my
39:26reading list here. And I'm going to
39:27again remove myself because you do not
39:29need to see my face to see the design.
39:31So, uh, it fits the design of my blog,
39:34which is as expected. I wanted that to
39:36be this way. We now have this section
39:39for currently reading titles. And these
39:41are obviously fake titles. I'm not
39:42actually reading any of these books
39:43right now, but it gives you an idea for
39:46what it would look like. I now
39:47introduced a badge here that says must
39:50readad. So, for books that I think like,
39:52wow, this is great. Everybody should
39:54read this. The books are going to be
39:55labeled like that. So, we have this
39:57consistent finished books headings with
39:59a counter of titles and as well other
40:01books. We have a nice rating display
40:04here at the bottom. I love this just
40:06stars and a counter the days when I
40:08started and finished. And they're
40:10presented in these nice little uh pill
40:12format that I would expect from modern
40:14websites. So, I I actually really like
40:16this and I actually gave up on the idea
40:20of pageionation. So this is something
40:22that initially I was thinking about that
40:23pageionation would be kind of nice but
40:25then the more I thought about it the
40:27more I realized like you know no I don't
40:30think pageionation is actually what I
40:32want because
40:34I feel like for a lot of these scenarios
40:37I'd rather get it on one page and
40:40because I'm also using TOML and I
40:41decided to go down the route of TML I
40:44would have to implement some a bunch
40:45custom JavaScript and I want to minimize
40:47custom JavaScript on my site I want to
40:48make sure that it just it's fast it's
40:51flexible and it just runs as a static
40:52site without too many JavaScript
40:54dependencies. So that is the reason why
40:56I just says you know what pageionation
40:57maybe in the future like I don't really
40:59care about it for now. Oh. Um, we have
41:01this nice experience now. I can start
41:03populating this with books that I've
41:04read. It look at how it did this job.
41:07Like it I had the spec. It analyzed the
41:09code base. It actually read the readme,
41:12the styles, the theming. It
41:14contextualized that and bundled it into
41:16the specification that I have here. And
41:18then this is the output. This is the the
41:20content here that I have uh that allows
41:22me now to go and iterate in a way that
41:27makes sense for this project. it makes
41:28sense for this specific iteration of the
41:31site. So, uh I'm very happy with how
41:34this turned out and I still have my
41:35artifacts for my spec and plan. Uh and
41:38as I mentioned, as I'm iterating on
41:39this, one of the things that I should
41:41absolutely do is encode the learnings
41:44into the spec. So, we're going to do
41:45this now. So, look look at what I'm
41:47doing. So based on the conversation,
41:53encode the learnings and the experience
41:57pieces,
41:59not the technical details
42:03into spec.md
42:07for the current feature. That is
42:10important because you have to make sure
42:12that the learnings that you have been
42:14working on are actually brought back
42:16into the spec. And right now we're
42:18iterating on one feature. But also keep
42:20in mind that there might be multiple
42:22features. So you might need to use
42:23discretion as to how you're updating and
42:25which spec because the LLM if you have a
42:27library of seven or 10 or 20 different
42:29specifications need to know which spec
42:31to go and update. So you might want to
42:33be precise here. But for now, because
42:35this is just one spec on top of the
42:36existing codebase, it's easy for me to
42:38just tell it to just go and update the
42:40spec based on uh the things that we've
42:42iterated on. Let's see what it updated.
42:44Right. So, uh focus on achieving visual
42:46consistency and predictable behavior.
42:48That is exactly right because initially
42:50it created a whole bunch of UI that did
42:52not quite look like the rest of the
42:54site. Design evolution iterative
42:56approach. Yep. Makes sense. Experience
42:58assumptions rather than pursuing
42:59theoretical completeness. Yes. So I
43:02think a lot of this makes sense and what
43:04we also want to do is from these
43:06learnings because we we talked about the
43:08experience learners and rational right
43:10like this is a section that got added
43:11here and I've iterated on this before as
43:14I told you I am encoding things in the
43:16spec as I go so for things that exist
43:19here so we have let's see six learning 7
43:228 9 10 12 14 typography and visual
43:27hierarchy responsive and grid behavior
43:29and what I can also do here is I I'll
43:31keep the changes and let's transform
43:36the learnings
43:40into relevant functional requirements,
43:45right? Because as I mentioned before,
43:48the the goal of the spec is that it
43:49becomes the executable artifact. If we
43:51had a bunch of learnings that we went
43:53through the process of iterating with
43:55the LLM, we went through the process of
43:56actually learning uh what the experience
43:59should look like based on the iteration.
44:01We want to make sure that that is also
44:02captured in the spec properly. So now we
44:05have these functional requirements that
44:08are embedded along with the initial set
44:09of functional requirements that we had,
44:11right? Because we remember we created
44:13functional requirements when we first
44:14started down the path of this feature.
44:16And now we have some extras
44:18that allow me to go and recreate this
44:20things like system must use identical
44:22header styling. This is great. You have
44:24to have this in the spec. Maybe even
44:26something that can be extracted and put
44:28in the constitution because you want to
44:29have consistent visual design. Must
44:31implement section counters with emoji
44:33indicators. Yes. Yes. This exactly what
44:35I did. Must use fixed width card
44:37dimensions. Absolutely. I want that.
44:40this is what what we did and media
44:42queries screwed it out because cards
44:44kept bouncing around, right? So like the
44:46learnings that we had from this
44:48experience need to be encoded back into
44:49spec. So now if I go and delete the code
44:51that existed for the the book experience
44:54that I have here and I go and recreate
44:56this, DLM should have a much easier time
44:58recreating the exact experience that I
45:00wanted because I don't need to go and
45:02reiterate all these conversations back
45:03and forth, back and forth, back and
45:04forth. So there you go. This is how to
45:07add a new feature to an existing code
45:09project. I hope this has been helpful. I
45:12am curious how you're iterating on your
45:14projects and what works and what
45:15doesn't. And as always, we are expecting
45:17a lot of feedback. So, leave it in the
45:20comments, go to GitHub, ping me, however
45:23way you need to ping me to give me the
45:25feedback, but we'd love to improve this
45:26for you. So, uh, keep us posted on how
45:29Speckit can be made better. Until the
45:31next one.

About this transcript

This page contains the full transcript of Using GitHub Spec Kit with your EXISTING PROJECTS by Den Delimarsky, generated from the public captions YouTube serves with the video. The transcript has 8,311 words across 1,199 segments, with the original timestamps preserved so you can click any line to jump to that moment in the embedded player.

What you can do with it

Use the transcript to take notes, quote the speaker, build a study guide, generate a summary with ChatGPT or Claude via the YouTube Summary tool, or export it as a timed subtitle file with YouTube to SRT. You can also re-open it in the transcriber to translate the transcript into 100+ languages.

Free YouTube transcript tool

YouTube2Text is a free YouTube transcript generator — no signup, no daily limit. Paste any YouTube link and get the full transcript instantly, with timestamps, click-to-jump, translation to 100+ languages, AI prompts for ChatGPT, Claude, and Gemini, and exports to TXT, SRT, VTT, or Markdown.