00:00:00This is Superpowers, the agentic skills framework with more than 50,000 stars on GitHub
00:00:05that stops your coding agent from rushing and making mistakes by forcing it through a structured
00:00:10workflow that contains brainstorming, implementation, red-green test-driven development,
00:00:15and even using sub-agents to execute tasks and review code in parallel.
00:00:19But what makes this different from just using plan mode or something like spec-driven development?
00:00:24Hit subscribe and let's get into it.
00:00:27So this is a project called XDL, which is a CLI tool used to download videos from Twitter.
00:00:32I want to create a web UI for this tool that not only downloads videos to the user's browser from
00:00:38a URL, but also uses it to create an article. So I used Opus 4.6 with plan mode in clause code
00:00:46to try to create that UI. And this is what it did.
00:00:50Now, unfortunately, when I ran the code the first time, there are some issues.
00:00:53So I went through with the code to try and fix those issues, which hopefully it's resolved.
00:00:58So now it looks like everything is working.
00:01:00I'm going to go to Twitter and copy the link to this tweet.
00:01:03Sorry, Kevin, paste it here and see if it'll download the video.
00:01:06So it's extracting and it's been able to download it.
00:01:09So if I click here, it opens it in a new tab, which is not what I expected, but hey, it does the thing.
00:01:15And if I try to create an article from that tweet, so I'll paste it in here and it generates,
00:01:20we can see the different steps it's taking. So it's first extracting the video and then
00:01:24it's doing the audio. And now that it's done, we get the article in perfectly formatted Markdown,
00:01:29which is really impressive. And if we take a look at the exact same task done with Opus 4.6,
00:01:35but using superpowers, we can already see that the design is much better with an option to
00:01:39download and generate an article. We'll paste in the same Twitter URL, hit download, and again,
00:01:45it extracts the video, but this time it downloads to my browser and I can click on it to view the
00:01:51video. Now, if you were to use the same tweet to generate the article here, we can see the steps
00:01:56that it's taken. And now that it's finished all the steps, it's streaming the article to my browser.
00:02:01And I have the option to copy this and paste it wherever I want. Now already you can see the
00:02:06superpowers version is better than the version without using superpowers. We'll go through the
00:02:10code a bit later on in the video, but first let's go through how I did this. So after you
00:02:15install the superpowers plugin, we should now have some new slash commands like brainstorm,
00:02:20execute plan, and write the plan, which will write the plan from the brainstorm. Now we only actually
00:02:25need this command since superpowers will direct us to the next stage at the end of a previous one.
00:02:31So let's run this and we'll paste in a prompt. We're going to hit enter. And now it loads the
00:02:35brainstorming skill and begins to understand the current project. And here it's going to ask me some
00:02:39questions to further improve the plan. So I'm going to say it reacts plus feet, and then I'll say step
00:02:44by step for the article generation. And now it's asked me to confirm the structure of the architecture,
00:02:49which I think looks good. It also asks about the layouts and then asks about the endpoint and server
00:02:54logic. So after I've answered all the questions, it then goes ahead to create a plan, which it's
00:02:58now put inside this directory. And if we take a look at the plan, we can see it's very detailed,
00:03:03giving an overview, the stack, the structure, as well as design, layout, API endpoints, and much
00:03:09more. In fact, this is very similar to what Claude code would give us if it was writing its own plan.
00:03:15But the next step is where things get interesting. So after I confirmed the plan and so I'm ready
00:03:19for implementation, it then goes ahead and writes another implementation plan. It does this by first
00:03:25looking at the original design plan that we created. And it breaks this down into smaller, more
00:03:31manageable chunks of tasks that can be completed by parallel sub agents. So now it's written another
00:03:36plan and it's saved it to the plans directory again. And if we take a look at that one, we can
00:03:41see instead of giving a detailed overview of the project and architecture, it splits things up into
00:03:46tasks. So we have one task here to scaffold the project and it has some steps inside those tasks.
00:03:52We have another task here to create Vite and React client skeleton. And again, it has some steps and
00:03:57this keeps going on with every task that's needed to complete the project. From here, superpowers
00:04:03asks me to pick an approach. Do I want the sub agent driven approach or the parallel session
00:04:08approach? This approach, we use a separate sub agent for each task without any human confirmation.
00:04:14This approach will create another session from the plan session, complete the tasks in batches,
00:04:18and then check with me. So the human, if I'm happy with the batch is completed before it continues.
00:04:24Now for the sake of speed, I'm going to go with the sub agent driven approach. And now it's gone
00:04:28ahead and created the tasks that need to be completed for this project. Now, unfortunately,
00:04:32these tasks look different from the previous tasks because I forgot to record the screen the first
00:04:36time. So I've gone ahead and started again, but I use the exact same prompt. So what's happening now
00:04:41is that each sub agent is first creating a test. So it's writing a test that's going to fail. And then
00:04:47it writes the minimal code to make that test pass. And then when it's finished working on the feature,
00:04:52it verifies the feature passes the requirements that were specified in the plan and then moves on to
00:04:57check the quality of the code, which checks if it's clean, well-built and maintainable. So now it's
00:05:02finished most of the tasks. It's now going to test everything it's done. And here we have it, it's
00:05:06completed all the tasks and it even found one bug in the process that it was able to fix. And if we
00:05:11take a look at the code, it's split by server and source. I'm assuming source is the front end or
00:05:16client. We have some components in here. So article tab, download tab, et cetera. If we take a look at
00:05:21the pipeline progress, we have stages in an object, a TypeScript interface. Now it looks like it's using
00:05:27some kind of CSS in JS for the styling. And in hindsight, I should have specified to use Tailwind,
00:05:32but this is fine. And check this out. This is something Opus plan mode wouldn't do by default.
00:05:37You can see through every step of the way, Superpower has made a git commit from scaffolding
00:05:43the project to adding the CLI wrapper and adding Hano and everything in between. So if I check the
00:05:48git status, there's nothing for me to commit because the branch is clean, which is much less work on my
00:05:53part. Now you may be looking at this and wondering where are the test files? I'll talk about that
00:05:57later. So if I'm being honest, I think Superpowers is an impressive project. I love the fact that it
00:06:02focuses on skills. I think it has 14, which do so many different things from brainstorming to
00:06:08planning to implementing and even reviewing the code afterwards. I love the focus on TDD,
00:06:12specifically red green TDD, where it writes the tests first. So they fail, making them red and
00:06:18then writes minimal code to pass them. But sometimes this doesn't always work because the agent chooses
00:06:24not to do that. Take a look at this. So here we can see the writing plan skill explicitly said TDD. And
00:06:31for some reason, Claude chose not to do it. I asked it to confirm that and it said, yes, it's on me.
00:06:36The skill says TDD and I still didn't do it. And I asked it, why did you not do it? And then it says
00:06:42it focused on shipping quickly over following the process. I'm not sure exactly why this happened for
00:06:47a state of the art model, but it just goes to show that you shouldn't blindly accept what the model
00:06:53does. It's important to read through the plan and make sure it does what you expect it to do.
00:06:57This is one of the reasons why I don't think I'll be using Superpowers for every single one of my
00:07:03projects or feature requirements purely because they're quite small. And if I have a small feature
00:07:08I want to add, I'm happy to go back and forth with Claude to plan this out, write a plan document,
00:07:13and then wipe the context to execute that plan. But if I do find myself in the situation where
00:07:19I'm implementing multiple features, which does happen from time to time, then Superpowers is a
00:07:24great tool to use just because it's very good at breaking down complex requirements into chunks
00:07:31that can be completed by sub-agents. And yes, the Claude code tasks feature can kind of do this,
00:07:37but I love the fact that Superpowers creates a plan for this instead of going ahead to implement
00:07:43the code. Now, how does Superpowers compare to something like Beads or SpecKit or the whole
00:07:48spec-driven development architecture? For me, it seems like a more simple version of planning out
00:07:53before executing. Of course, not as simple as something like Ralph, but maybe in between
00:07:58something like Ralph and Beads. But it seems like to me, there are more and more tools like this
00:08:02helping people to write better code with their AI agent. Now, this is a good thing,
00:08:06but everyone is different. And I think it's good to take a bit from here, a bit from there,
00:08:10and end up making your own workflow that is perfect for you. So maybe that's just something I might do
00:08:16in the future. And if you're lucky, I'll make a video about it to show you exactly how I did it.