How I ACTUALLY Use Claude Code... My Complete Workflow

πŸš€ Add to Chrome – It’s Free - YouTube Summarizer

Category: Coding Tools

Tags: AIAutomationCodingDevelopmentWorkflow

Entities: AnthropicBMAD methodClaude CodeClaude OpusGitIngestsupercloud

Building WordCloud ...

Summary

    Introduction to Claude Code
    • Most users are not utilizing Claude Code to its full potential.
    • Claude Code is more than just an AI coding agent; it offers advanced features like sub agents.
    • Sub agents enable powerful workflows by allowing multiple agents to work together in a single session.
    Sub Agent Advantages
    • Sub agents offer a 200,000 token window per session, maintaining strong context for complex projects.
    • They allow parallel processing, enabling specialized agents to work simultaneously and efficiently.
    • Sub agents can maintain context and return essential information to the main session, enhancing software quality.
    Workflow Implementation
    • The BMAD method and supercloud frameworks are currently limited to slash commands but benefit from sub agent integration.
    • A structured workflow can be created using sub agents for specific tasks like UX research, UI design, and rapid prototyping.
    • The checkpointing system allows users to revert to previous workflow stages, ensuring flexibility and error correction.
    Building a Workflow
    • Users can create their own workflows using repositories of cloud code sub agents.
    • The GitIngest tool helps convert repositories into readable text for workflow creation in Claude Code.
    • A complete workflow involves defining project structure, planning, design, and development phases.
    Takeaways
    • Utilize sub agents to enhance coding workflows and maintain project context.
    • Leverage parallel processing for efficient task execution.
    • Use the checkpointing system for workflow flexibility.
    • Create structured workflows with defined phases for better project management.
    • Invest in higher-tier plans to accommodate token consumption for complex projects.

    Transcript

    00:00

    Most of you aren't even using cloud code to its maximum potential. It has become so powerful.

    But when people start using it, they think that this is just another AI coding agent like cursor. But that is not true.

    Claude code is so much more now. You need to start using claude code the right way with the right workflows.

    00:16

    You might have heard of claude code sub aents. It's their revolutionary new feature.

    You might have made an agent or two, but that's not where the full potential of this new feature is. Today I'll show you my exact system for claude code.

    The one that actually builds complete apps without breaking. Once you see this workflow, you won't want to use

    00:33

    anything else. The BMAD method and supercloud take a structured approach to coding.

    They are AI agent frameworks implemented for cloud code. We have full videos covering both, but currently they only work through slash commands.

    Without these slash commands, the BMAD method cannot function. None of the AI

    00:49

    agent workflows have been implemented for the clawed code sub aents yet. You might think why do we need claude code sub agents in these workflows?

    Sub aents are personalized agents with specific commands but they offer much more. They enable powerful workflows with one significant advantage over slash

    01:05

    command. You can chain multiple sub aents together.

    Anthropic demonstrated this with their code analyzer and code optimizer sub aents. One agent identifies issues while the other resolves them.

    Both connect and collaborate in a single workflow for performance optimization. You can apply

    01:21

    this same principle to your entire coding workflow by chaining multiple agents to create powerful sequences. But what is the biggest advantage of these sub aents?

    Claude Code provides 200,000 tokens for a single session. When you complete your entire app build within one session, the context remains strong.

    01:38

    With sub agents, each one gets its own 200k token window. This means the coding agent retains complete project knowledge, resulting in better applications with fewer errors.

    Here's a practical example. I created a file called hello.md and instructed claude to use every sub aent.

    Each sub aent wrote

    01:55

    a greeting into that file. Claude activates all sub aents and can run them in parallel as well.

    With five agents all can work simultaneously. This parallel processing is another key advantage.

    A UI designer agent for example could generate multiple design options at the same time. Now how is

    02:10

    this useful in this workflow? The main session distributes work across specialized agents.

    Each agent maintains the context needed for its task in its own 200k window and returns only essential information to the main agent or the current clawed code session. The main session becomes the controller

    02:27

    while agents perform specialized work. This architecture produces better software because every agent operates with deep context and focused expertise.

    This is why agentic frameworks like BMAD would benefit greatly from sub agent implementation. Since that hasn't happened yet, the question remains,

    02:43

    what's the solution? I have found a way to build your own workflow using these sub aents.

    But before I do show it, I want to give you a glimpse of how this workflow actually works and what I'm able to achieve with it. The first thing to know is that when you start Claude Code, you'll want to use this auto run

    02:59

    command instead of the simple one. Here you can see two of the sub aents, the UX research agent and the sprint prioritizer.

    If you're not familiar with these, I'll explain them shortly. But if you want to see what they're actually doing while coding something that normally isn't visible, you can use the

    03:14

    verbose command and it will show you everything. Now I don't just give a prompt and move forward.

    This is a context workflow and I need to develop the proper context before continuing. First I create a doc structure.

    I'm building a YouTube production manager app to manage videos and sponsors. This

    03:30

    is my complete structure. The structure varies for each project.

    The system created the project and established a basic structure as part of the product setup. All this was done from a prompt that would be created in the workflow.

    So, you don't need to worry about this. After my initial prompt explaining the

    03:46

    build, it conducted UX research for the project. It activated the UX researcher, which took 7 minutes and 53,000 tokens.

    This generated comprehensive UX research defining how the app should appear to users, not the visual design, but the navigation and overall user experience.

    04:02

    The sprint prioritizer then broke the implementation into small sprints for future agents to execute. This happened with one prompt.

    The system uses prompt chaining within a single workflow. One prompt triggered both agents consecutively.

    Now we have our app mapped out. So what's next?

    We continued

    04:18

    with the UI designer agent using the UX agents output. This agent designed the project's UI with the UX already complete.

    You can see the task list. It took components from the UX agent and planned each one.

    Remember this agent only designs without implementing. Everything remains in documentation

    04:35

    which is critical. Thorough planning makes implementation straightforward.

    Next came the whimsy injector. One of my favorite agents.

    I could see it creating small wireframes while working. The whimsy injector enhances the user experience by adding intricate UI details and animations that would

    04:51

    normally require significant time. It builds these elements from the beginning so that they can be implemented later on.

    The agent is designed as a master of digital delight. I'll share the resources so you can review its instructions.

    It focuses on micro interactions that dramatically improve

    05:07

    the user experience without changing core functionality. After the whimsy injector completed, I used the rapid prototyper tool.

    In this workflow, it only established the app's foundation following my structured workflow design. Over on the AIS Discord community, we're

    05:22

    hosting our first ever hackathon, now extended until August 11th. We heard your feedback and wanted to give you more time to build something awesome.

    We're also adding a $500 prize for the best overall submission. Plus, the top five projects will be featured in an upcoming YouTube video.

    So, take your

    05:38

    time, push your creativity, and submit your best work. Join by clicking the link in the pinned comment below.

    And if you're enjoying the content, make sure to hit that subscribe button so you don't miss what's coming next. Now, what if you mess up or don't like something during this process?

    That's where

    05:53

    another amazing feature comes in. The checkpointing system.

    This is a lifesaver. Cursor had already implemented this feature.

    And now Claude Code has it too. Press escape twice to bring up a menu where you can switch to any branch.

    These branches represent the points where you've given prompts. You

    06:09

    don't need to worry about checkpoint creation. It's done automatically.

    You can clearly see the different phases displayed and you can switch back to anyone you want. The front-end developer is currently implementing the front end.

    While that happens, let me show you how I built my workflow and how you can

    06:24

    build yours with sub aents to create any app. Whether it's an iOS app or anything else, one workflow enables sub aents to handle everything.

    I discovered a repository of cloud code sub aents organized by departments. It includes design, coding, marketing, and many other areas.

    While I didn't include

    06:41

    marketing agents in my workflow, you can easily incorporate them. To create your workflow, visit gitingest.com.

    This tool converts entire repositories into LLM readable text. Return to Claude Code, paste the text and request a coding workflow.

    I specified requirements for a

    06:56

    proper agentto agent workflow with connections between agents. I provided an example from the Claude Code website about chaining agent workflows.

    First, specify that you want connections between agents. Provide an example from the Claude Code site or create your own.

    07:11

    Include the text from the GitHub repository. The system generates a workflow with different agents.

    But there's a problem in this. The context each agent generates or requires is often too large and cannot be passed on.

    Context must be recorded somewhere, ideally in MD files. After generating

    07:27

    the workflow, I suggested changes and asked about saving those files. It provided a complete project file structure and built the entire agent context system.

    I organized my workflow into four steps. UX and planning, UI design, and then front-end and backend

    07:42

    development. After refining the structure and prompts, I requested prompts for all phases.

    It suggested marketing and too many testing agents, but that seemed excessive for a simple Nex.js app, so I excluded them. The system provided final prompts.

    One initialization prompt sets up the

    07:58

    project structure. Separate prompts handle each of the four phases.

    I simply pasted them with the agents into my repository. when it's specified using the UX researcher.

    I navigated to the design folder, found the UX researcher and copied its contents in the cloud agents folder. I created a new file and

    08:15

    pasted the agents content. That's the complete process.

    Once configured, run the prompts and claude code runs the agent framework automatically. But as I was working with it, I ran into a huge problem.

    I would input my app idea and start, but the resulting prototype site looked completely off. I don't have the

    08:32

    site now, but I have these two screenshots. The interface was cluttered and if I scrolled down there would be even more widgets that looked really bad.

    The issue was insufficient planning within the agents. Even when planning occurred, it lacked proper review.

    So I gave Claude Desktop my idea directly and

    08:47

    asked it to break down what needed to be built. Then I instructed the UX researcher to focus solely on providing the best user experience for those features and not decide the actual features of the app.

    This included determining which pages to create and how users would interact, but only within the app's actual scope. I

    09:04

    provided a comprehensive prompt and it returned a new design and refined prompts after reviewing them thoroughly. They're far more specific.

    Now, now you don't need to go through any refining because I've already compiled everything into a single prompt for you. All you need to do is add in your own idea and

    09:19

    the agent file and it'll generate your complete workflow. I'll make sure to leave the prompt for you in the resources.

    Now, the front-end agent has also finished. The front-end agent has finished and this is a really polished app.

    The testr runner agent is now executing as the next workflow step.

    09:34

    After the test agent completes, the performance benchmarker will follow. Since we've already written the endpoints for implementation, this process will be straightforward.

    Note the time these agents require. The front-end developer took 18 minutes and used 130,000 tokens.

    That's substantial,

    09:50

    but the results justify it. The output is genuinely polished.

    Notice the micro interactions. If I had asked Claude to implement this app directly, it wouldn't have included these details.

    The animations and smooth transitions are impressive. We now have the sponsor pipeline and videos implemented with

    10:06

    three modes, calendar, table, and cananband boards. It's a well-designed system that turned out beautifully.

    The micro interactions look really good with the smooth animations, and they were implemented really well. But what if there are any minor issues remaining?

    The performance benchmarker and test

    10:21

    agents will address those. Overall, this app turned out to be really wellb built.

    The app quality is really high. It's like having a complete notion database system implemented right here.

    The agent is still running and will take considerable time. You can see the timer right here.

    But what I want you to know

    10:36

    is that this repository and these agents enable truly powerful workflows. You can use my prompt for app development.

    You won't need to make the changes like I did. And to include extra agents, simply request them.

    When you provide the git ingest prompt, it captures everything written inside the agents. From there,

    10:53

    you can build complete workflows with chained agents. These agents have been a gamecher for me.

    One important consideration, these agents require significant time and consume many tokens. I started with the $20 pro plan, but quickly exhausted it.

    That's why I upgraded to the $100 pro plan. Even

    11:10

    without the sub agents feature, I highly recommend the $100 pro plan with Claude Opus. It's truly remarkable.

    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

    11:27

    and I'll see you in the next one.