Claude Code + SUPERPOWERS = The End of Vibe Coding? (Full Tutorial)

In this video, we're going to take a look at this Agentyk Superpowers which can help our AI agent here to make less mistakes by enforcing to follow this structured workflow that I'm going to show you in this video. And most

importantly in this video, I'm also going to cover why we should use Superpowers, how is it different compared to the traditional spectrum developments. And later on this video,

developments. And later on this video, I'm also going to show you how we can be able to use this building a feature on this production application called Bookworm.ai. And right here you can see

Bookworm.ai. And right here you can see I was able to use this framework here to build a feature on top of the current existing application that we have where we can be able to sync any changes that happen for the connected Google Drive folders that we have in this

application. So with that being said,

application. So with that being said, that's what we're going to cover in this video on how we can be able to improve the accuracy for coding agents using this Agentyk framework. And speaking of accuracy, I'm currently still working on a video on how we can be able to make

our AI agent here 100% accurate. So if

you're interested to see this content, make sure to subscribe to this channel, like this video, and you will be able to get notified once this video is out.

This is going to be a big banger because I'm going to put all my knowledge that I know on how we can be able to enforce coding agent here much more accurate compared to the traditional way on how we're going to write code. So make sure

to subscribe to this channel and this content is coming very very soon.

Hopefully by the end of this week. So

with that being said, if that sounds interesting, let's get into this. All

right, so before we jump in, a quick intro for those who are new here. My

name is Eric and I spent years as a senior software engineer at companies like Amazon, AWS, and Microsoft. And I

have started this channel to share everything that I learned along the way.

From AI and coding to automations, Web3, career developments, and more. All

broken down into practical tutorials that you can actually follow. And of

course, we also have a school community where you can get access to all the resource, templates, plus our community supports. So if you're ready to level

supports. So if you're ready to level up, make sure to check out my YouTube channel and hit that subscribe button.

Now let's get back to the video. All

right, so now you might be wondering why would you even use Superpowers at all when we already have like GSD, SpecKit, BDD method, and so many more, right? Now

the reason is very simple. Yes,

Superpowers here has ability like what GSD have to delegate different tasks to different agents like what we have for GSD. But the biggest selling point here

GSD. But the biggest selling point here for Superpowers is test-driven developments, which is a development framework that's being used by large tech companies and enterprises. And what

essentially test-driven development does here is it's basically just going to first focusing on writing tests first before it's going to write the code. And

the benefit of using this approach here is that it's able to set the rule first on exactly what's the expectation, clarify the expectation before we're going to do the implementation. Because

often times we're doing implementations, we don't even know what the expectation is. So in this case, by having to create

is. So in this case, by having to create a test first, then we're going to make our application here behave what we said in our automation testing, then we're going to do the refactoring, try to make our application here our code base much

more cleaner, much more scalable, and then we're going to cycle through until we have nothing to refactor anymore. And

that's really what separates Superpowers here aside from other spec-driven development frameworks out there. Now

aside from this, the entire workflows for Superpowers here are also very different. Now of course, if you want to

different. Now of course, if you want to learn more about other development workflows from other spec-driven development frameworks, then you can check out this playlist right here where I organized all these spec-driven development frameworks that I have reviewed on this channel inside of this

playlist. But now back to the

playlist. But now back to the Superpowers here for the development workflows, here you can see this is the entire full development workflows for the entire Superpowers frameworks. And

what it first does here is we'll basically try to do some brainstorming, making sure that we have the entire plan down before we're going to step in to do the implementation. Same thing for any

the implementation. Same thing for any other spectrum developments. But what's

different here is that it's going to first using the Git worktrees, try to seclude this into a separate environment so that we can be able to have multiple implementations here working at the same time using the Git worktrees. And then

once we've done the brainstorming, setting up the environment, then we're basically going to do the planning, breaking the plan here into different tasks so that we can be able to execute them one by one. And eventually here, we're going to delegate each task here

into different sub-agents so that each task here have a fresh context window so that we can be able to avoid the context rod and be able to complete task much more accurate. And at the end of it,

more accurate. And at the end of it, we're also going to follow the test-driven development here to making sure that all tests here are passing when we're completing a project step by step. And eventually what's going to

step. And eventually what's going to happen here is going to review the entire code base against what we have in our spec and also our test plan. And

eventually it's going to merge that Git worktrees into our main branch by creating a pull request so that other team members here can be able to review it. So you can see that this entire

it. So you can see that this entire workflow here is much more modern because it uses like worktrees, also using different sub-agents here to delegate the task, as well as using like test-driven developments here to making sure that our application here is test

covered and also making more scalable.

So now you understand the entire Superpowers workflow and how we can be able to use that to develop anything. So

in this case, let's take a look at how we can be able to set this up on our local machine, how we can be able to use this here to build a feature on our application. All right, so to get

application. All right, so to get started, first thing first going to do here is to make sure to have Superpowers here installed onto our project. So we

have two options. One is we can be able to use Claude Code, right, through the official marketplace or it's going to be through the plugins marketplace. But

both options here are both available. It

will give you the same results. So

simply just going to copy one of the command right here. You can see I'm going to do this for the official marketplace from Claude Code. And here

