00:00:00The truth is that AI will never revolutionize the software building process, at least not in the way that you think.
00:00:05It sure makes everything faster, and it also makes it easier to recover when things go wrong.
00:00:10But the processes that have been set over 60 years of product building are still as important today, just for different reasons,
00:00:16before they were implemented to make sure that humans had a structured way to develop these products.
00:00:21But now that has shifted to enabling AI agents to work the way humans did.
00:00:25So in order to make AI agents work properly, you need to set up their environment the right way so that they actually follow the process.
00:00:32And we are going to go through all of the steps you need to take before you even start building.
00:00:36Planning your requirements properly is the most important thing you do before writing a single prompt.
00:00:41This is the part where no matter how good models get, you would need to spend time.
00:00:45Now there are multiple ways of planning.
00:00:46You can plan your app using Claude code in planning mode, but its planning is very technical focused, not product focused.
00:00:52As we mentioned in the previous video that with the way agents are progressing,
00:00:56the planning mode doesn't need to be as detailed or technical and should instead focus heavily on the product aspect
00:01:01because the new models are powerful and planning has to be different than as it used to be with the early models being not much capable.
00:01:07So instead of Claude's planning mode, you can create another agent to help plan out your app.
00:01:11It contains the instructions for helping build a proper PRD with a template as well to guide Claude on what exactly the requirements are.
00:01:18Once you have set up the agent, you can give Claude a prompt to use it and plan out the app you want to build.
00:01:23It actually loads the planner agent and keeps asking questions until it understands all of the requirements.
00:01:28It keeps on asking questions until you're satisfied with the planning.
00:01:32Now to understand the MVP, the agent is designed to ask many questions.
00:01:36And at the end, it will ask you if there is anything else that you need in your app.
00:01:40If you do, you can add the things that you want the agent to implement.
00:01:43If you are satisfied with all of the questions and think that the agent has understood the plan, you can just tell it that's it.
00:01:49After the questioning and answering session, it creates a PRD document and saves it to the project folder.
00:01:54This document contains details on all the requirements you discussed.
00:01:57The implementation is divided into phases and it contains all the key design decisions and everything that is needed for the app.
00:02:04Now that you have refined what app you want to build, the next step is to properly define a Claude.md file.
00:02:10This file is important because it contains all of the instructions that you want your agent to follow.
00:02:15You link the PRD document so that it can access all of the app requirements directly from there and you don't have to repeat anything here.
00:02:21This file should contain only the things that the agent does not know instead of mentioning the things that it already knows.
00:02:27It references the rules that you want the project to follow.
00:02:30You can add in your project conventions and all of the instructions that you want Claude to specifically follow while implementing the app.
00:02:37The ideal approach is that you do not create the Claude.md file from the init command and instead create it on your own
00:02:43because this command just generates the file based on what the existing codebase is like, not what it actually needs to know.
00:02:49But this file is not a write once file that you set and forget.
00:02:53You have to keep adding things to it so that it can incrementally improve the process of building apps while you work.
00:02:58Now as we talked about in our previous video, this file is loaded once and stays in the context forever, acting as a guideline while it's working.
00:03:05So make sure that this file does not contain things that are actually not needed or are specific to one area of implementation.
00:03:12The things that you need to add to this file are the best practices your project will follow, your coding conventions, your writing style and conventions,
00:03:19and other similar things but not the things that it can figure out on its own like how the project is structured.
00:03:24For that it can read the file structure and understand it by itself.
00:03:28So take your time when you're writing this file and ensure that it is properly tailored to your needs and your project before actually implementing the app.
00:03:36The next thing you set up is your skills, agents and any MCP you want to use in your project, all prior to actually building it.
00:03:42MCPs are easier to connect.
00:03:44You can just connect whichever external service you want the agent to access and have them installed by running their installation commands.
00:03:50For example, we wanted our backend built on Superbase so we connected the Superbase MCP to our agent in the project.
00:03:57If you are using Shad CN UI for UI components and Playwright for browser testing,
00:04:01you need to have them all connected prior to building the app so that agents can access these tools while building.
00:04:07But those were just for connecting to external services and you also need to configure agents.
00:04:12You can configure as many agents as needed.
00:04:14You already have a dedicated planner agent for planning.
00:04:16You can also create a commit agent which is responsible for committing, running pre-checks and following conventional commit messages.
00:04:23You can have a refactoring agent that refactors the code and improves performance overall.
00:04:28And you can have a verification agent that uses the tools of the Playwright MCP so that it can verify if the UI and user flow are working as intended and it contains all the instructions on how to do that.
00:04:39Now aside from the agents, you also need to configure skills.
00:04:42You can create as many skills as you need and you can easily create them using the Skill Creator which is available on the open source GitHub repo.
00:04:49You can add as many references as you want and also include scripts so that it can run the script directly and use its output.
00:04:55For the distinction between when to use agents and when to use skills, implement all those workflows that are repeatable and need guidance and references as skills.
00:05:04For example, you can create a front-end skill because it's a repeatable workflow and needs to follow dedicated guidelines consistently throughout the app.
00:05:11Implement agents for tasks that need a dedicated context window.
00:05:14You can also use the front-end skill that's open source and is actively used by the Claude codes creator himself.
00:05:20You also need to add path specific rules for particular aspects of your app.
00:05:23These rules define the path to which they apply and include all the instructions needed for implementing that specific part.
00:05:29You can configure as many of these as you like and also link them in your Claude.md so that the agent knows it has to follow these instructions.
00:05:36As we mentioned earlier, Claude.md is for broad principles, so that's why you have path specific rules tailored to specific parts so the agent knows what it needs to do for specific implementation.
00:05:46We cover all of these setups and more on building products with AI on this channel, so if you want to see more of this, subscribe and keep an eye out for future videos.
00:05:54But even with all of these positive instructions, there is still a gap.
00:05:58Agents are biased toward action and may implement things beyond what your positive constraints specify.
00:06:03Therefore, you need to explicitly tell the agent what it should not do.
00:06:06You can create this file in your docs folder and link it in Claude.md so the agent knows these constraints exist.
00:06:12It should contain all instructions tailored to the project, specifying each and everything you don't want the agent to create.
00:06:19Negative constraints are important because positive specs leave an implied gap and negative constraints close that gap, removing ambiguity and preventing the agent from experimenting where it shouldn't.
00:06:29They give a clearer goal for what the output shouldn't look like.
00:06:32For example, if you don't want the AI to follow the default purple or blue and white combination it usually uses, explicitly state that you don't want that instead of just implying it.
00:06:41But before we move forwards, let's have a word by our sponsor, Way in Video.
00:06:44If you work with long videos, you know the struggle. Hours of scrubbing through footage just to find one good moment, then even more time editing it down.
00:06:52Way in Video fixes all of that. It's an AI video platform that actually understands your video.
00:06:56Their AI clipping skill on OpenClaw takes any long video, finds the most viral moments, auto-reframes them to vertical and adds captions.
00:07:04No coding, no setup. Just run the skill and your clips are ready to post. Just like that.
00:07:08If you want something specific, you can search inside any video using plain English. Just type "funny reaction" or "best quote" and it jumps right to it.
00:07:16It also handles video summaries and transcriptions with speaker labels. Perfect for podcasts, lectures and streams.
00:07:22Whether you're repurposing content or automating your workflow, Way in Video saves you hours every single week.
00:07:27Stop wasting time on manual editing. Click the link in the pinned comment to get started.
00:07:32Now this is one thing that most AI frameworks use in one form or another, which is using multiple documents for different purposes.
00:07:38But the core behind all of those documents is the progress and learning document.
00:07:42The progress file is critical because when you are working on a large scale app with multiple features, the agent loses track of which features it has already implemented and which it has yet to work on.
00:07:52Without this file, the agent has to go back, read the implementation and compare it against the docs to figure out what's been done.
00:07:58That creates overhead and wastes both time and tokens.
00:08:01So create a progress file where the agent can just look at one place and know exactly where things stand.
00:08:07But tracking progress alone is not enough because the agent also needs to know what went wrong.
00:08:11Therefore, you also need a learnings file where the agent records its errors, what caused them and how it fixed them.
00:08:17This way, when it encounters a similar situation later, it doesn't make the same mistake twice.
00:08:22Now since both of these files are meant to be actively updated while the agent is implementing the app,
00:08:26you need to explicitly instruct the agent in the Claude.md so that it keeps adding to these files, improving its knowledge base during the build.
00:08:34Now these two files are the most essential ones that every setup needs.
00:08:38You can use these when you're building the coding setup for your own.
00:08:41We have also previously made a video that talks about how you can build the frameworks on your own, which you can watch on the channel.
00:08:46But if you don't want to go through the hassle of setting up your own,
00:08:49you can just rely on the coding frameworks because they use different mechanisms for doing exactly that which you can implement directly.
00:08:56Another common mistake is implementing tests only at the end of development.
00:09:00This is problematic because if you ask an agent to write and implement tests after the features are built,
00:09:05the tests won't be as effective as they would be if written beforehand.
00:09:09When writing tests, you should have the agent refer to the PRD you created and based on that, deduce how the functionality should work.
00:09:16The agent should then write tests from these deduced requirements,
00:09:19essentially reverse engineering the functionality and things where the app might go wrong from the PRD.
00:09:24Once the tests are ready, you can run them at the end to cross-verify if the implementation meets the requirements.
00:09:29The reason for writing tests first is that if you implement them afterward, the agent only knows what was actually implemented.
00:09:35It will optimize tests for the features as they exist, not for the functionality as required in the specifications.
00:09:41This can cause you to miss testing features that were specified but not implemented correctly.
00:09:46Because the agent optimizes toward the implemented approach, it may slack on thorough testing,
00:09:50missing edge cases that could have been caught if the tests were derived directly from the specs.
00:09:55You shouldn't give the agent open-ended instructions like "test the application" because this way Claude just optimizes for the implementation.
00:10:02Instead, implement proper tests guided by the specs so the agent knows exactly what to optimize for.
00:10:07Also, if you are enjoying our content, consider pressing the hype button because it helps us create more content like this and reach out to more people.
00:10:14Another problem many people encounter during app development is the lack of upfront issue tracking.
00:10:19Without it, issues pile up with no record of what caused them or when they started and as the app scales up, it gets harder to track.
00:10:26Therefore, maintaining proper logs during testing is crucial.
00:10:29Many people use GitHub for this and GitHub is an excellent platform for tracking and managing issues.
00:10:34Combining it with well-structured Git commit messages provides guidance to Claude on what was done in each commit and allows it to track its progress.
00:10:42One of the best features of Git is that if a change breaks the codebase, you can revert commits.
00:10:47And if you want to test something experimental, you can use the work tree to do it in isolation.
00:10:51You can configure your setup so that the agent commits after every implementation using detailed messages to maintain clarity.
00:10:58But GitHub works well for technical users and non-technical team members may struggle to submit issues.
00:11:03Therefore, for them, connecting the agent to a project management tool like Trello or Notion is ideal.
00:11:08This allows logging issues, tracking progress, and collaborating on fixes.
00:11:12You should connect the MCP of the respective tool so the agent can access it, track issues, move them across boards, and manage reporting efficiently.
00:11:20You also need to add an instruction in Claude.md specifying that the agent should use the Notion MCP for tracking bugs and issues properly.
00:11:28Setting this up at the start is invaluable as the project scales and multiple people start developing together, ensuring that everything can be logged and tracked efficiently.
00:11:36But even if your app works perfectly in testing, AI-generated code is not inherently built to handle multiple users simultaneously.
00:11:43This is why many people find AI implementations underperforming in production.
00:11:47Therefore, you need to prepare for that as well.
00:11:49If you have an estimate you can tell your agent the expected number of users and that multiple users will be using the app at the same time.
00:11:56The agent should then write the test cases for stress testing the load based on this information.
00:12:01There are multiple testing tools you can use and you can choose whichever matches your requirements.
00:12:05We used K6 for a Next.js app because it's easy to implement and matched our requirements.
00:12:10You can also use Claude's plan mode here to map out multiple approaches for the app because here we need a detailed technical plan.
00:12:17Claude plans based on the PRD and the approximate number of users you expect to be using it simultaneously.
00:12:23Claude asks multiple questions from different perspectives and clarifies potential issues that could arise in production.
00:12:29This helps the app fail gracefully even if problems occur and ensures the user experience is optimized.
00:12:34Using this mode, you can clarify your intent and have the agent's plan for scalability as well.
00:12:39This plan becomes the final piece in taking your app from an idea to production ready.
00:12:43Now all these agents and skills mentioned here are available in AI Labs Pro for this video and for all our previous videos from where you can download and use it for your own projects.
00:12:53If you've found value in what we do and want to support the channel, this is the best way to do it.
00:12:57The link's in the description.
00:12:59That brings us to the end of this video.
00:13:00If 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.
00:13:07As always, thank you for watching and I'll see you in the next one.