Summary
Notes
Transcript
Intro
0:00 · So, this one plugin has genuinely 10xed my cloud code over the past couple months as I’ve been playing around with it. So, in today’s video, I’m going to go over absolutely everything that you need to know about this, what it is, how it works, how you set them up, all this kind of stuff. And I’m not just going to be talking. I’m going to be showing you guys real comparisons, real results, as you can see here, and showing you just how it’s actually been able to save me tokens and increase the quality of my outputs. So, I don’t want to waste any time. I want to dig into all of this. 0:23 · So, let’s just get straight into the video. So the plugin that we’re looking at today is called superpowers and it very much does give cloud code superpowers. You can see right here it says an agentic skills framework and software development methodology that really works. So let’s just get straight into it. This whole doc is going to be attached for free in my free school community. So I’m not going to read every single word that’s on here. So if you want to grab it, head over there and get it for free. But I’m going to go through what I think is important. So what is it? Superpowers is a free open source plugin by Jesse Vincent that installs a set of skills into your cloud code. So instead of letting cloud code just start coding when you ask it to build something, it goes through a super super disciplined set of phases. Now we all know in cloud code how important it is to plan before you start, you know, building anything. But this is way more than just helping it with planning. This is helping it with the actual implementation as well. So the phases are basically clarify, design, plan, code, and then verify. So think of this like hiring a developer who does proper discovery before touching anything and building anything versus one who just takes your request and just starts writing code immediately. Okay. So how does this work? There’s a master skill called using superpowers. And this one fires at the start of every conversation and sort of acts like a dispatcher. So before it starts doing anything, it looks at all of the other superpower skills, which as you can see there are 14, and it decides which ones to use. So it’s literally like you install the plugin, which takes 5 seconds, and then you don’t have to even think about it.
How It Works & The 14 Skills
1:44 · It just runs in the background and it helps you out with everything. So now you’re asking, what are the 14 skills? 1:49 · We’ve got a couple different types of buckets of skills. We’ve got the orchestrator, which is using superpowers like we talked about. We have the design phase, which is a brainstorming skill. 1:58 · And if we go back into that prompt that was running earlier, you can see that it started off by using the superpowers brainstorming skill in order to get a good understanding of what we need to do. And now it’s come down here and it says, “Okay, let me set up the brainstorming checklist.” And you can see there are so many different to-dos compared to just a regular plan. It has to offer a visual companion which is super cool. Some of what we’re working on might be easier to explain if I can show you in a web browser. How many times have you been trying to build something and cloud code does it and then you’re like this is not what I meant at all. So what brainstorming does and what superpowers does is it actually puts it into a dashboard for you to look at and says hey do you want option A, B or C? Like which one actually resonates with you the most? Now keep in mind this feature is still new and it can be token intensive. I’m going to talk a lot more about tokens later, but I think that it’s really cool. So, forgive me. I’m going to keep jumping back and forth between that example as well as what’s going on in this doc, but hopefully you guys are able to follow along. So, then we have the planning phase. So, it starts to write out the plan. It creates hyperdetailed implementation plans where every task gets about 2 to 5 minutes of work with exact file paths. It tests out code blocks and it saves the plan so that you can go back to it if you need. 2:59 · Then, we have the execution phase, which is really cool because like I said, this goes beyond just the, you know, planning. And yeah, that little squiggly blue line was going to bother me the whole video. So, we have one called executing plans, which walks through task by task with safety stops. It stops immediately on blockers rather than guessing. We have sub aent-driven development, which is really cool. It basically dispatches fresh sub aents for each task. And they have reviews. And then there’s another one called dispatching parallel agents. When superpowers realizes that you have independent problems that don’t have to happen sequentially, it just spins up parallel agents to work on each of those. Then we have quality gates. So this one is testdriven development which kind of gets referred to as TDD which means it’s first going to write the tests, watch it fail and then write the minimum code to make sure that it’s actually passing. We have systematic debugging which is a four-phase debugging approach, investigating the root cause, analyzing problems, forming hypothesis, and then implementing a fix. 3:51 · We have verification before completion. 3:52 · And all of this stuff now starts to get a little bit more technical. So this is where I’m going to stop and I’m going to let you go read the doc if you want to. 3:58 · Once again, it’s free. But the meta skill, which is called writing skills, teaches Claude how to create new superpower skills using the test-driven deployment principles or sorry, test-driven development, where you would write a failing test scenario first, then write a skill to make it pass, and then you close the loophole. So, you can basically really customize this superpower system and extend it. Okay, so I wanted to jump back to this example. So, it said, okay, the visual companion is running, but first, let me start by asking you some questions. So, here’s what I’ve gathered so far, and here’s what you want, but I need to ask you questions. So, it didn’t just ask me one. It asked me 1 2 3 4 five questions.
Live Brainstorming Demo
4:33 · And these questions were really, really good. They got a lot of the information out of my head as far as what I’m imagining here without me having to communicate it because it realized there might be gaps and it needed to get those questions answered. So, here is the local host. Let me open this up. Now, we can see three approaches for the knowledge explorer. And this is basically it showing us what we’re looking for. Okay. Okay, now this isn’t exactly the demo that I thought I was going to show you. Sometimes it shows you like actual like elements or, you know, visual design patterns. So, I’ll do that again in another example later, but this just proves to you that it’s able to show you things in a different way and try to really make sure it understands what you want before it moves on. And we all know how important that step is when it comes to doing stuff with cloud code or just any agentic coding tool for that matter. So, we could have an interactive force graph. We could have a searchable card grid or we could have a graph hero plus card details. It gives us pros and cons for each of these. And now we’d be able to click on this and our agent in cloud code would see which one we chose and it could keep going for us. You can see here that it’s recommending this approach. So, I’m just going to go ahead and click on that and say sure, I’m good with that. So, let’s keep on going down through the dock here. Do they invoke automatically? Yes. Um, basically the always automatic one is the superpowers. 5:42 · The brainstorming one’s pretty much always going to fire when it comes to planning. And then when you get to places where you need to actually start to build, it will basically invoke one of those development ones. So if we come back up here, it’ll sometimes just execute this one automatically. 5:55 · Sometimes it’ll grab this one automatically or this one. And it kind of just depends on the situation. But basically the moral of the story here is yes, it is kind of a set it and forget it type of thing. Unless you have some super super situational ones like systematic debugging or test-driven development or if you want to do things like reviews. But the key insight is that you don’t need to memorize each of these skills. You could ask it about them or you could also just go about your regular planning and it should invoke them at the right moments. You can also say at the end of your prompt something like, “Hey, make sure you’re using any of the superpower skills that might be relevant here just in case you want some extra insurance.” The full chain is basically you send off a request, superpowers picks one, it goes through the different skills, and then it starts executing. So, like I said, you don’t have to think about it. All right. So, hopping back to this example. 6:38 · Now that we’ve chosen sort of like the the way that we’re looking to build this, it gives us an example. So, I’m going to open this up. And this is really good because let’s say it was way off on this. This is not what we wanted to see or build at all. This is where we would correct it. Before it burns all of those tokens, giving us something that we don’t actually want. So, you can see it’s imagining this dashboard with tools, techniques, concepts. We would have the ability to search through them. 6:59 · And then it shows that we could hover on a node, highlight it. We could click a node, drag a node, search bar, filter chips, node sizes, edge thickness. So, at this point, let’s say I’m fully aligned with this. I would go back into the workflow and I would say yes, or I would say no. Now, the one thing I would say is that this does look a little bit cheap. So, I might come back into here and say yes, this overall looks good. I like the idea. I do think that it looks a little bit cheap though, and I want it to look a little bit more modern. I want it to feel polished and dark mode. So, while that’s running, I want to show you guys another example. So, here’s a project where I’m asking it to build us a site. You can see that it says, “Okay, some of what we’re working on might be easier to explain if I can show it to you in a web browser. I can put together mock-ups, diagrams, comparisons. Do you want to do this?” So, let’s go ahead and say yes over here and see if it gives us a different type of visual. By the way, sorry if you guys don’t like looking at the terminal version compared to when we’re actually using like the VS Code extension. I know the VS Code extension looks a little bit more normal, but trust me, start using the terminal. It’s so much better. You get way more visibility, especially when you set up that status line like you saw I have.
Building a Website with Superpowers
8:04 · It’s just better. But once again, before it opens up this local host, we have to answer some clarifying questions. And this is once again going to help make sure that it’s aligned with us before it spends more tokens. So, I’m just going to go ahead and answer these and then I’ll show you guys the dashboard that it spins up for us. Okay, so now it has pushed three different concepts to this local host. Let’s open this up and see. 8:23 · So, this is what I’m talking about. You guys can see that it’s going to give us an example of the the feel and the vibe and the color scheme of the website before we actually go off and create it. 8:32 · Now, something obviously is weird going on over here. Not sure what that is, but we can see we we could either get a cinematic full bleed hero, a split screen hero, or centered text and floating video. So, now I could give it an answer over here with which one I like most. And now it’s going to keep asking us questions. It’s probably going to give us a few more different elements. When I was building a different website with this, it was literally pulling up a dashboard for the different type of buttons and the different type of menu options and the different types of cards. Now, yes, I know that these examples I’m showing you are more of like a visual one, but this is so so good at actually helping you build like reports or build automations because of the clarifying questions that it asks and also because of the execution. Because I know a lot of people are going to ask like, okay, well, what’s the difference between using this and using like um ultra plan, which is one of the other features that Cloud Code just dropped. But ultra plan just helps you with the planning. Like I even think that the superpowers brainstorming might be better than ultra plan when it comes to the planning. But then if you do ultra plan then it’s basically just you’re on your own again once you start implementing that plan. 9:30 · But superpowers is with you all the way through. But look as you can see again it popped up another local host and now it’s giving us even more things to choose from. Okay. And I know that I’m jumping all over the place, but this is going back to the original mind map sort of one and it changed some things and now we would get to click into it, review it again, and finally make sure we like it before we send it off. So anyways, I’m going to stop jumping around for a little bit. Let’s talk about how you actually install this because it is super super simple. I’m going to real quick open up a new cloud session in my VS Code terminal here. And you can see that all I’m going to have to do is go in here and do plugin. And you can see that I’ve already got this installed right here, the superpowers plugin. Now, here is the GitHub repository. I’ll leave a link to this down in the description, but it’s so simple. All you have to actually do is you come down here and you install the plugin from the Cloud Code marketplace.
How to Install It
10:16 · So, you could just copy this line right here. I’m going to go back into that VS Code terminal. Paste that in. And it’s going to say that I’ve already got that installed globally, but that’s exactly how you would install it. It would then ask you, do you want this on your per project level, on your user level? I would definitely install this globally on the user level because then you don’t have to worry about each project saying, oh shoot, I need to grab the superpower skill. It just works all the time any cloud code project. So that’s what I would recommend doing. Now the thing about this is I thought that it would be using more tokens because it’s doing deeper dives and sometimes that is the case. But if you think about it like this when you are doing the planning phase and you know brainstorming you want it to use more tokens if it can get it right quicker because otherwise in the long run you’re using more tokens if you have to do four or five revisions rather than taking more time and more tokens planning and then getting it right. So then I decided to run these experiments where I did, you know, different runs with superpowers and without superpowers. We did 12 total runs. We did a variety of um types of tasks, simple, medium, and complex. And it’s really interesting. Overall, we found that we got about a 9% cost savings, about 14% fewer total tokens, and this is what it looks like for simple with superpowers was using more tokens. And that actually makes sense because when it’s so simple, you don’t need to overengineer and you don’t need all those questions if it’s a very very, you know, straightforward request. But then when we got up to more medium and complex tasks, we saw that using superpowers actually gave us cheaper runs and less tokens. Now, keep in mind when I say complex, I’m not saying like, you know, it coded for 5 hours straight and it built us an entire SAS product. I meant, you know, relatively complex. And as you get more and more complex, I’m assuming that you start to see this trend where the superpowers does save you more time and tokens. The other thing to keep in mind here is superpowers is kind of meant to be a bit of a human in the loop and an iterative thing because it asks you so many questions. But when I did superpowers here, I had Cloud Code automate this entire experiment. It ran for a few hours and what ended up happening is I wasn’t in the loop at all. So some of these results should be taken with a grain of salt because of that. But you can see over here the average total tokens is definitely much more without superpowers. You can see down here we had average turns. So API round trips and once again with superpowers we had less. And then the average duration kind of varied. I would say none of this is super super conclusive enough for me to make a definitive statement. But I do think that this is important and just kind of interesting to look at. And then of course we have the actual quality. So it did a review on like the endpoints and the correctness of the code and things like that. And you can see that overall with superpowers we are getting a much better quality result when it comes to correctness, code structure, test coverage, error handling. And the only time that it seems here that without superpowers beat superpowers is robustness, which I’m not sure exactly how it evaluated that. That might be a little bit subjective, but overall the green pentagon takes up a larger area than the red pentagon. So I would take the green over red every day, especially if it’s saving us tokens. And as I was editing this video, I had a feeling you guys might be curious about how I actually got these results here and how I ran this experiment automated with cloud code. So I came in here and I said, “Hey, just give me a quick explanation of what we actually just did.” And it basically just created these different scripts for me that called Cloud Code, one of them with superpowers and one of them without. And then it just ran them through all these different tasks. And that is actually going on right here in this bash terminal that I opened up. And I ran the script. And then you can see it started running this experiment and it capped the budget at $2 per run for each of the runs. So here was run one out of 12. This one was without superpowers. We had the cost, we had the input tokens, we had the cache read, all this kind of stuff, the API duration.
Token & Cost Comparison
13:52 · And then as we get more complex, you can see that the cost and the tokens start to go up and go up. But that’s how I did it. It was super super simple. So basically just a real quick breakdown. 14:02 · We ran 12 cloud code sessions. Six with superpowers, six without. same prompts, same model, Opus 4.6 and zero human interaction. We had simple, we had medium, and we had complex. Once again, I just wanted to stress that this is not conclusive. 12 runs across three small tasks is just directional data, not proof. But what’s important is that most people probably think that using a skill like this has a massive token overhead, but it’s actually not that way. The value isn’t in the extra steps, it’s in preventing expensive retries and backtracking. Consistency matters. The without superpowers runs had two to three times the variance in token usage, while the with superpowers runs were much tighter. Code structure and error handling were measurably better with superpowers on the medium task. Domain knowledge and spec compliance were not improved. That’s still on the model. And for simple tasks, just go ahead and skip it. The 8% overhead doesn’t really do much with the superpowers. That is going to do it for today. If you guys do want to dig into this doc a little bit more, you can get that for completely free in my free school community. The link for that is down in the description and you’ll be able to find it in here when you find this post. Just go look at all my YouTube resources in there. But if you guys enjoyed the video or you learned something new, please give it a like. It helps me out a ton. And as always, I appreciate you guys making it to the end of the video. I’ll see you on the next one. Thanks everyone.