you can see I have opened a project here called Bookkeeping App and started my Claude Code session right here. Simply

I'm just going to paste that right here.

It will basically just going to install Superpowers onto this project. So now if I were to enter this, you can see that it has fully installed because it's already done so. So if I want to manage this, I simply just going to type in

plugins and here I can be able to confirm if I have this plugin installed.

So if I were to head over to the install tab and if I were to go down, you can see that the third one here is Superpowers. And that's the plugin here

Superpowers. And that's the plugin here that I have just installed. And if I were to enter this, you can see that it gives you a description of what this plugin does. So here is the description

plugin does. So here is the description and also the commands that we can use, the agents, and also the skills. And

here if we ever want to disable this or uninstall, we can simply do so as well.

So once we have everything is installed here for Superpowers, what we're going to do now is we're going to see how we can use it. So first I'm going to clear the context right here. So right here you can see if we were to use it, the only way we can use it is basically do

the slash command right here for typing Superpowers. And you can see that we can

Superpowers. And you can see that we can be able to write plan, brainstorm, execute plan. But the problem here is

execute plan. But the problem here is that those commands right here are deprecated, which means that they're outdated. We should not be able to use

outdated. We should not be able to use that for Superpowers. But instead of that, we should just trigger the skills that come with for Superpowers instead.

So simply I'm just going to use the brainstorm skills that we have for Superpowers. You can see that it's part

Superpowers. You can see that it's part of the Superpower right here. So now

what I can do here is basically using the brainstorm skill here to brainstorm anything that we want to add onto this project, right? Maybe it could be a

project, right? Maybe it could be a feature, maybe it could be a improvement, right? Anything that you

improvement, right? Anything that you want to add on this project, we can be able to start brainstorming this. So now

here you can see I have an application that I built called Bookworm.ai. And

what essentially this application does here is to automate the booking process for businesses. And here you can see one

for businesses. And here you can see one of the feature that I have is managing receipts. So user upload bunch of

receipts. So user upload bunch of receipts like images, all kinds of files onto this platform, it will basically using OCR here to extract those informations, right? So if you were to

informations, right? So if you were to head over here, you can see I can click on view details and I can be able to see the receipts on the left and also the values that we have extracted on the right. So the feature that I want to add

right. So the feature that I want to add here is basically adding ability to resync any Google Drive folders that user upload and be able to have the process here to re-upload any new files from those Google Drive folders onto the

receipts page right here or even the transaction page that we have here as well. So for example, if user upload

well. So for example, if user upload like new bank statements or new receipts onto a Google Drive folder, we should be able to have ability here to resync these folders that user have selected.

So here you can see that's exactly what I'm going to do. And to make the process here simple, you can see here that I have crafted a Jira ticket on exactly what's the feature scope on how we're going to do this. For example, the context for the UX decisions, the scope,

the entire sync flow, as well as some edge cases that we should think about before we're going to add this feature.

So then what I'm going to do here is just going to copy this link for this Jira ticket, head over to Claude Code and basically paste the entire Jira ticket calling the brainstorm skill. And

you can see that it's going to trigger that first by understanding what the ticket is, explore the existing cloud import architecture. And then what it

import architecture. And then what it proposed me here is that it will basically allow me to show the mockups in the browser so that we can be able to walk through designs as we start to do the brainstorming. So for example, one

the brainstorming. So for example, one of the question that it asked me for the sync button here is how we should display this visually. And what it essentially does here is you can see it's going to create a HTML page and here you can see it gives you a mockup

on which option we're going to select.

So if I were to head over to browser here, open that port, you can see that I have proposed three options on which UI directions we should go for for this particular feature. So you can see we

particular feature. So you can see we can have a separate private button, icon only, or a drop-down split. So I choose the drop-down split here for the import button here. You can see that we have

button here. You can see that we have this option right here. Okay? So in this case, I chose C right here. And then

here you can see it continuously to ask me additional questions. So after it has done the brainstorming, here you can see it has created spec inside of the docs folder. And here you can see if I were

folder. And here you can see if I were to open this, this is the entire spec.

So first it has the title and also the context. And furthermore, we have our

context. And furthermore, we have our design decisions as well as we have the entire architecture layouts. So how user is going to use it, right? So user click on the sync connected folder button here, it will basically show the stage

one for the folder list on what are the folder we have connected. Then it shows the file preview on what are the files we're going to import either from receipts or statements here. But then

we're going to close this and we'll basically just going to activate the job indicator alerts. So here are the API

indicator alerts. So here are the API routes we're going to create, right? So

these are the query parameters, this is the API routes. And then we also have the connected folder scan as well as the new components that we're going to add in this feature. And also here you can see it has found some edge cases and also how we're going to handle them.

Furthermore, we also have the acceptance criteria. So after we review this,

criteria. So after we review this, everything looks good, we're going to approve this and it's going to start to design the implementation plan. So here

you can see that's exactly what I told it to do, to basically transition to the implementation plan. And right now you

implementation plan. And right now you can see it's going to break this entire plan into a list of tasks that we're going to execute for this entire plan.

