I really love Claude Code. The coding agent that Anthropic has built gives you so much customization that it's crazy, but I keep finding new custom ways to make it even better. Today, I want to show you two free tools that supercharge Claude Code and may change how you use it. Both tools are completely free, and I think you're going to love what they can do. Let's jump right in. You know that Claude Code gives you an extreme level of customization. It has these custom commands and you can even modify the claw.md file to turn it into an agent specialized for your specific task. You can create workflows, but these workflows need to be tested and take a lot of time to create by yourself, especially if you're a Vibe coder who doesn't know the full development process. In that case, you won't be able to make them very well. This is where the first tool I want to show you comes in. It's a configuration framework, as the author calls it. And the funny thing is, it's even called Super Cloud. Basically, it allows Claude code to gain a new set of abilities and skills that take it to the next level. And it'll be clear what I mean in just a minute. Now, what does it give you? It provides 18 structured commands and they're all focused on one thing. Then there are flags. When used with the commands, the flags give you additional functionality. For example, it has this persona flag and you can choose between nine of them. They all represent a specific part of the development life cycle. That in itself is an amazing feature. Like if you wanted to build you a landing page or a UI component, you can implement the front-end persona for that. And there are personas for literally everything for architecture planning, for backend, for security, and for analyzing different problems. It's really crazy. Now, how does this work? I opened it up and took a look. On the back end, the developer has written configuration files in the form of custom commands and even a set of rules and configured workflows in the form of YAML files. So, in a way, it's all just prompting, but that's how you program AI agents and models. For example, in the front-end persona, it gives Claude a really robust workflow that's super beneficial for creating UI. And the workflows that the author has written give Claude code the context on how real developers go through the development cycle. So, it has context for the whole development cycle, and it's all written out. You just need to learn how to use the relevant tags at the relevant time. And not only that, it actually takes advantage of MCPs as well. You can see we have the context 7 MCP which gets external documentation, the sequential MCP which basically allows multi-step reasoning and then the magic UI MCP and Puppeteer MCP as well which are really great. Also, if I open the claw.md file, the whole configuration has been set up on how to actually use everything. So, this is why it's called super claude. To give you an example of how the slash commands and the flags are used, if I scroll down, you can see that we have workflows like the /build command followed by flags like react, which means to use react, magic, which means to use the magic mcp, and watch, which means it will monitor development continuously. You can also see the persona has been set with the persona front-end flag. Now, all of this is super powerful, but I found one problem the author really should have taken care of, and that's that there's no proper way to learn to use this. When I installed it and watched other videos from YouTubers, they all just demoed it. I basically found no proper guide on how to actually use it. That creates a bit of a problem because there's a learning curve with this tool given the amount of flags and tools in this. Even if you could figure it out, you'd still need to learn the commands, the available personas, and where to add the different MCPS. But not to worry, I found a workaround for this problem. I opened this folder with the configuration in cursor. I'll show you how I installed it later in the video, but right now you just need to know that the configuration was installed in this folder. I used this command and it opened up in cursor. Now going back to cursor, since all the commands were there, what I did was ask cursor to go ahead read all the configuration files, all of them, and make me a comprehensive guide on how to use them with claude and when and where. Those are the important parts. It read through all of it and Cursor's new search tool is really, really amazing. They've posted some results on how much better it is at finding stuff and it's using that model. It found everything super easily, made the connections between files and gave me a really cool configuration guide. Now, I didn't want to learn all the commands and flags by myself. Since it had generated the full documentation, I thought, why not create documentation that I can feed to an AI agent in clawed code or cursor? That way the agent can tell me the best way to use these commands for my specific use case. So I told cursor to put everything into the docs.md file which you can see right here. It created a comprehensive file of around 450 words. Once I had this documentation ready, I gave it a task. I said I wanted to build a next.js app with 11 Labs API integration and the open AI API. The idea was to create a story generator that also has a narration feature. I asked cursor what workflow I should follow based on the framework. Now due to some limitations I couldn't set up the magic mcp and puppeteer mcp right away. So I asked cursor not to use them in the flags. You still have to configure the mcps yourself in claude code. The framework simply tells you where they belong in each workflow. But using the right commands claude knows when to apply each tool which is still incredibly powerful. Here's what happened next. Cursor gave me the commands but it was missing the prompts. I realized cursor didn't know it needed to include both the commands and prompts together for clawed code. So I told it to output the slash commands, flags, and prompts in a structured way. And it delivered exactly that. Phase 1, phase 2, phase 3, all the way to phase 11 for deployment. A complete project outline. Remember this framework includes commands and workflows for every step of the developer cycle. And now cursor knows all of it. The beauty is it's not limited to cursor. You can copy the documentation, feed it to Claude code, and Claude will generate structured workflows for you. If you've seen my video on context engineering, you know these workflows are evolving quickly. People once thought non-developers couldn't build applications. But development knowledge can be embedded into frameworks like this and shared openly. Now, anyone, even Vibe coders with little industry experience, can follow a guided workflow written by someone who does know the process. And speaking of sharing, I'll leave this documentation that cursor created for me in the description below so you can use it for yourself as well. So back to the demonstration. Phase one is analysis and research. I'll copy the command with its flags and switch to my terminal. When I open the slash menu in Claude, you'll see all the extra commands from this framework listed above Claude's original commands. Those start with add directory. I'll paste the command and its flags here, then copy the accompanying prompt. You can customize that prompt if cursor added extra wording. It's all just context for the model and it will output structured commands automatically. No need to memorize everything. Learning it all would take way too much time. When I hit enter, you'll see Claude start to run. If I scroll up, you can watch the workflow kick in. Claude recognizes this as a research task, knows which tools to use, like context 7 for external documentation, then creates to-dos. It's using sequential MCP. Asks my permission to call the tool and proceeds. It's all just a workflow, nothing fundamentally new. But these workflows are packaged for you by the framework's author. As I mentioned earlier, you don't need to learn every detail. Just create the documentation and go. You can see the entire development cycle spelled out right here, and you can do plenty of creative things with it. Again, I'll include the complete documentation in the description, so you can skip the setup process and start using these workflows immediately. Oh, and if you're enjoying the content we're making, I'd really appreciate it if you hit that subscribe button. We're also testing out channel memberships. Launch the first tier as a test, and 93 people have joined so far. The support's been incredible, so we're thinking about launching additional tiers. Right now, members get priority replies to their comments. Perfect if you need feedback or have questions. Now, what if you could access Claude Code from anywhere, like any device? That's where the second tool comes in. It's essentially a web-based GUI for Claude Code. I previously covered another GUI called Claudia in an earlier video. The difference is that Claudia was more complex and featurerich with a superior interface. This tool offers something entirely different, browser accessibility from any device. So, Claude Code and my projects could be running on my computer while I'm actually using Claude Code through a browser on my mobile. That's incredibly powerful and the setup is surprisingly simple. You just copy this script for the installation. Also, don't worry about the super cloud installation. I'll cover that at the end. Now, this is basically an executable app. Navigate to where you want it installed. For example, I'm in the claude web UI folder where I've placed the executable. Run the script. It handles everything for you. Paste it in the correct location and you're ready to launch it. There are different startup methods. The default command launches it on localhost 8080 which only runs locally on your computer. But this lacks the network capabilities I'm describing. To make it accessible from anywhere on your network, use this command instead. Let me copy this. Go back to terminal and paste it. There's a small documentation error. The full executable name isn't shown. So use the ls command like I did to correct it. You'll see the proper executable name and it'll launch. Now how do you connect from other devices? It's running on the network. So to connect from different devices, you need your IP address for the current network. You'll need a separate command for this. You can ask chatgpt or use the one I used here. Warp provided it and it gave me my IP address. Once you have this IP address, return to where the web UI is running. Copy the port number. Open your browser. This works on any device, mobile, another computer. They just need to be on the same network. I'm demonstrating on my own computer, but it works on any device connected to the same network via browser. Paste it in, remove the zeros, and add your IP address. And there's your web UI. It's quite basic, nothing fancy. You can create new directories or select existing projects. In existing projects, you can chat with Claude Code and it'll start working. You can see it's initialized here. The amazing part is cross device accessibility. I use this to run Claude code from anywhere in the house. I just pull it up on my phone and use clawed code directly from there. It's genuinely useful and I thought it was worth sharing. Beyond that, it doesn't have special features. I even tried/comands, but those don't work. So, unfortunately, the supercloud configuration won't function here. Still, it's a pretty cool tool you can utilize. Now, for the installation of supercloud installed, you need to head over to its GitHub repo where you'll find the installer. Simply copy these lines and paste them wherever you want the framework downloaded. This will clone the repository to your system. Once that's done, navigate into the folder and you'll see the install script. This is what handles everything for us. Now you've got two installation options. The first is global installation. This means every instance of claude code will have access to super cloud. The second option is project specific installation. You'll have to use this command instead and you'll remove this part here and replace it with your actual folder path such as you can see that I have entered. Here's the key thing to remember. Whatever folder you're targeting, you need to add.claude to the end of the path, just like I've added it here. The configuration files need to be inside that do.claude folder. If you're going with the global option, just make sure to clear out your existing.cloud folder first, then run the installation script. That brings us to the end of this video. If you'd like to support the channel and help us keep making videos like this, you can do so by using the super thanks button below. As always, thank you for watching and I'll see you in the next one.