## Introduction & Background [00:00] There have been many amazing frameworks built on top of Claude code and they exist because of one incredible feature, custom commands. This feature essentially transformed Claude Code into a programmable agent that could take on different roles. In one of our previous videos, we featured a particularly well-built framework that could turn Claude Code into a multi-agent coding team. Each member of this coding team had their own custom commands tailored to their specific role. But now everything is about to change. Claude Code just released a groundbreaking new feature that allows us to create different versions of Claude Code, each specialized for specific tasks. This is truly a game-changing feature that will revolutionize how developers work with ## What's New [00:40] AI coding assistance. The feature Claude just released is called sub aents. As I mentioned earlier, it allows you to create specialized sub aents in claude code for specific tasks. To understand their potential, consider the BMAD workflow and superclaw workflows we've showcased on the channel. These workflows feature different roles executed through Claude's custom commands. Now, those same custom commands can evolve into dedicated agents with deeper specialization. This means you can create a complete development team within Claude Code. You might have a project manager, a scrum manager, a developer, a UI expert, and even a QA engineer who properly tests code with specialized knowledge. Each agent brings focused expertise to their specific role. By combining these sub aents, you can create incredibly powerful workflows that go far beyond simple automation. There's a compelling reason why sub aents outperform the basic claude commands people have been implementing in claude code frameworks. ## Quick Break [01:36] Now, a quick break to tell you about today's sponsor, Test Sprite, an AI testing platform built to fix your AI generated code. But they just released a game-changing feature, their MCP server. Test sprite MCP server connects directly to your IDE's AI coding agent tools like cursor and other MCP compatible IDE such as wind surf and claude code test sprite MCP starts by understanding your product goals by reading your repo and prompts. It then builds smart test plans by parsing product specs or natural language intent and works with your coding agent to validate the existing codebase automatically. It generates standardized PRDS, creates test plans, and produces test cases and test code without any manual input. From there, it runs full front-end and back-end tests in the cloud, diagnoses failures, and sends structured reports back to your AI coder, telling it exactly what's broken or missing. Compared to the 40% accuracy of typical Vibe coding tools, Test Sprite MCP boosts accuracy to above 90%. All without prompts or manual effort. That's why it's trending in the developer community and recently hit number one on Product Hunt. Check out the link in the description to try test sprite MCP for free. Now, back to the ## Getting Started [02:50] video. Before diving deep into sub agents and creating powerful workflows, let me walk you through this new feature and its setup options. I'll initialize Claude and enter the slash command, then type out agents. You'll notice this new slash command for managing agent configuration. When I enter it, there are no existing agents. So, it presents the option to create a new one. Creating a project level agent displays it in your project list. For instance, I created a UI creator which now appears under project agents. Press enter to create a new agent. Two options appear. Create a personal agent which works globally across all cloud sessions or a project agent limited to the current project. Let's continue with the project agent. The next step involves choosing your creation method. While manual configuration is available, Claude recommends starting with an autogenerated agent based on your needs. This provides a solid foundation you can customize later. Select generate with Claude and provide a general description of your agents purpose. For a UI expert agent, you might use this prompt. The agent should create attractive UIs regardless of content incorporating best practices for visual appeal. The agent needs context about color palettes, element arrangement, and user experience principles. For mobile UI prototypes, it should include platform specific guidelines. After entering your description, Claude generates the agent configuration. Next comes tool selection. All tools are selected by default, but you should only grant necessary ones. This improves both security and performance by maintaining focus. For our UI agent, I'll deselect MCP tools since they're not needed. Continue to the naming step where Claude suggests UI design expert. Choose a color for your agent. Then review the preview. Press S to save. Your new UI design expert now appears under project agents. Opening your project in cursor reveals a Claude folder containing your agents markdown file. This file includes the complete system prompt and specifications. Claude has configured this agent to create visually appealing interfaces across any text stack. However, for optimal performance, consider creating specialized agents for specific tasks. A dedicated mobile prototype agent would perform better than a general UI agent. You might ## Key Differences [05:00] wonder how these sub agents differ from the custom commands we've been using. Previous videos and many frameworks featured on the channel have shown how specialized custom commands orchestrate workflows effectively. While custom commands have served us well, the key difference with sub aents lies in context management. Sub aents initialize with their own context window completely separate from the main conversation. When your main agent activates a sub aent, that sub aent launches in its own isolated environment. Let me illustrate with this UI design agent example. It launched independently, used one tool, consumed 30.7K tokens and ran for approximately 2 minutes. Throughout this entire process, its context window remained entirely separate from the main agent. Once sub agents complete their tasks, they send a concise summary back to the main agent reporting what they accomplished. This architecture ensures each agent retains only the context it needs, preventing your main context window from becoming cluttered with irrelevant information. The result is a cleaner, more efficient system where specialized agents handle specific tasks without overwhelming the primary conversation thread. Previously, I ## Practical Example [06:08] implemented a workflow using the Shad CN UI MCP server, which proved really valuable for creating user interfaces. The MCP server provided direct context of the Shad CN elements to the AI agent, enabling it to build quality interfaces with everything properly connected and configured. What makes these sub aents particularly powerful is how they create fresh instances with empty context windows. This gives us a significant advantage when sending requests to the SHAD CN UI agent. It starts with a clean slate which results in superior UI creation. To demonstrate this, I've prepared a comprehensive prompt containing all rules from my previous video along with the exact workflow instructions. This enables the agent to execute the entire process autonomously. Here's how it works. The agent first receives a file reference containing either a structure specification or a creation prompt. I've included my Shad CN MCP rules which mandate that all Shad CNN components must route through the MCP server without exceptions. The prompt covers planning stage requirements, implementation guidelines, and the complete UI implementation workflow. Don't worry if you're unfamiliar with this process. Everything will become clear as we progress through the demonstration. Let me copy this complete prompt and return to my terminal. In Claude, I'll create a new project level agent using the generate with Claude option. I'll paste my detailed prompt that explains the workflow mechanics and agent responsibilities. Claude will now generate the agent configuration based on our specifications. For tools, we need read and edit capabilities plus MCP servers. We'll disable web search tools since they're unnecessary for this task. The agent only needs to reference available Shad CN UI components. Claude has named it Shad CN UI builder. After selecting a color and pressing S to save, our new Shad CN UI builder appears in the project agents list, ready for use. I've now instructed Claude to ## Building Something Real [08:00] implement the app that I referenced further ahead in the prompt specifically using Nex.js with shad CN components. Let me show you visually what was made in cursor where I have the project open. I placed an integration store.md file containing the front-end app specifications and the navigation structure between different pages. This serves as the blueprint for what we're building. The shaden agent created this next.js application following our workflow. It began by generating UI implementation.m MD which documents all patterns and components used in building the integration store. Looking at the execution, you can see the shad CN agent activated immediately after my prompt. Notice it consumed 72K tokens from its own context window, leaving our main sessions context unaffected. This demonstrates the efficiency of using sub aents. The agent completed the integration successfully. Let me show you the resulting integration store. While the color scheme and styling need refinement, the foundation is solid. The Shad CN components are properly structured and page navigation works correctly. Opening the details page displays the expected information. The API key generation feature includes proper notifications, copy functionality, and connection approval with smooth animations. Everything functions as intended. The structure is complete and working properly. Now, we simply need to apply proper styling which can be accomplished using the ## Styling & Refinements [09:20] appropriate tools. The site I'm going to be using is Tweak CN, and we've featured it in previous videos as well. It's an excellent tool for customizing your Shad CN components after establishing your base structure, which we've already done. To demonstrate its capabilities, I'll take a screenshot of this Gumroad landing page and then go back to tweak CN. What makes this tool particularly useful is their recently launched feature that automatically generates different themes using a reference image. In our case, we're providing this Gumroad landing page as our reference. You can see the generated theme displayed here. When I provided the Gumroad landing page screenshot, it recognized the design, extracted the colors, and created multiple theme variations for us to choose from. Once I was satisfied with the theme, I copied the generated code. Since my project uses Tailwind Fe 3, I made sure to copy the corresponding index.css file. Then, returning to Claude Code, I followed the specified format and pasted the code I had just copied. The system seamlessly called the Shad CN agent to replace the original theme with my new custom theme. The entire process took approximately 4 minutes and consumed 46,000 tokens, but the theme was successfully applied. Let me show you the results. After applying the theme, this is what it made. I asked it to remove the emojis since they clashed with the design. And in dark mode, you can see how everything integrates beautifully. The structure works exceptionally well, which brings up an interesting point. If I had tried building this front end with Shad CN components without MCP and Claude's agents, it would typically introduce numerous structural bugs. But here's where Claude's agents really shine. They maintain individual context windows, and that's what ensures such smooth implementation throughout the entire process. When testing the functionality by approving the API key, I noticed the connection succeeds immediately and everything functions exactly as expected, which demonstrates how well integrated the system is. Now, I should mention that what you're seeing represents multiple testing iterations with many refinements made along the way. While it's working impressively well at this stage, implementing a proper backend would fully complete this ## Important Considerations [11:27] app. Now, from the demo I gave you and the things I explained earlier, you must have already understood the key benefits of using sub aents. The context gets preserved and essentially you're creating specialized agents that you can reuse again and again. You also get the ability to control each tool the agent uses, which wasn't possible with the slash commands. There are a few other things you need to know that will make it easier for you to use these sub aents ## Advanced Usage [11:52] effectively. There are two ways that these sub aents can be called. The first way is that Claude Code will automatically choose which agent to use. As you saw in our demo, Claude Code automatically picked up the Shad CN agent whenever it was needed. when the theme needed to be applied or when the actual app needed to be built, it automatically selected the shad CN agent. This happened because the description we provided was very well written. The description for each agent is really crucial. If cla code is not able to pick up your agent when it's needed, it's probably because your task description isn't effective enough. That purple text you see defining the agents purpose needs to be clear and specific. The second way to call sub agents is by specifically mentioning that Claude code has to use a particular agent. If you look at the documentation Claude Code has provided, you'll also see some examples of agents. I've linked this in the description below so you can check it out and learn from their examples. I also found a sub agents collection on GitHub where you can grab whichever ones you need for your tasks. This is a great resource for getting started quickly. Here's where things get really powerful. You can chain different sub aents together. And this is where you can combine sub aents with custom/comands. For example, you could create a custom command that uses a code analyzer sub aent to find performance issues and then automatically triggers an optimizer sub aent to fix them. You could put this into a single custom command and simply run that command to automatically call those two sub aents in sequence. This chain workflow saves you time and ensures consistent results every time ## Wrapping Up [13:22] you run it. 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.