And it is doing that by triggering the Superpowers writing plan skill to basically converting the spec into a full implementation plans. And as result here, you can see after we have the entire implementation plan created, you can see we can find it inside of our

docs folder. If I were to open this,

docs folder. If I were to open this, this is what the entire implementation plan look like. So you can see we have a task one. And here you can see for this

task one. And here you can see for this entire implementation plan I give you a specific what to modify and what to do.

Right? So, here you can see this is the test file that we're going to add. And

also this is the implementation we're going to add for this step. Right? So,

here you can see this is the big task.

So, task one is to add in this to the Google Drive adapter. And you can see that for each task here we're breaking down to different steps. And for each step here we have a checkbox on exactly what to do. Right? So, you can see we can be able to review this before we're

going to execute this. So, it's going to run the test to verify it fails. So, the

expectation here is basically having to fail. And then we're going to implement

fail. And then we're going to implement it. Then we're going to have it to see

it. Then we're going to have it to see the test here to verify and pass. Right?

So, we're going to do the testing first before we're going to do the implementation. And you can see here

implementation. And you can see here that after it has done the test, it's also going to commit the changes as we go. So, you can see that we can be able

go. So, you can see that we can be able to review this further for all the steps that we have here. But once we've done so, if we want to implement this, we have two options. So, you can see here that total for implementation plan here

we're breaking down into 11 tasks. And

what we can do here is that we can be able to execute in two options. One is

we can be able to execute this in using the sub agent approach. We're going to dispatch a fresh sub agent here per task and review this between task fast iterations. Or what we can do here is we

iterations. Or what we can do here is we can do a inline execution, which we used to call the parallel execution, which means that it's going to execute tasks in the sessions using the executing plan here batch execution with checkpoints.

For our case here I'm just going to go with the recommendation approach because for each task here you can see it's going to trigger a sub agent here with a fresh context window per task so that we can be able to review between task with

fast iterations so that we know exactly what happened here. So, in this case I'm going to choose the option one here and just going to use the sub agent driven approach. And here you can see it's

approach. And here you can see it's asking me if you want to create a work tree inside of the project level or in the global location. So, in this case I choose the project level. So, in this case I choose number one. And then here you can see it's going to create that

inside of the current project that we have. And then what happened here you

have. And then what happened here you can see it's going to trigger different sub agents to execute these task lists.

So, right here you can see we have task one here is all complete and it's currently starting working on the task two. And then here you can see after all

two. And then here you can see after all the 11 tasks here are completed, now it's currently running the final code review here across the entire implementation. So, right here you can

implementation. So, right here you can see it's going to trigger the code review or skill from superpowers here to do the full implementation review. So,

right here you can see it has done some code reviews. It has found some critical

code reviews. It has found some critical and important issues and it's going to do the fixes here. So, for example the stale credits, the confirmed selections, and also some misleading data here for the metadata on the multi folder jobs.

And then here you can see it's going to dispatch a fix agent here to fix those two code issues that we have found. So,

you can clearly see that this matter if it's implementations or fixing things, it's going to delegate the job here to a sub agent here to do this. So, after you can see it's done, you can see this is the summary on what has been done in

this work tree. And this is what it has built. And here is the verification as

built. And here is the verification as well as the review notes that it has left after it has done the code review.

So, in this case I'm going to do a manual smoke test first before we're going to commit this and merge it to main branch. So, now finally if we want

main branch. So, now finally if we want to test this feature here you can see I've navigated to the receipts page. And

right here you can see I have a bunch of receipts uploaded with a Google Drive folder. So, I'm simply just going to

folder. So, I'm simply just going to click on the three dots right here.

Click on the sync connected folders. You

can see that this is the entire folder that we're connected with all the receipts that we have. So, if I were to click on the sync one folder, you can see we have nothing. You can see all folders here are all up to dates because

I haven't made any changes or haven't add any files onto that folder. So, in

this case to test this I have navigated to Google Drive right here. I'm going to select these files that we have and we're just going to add these new files here into this Google Drive folder. And

once we have those files here moved over into this Google Drive folder. And now

if I were to head over to bookero.ai for the application, click on the three dots again, sync for the connected folder.

And here if I were to click on the sync one folder right here, you can see that these files here are all picked up and are detected so that we can be able to sync it for the Google Drive folder. So,

now what I'm going to do here is I'm going to click on the import six files.

And now you can see all six files here are successfully imported into the receipts page. So, you can see that the

receipts page. So, you can see that the feature here is verified and is fully working on our application. So, there

you have it guys. That's exactly how you can use this agentic skill framework superpowers to basically enforce your AI agent here much more accurate. So, with

that being said, if you do find value in this video, please make sure to like this video. And of course make sure to

this video. And of course make sure to subscribe to this channel because there's going to be content coming out very soon on how we can be able to improve our AI agents coding accuracy, which is coming soon in this week. And

of course if you're looking to check out all the spectrum development frameworks that I did on this channel, make sure to check out this playlist right here, spectrum developments on our channel.

So, with that being said, that's pretty much it for this video. And if you do find value in this video, please make sure to like this video. Consider to

subscribe. And with that being said, I'll see you in the next one.