How to vibe code LIKE A PRO

In this video, I'm going to teach you how to wipe code like a pro. Technically speaking, the real definition of wipe coding is that you don't even look at the code, you just let the AI agent handle everything, including all of the decision making and all of the thinking. We're not going to be retarded enough to do that. That's not what I'm about to teach you over here. I'm going to teach you how to use AI models and agents to write good code that you can actually maintain over the long term. Because as we all know, in software development, And building projects fast, you can do that. Maintaining them in the long term when users are starting to complain about feature requests and bugs and you've got tens of thousands of users and you need to make sure that they are using your app properly and you need to make sure that your app is working fine. Yeah, that's when wipe coding starts to fail. So we're not going to go over there, right? We're going to learn how to use AI models and tools to write good code that you can actually maintain over the long term. I've got a bit of an outline for this video over here and we're going to use and we're going to go through all of these six tips over here and I'm going to teach you how to do all of these things to write good code. Let's get started. First of all, always plan your project first. Whenever you're building something new with these AI coding tools, do not just jump into the coding and do not try to one-shot the entire thing. Always start by planning the project and the way you do that is you literally go into your agent over here so right now i'm in the agent manager of google anti-gravity this is an ai ide you literally go over here and you describe your project so let's take a real example you guys know that i built um you guys know that i built this little jump rope app over here to track my cardio workouts right this is something that i wipe coded for myself right and you know that before i actually wrote any of the code i first wrote this entire 500 line plan with AI about how this app should be structured, what are the features, the functionality, how it's going to work, right? And the way I do that is I literally go over here to the agent manager. I turn on my mic and I just explain what I want to build, kind of just give the agent a rough idea of the project you're trying to build, go back and forth with it, ask it to point out inconsistencies and edge cases and stuff like that that you need to fix and you need to answer, right? The AI is going to tell you about all these edge cases, all these different things that you didn't think about and you can go back and forth with it and really build a comprehensive plan of this entire project right that covers all bases so let's actually try this out let's i'm going to use cloud opus 4.5 for this just because it's the better model and since audio is not supported over here i'm going to use super whisper to actually transcribe my audio okay claude i want to build a mobile app for tracking my jump rope workouts it should be able to log my new workouts it should track things like the time and the duration of the workout, the number of skips that I did, the amount of trips or interruptions that I had, the calories that I burned, the average heart rate, and the maximum heart rate that I achieved. It should also track my average skips per minute rate and it should track all of these things and then display to me a list of all of my workouts logged right. I also want other features like being able to track my streak per day but I also want to be able to set a rest day so that if I want to skip a day, I don't lose my streak. And I also want to be able to track my goals. Goals like having to do a certain number of workouts per week or a certain number of skips per week or achieving some sort of a maximum heart rate or something. And I want to have charts and graphs in my app that show me my performance in different metrics over time. I also want to be able to export the app data in JSON or CSV format and I want to be able to share my workouts in beautiful workout cards that I can just share to WhatsApp or Discord or any other app. The app's design should look amazing. I'll give you some images later to really analyze and make a style guide out of and yeah. Okay so there we go. I just like I literally just open my mic and just describe the entire app to it. I should probably tell it to make a plan over here. I forgot to do that. Let me open up my mic again. Ask me any questions about this project to help me plan this out better. Point out any inconsistencies or edge cases or you know just things that I haven't thought about and let's go back and forth to write a detailed plan for this project. I want you to help me to build this project by first writing a detailed plan about the project. Yeah, literally that's all you need to do. See, so easy, right? Now plot is going to help me write a plan for this project. Yeah, see now it's going to ask me all sorts of these different questions. And you know how useful this is because as programmers, we don't really have a detailed idea of what kind of project we're about to build, right? We just have an idea in our mind and we don't really know the exact details of it. So it's going to ask us all these different questions to really refine our project plan so we know exactly what we're building and how like are you building for ios or android or both right what kind of technology stack you're going to use should the app store data locally or should you have some sort of a cloud server right if there is a cloud server then you probably need authentication as well right you're gonna have to figure that out heart rate input calories calculation you can automate these things from some sort of a fitness tracker that the user is using like fitbit or something like that or you you can manually enter this data right you need to think about these things so yeah cloud is going to give you all these different questions and you can answer them and you can let it ask you more questions and you can just refine the entire plan right and once you're done with that you can literally just ask it to write a detailed markdown file compiling everything you discussed in this chat and put it in your folder and that file is going to be your big plan about how to build this project So that how you plan out your project right You go back and forth with the AI Let me also tell you the kind of stuff that you need to have written down This is going to be your project requirements We already went through that I guess Your code quality guidelines. So you can guide the agent to write good code specific to your project, right? There is such a thing as general coding best practices that all projects should have. There is also such a thing as your specific project's requirements about how to write good code, right? And you should guide the AI to do that because there's no other way the AI is going to be trained on that, right? So you need to have some documents, some markdown files that explain those kinds of things. You need to have a style guide as well. A style guide is just going to be a markdown file that explains your entire front-end styling process, right? The colors that you use, the shadows, the spacing system, the typography, the fonts, all of those things, right? You're going to have a style guide that describes all of those things and how and where to use them. And if you have something like this, what I used to do is have a style guide and also a styles.tsx or ts file that literally had a bunch of CSS variables that described my design system in much more detail, right? The style guide describes my design system in Markdown natural language. The styles.ts file describes my design system in CSS variables and in code, right? Both are useful. your text jack. I guess you're going to put that in the project requirements anyway, but just mentioning that you should write markdown files for all of these things. In fact, you should write markdown files for any long, you know, information that you're going to have to provide to the AI again and again, right? Instead of typing that in a prompt every single time you want to talk to the agent, you should use a markdown file, write it once, and then just reference it in your prompts to the AI, right? So it has all the context that it needs. So that's Step one, always plan your project first. Step two is to never repeat yourself. And this is very similar to planning your project over here, up over here. So let me explain this with an analogy that we as software engineers are very used to, right? If you've built other different apps and projects before, you know one very crucial principle in writing code. A very crucial principle in software development. And that is to not repeat yourself, right? Keep your code dry. don't repeat yourself the way to do that in the agentic coding world is to basically write markdown files and instructions and you know instruction files that guide the ai to do whatever task you're repeatedly trying to get it to do so every time you find yourself giving the agent the same prompt again and again explaining the same thing again and again that is the number one sign that you need to extract those instructions into a markdown file or something and then just reference that to the AI, right? So let's go through some examples over here, right? Well, let's say you have, let's say you wanna teach the AI how to write, let's say good React components, right? Let's say you have some really specific requirements about how you write your React code. Let's say you have maybe something like using interface for your props instead of using type, right? Or, you know, a bunch of different coding practices like that, right? The AI agent, if you don't guide it, is just going to write generic React components, right? With its own coding practices based on the data that it's been trained on, right? But if you have specific coding practices, you need to write them down in your markdown file somewhere and then just pass that in, right? Like you can literally have like a docs slash react components dot md file and you can literally just pass that in as context to the AI every time you want it to write a new react component for you, right? And it's going to have information like how you should use props, how you should use state and react hooks and everything and all those other things, right? You can have something like a API endpoint guidelines, which basically describes if you're working on a back-end project, how to, you know, write good API endpoints, what kind of generic classes or mixins you can reuse, and so on and so forth, right? You can explain these things in a document, just write it once, and then just reference it again and again in the chat. It takes like, it makes your work so much easier, right? So every time you find yourself repeating some instructions to the AI, that is the number one sign that you need to extract those instructions into a markdown file and then just reference that instead of manually typing all of those instructions again and again right and things like agent skills um rules.md and workspace rules all of these things right they make it so much easier for you to actually have these instruction files so go do some research on this if you haven't already and just make sure you're not repeating yourself to the AI again and again. That makes it so much easier and so much faster for your workflow, right? So number three is to use plan mode for complex features. So whenever you're building some sort of a complex feature and you're doing some real work with the AI agent, you need to use plan mode. Every single IDE has something like that. You can see I'm already on the planning mode by default over here in my IDE in Google anti-gravity. You need to always be in plan mode when you're building a complex feature. And the way to build a complex feature is to literally just describe the feature to the AI go back and forth with it to make sure that you're covering all bases that you've thought about edge cases and stuff that's one of the things that AI agents are really good at is helping you plan and making sure that you've thought about the edge cases and other things like that right so describe the feature to AI similar to how I did over here to this agent in in my agent manager over here right describe the feature ask it to go back and forth with you and point out inconsistencies and edge cases or just things that I haven't thought about yet and use this to plan out this feature. Once you've planned it out, make sure you're also telling the agent to use any specific utility functions or classes or APIs that you have in your code base to make your code reusable and stuff, right? So for example I have this file over here database that has a bunch of utility functions right Like you know creating or deleting or updating tables in my database like the workout table over here i can pass this entire file as context so that the agent knows to use this stuff whenever it's trying to update data in my in my database right because like if you don't do this then there's a chance that the agent is just going to rewrite this kind of code in some other file right i could have a component called delete workout button and in that button the agent could recreate this entire delete workout function instead of actually reusing this function that i've already written over here right so you need to have an idea of how your code base is structured you need to know where things are and then you need to reference them in the chat so that the agent knows that you can use these functions and not have to recreate them from scratch right because that is obviously going to lead to scrappy sloppy code and we don't want to repeat ourselves right that was step two don't repeat yourself this applies both to code and also to instructions that you give to the agent so use plan mode for complex features and please for the love of god actually read the implementation plans that the ai generates right in anti-gravity over here the app that i use it's going to generate an entire markdown file i guess you could call it but it's going to generate an entire implementation plan that you can just look at and read maybe i have something like that over here as well that i can show you yeah so here's one of the implementation plans that it wrote for me and the feature was just to display the charts on the home screen right so the charts that we use to track the user's workout performance we want to show them on the home screen of the app i just went back and forth with the agent i described the feature to it and it wrote me this entire implementation plan about what code it's going to create, the new components it's going to write, the modifications it's going to make, and so on and so forth, right? I read this entire thing. I don't just wipe code it and ignore the output. I read the entire implementation plan and make sure that the AI agent is going to do this correctly, right? And what I've found is as long as you get the plan right, the agent is going to write some really great code. As long as you can get the planning right, the actual coding part usually goes very well. So you need to make sure that you focus on this, right? You need to make sure that you write the best plans that you can. Go back and forth with the agent, describe everything you want, and then read the plan that it generates. And then if there is some flaw in the implementation plan, ask the agent to fix it. And once you're happy with the plan, tell the agent to proceed and the code will in 99% of cases be absolutely amazing. Why? Because you spent so much time in the planning stage right so now number four which is to code iteratively now there's two parts to this entire point the first is you don't know what you want a lot of times when we're trying to implement a new feature we don't necessarily know exactly what we want this feature to do right this is exactly why we use plan mode this is exactly why we go back and forth with the agent to point out inconsistencies and edge cases because we have not thought we have not thought out the entire feature in advance right so it makes sense to code iteratively make small improvements and changes and implementations and then just see what that looks like right make a small feature see what it looks like see how it feels in the app and then based on that you're going to have more information about what you should do next right so that's one thing is you get to feel the actual feature and have more data on it right have more information about how this feature is actually going to work in the app right this is especially useful in front-end in front-end code and design stuff you actually design something basic and you try using it and you see whether that's good enough or if you need to just change the entire thing right and the second reason you need to code iteratively is for technical depth because with ai we can write code so much faster and by writing that code so much faster we are going to accumulate a ton of technical zapped and the way to fix this and to make sure this does not become a huge problem in the long run is to code iteratively now what do i mean by coding iteratively i mean building the entire app feature by feature step by step you don't one-shot things you pick some task or feature or functionality you want to implement you build that and then you refactor the app clean up any messy code extract some utility functions or whatever you want to do but you clean up the app code base and then you move on to the next feature. So this is how you actually solve technical debt. You build a feature and once you're happy with how that feature is working, you go and refactor and clean the code so you can actually maintain this code over the long term, right? And then you write and pass the tests and you can, you know, kind of mix and match these. You can mix and match the order in which you do these steps because a lot of people, for example, like to do test driven development, which is where you write the tests first and then build the feature. You can do whatever you want, But you need to have these three steps in your coding workflow. You build the feature, you refactor and clean the code, remove any code smells so you can actually maintain this code over the long term. And then you write and pass the tests, right? Because without tests, you're not going to be able to be confident in this feature and in this functionality. And you don't know when and how it's going to break in the future. Make sure you're doing all three of these things. I don't care in what order you do them, just as long as you're doing them. If you do these, your technical depth will be minimal, right? very very low and with that let's move on to number five which is to learn how to use git guys i cannot stress how important it is to use git especially now in the ai coding age it was extremely useful back when we were writing our code manually it is much more useful now when we're using ai to write all the code because ai can fuck it up so easily you just need to have something like git or source control to you know rewind the changes that the ai makes because it is an extremely useful tool to have, especially when you're using AI to write the code for you. So there's two major tips that I want to give you in terms of using Git. The first is to commit often So whenever you done building a new feature or you implemented some new thing in your app you should commit it as soon as possible You should use commits as often as possible because every time you commit you've added some new functionality to your app and your app is in a working state, right? That is a very valuable thing to have. You should commit that state to source control and then move on to building the next feature or fixing the next bug. and this way you'll always have the latest working state of your application anytime you want to rewind back to that working state you can do that anytime your ai agent fucks up and it's just not working and it's not reversing the changes you can use git to go back to a working state of your application and that just gives you so much mental peace of mind because you know whatever happens you have a different old copy of your application that you can use if the ai just decides to hallucinate the entire thing and nuke the entire code base right you have a backup option the second thing i wanted to give you is use branches for literally everything right branches are so darn useful i could talk all day about git branches you want to use branches for every single let's say feature that you're building every single bug you're trying to fix so every time you have a new feature you want to implement you should create a branch for it let me just draw a quick flow chart so you guys know what i'm talking about so look over here every time you want to create a new feature or something in your app or you want to fix a bug let's say right if you want to fix some bug as well what you should do is you should do all of those things in a new branch you should branch out from your main or master branch you should create a new branch and then implement the feature or fix the bug then once you're happy with your changes you merge that branch back into your main or master branch and then you just repeat the process for the next feature you want to implement or the next bug you want to fix. This is how you should write your code, right? This is the loop that you should follow. You should create a new branch, write the code. Once the code is working, you merge that branch with your master branch. Then you create a new branch and start again, right? Start on the next feature. And when it comes to implementing features, as I already talked about up here, this is how you actually build new features. You build the feature, you refactor and clean the code and remove all the code smells. You make the code maintainable and then you pass the write and pass the tests right because code without tests is not going to work and last but not least guys don't trust verify and by the way i know this video is getting really long i'm sorry there's just so much stuff i want to talk about but hopefully this stuff is useful to you this knowledge is useful and hopefully you're getting some sort of value out of it again i apologize for making such a long video but there's just so much to discuss over here right we're almost done just bear with me for this last point right don't trust verify let me explain what that means so trusting means just letting the ai write all the code for you right letting ai write the code and not reviewing it letting ai make the decisions for you right that's what it means to trust the ai over here right in this context and we're not gonna do that obviously right this is obviously horrible piece of advice this is what the vibe coders do right they just Let the AI handle everything, the decision making, all of it, right? We're not going to do that. This is horrible. What we're going to do is verify. And verifying means having tests like unit tests, integration tests, and stuff like that, that will make sure that your app is working, right? You don't trust the AI to write working code. You make sure that the AI code works. And you do that by writing tests. If you have a comprehensive test suite filled with unit tests, integration tests, and other tests, right, end-to-end tests that test out every single part of your application and make sure it works, and you run those tests every single time you implement a new feature with AI, you're pretty much never going to have problems with bugs and stuff like that because you will always make sure, you will always verify that your code is working. So don't trust, verify. don't let the ai just blindly write the code and just blindly trust it that it's writing good code no verify it verify it by writing tests and making sure that the code actually works so with that we have discussed all six of the tips that i wanted to give you this became a really long video guys but now you know how to wipe code like a pro and again i shouldn't even call this wipe code because this is just you know coding intelligently with ai now you know exactly how to build full applications with AI coding tools. Yeah, so that was an extremely long video. I've been recording for like 40 minutes now almost. I'm gonna chop out the empty bits and this is still probably going to be like a 30 minute video probably. So guys, that's the video and I hope that you learned something from it. There's a lot of uncertainty in the world right now because of AI, especially in the technology world, especially in the software development world, right? And this is because we don't know how to use these tools really well because they're just so new right there's no books or videos you can go watch about this there are some videos but the technology is just developing so fast that we just don't even know how to efficiently use these tools right and so with this video i hope i can provide some clarity on how to use these ai coding tools to speed up your workflow to make your work easier right to make your life easier i'm going to be making a lot more videos on AI and how we can use them to improve our workflow as software developers. So if that's something you're interested in, make sure you subscribe, leave a like, leave a comment, share the video, and I'll see you in the next one. And as always, quick self-promotion plug over here. This is my web agency's website, and I build web and mobile apps and other kinds of applications for people and businesses. And if that's something you're interested in, or if you know somebody who's interested in that guys refer them to me or if you are somebody who's interested in hiring me for some sort of a project top link in the description is going to take you to book a call with me and we can talk about your project on the call we can discuss everything over there and we can get to work right so if that's something you're interested in or you know somebody who's interested in that top link in the description book a call with me for free let's get started other than that thank you for watching the video and i will see you in the next one