Claude Code for Product Managers: Build & Ship with AI

1. Claude code intro: Now, imagine this for a moment. You are a product manager. You have spent a week writing a ten page long PRD. Your engineering team is not really interested in reading the PRD. Your design team have gone through the PRD, but they actually created something which is very different. And at the end, you feel like, Hmm. The output is still really bad. But here is the truth. Nobody actually cares about your PRD. If you are a product manager who see that your users are facing problem, you have talked to a couple of users, and you feel that you can build something super interesting, well, go ahead and build it. And if you wanted to build actual product, in that case, you need to understand about GlotCd. And yes, there is a cord in it, but this tool is not just for engineer. If you are a product manager who have a decent understanding about technology, in that case, you can use GlotCd to actually build working product, and then you can showcase your team members or even to your coworkers, and you can just take feedback and iterate the design to prototype stage faster. And you can actually showcase this to your team members, to your stakeholder, and you can take more inputs and iterate this feature faster. And after AI, almost every single product manager is using these AI tools like clot code, antigravity Cursor to actually build product faster. Now, as a product manager, you are actually not replacing engineer, you are helping them go from a prototype to end feature faster and saving 30 pos in time. So, hey, I'm Navdeep. I've been working as a product manager for almost six years. And in this course, I'm going to help you understand what is Claude Code? How do you use it effectively? And what can you build using Claude Code? And I know most of you are not engineers and you may not have a really good technical understanding, but that's perfectly fine. In this course, I'm going to handhul you from writing your first prompt in Claude Code to actually building and shipping product, and then you can share the link with your friend, and they can simply check it out, give you some feedback, and you can just iterate faster within a couple of hours instead of waiting weeks, for design or actual implemented features from your engineering team. So we'll go step by step. First, I'm going to help you understand how do you install lot Cod in your system to how do you write your first prompt? And I'm going to give you some basic instruction around contexts, the model you should choose, how do you use plan, how do you implement things. And where exactly can you deploy your product so that you can actually show it to your team members. And not just that, I'm actually going to show you a workflow that you can use to actually build a working product. And we're going to create a skill that can help you streamline the whole workflow. And guess what? You do not need to know how to write a code and you don't even have to write a single line of code, but you need to have a basic technical foundation. So if you are someone who always wanted to build some product and make them alive and you want it to go from idea to product faster, then this course is going to be perfect for you. By the end of the course, you will be able to convert your idea into actual working product that you can ship, show it to users, take some feedback, and build it forward. So if you're somebody who is excited to build something cool and learn cloud code, well, let's drip straight in. 2. 1 what is claude code: So, hey, everyone. This is our first video of the course, and in this video, I'm going to show you what is clot Code and how exactly can you install it. So I am going to simply write Clot Code dogs, and it will take me to the documentation page of Cloud Code, and then we're going to install it in our system. Now, if you're using MacOAS, in that case, you can use Homebrew to install Claude Code in your system. If you're using Windows, you have different installation step. The main idea is that we are installing a command line interface or CLI for Cloud code so that we can interact with Claude Code directly using CLI. So this is the official documentation of Claude Code. If you spend one to 2 minutes on this page, you will understand about Clot Code a lot more. And I'm going to zoom in and explain you a few things. So as you can see on your screen, clot Code is agentic coding tool. That means it uses agent to read your code base, edit files, run some command, and it can be integrated with your development tools. And Claude Code is available on your terminal. So if you are on Mac, if you type terminal, it will open up a terminal. This is a very boring terminal that you might find people using nowadays a lot. So you can use Claude Code inside this terminal. You can use in your IDE. So in case if you're using Cursor, VS code, or any integrated development environment, you can use that. They have a desktop app and you can use it inside the browser as well. So if you go to the Claude AI slash Download, you can see where exactly can you use Claude. So you can use Claude inside Excel by simply installing their extension. You can use it inside PowerPoint, Word. They have our DixoApp. You can use Claude Code inside terminal inside all of these IDEs, JetBrain. In fact, you can do it from Slack as well. And they have a mobile app, which is available on App Store and Play Store, and they have a Chrome extension. So in this course, we are only focusing on Claude Code, which is their agentic coding tool, and we are not focusing on a Claude chat interface or Claude cow which is more about doing your day to day work in Excel sheet or some other plan document. So perfect. Let's see how can you use and install Claude Code? 3. 2 how to install claude code: So you can use Claude Code directly inside your terminal from this terminal. You can use Claude Code inside VSCode. So VSCode is a popular IDE from Microsoft. You can install their desktop app. You can use it from the web browser, and you can also use a couple of other IDs as well. Now, the most simplest way to use Claude Code or install it in your system is by using terminal. So you can use native Installation, which is simply a curl command to install Claude Code. And this is their native installer. I think they removed the NPM package recently. You can also install Claude Code by using Homebrew. Homebrew is a simple installer in Mac, and in Windows, they have inet. I don't use Windows. I'm hoping this will work in Windows as well. So perfect. I'm going to use a Native install, which works great in Mac and Windows. Perfect. You want to copy this and you go inside any terminal of your choice, now, inside the terminal, there are a couple of commands that are very popular. I'm going to increase the size of the terminal so that it is visible to everybody. Now, in terminal, if you have to see where exactly are you currently, you can type LS for list, and it will show you your place where your terminal is open. So you can see my terminal is on the root folder, where I can see my textbook, my document. Let's say I wanted to create a folder inside document where I can safely work with clot Code. Obviously, you can just type CD, which is command and type the folder that you want it to access. And now you can see I'm inside the document folder. If you type LS, you will see all the document or sub folder inside this document folder. So you can install Cloud Code anywhere. It's a global install, so I'm going to press Command V to paste the curl that we copied from Cloud official documentation, and then we're going to simply install it. Again, you can use Homebrew or native installation to install Claude Code. These are just two different option. They don't do anything different. It's a native installer, which simply gives you a CLI to talk to Claude Code, which is a agentic tool and perfect. Now you can see the Claude Code has been installed, here is a version, and here is a location. No matter from where you install, it usually get installed globally in your system. Perfect. Now I can create a folder now you don't have to remember all of these command because I've been working with Claude Code for some time. But generally, if you have to create a directory or a folder, a very short bash command is MKDIR, and now you can create a folder. I'm going to name it as Cloud code because I'm creating a course on Cloud Code. Now this is going to create a folder. If you do LS, which is list again inside the folder, you will see a new folder there you go. Now you can simply copy it and type CD just to go inside the folder. Perfect. Oops, something is wrong, or I miss the E at the end. There. So now I'm inside this folder and perfect. We can initialize clot code. So if you go back to the documentation, and the reason I'm just taking you back to the documentation so that you understand if something goes wrong or if something is not happening properly, you know the place where to debug. So perfect. You can install the Claude Code using the other method as well, and then you can start Claude Code in any project by doing a CD inside your folder and then simply typing Cloud super simple. So you can simply type Claude and the Claude Code session will start. Again, this is a session. So perfect. Now you have a lot on this page, and I'm going to explain it step by step. 4. 3 introduction to first claude code sesson: So there are a couple of things that you need to first understand when you initialize your fourth session in Cloud Code. So I'm already logged in into Cloud Code. In your case, you might be logged out. So let me first log out, and then I'm going to show you how do you log in back. So when you first open Claude Code and you type Cloud, it will ask you a few things like, Hey, do you want to have a dark mode, a light mode and you can simply press your up and down arrow key to see visually which one do you like more? Like, there is a light mode, there's a dark mode, there's a light mode. I think though Auto One looks good to me. It matches with my terminal, and then it gives you three options. Hey, do you want to use Claude Code with your subscription, which I'm hoping 90% of you would be using this option. But they also have enthropy console account which is simply your ABI based pricing, and you have third party platform like Badock, Microsoft Foundry or Vortex. In my case, I'm using Claude Code subscription. I'm going to click on this and then it will take me for a Earth connection, I'm simply going to authorize and perfect. Now, there we have it. Claude Code is now ready to be used. Perfect. I'm going to press Enter and then it shows me some security note. I'm again going to press Entero it says, Hey, do you want to use Claude Code terminal setup or do you want to change some settings. Obviously, we're going to look into the settings part a bit later, but let me explain you what can you see on your screen what exactly is this? I think I installed a plugin which gives you more insight for a normal Cloud code. You might not see this. I think the interface also changes a lot more. If you're watching this video after four or five or six months, you might find a completely different interface of very new model. I'm recording this video as of 14th May. I'm hoping if you watch it by the year end, you might find a different interface. Perfect. Now you can see the version number of Claude Code. I'm on 2.1 0.141 version. This is simply to make sure that Now, you can be on the latest version whenever you are using it. And whenever you use that Bash command, a latest version is installed in your system. It says, welcome back. Now I can see my model Opus 4.7 with 1 million context Window, and my mode is extra high. And I'm on Claude Mx Plan. You can take a $20 plan if that's what you like. And I'm inside the document slash Claude Code folder. Perfect. So it also shows me what's new in Claude Code. You don't have to worry about this. These are often small releases here and there. So perfect. Now let me help you understand a few things inside Cloud code. Every single cloud session has a context. You can see my current context is 0.0. I'm going to simply ask, hey, are you. And it's going to reply me something and you will then see that this context will slowly start filling in. Just with the high, the context is gone by 3%. Now, this is cost which you don't have to worry about because I'm on a subscription plan, and this is your session duration for how long have a session been running? Now, I highly recommend you to be in the same session so that you have good amount of context. So this is all about how do you install Claude Code and how do you initialize it? In the next video, I'm going to explain you all the settings in Claude Code and how exactly do you use it. 5. 4 ghostty a new terminal: So perfect. In this video, I'm going to show you all the settings that are there in Claude Code. And to be very honest, you do not have to worry about any of this because in most of the cases, you may not be using them. But I'm just explaining you this because you should have a strong foundation in case if you want to check things all by yourself. So whenever you type slash inside Claude Code, it gives you a lot more options. The reason I'm showing you how do you use Claude Code inside your terminal and not inside your desktop app? It's because you can see everything in a very raw manner and it is easy to use. In fact, I would recommend you to install a new terminal which is much better than the native terminal, and the name of that app is Costi. In fact, let me close this, the terminal that I was using. Let me use Claude inside Kosti. I'm going to simply type quit and it is going to exit the CLI. My CLI or the Claude CLI has now been exited. If I type clear, everything is gone. Now I'm going to use Claude Code inside Kosti. Now, if you don't want to use CLI, you can just go to the document folder, go inside your Claude Code folder or simply right click on it and say, Hey, I want to open a new osti window here. Now, as you can see, I have so many different types of terminal. I have my native terminal, I have warp as a different terminal installed in my system. I have sti and CMAC. In your case, you just find these two options. And if you install osti, you'll find these two more options. I have four different types of terminals, so maybe I'm a little more obsessed with terminal, I guess. It's perfect. Let me zoom in a bit so that you can see everything, and we're going to type LS to see the list. Where exactly are we And then I'm going to type Claude Code to go inside the folder. I cannot go inside the folder. Oh, I'm already inside the Claude Code folder. In fact, if you want to go back, just type CD double dot, and you will go back outside your folder. So I'm going to go inside Claude Code again because I just came out and perfect. Now I can type clear and clear everything. And to initialize Claude, I'll type Claude. Perfect. So now you can see Claude inside your CSTE, which is very, very better domino. As you can see, things are more clear, more crisp. They look amazing. I'm going to zoom zoom out a bit. There you go. This is your Claude Code. 6. 6 claude code configuration: I was explaining you all the different options that I have inside Claude Code. Now, as soon as you type slash, you will see a bunch of these options. And if I am learning Claude Code for the first time, I'm like, Whoa, what exactly is this? I have no idea what's going on there. So perfect. A great way to a great way to start is by simply learning few configurations in Cloud code. I'm going to type slash config, and it is going to open the configuration panel for me. Now, this is very easy to understand, and I'm going to spend maybe 5 minutes explaining you the most important things and rest other, you can just learn it all by yourself. The first one is autocompact. Now, this has to be true in most of the cases, auto compact is a feature that Claude build so that once the context is full, it can compact the context, and then it can start from fresh. Context is a temporary brain where the gloat code CLI, store all of your code base and instruction and execute based on that instruction. Now, once the brain is full, it has to compress that memory and that's what autocompacting is. Next one is showing tape. This is true. You can have tip. Redish motion is basically CLI functionality so that it doesn't flicker. I'll tell you the most important things in this because otherwise, we'll be spending hours here. Thinking mode is what is basically a way on how Claude is thinking. Do you want to see that on the UI or not? Prompt suggestion is that when you're typing something, do you want Claude to help you with different suggestions so that you can write your next prompt in a better way? Let me see what else is important. Default permission mode. Work tree is a separate concept that I'm going to explain you. Then there is a auto mood which auto approves everything. Get ignored. I think there are a lot more things that I can explain you as we go ahead in the course. And let me explain you the most important things. When you go inside your configuration, you can press Tab to move from settings to config to usage to stats. Let me show you a few things that are important. So when you look at status, you can see your version number, the sessions on which you are right now, the login method, organization, and other basic details. I think I'm going to hide this information. When you look into configuration, this is the different configuration that you can customize according to your requirement. The default one is great, so we are not going to touch that. I'm going to explain you what exactly is compact mode, thinking mode, and everything else that's there inside the configuration. Then you have usage which shows how much Claude have you used in your current five hour limit or the weekly limit. So it shows you your weekly limit of all the models, the Sonnet model, they have recently launched clot design as well. Then it shows you the overview stats. So as you can see, I've been using a lot of Cloud code in April and May, and it shows me my favorite model is Opus 4.7, which is the latest one. This is the total token I've consumed, so just the high level stats. So I'm going to come out of this and I'm going to help you understand things by actually building them. So instead of wasting more time explaining you what are these configuration, let's actually build something and then we're going to use it. 7. 23 claude vs codex and cursor: Now, before we move ahead in the course, I want you to cover something which is very important. So right now, you can only use Claude Code only when you have a subscription. So their subscription starts from $20 a month and goes to $200 a month depending on what's your usage. Now, I personally have $100 Max subscription, but I understand. A lot of you don't really want to pay $20 just to use Claude Code. So I'm going to show you a couple of alternative that you can use, and you will be able to do the exact same thing with these alternative. The first alternative is Codex. Now Codex has a free plan that allows you to use their coding agent without paying much money. Now, they do have some other plans like they have a go plan in India, which cost you just 400 rupees. They have a plus plan, which is around $20, and they have $100 plan as well. So if you are someone who just wanted to try out these AI coding agent, then Chat GPT is a good place to start. They give you a limited Codex usage on a free plan, and I'm guessing if you just wanted to build something very small, just to experiment with these AI coding agent, then you can use Codex CLI, just click on Codex, and then you need to install their CLI. This is going to work exactly the same way, just like Claude, and I'm going to show you how do you use Codex, just like Claude Code. So just go to the developer documentation, click on the CLI, and you can install the Codex CLI and you can start using it right away. This is the first alternative. Codex free tier is quite generous and you can build a few things all by yourself. Another option or alternative to Claude and Codex is Open Cod. Now, Open Cod is wildly popular because it's opensource. Now, you can use all popular model within OpenCd like they have Kimi k two, Quin Model, Deep Seek model, and they also have OpenAI and anthropic model. If you go to their pricing page, you can actually use Open Cord for free or they have their plan starting from $5 for the first month. Just like any other coding agent, they also have a CLI, so you can just go to their developer dogs, click on CLI, and you can install OpenCod and you can start using it right away. All of these AI coding agent are really good, and I don't find any major difference when I was using Claude versus Codex versus Open Cod. So this is the third alternative that you have. The fourth one is Cursor. Now, Cursor is a IDE. That means you can install Cursor in your system. But if you wanted to use their CLI, well, they also have a CLI. You can just go ahead, install their CLI and start using them. In this video, I'm going to pick Codex because I feel Codex Codex free tier is quite generous and a lot of people can actually use it for free. And they have really good limits. I'm going to click on CLI and I'm going to install the CLI. So you open any terminal, you can just use your native terminal or you can use our terminal like Cost that I have installed in my system. You can just globally install Codex CLI by simply typing NPMiGlobal and install OpenAI Codex. That's it. You will be able to install their CLI and then you can type Codex to simply start this, and yeah, if it asks you to login, just simply type slash login, slash Logout to log in and Logout, and you can change the model by typing slash model. Now, if you're using Codex, I recommend you to use the latest model, but reduce the effort or reasoning to medium so that you do not really exhaust your limit really fast. And also, turn off the fast mode if it is enabled. So if you can see that there is a fast mode, you can just turn it off. Simply type slash fast and you can turn off the fast mode. Perfect. And now you can start using Codex just like any other coding agent, whether it's clot code or open Code or Cursor CLI, all of them are exactly the same. Even if I just type something for you, you can actually type slash, and you will see a lot of options which are exactly the same, just like Claude. Slash Model will give you the access to all of their model options you have. Slash permission will allow you to edit Codex permission. Slash memories, sky slash skills, hoax review. Most of the features and functionality, whatever is there in Claude Code is exactly going to be the same. I recommend you to use hatGPTs Codex if you are someone who doesn't really want to pay for Cloud. And you can also try out a few other CLIs Cursor gives you really good limit in the free tier. So Cursor also has a generous free tier. Perfect. I'm going to type slash quid to close Codex or slash Logout to simply log it out. Same way, you can just open the CLI doc of Open Cod and you can install it. You can do the same thing with Cursor as well. Perfect. This is a way to use any cloud alternative if you don't really want to pay. 8. 7 first chat with claude code: So perfect. Now, when you're building something in Claude Code, you need to understand that it's a coding agent. That means it can do a lot of things for you, but you need to specify them and approve them and steer this model to get the desired output. That means if you give it something, it will do a great job when you specify everything and steer it in the right direction. So let's start by building a small to do app. App that we almost everybody has used and built. So we're going to build a Todo app using clot Code. Now, there are two ways you can build it. Either you can just simply type, Hey, can you help me build a Todo app? Now, there is one more nice functionality that Claude Code has in their CLI. If you press and hold the space key on your keyboard, you don't have to type anything. You can actually speak and it will type it for you. So I'm going to give it audio permission. Will you be able to build it for me? Oops, no microphone has been detected, or I got the issue. So I'm using my Macbook Pro in a closed mode, and I've connected my display so it is not detecting the mic, but you will be able to just do it from your own system. In fact, I'm using another voice to text feature. I'm using Whisper flow, so I can also use that. Oh, same issue. I think the lid is closed, and that's why I'm not able to record anything. It's perfectly fine. We've got to type it out. So I'm simply going to ask it a question, and let's see how does it respond and what does it ask? So if you carefully observe, it is thinking through my prompt with extra high effort. And this that you see on your screen is a thinking mode. That means it shows me what it is thinking and how exactly is it thinking. Now, as soon as I typed something, instead of giving me a reply, it is asking me a bunch of question, which is really good. Cloud Card is really good at understanding trade off. That means if there are five different ways to build something, it will ask you exactly, Hey, I have these three options. You help me understand which one is good for you. For example, it's saying that hey, how should the Todo app store the data? Does it store the data into the local storage? That means you will simply open this Todo app inside your system, and as soon as you refresh it, the data is gone. Now the reason it said that this is a recommended way, it's because my prompt was very generic. I didn't specify anything about what the tex tech you should use, how you should build it, what should features and functionality we should have? What will be my login, authentication, storage? Because I haven't specified anything, it is asking me a bunch of questions like, Hey, do you want to use local storage, which is client site, and as soon as you refresh, your data is gone. Do you want to use Vercel to deploy it, post cress for database, or do you want to have it in memory? Now. This is just a demonstration. I obviously don't want to build something just based on such a small prompt. But let's check all the question. I'm going to press step to move to the next question. Then it is asking me, Hey, what styling do you want to use? Do you want to use tailwind, which is a CSS way to style your app? Do you want to use SAD SN component, plain CSS, and then I have to submit it. Now, I'm obviously going to press Escape. So as you can see, it says, you can select tab and arrow to navigate into all these questions or you can press Escape to cancel. Obviously, I am going to press escape because this is too small of a prompt to build anything. So if you press escape, all of this will be gone. There you go. It says that the user has declined to answer the question. Perfect. Now, I'm going to type the same prompt and if you want to do that, you can either copy and paste or you can press aero key when you are inside the terminal. There you go. Now I'm going to ask a question. Just tell me if you can or not. Now, I have explicitly mentioned if you can build something or not, if yes, what is the best option? Now, the reason I'm asking open ended question, it's because I want Claude to also help me brainstorm my problem inside the Claude Code session. Perfect. Now, if you can see the response that, Hey, this is the textech that I will recommend you can use Nextes which is simply a framework on the top of react and tailwind and SACN and Local stories to quickly build a polished todo app for you, do you want me to go ahead and build it? Now, if you read carefully, most of the PMs have no idea about what is next year as an app router, what is tailwin, what is SAT CN, what is local storage. And you don't really have to know that. These are just the front end framework, but you need to have a basic technical foundation on what all elements your To app will have. And to do that, you need to use a plan mode. 9. 8 plan mode in cluade code: So I'm going to use the plan mode. So perfect. Now I'm asking a very simple question. Can you go ahead, create a plan for me and build the Studio app that I can use in my browser every single day? It should have login, signup and other basic functionality in place, and just ask me question when you actually have real date off. And I'm simply going to press Enter. Now, if you think carefully, I have mentioned create a plan. Now, Claude has a plan mode, which will take you inside their plan. It will first create a plan, ask for approval, and then only it will start building it. Because remember, the problem with the above approach is that it was directly started building the Studio app. So perfect. Now it went into a plan mode, created a plan for me, and then it is going to ask me if you want me to build this app for you with this plan or not. So it is now creating a plan. It has not finalized it. So as you can see, it decided the textac all by himself. And obviously, we can discuss this why it has picked the textck which is most desirable for clot code. Like next year's is battle testu for front end. Drizzle ORM is very popular lately. PostcRs is most desired database. It is using a Oath provider, and as you can see, this is your textag, this is your authentication layer. It has signup sign in, sign out, protected route, database, UI, and it can deploy things for you. It is doing a lot of things. And if I'm a non technical person, my first question would be, Hey, I absolutely have no idea about this, but let me still read through this and see what Claude suggested me. It says that for authentication and database combination, this is the biggest architectural choice. So choose one carefully. Do you want to use Clerk or Neon database, or do you want to use super Base? These are two different combination. So I as a non technical person has no idea, but I'm still going to pick whatever Claude suggested me. So the first option is Clerk for login authentication and No to choose as a database. Let's say I'm going to pick the first option, then for V one, I'm going to just make it lean in my plan and let's create a plan. Again, I quickly answered the question because I wanted to see the plan and then I'll decide if I wanted to change things or not. So I'll say go into Plan Mode. And create a plan for me. And then I will approve that plan. So the plan mode is a very popular mode. If you type Plan inside Claude Code terminal, it will show you you can enable a plan mode of your current session and you can plan things better because nobody just want EI agents to start executing things without understanding the business, the technical, and the trade off. So as you can see, the cloud is thinking right now. It is constantly using input and the output tokens and Yeah. So it is also giving you the thinking process like, Hey, there's no code base to explore. I'm skipping straight to the plan, and I'm using this textck. So perfect. As you can see, it has created a plan for you and this plan lives in NOI dot Claude plan, and you can actually see this markdown if you go inside this specific folder. In fact, you can click on this by pressing Command key and we'll open this inside ID if you have installed. So as you can see, this is a plan that I'm seeing in my op terminal. So this is a markdown view and as you can see, it has written a good plan for me. I'm going to close this because you may not have b terminal, and I'm going to read this over here. So perfect. This is your plan that Claude created. As you can see, this is a plan of your Todo app that you're building with authentication. So you want to create a Todo app that you can open in your browser and use it every day. It has sign in, sign up, login and everything else. We are using Clerk for authentication, Neon PoscRSF database. And as you can see, this is your textag which it has automatically picked and then you can see how it is going to build things in phases. First, it is going to install everything like the latest packages, frameworks, libraries, it is going to install next year, SAD CNF front end and initialize ENVs where you can just enter your value and then in the second phase, it will start creating authentication using Clerk. Clerk is simply your identity verification infrastructure platform that allows you to build login, sign up, everything else. Then you can see it is then building your database, building some server actions so that it can do crud operation, which is create, read, update, and delete your todo items, and then it is going to create your UI or interface, and finally, it will polish it and then deploy it somewhere so that you can use it. So perfect. It looks great. Now, you can actually choose one of these three options once you have read your plan. Let's say I wanted to make some changes in the plan that hey, don't deploy it anywhere. Let me first test it. So I'm going to see once you are done with your development, Don't deploy. Run it locally. That means before deploying anything to a cloud, I just want to check it first. Rest all looks good. So what I'm doing is I'm making changes to the plan before it is actually implementing the plan. So the first option was that, hey, just go ahead. Go inside the automode and start implementing it. The second option was that, hey, go ahead and implement it, but I will manually approve the edit. The fourth option is that hey, make this small change and give me the plan again. So I want it to make some changes and it will create a plan again. So Perfect. So you can see this red and green lines. Red is what it has removed, and green is what it has added. Now, right now, I'm updating my plan, so it is removing things from the plan and adding new things based on my instruction that I gave. And great. Now it says that, hey, the intended outcome is running it locally first so that the user can see it and then doing things later. It's perfect. I have two options. I can either use automde where it simply approves everything and doesn't ask me, or I can use a manual edit. I'm going to pick the auto mode, but in manual one, I have to press or approve approve button multiple times. So great. I'm going to wait for a few minutes and let it build the Studio app. 10. 9 Building app using claude code: So perfect. I'm going to explain you a few things as it is building through this product. So it created a to do that it is going to follow as per the plan. So if you go back to the plan, remember, it created phases. Phase one, it is going to install everything, Phase two, it is going to implement authentication, then database implementation, then UI, and then it is going to polish the UI and run it locally, and then it is going to check everything and then you can build it here, and finally, you can deploy it. So as you can see, it is going through everything in phases, and it is installing the dependency, the packages, and everything. So first, it is going to install next year, then it is going to re authentication, then database, then it will do some crowd operation to make sure everything has been properly configured, and then it will build a todo. All looks good to me. I'll come back in sometime and then we'll check if it is able to build the two do app or not. Now, whenever it is building things, you can keep asking some question by typing slash BTW. For example, I saw this option. What exactly is this? Actually, you can just copy something or ask it some questions like, Hey, I'm curious why are we using Clerk for login and signup. Now this is a great way to learn things whenever Claude is building something for you. Now, when you have to type BTW, otherwise it will que the request, and that will be bad. So as soon as I type BTW, it is asking me, it is giving me some answers, and this is not impacting the code that it is writing. So as you can see, Claude gives you sign in and sign up and password reset and email verification in about ten line of code. That means just by writing ten line of code, you'll have sign in, sign up, password, email, social login, and LLMs encoding agent love to save time and that's why to quickly wre things up, they are using this. It has pre style components and it has native integration with Versal next year. It gives you real time user management. So it has given you a very quick answer. Perfect. You can press Escape and this answer will be disposed. And we are back to AI coding agent, which is building and implementing things. So perfect. Now everything has been done. As you can see, all the fess has been completed, and if you want to start using it, it has created a database for me, or it is actually asking me to create one, and then you can run your app locally. So perfect. Now, it is asking me to do a few things which is important for this app to run locally. So it is saying that, hey, get your Neon database first, so go to this console, create a project, copy the connection string, and then just piece the database R over here. Now, one question you may have in mind, now, what is this ENV Local example and ENV Local? Why is it asking me to create a database, paste a URL, and some API keys? What exactly are these and why my product is not running. If you go to Local host 3,000, you won't see anything. Something is wrong. Now, I wanted to show you a few more things before we go back to Claude Dextropp which will give you a much better user interface. So I'm going to first click on Quit, which is going to close my Claude Code session inside CLI and again type Cloud. Now when you again type Cloud, it initialize a new session. But I have no idea because see, if you look carefully, the context is zero, and I literally have no idea what I was working on. To do that, you need to type resume, and it will give you all your previous session. Remember, this was my previous session where I was building a two to app. I'm going to click. I'm going to press the down heroky and no. And now my session is resumed. Perfect. As you can see, I was using Opus 4.7, my context was 13%. And if you want to check all of this, you can actually change the model. You can type slash model to change your model. Now, obviously, the default is 4.7 with 1 million context window, which is best in the industry, and most of you are not building complicated project, but if you're building a super complicated project that has multiple microservices and a large code base, then you have a effort mode. How much effort you want this model to think. So if you press slash EFFOt, you will see low, medium high extra Max. Now, for you, medium is going to work great. If you are trying to build something new from scratch, medium is more than enough. Now, I'm going to switch back to Xi because I have a lot of tokens to burn, but you should be on the medium plan if you're on a $20 plan. Another thing you can check is by typing usage to check how much of the clot code have you burned. Now, I added this nice, interesting bar below every session that tells me the usage right away. You can also use some plugins like Codex bar to give me the usage of Codex and Cloud Code. You can just go to the web browser and just install Codex bar, and it will give you the same thing Codex bar. I will tell you the usage of your Cloud Code, Cursor, whatever agent that you're using coding agent that you're using. Another thing you can use is config or you can check the status. And that's it. I'm going to again exit this 11. 10 intro to claude desktop app: Let's open this inside IDE because terminals are really bad at interface. In fact, I can close this and continue from a Claude desktop app. So I'm going to say, Hey, I just want to quit. I'm not liking the CLI, I want to use Claude App. Now I'm going to use Claude desktop app. Download the Cloud dextro app. You can install it in your system, then you can simply log in authorize, and then you can use Claude Code inside the Claude Dktoapp. The reason is that you will have a much better interface. Now, I'm already using it for my multiple project. So great. Now let me also give you a small tool to Claude DextoApp so that you know how is it different from terminal? How it will give you more visual look and appearance if you are a non technical person. As you can see in the Claude dextro app, you have three mode, chat mode where you can chat with Claude, cow mode, which mostly helps you with your day to day task and the coding mode, where you can actually write a code, and you can see all your sessions over here. Then you can see your profile, I'm on a max plan, and you can see a few modes here and there. Then you will see that, hey, is your cloud running locally or on Cloud? Now, in this case, my code is running locally, so I've picked locally, and you can then choose where exactly your code lives. My code lives inside my document and inside this folder, Claude Code, and I am on a mean branch, I'll discuss more about why do you need a branch and why they exist and why it has created a tree and what exactly a tree is. Then you can see it has four different mode. Do you ask permission each time whenever you are doing some action in my code, or do you auto accept or are you in a plan mode, or you have a dangerous Bypass permission? I'm going to explain more. But basically, you can be in the Automde which automatically approves all your code, and you don't have to manually click yes, yes, yes, so many times. This is your chat. You have different mode. Right now, my microphone is not working. This is the model that I have chosen, which is your oppose 4.7 high. You can switch it as if you want. 12. 11 Better GUI for claude with cursor IDE: So this is my Cord base, and I'm going to explain you in the next ten minute what is there in the Cord base and what we will be doing to integrate and run this product locally. So I'm going to use Cursor for this purpose. You can use any ID of your choice. You can install VS Cord, Cursor, windsurf, op, whatever you like. So we'll start from top to the bottom, and I'm going to spend 10 minutes explaining you the entire code base, not to teach you something, but just to give you a high level understanding. So at the top, you can see a Work tree, which was created because I opened the Claude desktop app where a tree checkbox was clicked and Work tree is a way to work on multiple feature by simply creating a clone of your code piece. That's it. You do not have to understand about it now, but we'll come back to it later. Below that, you can see there is a Clerk folder, next, drizzle, node modules, public, SRC, and a bunch of these files. Let's understand about them one by one. The most important file for you where your actual code base lives is SRC. SRC is your source where most of your code base lives. If you click on app, this is where your major app interface lives. As you can see, we are using NextGs app Router so you have different components inside your to do app. So this is your to do form component where it has all the form field. There is a filter tab, there is a to do item tab. There is a list feature going on. So you can see all different components. Then you have a sign in and sign up functionality in your app. Where we are using Clerk so that we don't have to write a lot of unnecessary code or this AI agent doesn't have to do that for you. Then there's a middle layer that will authorize every request, and then you have nwt local. This is important. So what is ENVs? So ENV stands for environment variable. These are the secret that you have to hide from everybody else. So this is an example file that means the actual nv dot local is not created, and I have to put all my secret over here. First, I'll go to the Clerk Dashboard and enter my publishable key over here. I'm also going to enter my secret key over here and I'm going to enter my database URL. So I will go to console dot Neon dot tech, and I'm going to first enter my database URL. You can create a new account. 13. 12 configuring env and keys for your product: First, let me explain you what are environment variables. So when you use any product, you need to authorize yourself if you have the ownership to use that product or not. For example, if you enter in a building, you have to tell the security person that, hey, either you work here or you came here for a meeting. So you have to authorize yourself. So when you're using a different product, you need to tell the system that, hey, take my keys and authorize if I'm the right person or not. Now in this product, we are using Clerk. For authentication and authorization, we are using Neon PoscRS database to store our data. So if you open Clerk, you will see that it is a SAS product or a tool that lets you build user authentication and authorization quickly. Perfect. So you can sign in and simply start using them. To use them successfully, you obviously need to create an app and do a few sorts of things so that you can later on pay for this app if you want to have additional functionality. So you need a publishable key and you need a secret key, and you can get it from their dashboard. So I'm going to create a app in their dashboard, and as you can see, you can add all of these component to simply create your sign in and sign up flow. Now, if you don't want to do all of these boring things all by yourself, I have one shortcut for you. That shortcut is by using CLI to do all of this work, automatically using AI agent. But I'm not going to do that. I'm simply going to create a application and I'm going to do this man willy so that you understand what we are doing. Again, all of this is handled by our app. We will go to we will figure out a place where we can generate our API key. There you go. There I can see API key. Again, if you look carefully, this is hidden on purpose, intentional, and it should be. I'm going to keep this hidden on purpose, and I'm going to type this API key and then we're going to continue. Now for Neon database, you can sign up, do the same thing, and you can create a project. As soon as your project is created, you will see that it is giving you something that is again, hidden. If you click on it, it is visible. I'm going to blur this or hide this for now. Perfect. Now I have configured my Neon database, my ENVs for Clerk and everything is looking good. 14. 13 running your product locally : Perfect. So now I have configured my Neon database, my ENVs for Clerk and everything is looking good. Let's start this. I'm back to the CLI or terminal, and once we have things up and running locally, then we're going to actually use it inside Claude Dextoppp. Great. As you can see, here is our Todo app. Let's use it. So I'm going to use my email ID to authorize into this todo app, and then we're going to use it. Let's write Todo and then we're going to see how things are working. So next year is giving me one issue. We're going to solve it later. Let's write a Td. Okay. Okay, there you go. You can see you can add a date to this todo, and you can add more. You have active done and all todos. It's perfect. It has a dark mode and a light mode, and things are looking good. You can also delete this. Perfect. So this Studio app is looking amazing. So perfect. Now, let's say you wanted to make some changes to this Studio app. Now we will close the Ghostty and we'll work directly from Claude DextropppO you can continue working from Ghostty as well. 15. 14 commiting and pushing your code to github: So we're going to first push this app to a Cloud hostile environment so that you can share it with your friend. Now, to do that, you can manually configure things inverselO you can give some control to your CLI, and I'm going to use the CLI approach. Now I'm going to see so I've written a prompt in a very non technical way, but I have mentioned the technical stuff, and let me show you what I have written. So, hey, deploy this because I want to show this project to my friend. You can deploy this on versal, and you use the CLI. This is interesting because you can either open dashboard, copy paste the keys, environment variable, or you can use their CLI, which will do the authorization and everything all by itself. So perfect. I'm going to press Enter and then it is going to do a few things for me. It will first check the project status, then initialize the VersLCI, ask me to login into VersL and then it will create a project in versal and then deploy it. And then I can share this project with my friend. Perfect. Let's see if it is able to do everything or not. Also, you can see I have written 9,000 new line of code, and this code is not committed anywhere else. So I'm hoping before it actually deploys anything, it is going to commit somewhere. I think it is not going to commit somewhere. So to commit your code, you have to commit it on GitHub. And actually, let me do that first so that you understand this. You go ahead and commit this code in GitHub, Now, there are a few things that you need to understand. Whenever you are writing some code, you don't want to lose access to that code when you're building something new. Or let's say you're building feature number one and you want it to just deploy this feature, make it live for the user, and then you want it to start a new feature. So you have two options. Either you can create two different branches of your code so that you can work on two feature at the same time and merge them together, or you can complete one feature, and then you commit that, and then you start working on a new feature. So we will discuss about GitHub branching, how do you commit, push, and merge your code, and we'll discuss a lot about that. But right now, I just want to commit my code to my GitHub profile using Git, and then we will see how does the committed code will look like? And later on, I'm going to explain you the CICD pipeline of this whole process, which is a little overwhelming right now. So it is creating a GitHub wrapper, which is simply a folder in GitHub to store your code, and then it is pushing the code virtually. So even if I lose the access to this system, I'll still be able to have access to the code. So perfect. It uses my GitHub sign in and it created a folder virtually on GitHub where all of my code base lives. So as you can see, there is a todo app that I created and all my code is inside GitHub, and now I can access it, open it from anywhere I want. And in the read me, it has clearly mentioned everything. If you look carefully, there is no ENVs over here. That means it have not committed the ENVs. I guess this is private repo. I can make it public if you want, go to settings and make it public. But again, not very important. All of your code base lives here and in some other video, I'm going to explain you how do you actually push, commit, and merge your code base? And what are these branches and how are they useful? Right now, as you can see, I am on a main branch, which is what a user normally sees. You can create new branches, for example. Every time I wanted to build a new feature, I don't want my real users to see what is breaking, what is not breaking. What is this new UI? What is this new feature? I want to work in a new branch, where I can test thing in isolated manner and build them. So I've created a new branch Dev. Visually for you, you can do it from the code as well. Let me switch the branch. So we are going to switch the branch to Dev and then we will improve the product and make more changes. So earlier it was on the mean branch. Now it is going to switch the branch to DF and perfect. Now we are on a dev branch. So you maintain a local branch and you maintain a remote branch. So we are now switched to the local def branch, which is tracking the actual remote branch. So perfect. You have some bash command that I don't want to explain you to confuse you, but perfect. Things are looking great so far. Now let's start making changes. Now there is one problem that we observed with our product. The UI was very small, like I have to restart the server, but the fonts and everything was looking very small. So I asked it that, hey, can we improve the overall UI and make it bigger so that I can use it in my Dektop and mobile app? Let's see it. Now, the benefit of using Claude Dktoapp is that you can see, you can see what all file has been edited, What allCde has been removed, What all has been added in a very nice fashion. That's why I like Claude Dextoapp for Claude Code and cow. Perfect. Let me open a terminal inside the Claude Dektop apple try to run this. I'm not sure if you're using NPM or you're using PNPM. Perfect. And if you refresh this, you will find that your project is up and running. Perfect. The font has become bigger now and you can clearly see it on your screen. Let's see if this is mobile optimized or not. So I'm going to change the responsiveness to iPhone 12 Pro and perfect. This is mobile optimized as well. There is one next year's issue that we can solve it later on, but So things are looking great. Everything has been working, and now I want it to deploy this project, and I wanted to share this with my friend. In this case, we're going to use Vercel to deploy this project on a specific subdomain. We have to buy actual domain name that we're going to do later. 16. 15 deploying your project on vercel : Now, I'm going to see. Hey, just go ahead and deploy this on Vercel so that I can share this with my friend and use it. And I'm going to quit this Command C to quit this and I'm going to close the terminal. So as you can see, it is deploying my project to Vercel, and then I'm going to open this project inside a specific link that I can share with my friend and they can use it as an actual product. Remember, we have our back end configured, we have our front end configured, and everything is working great. And as we deploy this, I'm damn sure we'll stumble upon new kind of problems. The goal of building a product is to keep solving problems so that you know what is happening and you have a proper control. So we are now deploying our projects front end to Vercel. So it says that, hey, the build has been failed because your database, URL, and Clerk keys were not configured. Okay, so it says I need explicit permission from you to push your keys into Vercel. So I'm going to give you the permission. So perfect. I want you to use my local keys and push them to VersalE&Vs. Now, you can do this manually if you go and open Versal Dashboard, and I'm going to show you that as well. In the meantime, you will see I have a bunch of product and let me see our todo app is over here. You go inside settings and you will see the environment variables. So right now we are in preview, so there's no environment variable. You can create environment variables and write your keys and value payer here, and then it will use these keys to run your project. I'm going to close this for now because we are doing everything directly from CLI. You don't have to open the dashboard. So I'm going to close this and we'll beat. Okay, so I was facing some issue because my deployment was blocked by the wrong GitHub user names. So I spent a bit of time and fixed that issue. So if I open the words Dashboard, look at the deployment, you can see multiple deployments were blocked. And if I go inside the deployment, it says the deployment was blocked because the Commit author email was this. This is my MacBook address name. It should be email. It's not valid, and I need to ensure that I'm using email or the username. So I spent some time. In fact, I asked Claude to just fix this issue. It gave me a bunch of step. I ran through these steps manually. Even I can ask Claude to do that for me, and I was able to solve the issue. Now, this reminds me of a small thing that you need to understand is debugging. You can debug things from terminal, but one of the most important tool that you can use to debug is CLI and the dashboard itself. So now as you can see the app is ready, and I'm going to open up the app and I'm going to show you how exactly does it look. So you can share this link with your friend and they can explore whatever app you have created using clot Code. So it gives you a small link that you can share with your friend. Obviously, you can configure your own domain name if you have P cheese or domain name. But let's say for now, you can share this link and they can explore this specific product. So I'm going to sign in and then I'm going to create a to do, and I'm going to show you yes how does the overall product work? Perfect. I'm signed in and if I create a todo, let's say I wanted to have breakfast and I'm just randomly creating todos. These are my todos. I can just mark it as completed. Let's say if I logo or sign out and sign in again, one important thing that you will observe is that my data is persistent. That means the product is deployed to Cloud and my data is not lost anywhere else. So whatever actions that you do, whether you are creating something new, updating it, editing it, or deleting it, the data is preserved. You can open this in your mobile phone. You can open this in your laptop and everything works perfectly fine. So this is mobile interface. You can just do the same thing using your mobile app as well. And you can, you know, further improve this and make it better. Use different type of font and add additional functionality and features in this Studio app as well. 17. 17 intro to skills in claude: So perfect. To explain skill, I'm going to type skills Claude Code. Now, skill is simply a markdown file with a specific guidance that extend the capabilities of Claude Code to do a certain action. In fact, if you read the documentation, it clearly says that, Hey, you can create, manage, and share skill to extend the Cloud Code capabilities. And you need to create a skill with skilled dot ED file with proper instructions in it. Now, you may ask, well, now what is a skill and why do you need it? Let's say Claude doesn't understand the design system of your company. You can actually create a skill by highlighting all the design systems that you have in your company, and you can simply add that. Or let's say you have a specific CICD pipeline that you want to follow where you can create a skill, and people are creating different kind of skill so that Claude can work in a proper predefined fashion instead of just going into some random direction. Now, one of the most popular skill that a lot of people use, and the reason I'm telling you to use a specific skill created by somebody else's because it's easy to use. In fact, we can explore a lot of skills inside Claude Code. So I'm going to open the same folder and initialize a ghostly session, and I'm going to show you where exactly does the skill lives. So we'll go to service and open a ghostly window here. Then I'm going to type Claude just to initialize it and you can do the same process in Windows as well. Now, you can resume a last session by simply typing resume or you can actually start a new session. I'm going to resume the last session that I was using inside their desktop app, and now I'm going to type slash Skills. This will show me all the available skills that are present, and I can use those skills. Now, many of these skills are installed by me. Many of them are present in their marketplace. So I'm going to go to their marketplace and show you what all skills are available and how you can use those skills. So to extend the capabilities of Claude Code, Cloud Code built a marketplace where people can actually add their plug in and their skill so that they can be used by Claude Code to steer them in a specific direction. So first, I'm going to show you what is a marketplace. How exactly can you use it? How can you use different plugins from the marketplace, and these plugins may or may not have skills in them. So let me go to Marketplace and open the plug in marketplace. So I'm going to type plug in, and you can see you have almost 165 plugins. Now, in fact, you can find a plugin of all the tools that we have used, and this plugin will simply be a MCP server. So let's type Clerk and see if they have a plug in loop. They don't Neon, yep, they do have a plug in, which allows you to use their MCP server and you can create, modify, delete databases, and do all sorts of things directly within Cloud code. In fact, you don't even need MCP. You can actually use their CLI. Both of them works. So this is Neon. What is the other product that we used? I'm sure they'll have a versal plug in as well. I guess I have already installed it. You go to Installed plugin, you can see WorsL is already installed. I have added a Figma MCP server, Gmil and a Google calendar. MCP server is basically a way to give access to their API so that Claude can use it perfectly. And then I have a Claude Hut plugin which gives me these stats. So if you hit Escape, this is Claude Hut, which will give you every stat just below the Claude Code. So plugins can do everything from improving the Claude Code CLI to allowing them to give access to do a certain things. So I'll go again and open plug in marketplace and see all the thing that are there in the marketplace and what has been installed. 18. 18 creating your first skill in claude code: Okay, perfect. Now I'm going to explain you what is a skill, how you can create a skill inside Claude Code, and how actually you can use it. Let's say you are a product manager and your job is to solve user problem. So you talk to multiple user, understand their pain point, and then you try to solve that problem. Let's say you are also a builder who knows how to use Cloud Code and you love building solution. So whenever you use Cloud Code and you want it to do a certain set of task in a specific manner, you have to give it a lot of context, which is sometimes overwhelming. For example, let's say you have a list of five to ten problems your users are facing and you want to write more scenarios and cases and you just want to brainstorm the problem more before actually building a solution. But you don't exactly know, hey, what's the right way to brainstorm a problem? You can actually build a skill and name it as PM brainstorming. Every time you type, hey, use PM brainstorming skill, and that skill will have a certain set of actions that the Claude will perform. Which in technical term is giving a list of markdown so that it understand your approach in a really good manner. For example, let's say a user want or export functionality in your product. Your first question would be, hey, why do they need it? So you will ask yourself, is the Excel any different from the data that is shown in the dashboard? That means there must be more data that's available in Excel than that's shown in the dashboard. That's why they need it. Another reason could be that they wanted to use that data elsewhere, or they wanted to share that data with somebody, or they want it to reconcile. So you want to give it a specific set of actions that you as a PM do to solve a problem, or how many merchant are facing the problem. So if your list of questions would be like, Hey, I want you to understand what is the problem, how many people are facing the problem? Why are they suffering? And what solutions are possible? And what is the trade off between each solution and what other scenarios we need to handle? This is a list of process or caution that a product manager usually go through. Now, if you don't want to go through all of these manual process all by yourself, you can create a skill. You can just create a skill and name it as maybe let's say feedback hunter or feedback analyzer. You can name a skill whatever you want. Next time when you get a feedback or problem, you simply type, Hey, use Feedback analyzer to analyze the feedback that we are getting from a merchant. Let's go ahead, create a specific skill, name it as feedback analyzer or you can create one more skill with the name idea generation that does the exact same thing, like what is the new idea, how it can make money? How is it related? How it will solve the problem? How many how many user problems will be solved effort level of building it. So perfect. You have a lot of questions that you normally ask or go through before you actually start the implementation. So I'm going to open Claude Code, and then we're going to create a skill. Perfect. So let me zoom in a bit. So perfect. Now, to create a skill, you can actually open a code editor, write the markdown all by yourself, or you can actually use a skill creator or you can actually use a plugin which can help you create a skill. This plugin, skill creator, just click on it, presenter, install the plugin, and great. Now you specify that he's perfect. I'm giving it a prompt that hey, I'm a product manager. I want you to create a skill so that when a sales team or my PM team or our CEO gives us some cool, interesting idea, we check a series of questions that we need to ask to them to understand the depth of the problem, the different ways by which we can solve the problem, and you can ask more questions from me to understand the context of the problem, and then try to give it a score in terms of one to ten in terms of how much effort it will take. What is the impact and advantage? And you can use websearch to understand where our company exists or where our product exists in the competitive landscape. And you can use the skill creator plugin that we just installed to create this skill. Let me press Enter and let's see if it is able to create a really good idea brainstorming skills for us or not. So let's wait for some time and we'll see if it can come up with a cool, interesting name to the skill and if it is able to create this skill or not. If it does, what all markdown, it will be writing in that specific skill and we can then just improve it or change it further and see how well the output comes back to us. So it is asking me a bunch of question that hey, how should the skill conduct the interview with you? So the skill should ask me three to four question at once to understand the depth of the problem. Then it is asking me, Hey, what output do you want at the end? I want a perfect PM kind of a memo which shows me the problem, the affected user, the framework, or I would say, a perfect scorecard or a verdict is better, which uses a RC score. Oh, perfect. This one is better. This is more qualitative. The ton, do you want a ton to be push back honestly, a neutral analyst or a devil's advocate? Maybe push back honestly and submit. I've given it these three answers to all the questions that it asked to create a proper skill for me. Now, this skill tool is really good because now if I ask a specific question, it won't hallucinate and give me a long answer. I will exactly tell me that, hey, this is what you should follow. Okay. So as you can see, it has created a skill for me and named it as PM Ida evaluator. Which will ask me a bunch of question, then it will give me the output in RICE, which is your reach, impact, confidence, and effort, and IS and Moscow, these are all different product management framework, and it will give me a decision like go, no go, need more information verdict and try to push back honestly. I'm going to click yes and it will be creating this for me. It has created this skill and let me try to open this in a much better interface. So now you can see it has created this skill for me. It has given this skill as a name, PM idea, evaluator, and this skill has a description and a proper step by step process that hey, you are a senior PM evaluator. So it says that hey, you are a senior PM mental model in a skill. You get triggered when somebody asks the CEO is asking for this specific feature or the sales team is asking for why, and you need to first look at the problem statement and ask them questions like who is asking it? What is the problem, who is facing the problem. Then you need to gather evidence and impact. Then you need to see if only a specific group of people need it, then you need to score them using RICE method. You can also use Ice or Moscow method to do it. Then you need to give them a final verdict. So perfect. Overall looks good. I mean, you can spend more time reading through it if you want. But the main idea of skill is to do a certain set of actions each time so that time can be saved and you do not have to specify same set of instruction every single time. 19. 19 using your first skills: So if you look carefully, I'm going to give it a prompt, like, Hey, my CEO is saying that, Hey, guys, our merchants are facing some issues. They're not able to see the payment status on the homepage, and that's why they're not able to analyze and reconcile things properly by the end of the day. This is a simple problem treatment I'm going to give to the clot and because it has words like my CEO is saying, it is going to identify the intent and automatically use this skill, and then it will give me a predict a verdict. And I'm going to write. Can you help me with this? And let's see if it initializes and uses the skill we just created and give me the answer in the way I asked. So it says that, hey, do you want me to use this skill to answer this prompt or question? Perfect. I'm going to say yes. And if you look at the answer, it will give me the answer the same way that I usually ask people whenever they come up with ideas or problems. So it is using the skill to do all sorts of action, which earlier I otherwise has to specify line by line. Hey, do this first, then do that first, then do that. So you can see it is asking me a bunch of question first, and then it will give me the answer. Which merchant are complaining? How many give me the name if you want. What kind of merchant are these? Is it a fear gap to identify what are they not able to see and what exactly are merchant trying to accomplish from their dashboard? And what does the current homepage looks like? So great. You can see it is asking you a bunch of question just by using this scale. Obviously, you can type your answer. So I'm simply going to press tab, and it is also giving me answer, a hypothetical answer, which is obviously not correct in the real world, but I'm simply going to press Enter and let's see, just from such a small answer, is it able to give me a perfect verdict or not? Now, in Round one, I answered that, hey, mostly enterprise are asking for this, five merchant has complained from support, and mostly it's a reconciliation issue. After reading this, it is now asking me Round two about evidence and impact. So what percentage of enterprise revenue does these five merchants represent who complain via support? What specifically is broken inside reconciliation? What outcome are we solving for, and how do we measure it? And in terms of rough effort, reconciliation can be built in few weeks or in few quarters. It depends how deep you want it to build this. So you can answer Round two, and it will then give me the answer. So I'm right. Let's see, I'm going to type very weak things now just so that I can bypass all these round and get a predictable answer. So great. Now you can see the response. I guess it is not asking me more question. It has given me a problem statement, the rice score, the I score, and you can obviously read more about it. If you're a product manager, you know exactly what rice and IS are. So Rice is your reach, Impact, confidence and effort. Like, if you build this, how many merchant can we reach with this feature? What is the impact on our product? How confident are we that it is going to solve the problem and how much effort is it gonna take? Same goes with eyes, impact, confidence, ease and Moscow. Is it a must have feature? This is how you build a skill and use it in the actual real world scenario so that you do not have to write a specific set of instruction every single time. Great. Now I'm actually going to install a very popular plug in that uses skill under the hood to solve software development problem. The name of the plugin is superpower, which has 12 to 15 skill which solves a specific set of problem. 20. 21 why and how to use SDLC: So Claude Code is great. It can help you build anything and everything that you can imagine, and this is a really good tool that can really speed up the whole process. But there is a big problem. If you look at how product is being built, even before AI was there, it was built with proper planning and understanding everything. And that's why you need to understand about Software Development Lifecycle, and how exactly does that work. Now to explain you that, I'm going to simply open up the notepad and show you which are major steps are there when you're building any software. So let me write something for you, and then I'm going to show you. So whenever you wanted to build something, you first write the requirement. After that, and this requirement includes the problem that we are solving, the impact that we have in our existing product. What features are we building? And when I say interaction, I'm talking about UI and UX. You need to properly configure how you're going to measure the usage and the analytics of that feature and how you're going to release and roll that out. Now, if your product is using multiple other product or other features or functionality or microservice, then you also have to write about the test cases so that if something breaks, you get to know those things in advance, and you need to also build CI and CD pipelines so that things can work properly. So there are a lot more things that happens under the hood when you're building the actual software. And I've just given you a very small piece of a big pie just to help you understand the whole process. Now, this process should be followed ideally when a product is actually built. And when you're working with Claude Code, it doesn't follow a specific product life cycle. To do that, we are going to use skills. So let's understand what are skills and how we can use it. 21. 22 superpower skills for software development life cycle : Perfect. As you can see, the superpower puddle plugin is now enabled, and now I'm going to show you what all skill does this plugin provides me. Now, superpower is simply a plug in that has a lot of skill that allows Claude Code to work in a specific manner. The first skill that superpower has is brainstorming. That means every time we try to build a specific product, we are solving a problem. And when you are solving a problem, you are actually brainstorming different solution to the same problem. So let's say if you're building some specific product for a group of people, you actually wanted to go deeper, understand more problems associated with it, and how can you solve it in a much better way? So this skill is going to help you solve a problem better by brainstorming and asking further question then another skill is writing plans. How can you effectively write a proper plan, iterate through that plan multiple times, and this is very similar to how your plan mode work. In fact, you can ask Claude, Hey, list down all the skills that superpower plugin provides, and what do they do? And it will tell you exactly what skills are there in superpower and what exactly can help you achieve. So the first skill is using superpower. So if you just mentioned this, it will just use superpower skill to decide what to brainstorm, what to write, how to execute, how to build, everything. So you don't have to specify a specific skill. You just have to write using superpower. Then you have brainstorming skill, which we have explained that, hey, it will explore user intent requirement, design before doing any implementation. Then you have your writing plan skills, which will write your Specsa requirement into a well detailed multi step plan. Then there's executing plan skill which will execute the written plan in a proper desired manner. Then you have sub agent driven development where you do not have to specify that he launch multiple parallel agents to develop it faster. It will do it for you. Same goes with Dispatch parallel agents, you have test driven development, which will write test cases first before building anything. Then you have systematic debugging, which will help you write proper test failures, debug things for you and write proper fixes. Then you have a Git workflow, then you have using Git work tree, it will create a work tree and then isolate your features so that you can build multiple things at the same time. Then there's a verification before completion, which will verify all the implementation in the entire sessions before it actually raises a PR. So they have a lot of these skills which will help you work properly in a specific desired manner. Now, how are we going to use it and when will we use it? Now, to use these things, I'm actually going to build something like real product, and then we will use superpower to build it more efficiently with crotcd. 22. 23 claude vs codex and cursor: Now, before we move ahead in the course, I want you to cover something which is very important. So right now, you can only use Claude Code only when you have a subscription. So their subscription starts from $20 a month and goes to $200 a month depending on what's your usage. Now, I personally have $100 Max subscription, but I understand. A lot of you don't really want to pay $20 just to use Claude Code. So I'm going to show you a couple of alternative that you can use, and you will be able to do the exact same thing with these alternative. The first alternative is Codex. Now Codex has a free plan that allows you to use their coding agent without paying much money. Now, they do have some other plans like they have a go plan in India, which cost you just 400 rupees. They have a plus plan, which is around $20, and they have $100 plan as well. So if you are someone who just wanted to try out these AI coding agent, then Chat GPT is a good place to start. They give you a limited Codex usage on a free plan, and I'm guessing if you just wanted to build something very small, just to experiment with these AI coding agent, then you can use Codex CLI, just click on Codex, and then you need to install their CLI. This is going to work exactly the same way, just like Claude, and I'm going to show you how do you use Codex, just like Claude Code. So just go to the developer documentation, click on the CLI, and you can install the Codex CLI and you can start using it right away. This is the first alternative. Codex free tier is quite generous and you can build a few things all by yourself. Another option or alternative to Claude and Codex is Open Cod. Now, Open Cod is wildly popular because it's opensource. Now, you can use all popular model within OpenCd like they have Kimi k two, Quin Model, Deep Seek model, and they also have OpenAI and anthropic model. If you go to their pricing page, you can actually use Open Cord for free or they have their plan starting from $5 for the first month. Just like any other coding agent, they also have a CLI, so you can just go to their developer dogs, click on CLI, and you can install OpenCod and you can start using it right away. All of these AI coding agent are really good, and I don't find any major difference when I was using Claude versus Codex versus Open Cod. So this is the third alternative that you have. The fourth one is Cursor. Now, Cursor is a IDE. That means you can install Cursor in your system. But if you wanted to use their CLI, well, they also have a CLI. You can just go ahead, install their CLI and start using them. In this video, I'm going to pick Codex because I feel Codex Codex free tier is quite generous and a lot of people can actually use it for free. And they have really good limits. I'm going to click on CLI and I'm going to install the CLI. So you open any terminal, you can just use your native terminal or you can use our terminal like Cost that I have installed in my system. You can just globally install Codex CLI by simply typing NPMiGlobal and install OpenAI Codex. That's it. You will be able to install their CLI and then you can type Codex to simply start this, and yeah, if it asks you to login, just simply type slash login, slash Logout to log in and Logout, and you can change the model by typing slash model. Now, if you're using Codex, I recommend you to use the latest model, but reduce the effort or reasoning to medium so that you do not really exhaust your limit really fast. And also, turn off the fast mode if it is enabled. So if you can see that there is a fast mode, you can just turn it off. Simply type slash fast and you can turn off the fast mode. Perfect. And now you can start using Codex just like any other coding agent, whether it's clot code or open Code or Cursor CLI, all of them are exactly the same. Even if I just type something for you, you can actually type slash, and you will see a lot of options which are exactly the same, just like Claude. Slash Model will give you the access to all of their model options you have. Slash permission will allow you to edit Codex permission. Slash memories, sky slash skills, hoax review. Most of the features and functionality, whatever is there in Claude Code is exactly going to be the same. I recommend you to use hatGPTs Codex if you are someone who doesn't really want to pay for Cloud. And you can also try out a few other CLIs Cursor gives you really good limit in the free tier. So Cursor also has a generous free tier. Perfect. I'm going to type slash quid to close Codex or slash Logout to simply log it out. Same way, you can just open the CLI doc of Open Cod and you can install it. You can do the same thing with Cursor as well. Perfect. This is a way to use any cloud alternative if you don't really want to pay. 23. 24 artifacts for design: Now you can actually use Claude, JA JBD, or any of these large language model to actually create a live artifact that you can quickly use and see if the design interface looks good or not. I simply wrote that, Hey, I'm building a Todo app. I want you to create a design for it. The design should be mobile first with a navigation, and as this is a Todo app, I want you to create a task. So either I can type it out or speak, and you simply write the text for me. It should have a due date. You should pick some morning afternoon and evening slot. Just wish me a good morning, good afternoon in this app at the top of the homepage, and you can ask me some questions if you have, and you need to create a live artifact for it. Now, the advantage of live artifact is I can quickly create a artifact and quickly use it and see if I'm happy with the design or not, and I can iterate that inside the chat. And this can be done using Claude and Chat GBT. In fact, let me copy this and create a live artifact using Chat GPT as well. So I'm going to create a live artifact and use a thinking modern ha GPT. So now it is asking me a bunch of question. I want my name on the homepage. The design should be clean and minimal. And yeah, I want a real text to speech API that I can use in this design. Perfect. Now it is creating a artifact for me that I can actually open and use it onsite this chat interface, and I can itrad or improve this further. Now, this is just a very quick way to create some design, but this is not the right way to do it. I'm going to show you how do you use clot design to do it right? Now, remember, this is just a front end design. This is not an actual product. Perfect. Overall, the design look good, although I'm guessing I'm not able to save anything. I guess there's no way to save or this won't work. This is just a design so that I can iterate and improve this design over here. Let's look at the Claude output. So Claude created something which look much worse. Like this is not mobile optimized. I can see the calendar. I can see the plus button, but it's okay output, not a great output that I was expecting from Claude. So perfect. Even if you go to the source code of this artifact, all of this is a JSX file, so too app dot GSX. That means it is just a front end. All of these values are hard codes coded as a key value pair, and there's no back end, and this is a good place to start. But again, this is not the right way to create a design. So I'm going to close these two things, and I'm going to show you how do you actually create this design using clot design. 24. 25 time to improve design: So perfect. Now you know how do you build a product and how do you make it alive. The next big challenge that you will face is related to design. How do you make your product look amazing? So I'm going to start a ghostly session, and I'm going to help you understand how do you make your product look amazing. So I'm going to type Claude to initialize Claude, and you can see I am using Opus 4.7 with 1 million context window. My effort is extra high. You can reduce it down to medium if you're working on simple project, and you can do the same thing with any AI agent that you're using, whether it is Clotde, Codex, open Code or Cursor. So so if you share your app link with someone, their first reaction will be that, hey, it's good, but it's not great. For example, I took some time out and I created a really good design for this Todo app, and I'm going to show you that design. Now, you can use Figma or clot design or any other tool to create this design. If you look at the actual todo pase, it shows you the name of the user. There is a dark in the light mode, it shows you a small weekly calendar. It shows you all the tasks that are in to do completed and pending stage. Now, there is one more functionality where you can actually assign the due time to your task, which will simply put your task into a category of morning, workload, and night. And you can see, there is a homepage. There is an insight page, there is a profile page. And there's a plus button. In the version one, maybe we can kill insight, but we should have a profile page, a home page, and the overall design, and this should be mobile optimized. You have two options. Either you just copy and paste or drag or drop a screenshot if you have, but the problem is a lot of you do not know how to use Figma or how to use a professional design tool. So you end up with just experimentation. You keep prompting Claude Code until you are satisfied with design. Now, there's nothing wrong with that approach. It's great. But the better way to iterate and create a design for actual product is by using Cloud design. In the next video, I'm going to show you how do you use clot design and how do you actually improve the design of your app. 25. 26 intro to claude design: Now it has two options. You can create a wireframe of your app or design or you can create high fidelity mockups. In most of the cases, I'm hoping you want it to skip the wireframe part and directly create high fidelity mockups. I'm going to click Create, and it will give me a chat interface that I can use to create design. So you can add a design system, you can just put some HTML file that can act as a design system. You can just save your design system in a PDF. You can do all sorts of things, but I'm guessing most of you do not know what a design system is, so we're going to skip the option. In fact, let's not use the screenshot. I'm going to show you how do you create really good design without even giving any reference. And you can just drag and drop the Figma file in case if you work in a professional setup where you have the Figma file. I've written a prompt like, Hey, I'm building a Todo app and I want you to create a design for it. This design should be mobile first with navigation in it. This is a todo app. I can create a task by typing a task name or I can speak every task should have a due date option and a time slot like morning afternoon evening, and you need to make the homepage of the app look really good and mobile optimized and just wish me good morning, good afternoon, depending on the time when I open the app. And while you're creating the design of it, just ask me questions if you have in mind and use a cool, font like fictory and a front end design system like SATCN. Now, this is, again, a very short prompt that I just gave to Claude Code. And as you can see, it has a bunch of question before it actually start creating a design for me. So what name should this use us? Maybe I can use my name. It is now asked me to pick a vibe. Is it gonna be calm and minimal? Is it going to be a firm and friendly, a modern looking, maybe a calm and minimal or let spick warm and friendly, and my favorite color is blue, so I'm going to go with blue. I can ask. To add some sample tasks so that the design look good, and there should be just three slot. And it is asking me to pick a calendar style. Maybe this kind of calendar style is good. I want to have a mobile navigation that looks like this one. Maybe let me zoom in a bit more for you. So this kind of bottom navigation looks good. I want a few just a polish design or let's pick three variation of the design. I think these font looks good. So gonna click continue to fast pace this and show you exactly how does Claude design create our app design for us? 26. 27 claude design: Now I have my output from clod design, and as you can see, these designs are amazing. I'm going to hold command and zoom out a bit, and as you can see, it followed the the guidelines that I gave it initially, things like it should use blue colour. The design should be eye catching. And as you can see, it is wishing me good afternoon. And I can see all the task over here. There is a dedicated page where I can speak and record a todo text. I created another variant which is more minimal and calm. And I'm guessing it created a third variant. So perfect. I created three variant for me. I am personally liking variant number one. So let's go ahead and pick variant number one. But before that, I just wanted to explain that you can actually use the edit mode and you can actually edit the component by simply adding a comment. So clot design is really good. You can increase or decrease things over here, and this is a really good upgrade. So you can change the size, the color, the line height of the component. In fact, you can just add a comment, and it will do things for you. So you can add a comment and just type something and it will change that. For example, let's say, I don't want to want this de over here. So remove this from here and it will remove it for you. I think I have to send it to Claude, and there you go. It will start doing some work and it will remove this from here. So you can do some real changes just by adding some comment. So perfect. Overall, I think I'm liking design variant. A, the B is more minimal and professional and C is too colorful. So I will pick A, I'm sure many of you might like B, which is more minimal, but one looks super colorful and good to me, and I've been wrong many times when it comes to design. So I'm going to refresh the page. It says that it has removed this Friday 22 M and perfect. Now it's gone. So great. I love variant, eh? So remove B and C and create more wireframe. And once that is done, then I'm going to actually use this variant and actually improve our app. So I'm going to show you how can you actually share this and use it inside your Cloud Code project. So perfect. Now, the design output is ready. You can see this is the core flow of our Todo app, and these are the other screens that are important in this Todo app. So it shows me the date, the reminder. Should I repeat this task or not? And so perfect. Let me refresh the page, and I'm guessing this part will be gone. The next question you may have in mind, now, how do I exactly implement this design in my Todo app? So you have two options. Either you can export every single of these images PNG or download HTML, and then drag and drop, which is a very inefficient way to implement. So you can download the PNG and you can actually ask Claude to implement this PNG, but this is not the right way to do it. I'm going to show you how exactly do you ask Claude Code to implement this. So you can actually download this as zip file and just drag this file into your Claude Code and it can start implementing these components, and it can then configure the backend as well. The other option is you can send this or hand off this to Claude Code. So you can download this as JipFle and then just ask Claude Code to do it for you, or you can send this or hand off the session to Claude Code. Let's say, I'm going to copy this command, and let me hand off this to Claude Code and see if it is able to implement this or not.