YT YouTube2Text

YouTube2Text → Transcripts → The ONLY guide you'll need for GitHub Spec Kit

The ONLY guide you'll need for GitHub Spec Kit — Transcript

by Den Delimarsky · 7,015 words · 1,027 segments · language en · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

0:00Hey friends, I am Dan Delamarski. I'm
0:02one of the maintainers for SpecKit, the
0:05new project from GitHub. It's that
0:06experiment that you've been hearing all
0:08about on the YouTubes and the Tik Toks
0:11and the Instagrams and wherever else.
0:13But seriously, look at the numbers. Look
0:16at this.
0:1816.3,000
0:21stars. I I was just celebrating
0:23yesterday that we hit 15,000 and it's
0:2516.3,000 already a week after release.
0:28This is wild to me. Absolutely wild.
0:32Thank you. Thank you to all of you who
0:34are trying this out, who are
0:36experimenting, who are filing issues,
0:37opening pull requests. It helps
0:39tremendously. And boy, do we have a lot
0:42of stuff in store for you more around
0:44specit. But actually, that's the point
0:47of the video. We're going to be talking
0:48about specit today. We're going to be
0:49talking and actually looking at how this
0:53works. And by the way, like I'm also one
0:55of those people that looks at these
0:56issues fairly regularly. So if you have
0:59any feedback, go and submit. Go and
1:01submit your feedback right here in
1:04GitHub. Open an issue. Uh do not open a
1:07pull request that rewrites the entire
1:09thing as an MCP server. I know I like
1:11MCP. I'm going to reject that request
1:15because you haven't talked to anybody
1:16about this. So if you have any big
1:17changes, make sure you talk about this
1:18first in the issue. And what is what is
1:21the the issues that I see sometimes are
1:23being open like Dr. D? What is this? I
1:28mean serious. Yeah, do not do not open
1:30issues. They just say DR like give me
1:32give me some context for how we can
1:33improve this. But anyway, so specit what
1:36it is is a toolkit that helps you get
1:39started with specri development. At
1:41Microsoft, we are very big on spectrum
1:44development lately. And one of the
1:45things that we decided to look at is how
1:48can we actually simplify the process of
1:51you using spectrum development to build
1:53real software. It's one of those
1:55important things that you don't really
1:57think about until you actually try it.
2:00One of the conversations that I had
2:02recently was around vibe coding, right?
2:04Like you hear all these people that talk
2:06about vibe coding some SAS app and
2:09there's a lot of this imprecision
2:11happening. You end up in these random
2:13rabbit holes where the code is not quite
2:15what you wanted. The implementation is
2:16not quite what you wanted. The design is
2:18not quite what you wanted. So spec
2:20driven development is something that can
2:21actually help you get out of that rabbit
2:24hole into a little bit more of a
2:25scalable solution for your software. So
2:27uh let's take a look here. It's again
2:29it's a GitHub repo. It's all open
2:31source. It's free. You can take a look
2:32at stuff that we have here. And uh, of
2:36course, one of the things that I did
2:37recently is push the specify CLI
2:40reference spec kit includes this
2:42wonderful thing which is called specify
2:44CLI. It actually scaffolds things for
2:47you. So if you're a developer and you're
2:49thinking like, wow, what do I need to
2:50get started with Spectrum Development?
2:53CLI is right there. So you there's a
2:55reference for it now as well. And uh I
2:58use uvx and you can install it directly
3:00from the GitHub repo because I have not
3:02yet published this to um the Python
3:05package repository. It's coming. I'm
3:07working on it. I saw that people already
3:09filed issues on this which is great. But
3:12um we're going to use it directly from
3:13the repo as is. So I'm just going to
3:15copy this command with UVX. Shout out to
3:17the folks at Astral. Uh this is
3:19fantastic. UVX. I I use UV and UVX all
3:23all the freaking time. Um, also if you
3:26do not want to use a CLI, that's totally
3:28fine. I understand you don't want to
3:30install things. You don't want to
3:31install UVX.
3:33Shout out to Astral folks. Your product
3:35is great. I love UVX. Um, this is not
3:37sponsored by them. But if you do not
3:40want to do that, you can go to the
3:41releases and just download the templates
3:43yourself. We support several agents. And
3:46just today, actually, I launched support
3:48for Cursor. So, if you're one of those
3:50people that uses Cursor, you're in luck.
3:52You can use one of the releases here. So
3:54we have a bunch of them. Uh there's for
3:56example for copiloud, we have them for
3:57PowerShell and shell scripts. There's a
3:59bunch of them that you will see shortly
4:02in our demo. Uh depending on what
4:04operating system you're running in. So
4:06if you're running on Linux, you might
4:07use bash scripts. If you're running on
4:09Windows, you might use PowerShell. No
4:11judgment here. Use whatever fits your
4:13scenario. But you can download these.
4:14We're going to say grab the zip file for
4:17the PowerShell script for uh our copilot
4:21and put it into downloads. and we're
4:23going to save it here. And let's go and
4:25take a look at it. Let's open it.
4:28And you'll notice that I have the
4:30specify folder that has some metadata
4:32for specify things like memory, scripts,
4:34and templates. And scripts are, of
4:36course, PowerShell because that's what
4:37we downloaded. These are helper scripts.
4:39We have some prompts in the GitHub
4:42folder that we'll get to in a second.
4:44So, you can just grab this, put it in
4:46your project. You do not need to use a
4:47CLI. I promise you, no installation
4:50required. But installation actually
4:52makes it much easier. So I do recommend
4:55using it. I just copied the command and
4:56I'm just going to go to the terminal,
4:58zoom it in, and we're going to paste it
5:00here. And I'm going to bootstrap a new
5:02project. Let's see what is a thing that
5:05we want to build today. And let's say I
5:07want to build a podcast website. I am
5:10big at podcasting. If you have not
5:12listened to the work item, check it out.
5:14But let's say I do not have a podcast
5:16website and I want to build one for
5:18myself. So naturally what I want to do
5:20is just bootstrap the spectrum process
5:22for the website. I'm going to call it
5:24pod site and we're going to press enter
5:27and wait for specify to launch. Now here
5:31is where things get interesting. So we
5:33have different options. I can choose
5:36different agents for which I am
5:38bootstrapping these custom commands,
5:40custom prompts. Sometimes I use copilot,
5:42sometimes I use cloud code. I'm not that
5:45big on Gemini CLI and cursor, but I know
5:48that other people use them. So, they're
5:50here. You can use them through the
5:51specify CLI. And because it runs in a
5:54terminal, you can always just, you know,
5:55navigate with your arrows, use your
5:57keyboard, be comfortable with your
5:59keyboard, and pick the agent that you
6:02want. I'm going to pick copilot. Now,
6:04I'm also picking the type of scripts
6:07that I'm going to be using for my helper
6:09system, right? Because when we're
6:11running a bunch of these prompts, what
6:13they're also going to do is they're
6:14going to run a bunch of scripts that are
6:15going to bootstrap things like get
6:17branches and make sure that the uh JSON
6:21content that we use to kind of link
6:24metadata is the same. And for that, the
6:26easiest way to do this is with scripts
6:28because it's deterministic. You don't
6:29actually have to rely on the LLM, the
6:31large language model to go in and figure
6:33out how to piece things together. Things
6:35just work. So it defaults smartly to the
6:38operating system that you're running in.
6:40In this case, I have PowerShell selected
6:42because I'm running this on a Windows
6:44terminal. It's Windows PowerShell,
6:45right? But if I so desire, I can switch
6:48to shell scripts. If you're running WSL
6:492 or maybe you have an Ubuntu VM or a
6:52Fedora VM, you can use that there as
6:54well. And by the way, this just launched
6:57today. It's hot off the press. You can
6:58actually now support PowerShell. You
7:00don't need WSL 2 on Windows to run this.
7:03You can just run it native Windows. I'm
7:04going to select PowerShell, right?
7:06Because that's that's what we want. We
7:08want to run this on Windows as is.
7:10PowerShell it is. And we'll see some
7:12status changes. This is basically the
7:14specified CLI going and downloading a
7:16bunch of stuff and extracting the
7:18templates locally. As I mentioned
7:21before, like this is just a convenience
7:24layer. Like this is not something that
7:25you have to do. You can just download
7:27the zip yourself from the release for
7:28the agent and the shell script type that
7:30you want and extract it and put in your
7:32project. Just as easy.
7:34So now you'll notice that there are some
7:36instructions here for me. I can navigate
7:39to the folder. I can open in Visual
7:41Studio Code and use some slash commands.
7:44There are specify plan and tasks. These
7:46are going to help me to actually
7:47bootstrap my project. And I can update
7:51the constitution file. The constitution
7:54file is actually something that you
7:55probably have not heard about before
7:57because it's relatively new. the the the
7:59idea of the constitution is that it
8:01establishes a set of non-negotiable
8:03principles for your project. So if you
8:06have things like I always have to have
8:09tests. I always got to make sure that
8:11I'm running Nex.js of a specific
8:14version, you encode that in the
8:16constitution. That's where the stuff
8:17goes. So this is where the constitution
8:19comes in and it becomes super super
8:20helpful for any of your projects. Uh now
8:24we're going to jump back here to our
8:27terminal and I'm going to launch VS Code
8:28because I'm going to be iterating on
8:30this project inside VS Code of course
8:33and we'll notice that the podsite here
8:35and this is because I opened the wrong
8:39folder and this is how I know notice
8:41that I have podsite here and these are
8:43the GitHub folders. But if I go into
8:45agent mode and VS code here and if you
8:48see if you start typing in /specify
8:53oh I can't type slsp specify right and
8:57you will not see the command there that
8:58means you're in the wrong folder you are
9:00one level too high up from where you
9:03need to be to do this we're going to
9:05close VS go back to the terminal and
9:08we'll go to cd pod site
9:11that's why I put this instruction here
9:13in green that you will see here in the
9:15terminal. It's called cd podside. Go to
9:18the folder to be able to use these
9:19commands. So, we're going to go there,
9:22right? And now we're going to launch
9:24code from here.
9:27Fantastic. Now, we're in VS Code. Now,
9:29we see the GitHub folder and podsite is
9:31at the root, which is fantastic. That's
9:34exactly what I wanted. And now I see
9:36that there is the GitHub folder with a
9:38bunch of prompts. These are going to be
9:40our slash commands. And slash commands
9:42in VS Code is nothing other than custom
9:44prompts. That's that's all it is. It if
9:46you look at any of them, it basically
9:48outlines a set of instructions for the
9:51LM to follow to establish specific uh
9:54conventions around what we're building.
9:55So in our case, it requires running a
9:58specific script. We see some
10:00instructions for things to do. Use
10:02absolute paths. It's nice. Same for
10:04specify. Same for tasks. And we again
10:07we'll see the purpose of these commands
10:08just just in a second here. and also
10:10have the specify folder. Again, shout
10:12out to the community members who
10:13suggested this because before if you
10:15have like memory and a bunch of these
10:16helper scripts and the templates, they
10:18would just land directly in the
10:20repository route, which is not super
10:22helpful if you already have a project.
10:25So, these simplify things a little bit.
10:28So, you can just keep them inside this
10:29specify folder. And if you so desire,
10:31you can even get ignore it, which I
10:33don't know why you would do that, but
10:34you can. So
10:37now that we have these baseline pieces
10:39here, let's go ahead and use our slash
10:42commands. I'm going to maximize the chat
10:44box here. I'm going to use GPD5, but you
10:47can also use different models. You can
10:48actually experiment with different
10:50models that exist in Copilot or any of
10:52the agents that you're using to see what
10:55output is better for the things that
10:57you're building. The output will vary.
10:59So uh for example I like GPD5 and cloud
11:02sonnet 4 personally but depending on
11:04what you're building and the scope of
11:06things that you're building you might
11:08want to customize that and as I
11:10mentioned there's this constitution
11:11document so if you go to memory and
11:13there's constitution right now is just a
11:15blank template but what we can do is
11:19establish this constitution with the
11:20help of the LLM. So I'm just going to do
11:22that uh and we're going to ask the LLM
11:25to go in and fill this out for us. So
11:29fill the constitution
11:32with the bare minimum
11:37requirements
11:40for a static
11:43web app
11:47based on a template because we want to
11:49follow the template. the Constitution.
11:51If you also look at this, these
11:52principles and examples, it's all about
11:56making it easy for the LLM to go and
11:58fill this out for you. This can
12:00bootstrap it. It doesn't mean that you
12:02cannot do this manually. It's more of
12:03this bootstraps it for you and saves you
12:06some time. So, we're going to press
12:08enter here. Bare minimum requirements.
12:10And we'll see what it comes up. We're
12:11going to use GPD5. I GBD5 is good like
12:14for these kind of things. If you use
12:16things like sonnet, I see it go off the
12:18rail sometimes and it does a bunch of
12:19stuff and it starts editing the
12:21constitution file and then it starts
12:22creating more files it's going to refer
12:23to. That's not what we want to do here.
12:25So, I'm just going to rely on the
12:26constitution. It's it's fine. And it's
12:29going to look at the existing content
12:32and existing template and I hope that
12:34it's going to fill this out in the way
12:36that I want to because if I'm going to
12:38be writing this out manually here, it's
12:40going to take us half an hour of this
12:41video and nobody wants to watch me type.
12:45So we're going to give it another second
12:46here. Um I've also noticed that GP5
12:50sometimes can take a little bit longer
12:51than sonnet. So sonnet this in the
12:53context of copout is just going to start
12:55iterating on this and just kind of you
12:57will see the changes go gradually into
12:59the files. GPD5 is a little bit more uh
13:02I want to say thoughtful where it's
13:04going to start thinking and thinking and
13:05thinking and then just spit out the
13:07whole thing for you which again can be
13:10nice can be not so nice depending on the
13:12scenario you're trying to tackle. So,
13:14uh, pick your battles on the models you
13:16want to use and try them out. The only
13:18way to find out what produces the best
13:21results here is through experimentation.
13:23Just like spec kit, spec kit, the
13:25spectrum development stuff that we're
13:27shipping here is an experiment. We are
13:29here to learn. I just want to remind you
13:30that this is not a production scenario.
13:34Like, there's a lot for us to learn. We
13:36want your feedback. We want your input.
13:38So if something breaks, if something
13:39doesn't work, if something that it
13:41produces is garbage, let us know. I want
13:44to see that garbage. I want to
13:45understand what worked and what did not
13:47work because that will help us make it
13:49better and by proxy improve the product
13:53for everyone else that might be running
13:54in similar situations as you. So it
13:57looks like GBD5 is still thinking. It's
13:59going to update the constitution file by
14:00updating by replacing the placeholders
14:03with concrete static site requirements.
14:06So, we're going to wait for it to finish
14:08this process
14:10>> a few moments later.
14:12>> All right, looks like it finished. So,
14:14I'm just going to keep the changes here
14:15and let's take a look at what it
14:16actually said. You know, no static first
14:18delivery, no serverside execution. The
14:21site ships HTML, CSS,JS, and static
14:23assets via CDN. That makes sense.
14:26Simplicity over tooling. Prefer vanilla
14:29HTML, CSS,JS. I like that. I think that
14:31makes sense. Accessibility and SEO
14:33baseline also makes sense. Performance
14:36budget, you know, I I I I don't
14:40necessarily care for these things as we
14:42are prototyping right now. For
14:43production scenarios, you absolutely
14:45should care about performance security
14:46for now. I just do not want to deal with
14:50that. Um, also things like requirements
14:53here, development workflow, quality
14:54gates. Um, yeah, this makes sense, but I
14:58think like again for for what we're
14:59trying to do right now, this a little
15:00bit a little bit too much. So, we're
15:04just going to remove these pieces. And I
15:06think a lot of the the three principles,
15:08the three articles of our constitution
15:10make sense. Static first delivery,
15:11simplicity over tooling, and
15:12accessibility, and SEO baseline, which
15:15is good, right? So, now now we have a
15:17constitution. Um, now I can use the
15:20specify command that I talked about to
15:22define the baseline specification. So
15:25let's do that. Let's use slashsp
15:27specify. And again, because I'm in the
15:28right folder now, I see slpspecify slash
15:31specify. And this is where I define like
15:34a true product manager the what and the
15:37why. We're not focusing on a technical
15:40requirements. We're not focusing on
15:41saying use Nex.js and this database and
15:44so on so forth. Like we we don't care
15:45about that at this point. This is all
15:47about making sure that we are outlining
15:49the motivation for the product and what
15:52actually needs to be built. This is
15:55helpful because for somebody reading
15:56this, it is going to be completely
15:58detached from the implementation. This
16:00is important. The benefit of the spec
16:02here is that it is completely detached
16:04from the implementation. So if at some
16:05point, you know, we're going to be
16:06building this with Nex.js, but at some
16:09point you switch to Hugo or any other
16:11static side generator. You use the same
16:13spec. The spec is written, the
16:15requirements are there. You just toss it
16:17into an LLM and ask it to write you
16:19three, four, five, six variants based on
16:21the same spec. So kind of neat. a side
16:23effect of what what this is about. So,
16:25we're going to go back here and use
16:26specify and this is where I'm going to
16:28say what my requirements are. So, I am
16:31building a modern podcast website
16:37to
16:40look sleek. We want to use the term
16:42sleek. I I think the youths use this
16:45term these days, sleek. I wanted to be
16:48sleek. I um something that would stand
16:52out
16:55should have a landing page
16:58with one featured episode.
17:03There should be an episodes page,
17:07an about page,
17:10and a
17:12let's see an FAQ page.
17:16uh should have 20 episodes
17:22and the data is mocked. You do not need
17:25to pull anything from any real feed,
17:31right? So, we're we're just establishing
17:33the requirements. We're detaching
17:35ourselves from the technical details.
17:37We're not thinking about any technical
17:38details. We're just saying like this is
17:39what you're building. So, I think this
17:41is good enough for me to start. Again,
17:43for a real production scenario, the more
17:44detailed the prompt, the better for us
17:47because we're looking at this very
17:49baseline context. Uh, we're just going
17:51to use this and I'm going to use
17:53specify.
17:55And what's going to happen here is it's
17:58actually going to go ahead and use our
18:01prompt file, right? Like this is going
18:03to use file instructions and specify
18:05prompt MD because that's the prompt file
18:08that drives the slash command, right?
18:09It's going to read the script that is
18:11referenced there. It's very important.
18:12It's going to read the spec template
18:14that is going to be used as a baseline
18:15because look, there's a templates
18:17folder. And it's going to ask us if it
18:19wants to run this PowerShell script. And
18:21uh yeah, let's actually enable auto
18:23approve yolo mode for the rescue. And
18:27because I'm running this inside a VM,
18:29I'm not really worried about this. I'll
18:30just say allow run this command. It's
18:33going to run a PowerShell script, a
18:34helper script. Great. It switched to a
18:37new branch because, as I mentioned, this
18:40is git based. So as you're running this
18:42in your project is going to be using
18:44these custom branches to help you
18:45organize your work. That way you're not
18:48damaging anything in production and you
18:49can always roll back changes that you do
18:51not like. Again side effect of the
18:54spectrum process the fact that it forces
18:56you to think about a lot of these things
18:58where as you're experimenting and as
19:01you're iterating you not want to
19:03interfere with the existing
19:04implementation. Right? So the spec
19:06establishes the baseline. You work
19:07through it, you experiment, and then you
19:10merge it into your main branch on an as
19:12needed basis. So, looks like it's
19:14reading some of the information from the
19:16spec file that it helpfully created in
19:19the specs folder. Uh, the file right now
19:21is empty because it has not yet inserted
19:23the template, but we'll see GPT5 soon
19:27plug in all the required information,
19:29which is going to be nice.
19:38Wonderful. We now have a specification.
19:40I'm going to keep it because I just
19:42trust it that much. I I really don't
19:45don't don't trust the LLM to do
19:48production software for you. Just check
19:49it. You have to verify it. Check the
19:53software statement that is being made in
19:55the spec. So, uh we're going to look at
19:58the spec here. It created things for a
20:00modern podcast website. Great. That's
20:03that's what I asked it to do. Um let's
20:06take a look here at quick guidelines
20:07which is you know again it is the
20:09guideline for the spec. We have to
20:11respect them. The LLM has to respect
20:13them. Focus on what users need and why.
20:15Great. Um for AI generation all the
20:18stuff that's again helpful baselines
20:20that we need to maintain and respect. So
20:23user scenarios and testing. All right.
20:25There's some user stories and this if
20:27you're a PM this will sound mighty
20:29familiar. We have some acceptance
20:31scenarios. We have some edge cases,
20:34right? Like it accounted for things like
20:36epsert ordering not specified and so on
20:38so forth. There's also a bunch of
20:40functional requirements that are also if
20:43you're a PM, you know, functional
20:44requirements, they go into the spec.
20:45This is, you know, it's done for you.
20:48Um, there's a bunch of things that are
20:50here, but also notice that there's a
20:52review and acceptance checklist. This is
20:55key here. I cannot emphasize this
20:57enough. If you are having a
20:59specification, if you're writing a spec,
21:01you got to make sure that you have an
21:03acceptance checklist and you got to make
21:05sure that the acceptance checklist is
21:07actually filled out. So things like no
21:09implementation details, right? Like
21:10languages, frames, APIs because that's
21:12not what we're focusing on. We are
21:14focusing on the what and the why, not on
21:16the how. Uh I also have details about,
21:19you know, nontechnical stakeholders,
21:20mandatory sections completed. One thing
21:23that is not checked is no needs
21:25clarification. And that is actually
21:27something that is missing here right now
21:28because if you look at there's items
21:30that needs clarification like episode
21:32list ordering should be reverse
21:33chronological newest first confirm order
21:36requirement. Now because we're
21:38prototyping and because we're
21:39experimenting with this I can ask the
21:42LLM to take a best guess. So we're just
21:45going to do that for things that need
21:48clarification.
21:50Use the best guess you think is
21:54reasonable.
21:59Update
22:01acceptance checklist
22:03after.
22:06And we're going to have the LM basically
22:07fill this out for us because I do not
22:10want you to think about this prototype.
22:12I just wanted to kind of vibe code, I
22:14guess, but it's not really vibe coding
22:16because I I am structuring this a little
22:18bit better than just vibe coding. So
22:21once the spec is established, mind you
22:23this is very easy to share with your
22:25team. So if somebody comes in and says
22:26how did you build this website, look at
22:28the spec, look at the rationale. You as
22:31a human in the loop can go in and edit
22:33this. People make the mistake of
22:35thinking that oh the LM produced this. I
22:38can only manage this with ALM. No, it's
22:40a markdown file. Go in with your hands
22:43and start typing and entering
22:45requirements that you feel are, you
22:47know, required for your product. So if
22:50you feel strongly that the landing page
22:52should have a logo centered at the very
22:54very middle and some gradient that looks
22:57like a rainbow, you absolutely can do
23:00just go and add another functional
23:02requirement that you can do this
23:03manually. You don't need to ask the LM
23:04to do this. Um again and this is
23:06especially important if you're running
23:08into you know enterprise environments or
23:09environments where it's more controlled
23:11where you need to actually add specific
23:13requirements. Sometimes the LLM cannot
23:14guess for you which it's fine. you know,
23:17manual work is still there and we as
23:19developers need to go in and do that
23:21from time to time. So, we're just going
23:23to wait for GBD5 here to think a little
23:26bit and
23:29fill out our clarification items.
23:43We now have the updated checklist. uh
23:46allegedly. So let's scroll back here. So
23:48all right, looks like we're good. No
23:51needs clarification anywhere in the
23:53code, which is our spec. It's not
23:55actually code. It's a markdown file.
23:57We're going to look here. It looks
23:59great. I think we're ready to go to the
24:02next step. The next step is we're going
24:03to be using the slash plan command. And
24:05this is where we actually specify the
24:07technical requirements. So I'm going to
24:09use
24:11next.js JS
24:13with static site
24:16configuration.
24:19No databases
24:29and what to make sure that the site is
24:30responsive
24:36and ready for mobile because 2025 we
24:39still have mobile phones. we need them.
24:41So this is good. It gives us a baseline
24:44for what to think about. So we're going
24:45to use again the plan prompt. It's going
24:46to run some helper scripts as well. So
24:49we do need access to the terminal here
24:51in VS Code or whatever agent you're
24:52using. If you're using cloud code, we're
24:54just going to use cloud code because
24:55cloud code is very good about running
24:57things directly in your terminal. So
24:59it's also going to bootstrap some
25:01additional content here that we'll see
25:02shortly in the repository. things like
25:04the plan, the contract and notice most
25:07importantly that it does consult the
25:09constitution like there is then read the
25:11spec constitution and plan template. So
25:13constitution is in play the the the set
25:15of non-negotiable things that we talked
25:17about earlier is still in play very
25:20important. So, we're going to run the
25:21script. We're going to allow it. YOLO.
25:24Not quite yolo because I still had to
25:25approve it for some reason. But, um, we
25:27see the JSON here, which is the output
25:29of the script because if it's JSON, it's
25:32very easy for the LM to parse and
25:33understand it. Notice that it read the
25:35constitution because these are
25:37non-negotiable principles. We got to
25:38respect them no matter what you're
25:40doing. So you have this plan step that's
25:42going to read it and then it's going to
25:44go ahead and fill out the actual plan
25:47and a bunch of additional metadata
25:49around it that's going to help us
25:51establish a good project baseline.
25:54Notice that because all the stuff also
25:55lives in a dedicated folder. So 001 I am
25:59building because it just picks up from
26:00your prompt and it generates a name for
26:02the for the feature. All the stuff is
26:04grouped here. So later on if you decide
26:07to rebuild the entire feature like you
26:09see what it built and you're like you
26:10know what set 5 or sorry set 4 did not
26:14quite do the thing that it expected to
26:16do. I want to switch to GPT5 or I want
26:17to switch to uh maybe GPT41
26:20and try out how this works for maybe
26:22Gemini Flash. You essentially have the
26:25spec. You have all your artifacts. You
26:27can just delete the source. The spec is
26:29still there and then use a different
26:31model. So you use the model switcher
26:33here in the chat and just reimplement
26:35it. That's that's it. You can just
26:38rebuild it. You can add additional
26:39requirements. If you see that the logo
26:41is generated the wrong way or it's kind
26:42of the the layout of the page is funky.
26:45There's no header and footer. Go and
26:47edit the spec and just rebuild the
26:49source. Once the source is created, of
26:51course, you can iterate on it
26:53differently. Like you can add another
26:55spec for another feature, for another
26:56component. you the the one spec that we
26:59have here in this what we refer to as
27:00green field project because we're
27:02creating a new thing is just that is
27:06just the bootstrap of the project. You
27:07can do this exact same thing for any
27:10other features. If you want to add
27:12support for a Spotify player for example
27:14in your podcast page just use specify to
27:18essentially create a new feature right
27:20like that's kind of it. you use plan to
27:23go and create another set of technical
27:24details for that feature because that's
27:26what it's going to do. It's going to
27:27create new subfolders that you can then
27:30iterate on. So here we're going to wait
27:32a little bit for GPD5 to go and think
27:35through. But notice that it actually
27:36started thinking about things like
27:38contracts because it's going to look at
27:39data contracts that exist within the
27:41pages. But uh I'm not going to disturb
27:43it. I'm going to let it think and do its
27:45job. And we're going to get back here
27:48once we see the actual outcome of the
27:52process.
27:54>> No. God,
27:57no. God, please. No. No. No.
28:02No.
28:04>> All right. We now have the plan. The
28:07plan is good. We can take a look here.
28:10We see plan. I'm going to keep all of
28:12the changes. It created a bunch of other
28:14metadata here. So we can scroll through
28:16the plan. We can minimize the terminal
28:18just a little bit. We see that it has an
28:21execution flow for the plan. Great. Uh
28:24technical context, language version,
28:26JavaScript, TypeScript, and Node.js.
28:28Great. Primary dependencies, Nex.js,
28:30static expert, SSG, right? Because we
28:33asked for a static site. It's great. It
28:35thinks about that. Testing Lighthouse
28:37and some other libraries. Target
28:39platform static hosting over CDN versify
28:43GitHub pages. Azure static web apps.
28:44That's that is right. I actually made
28:46some good assumptions. I did not specify
28:48this. Uh keep in mind that if I wanted
28:50for example to host things on say
28:52Cloudflare or Azure, I can specify that
28:55in the constitution. I can say that
28:58everything that you do has to be
29:00oriented for Cloudflare or Azure or
29:02anything any any other provider whatever
29:04you want uh or any other technical
29:06requirements by the way. So um we have
29:09the project types some constitution
29:11checks and there's a gate that again it
29:13must pass the constitutional check it
29:16must pass the requirements that we have
29:18established for things like use
29:20framework single data model avoiding
29:21patterns yep architecture static first
29:24dependencies minimal yep makes sense
29:27makes sense there's some outline for
29:29outline and research all right some
29:32research artifacts created and by the
29:33way copilot in this case did not do the
29:35actual research it used its training
29:37data to come up with this research.mmd
29:39file. Other agents like copilot, sorry,
29:42like quad code can actually go and do
29:45research. So this you you'd get the the
29:48freshest information from the internet.
29:50Um but it actually made some pretty good
29:51assumptions here. So we have the
29:54context, we have some of the outline on
29:56the phases. Uh and now look, we're
29:58missing the task generated. We're going
30:01to run the task command now. Uh but
30:03before we do that, let's take a look
30:04here. So there is a research file like I
30:06mentioned. So it looked through its
30:08training data because all this is
30:09generated by the LLM basically, right?
30:11Like it's all whatever is embedded in
30:12the training data. That's what it's used
30:14for its inspiration instead of actually
30:15going out into the web. Uh we can use
30:18something like the beast mode from our
30:20good friend Burke Holland uh to force it
30:23to do certain things, but I just use
30:25standard agent mode here because I did
30:27not use custom modes now which which is
30:29fine for our prototype. It's okay. So we
30:31have this. We have some data model
30:33outline for you know fields for an
30:35episode which is again great. It has the
30:36context. We're building a podcast
30:39website some details about the site some
30:41validation rules derived views. Um we
30:44still have our spec. We have our quick
30:46start that gives some idea of what the
30:49site is about and the prerequisites that
30:52are required for the site to actually
30:53run. Again super super nice to have this
30:56in one place. the spec and all the
30:58artifacts become that piece of
31:01executable context that you can pass to
31:02your team and have them work on it. But
31:05uh we have the plan u now as the plan
31:08says we got to jump to our task. So we
31:09can use tasks and say break this down.
31:17Right? So once again, it's going to run
31:19some helper scripts that are going to
31:21guide it through and it's going to break
31:23the work down into manageable chunks
31:25that the agent can tackle one by one
31:28because that is super nice. That is kind
31:32of the ability of seeing exactly what it
31:34needs to do instead of it assuming that
31:37it needs to partake in certain actions.
31:39Right? So if I want to build the
31:41testdriven developmentbased approach
31:43where I want to have tests first, all
31:45that stuff, you know, can be broken down
31:47into individual tasks. It's going to do
31:49that first. It's going to make sure the
31:50tests are passing and then jump to
31:52implementation of the data model and so
31:53on so forth. So uh we're going to uh
31:56have it do some more work here.
32:00Going to check task prerequisites. All
32:02right. So it's going to use a test
32:03template.
32:05Going to set things up for us. And we're
32:08going to get another tasks.md
32:10file, another markdown file in our
32:12folder that we can use to actually
32:15browse through the task. Right now,
32:16because it's all marked down, it's all
32:18available to you as a developer. You can
32:19use the LLM here in this chat view and
32:22just guide it through all the things
32:24that you need. Or you can just go into
32:26the markdown and start tinkering with it
32:28because it's so easily editable. It
32:30doesn't need a proprietary editor of any
32:31kind. You can just open this and you
32:34know anywhere else where you've
32:35integrated copilot you know it doesn't
32:37actually need to be VS code I just
32:38happen to use VS code right um and again
32:41specit and specify are compatible with
32:43many other agents and more agents are
32:45coming like I'm working right now on
32:47open AI codeex uh QN uh we're looking at
32:50adding that as well uh open code root
32:53code like all those wonderful wonderful
32:55projects from the community are going to
32:56be coming in so uh again I'm going to
32:59let chat uh or GPD5 five in this case.
33:02Think a little bit and create our task
33:05list.
33:10Look at that. We have our task file. So,
33:13if I go here again, we're going to keep
33:15all the changes as is. And we see a
33:18bunch of t Let's Let's actually reduce
33:20the size here, right? So, you can
33:22actually see a little bit. We're going
33:24to reduce the size of this as well. Um,
33:26and we see the the the sections here,
33:28right? like it it just chunk this into
33:31individual phases. We have setup
33:33initialize next.js app skeleton. Yep.
33:36Yep. That sounds good. Test first must
33:38fail before 33. All right. Yeah, because
33:40we do want to use test-driven
33:42development here. Uh, okay, that sounds
33:44good. Core implementation only after
33:46tests are failing, right? Because we're
33:48setting up the test first. Makes sense.
33:50About page, so on so forth. Integration
33:53refinement, run lighthouse. And this is
33:55where I can, you know, you can you can
33:57tweak, you can remove things you don't
33:59like. You know, do you want to run
34:01Lighthouse on a prototype? Maybe, maybe
34:03not. Uh, and of course, polish,
34:05responsive images, documentation, all
34:07good. Accessibility polish. Sounds good.
34:10I think we're ready. I think we're good
34:12to implement this. So, I'm just going to
34:13go ahead and switch my model to Cloud
34:16Sonnet 4 because I like this the most
34:19for code. GBD5 is good at setting up the
34:21the kind of the spec scaffolding for us,
34:24but for creative output, Sonnet 4 is
34:27still unbeatable to me. So, I'm just
34:28going to say this and say implement
34:32the tasks for this project
34:36and update the task list as you go.
34:42And
34:43now we're going to let the agent run
34:45wild and go and implement our website.
34:51[Music]
34:58[Applause]
35:06Heat.
35:07[Music]
35:21Heat.
35:22[Music]
35:44Heat. Heat.
35:46[Music]
35:55Thank you.
36:00[Music]
36:06[Music]
36:24Tada. Looks like it did it. It It
36:27finished the work. It did the things
36:31that it was supposed to do. Now, I have
36:33not seen the output. This is going to be
36:35a surprise. So, let's keep all the
36:37changes. Let's make sure that we keep
36:39it. It updated all the tasks. It failed
36:42on some Lighthouse test, but that is
36:43because I don't have Chrome installed.
36:46But we can actually run npm
36:49uh I like to run num npm run build.
36:54Let's build our static site
36:58and then we're going to run npm npm
37:01rundev to actually see it in action once
37:04it actually builds. So we'll see we'll
37:06see what it looks like.
37:09All right.
37:12Selecting build traces being the most
37:14timeconuming thing apparently.
37:18All right. And then npm run
37:21dev.
37:24Okay. Localhost 3000.
37:28See, let's see what our podcast site
37:30looks like. It's loading.
37:32This can be horribly bad. But actually,
37:35like look, it's it's not bad. it, you
37:37know, master the art of podcasting.
37:40Featured episode looking good. Has all
37:43the details. Pod side. I have my about
37:46page. If I go here, there's a nice
37:48description. All right. FAQ.
37:52Okay. Yeah, there's there's an FAQ.
37:56All right. Great. Episodes. Let's take a
37:58look here. We have individual podcast
38:01episodes with links to the podcast
38:04platform. And keep in mind that in this
38:07context, what I can also do is if I plug
38:10in MCP tools like Figma MCP, I can link
38:13to actual design. So I can actually get
38:16it to build things that fit the design
38:18system of my organization. So I don't
38:20have to randomly assume that it's going
38:22to build the right thing. So this is
38:23kind of nice. Like it did create all
38:25this stuff. Now you might actually ask
38:28yourselves like, well, is is this really
38:29better than vibe coding? Like I could
38:31have vibe coded this entire pod side,
38:33right? But the thing is is that now that
38:36I have the spec, now that I have the
38:37artifacts here in my spec
38:39implementation, I can easily customize
38:42it. I can now tweak it. I can add things
38:44like I want to make sure that the color
38:46is certain way. I want to make sure that
38:48a specific design decision is being
38:49made. And that makes it easier for me to
38:51then reimplement and rebuild things and
38:53additively add features in a structured
38:56way because that then can be used as
38:59context. So something that my colleague
39:01and friend John Lamb is working on is
39:03optimizing some of these context
39:05acquisition strategies. So that's going
39:07to change in the future. But you can
39:08imagine that as I have more of this
39:10context in the memory of the system that
39:13is being built, it actually makes it
39:15easier to build consistent software. So
39:18uh hopefully this is a great intro for
39:20you to see like how spectra works, what
39:22are the artifacts and how it produces
39:23them and how you can then tweak them. I
39:26really really hope that you go to spec
39:28kit. You try it out. You get it running
39:31on your box. You see what works and what
39:33doesn't, especially as you start
39:34compounding many many different features
39:36and bug fixes and all these things for
39:39your projects. Let me know. Go to
39:41github.com/github/spec-kit.
39:45Download it. Use it. Tell me what's
39:48wrong. And then I will see you in the
39:50next video where we're going to talk
39:52about more complex things that are also
39:54being accomplished with the help of
39:56specd driven development. I hope you
39:58enjoy this. I'll see you in the next

About this transcript

This page contains the full transcript of The ONLY guide you'll need for GitHub Spec Kit by Den Delimarsky, generated from the public captions YouTube serves with the video. The transcript has 7,015 words across 1,027 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.