# Claude Code Crash Course For Developers

https://www.youtube.com/watch?v=C2GpeepcmYs

[00:00] Hey, what's going on, guys?
[00:01] Welcome to my Claude Code Crash Course for developers.
[00:04] Now, I want to explain what this video is and what it's not.
[00:06] So, it is an overall introduction to the Claude Code agentic coding tool, and when it comes to coding with AI in general, the process is very subjective and individualized.
[00:17] And it's kind of like the wild west right now.
[00:19] Everybody does things their own way, and I will share my way, my process, but that'll be in a separate coding with AI crash course dedicated to showing you how to build decent-sized project using things like feature specs and testing and context management and so on.
[00:35] Now, before I do that, I want to create this overview of Claude Code, and I know that there's a lot of guides out there on YouTube.
[00:41] However, a lot of them are focused on vibe coding and just prompting from, you know, from the terminal.
[00:46] I want to show you the basics, but also get you set up in VS Code, and not only prompt, but do a little bit of refactoring, look at the diffs and exactly what Claude's doing, some of the internal tools that it runs, and so on.
[00:56] And we'll create a very simple terminal interface, as well as
[01:01] use Claude with Git to clone an existing repo and add some features to it.
[01:06] Now, along the way, I'll walk you through the features that you're going to use day-to-day.
[01:11] We'll talk about setup, prompting, models.
[01:13] I'll explain how context and tokens work, skills, MCP, sub-agents, and so on.
[01:19] And I'm going to try to keep it short, but I always have a hard time doing that and and getting out all I want to say.
[01:25] But, after this, you should have a pretty good handle on using Claude Code, and in the next crash course I release, we'll be creating, basically creating a a project start to finish and my entire process.
[01:37] [music]
[01:41] Hey guys, real quick, since you're learning about Claude Code, I wanted to mention my latest course, Coding with AI.
[01:46] It's a 16-hour course where I show you how to build an app from start to finish using context management, spec files, skills, agents, and more.
[01:54] And I know some people are skeptical about AI in software development and and trust me, I get it.
[01:58] I have a lot of the same opinions, but the fact is it's here to
[02:02] stay and all the top companies are requiring AI skills.
[02:06] So, I wanted to give you a a process and a workflow that you can easily follow.
[02:11] And I also want to thank Neon for making this course possible.
[02:12] We use Neon Postgres database in the main project and I constantly use them in my own projects.
[02:20] They even gave us a link for a $100 credit and I'll put that in the description.
[02:24] Okay, so I'm sure that a lot of you have an idea of what Claude Code is.
[02:26] It's Anthropic's agentic coding tool and it runs in your terminal, although there's also a desktop app.
[02:31] There's also extensions for editors and I'll get to that, but for the most part, if you're a developer, you're going to be running it in your integrated terminal within your editor or with an editor extension.
[02:44] Now, unlike something like ChatGPT or the Claude AI website, it actually runs on your machine and works in your code base.
[02:49] It reads files, writes files, it runs commands and tooling and so on.
[02:56] And there's other tools like it such as Code X, Cursor, although Cursor is an editor, it has the same agentic capabilities.
[03:03] But if you have any experience with these other tools, then you already have a leg up.
[03:06] Now, I I do want to quickly talk about pricing.
[03:13] I feel like not enough guides actually mention pricing because it's not free for the most part.
[03:15] There is a free tier, but it's basically just to try it out and that's definitely what I would suggest starting with.
[03:22] But if you start to use it with a real project, you're going to hit caps really quickly.
[03:25] The next step up is Pro, which is $20 a month or 17 if you pay annually, and then there's a Max plan, which is $100 and that's five times the usage of the Pro plan, and a $200 Max plan plan that's 20 times the usage of the Pro plan.
[03:42] I personally use the the $200 Max, but I use it all day, every day, not just for coding, but I use the desktop co-work tool for planning and and specking out projects and all types of stuff.
[03:53] And I'll I'll talk about that as well.
[03:55] Now, when it comes to installing Claude, there's a couple like I said, there's a few environments.
[03:59] You have the desktop app, which is what you see here, and it
[04:04] seems like they're really pushing the desktop app because they used to have the curl command to ins- you know, to set up the terminal here as the main call to action, but now it's a download button for the desktop app.
[04:15] However, for the terminal, you simply click here, terminal, and then you have your your curl command.
[04:19] Now, I do want to just cover the desktop app real quick.
[04:21] So, basically, there's three parts to it.
[04:24] You have the chat tab, the co-work tab, and the code tab.
[04:28] So, the chat tab is basically the Claude AI website.
[04:31] It's it's a chatbot.
[04:33] It doesn't It doesn't um you know, it doesn't run on your file system, or I shouldn't say that, it doesn't have access to your file system.
[04:41] It does have some integrations with like Google Drive and calendar and so on.
[04:45] But, for the most part, it's just chat GPT.
[04:46] Now, this the second tab is what I use this for, and that's co-work.
[04:49] So, co-work is basically like a virtual assistant, and it could does connect to your file system.
[04:57] You can see I have it connected to my Traversi Labs folder, which is actually my Obsidian vault.
[05:01] Obsidian is like a markdown database,
[05:05] and I literally track my entire life in Obsidian.
[05:08] So, from business to my calendar to personal stuff, YouTube courses, just everything.
[05:13] And co-work, basically, I'll run a skill, a good morning skill, every morning, and it tells me what's on my schedule, my to-do's, what I should be working on, and so on.
[05:24] And then I'll use it to to plan out and speck out projects and stuff.
[05:29] So, I really like co-work.
[05:32] And then you can choose the model here.
[05:34] Now, Fable 5 was just released 2 days ago, and I've used it a little bit, and I do like it, but I don't really I haven't used it enough to have a real opinion on it.
[05:42] I was using for Opus 4.8 for whatever a month or however long it was released, and I really like Opus, but uh I'm giving Fable a a chance.
[05:54] Now, the third tab here is code.
[05:56] It's Claude Code, and I don't use this because it's more like vibe coding.
[05:58] I mean, you can prompt here, and I can say build me whatever, but I don't have act direct access to the code.
[06:03] So, you're going to if unless
[06:08] you're vibe coding, you're going to want it in your editor where you can see your entire project structure, and you can watch what it does.
[06:14] You can edit code yourself.
[06:16] So, I personally don't use this, but if you want to, that's that's absolutely fine.
[06:21] To install it in your terminal, you're going to copy this curl command, and you're going to open up your terminal, you're going to paste that in, and run it, and then just go through the process.
[06:30] I already have it installed, so I'm not going to run that, but that's what you would do to get set up.
[06:36] And then, you can just do Claude Claude {dash} {dash} version, and it'll show you if it's installed.
[06:40] It'll show you the current version.
[06:42] Now, the working directory is really important because that's where it's going to run.
[06:45] That's where it's going to have access.
[06:47] So, I'm in my code folder.
[06:48] What I'm going to do is make a directory called coin CLI, and this will be the simple project that we work with in this tutorial.
[06:57] So, um what I'll do is open up Actually, let's CD into coin CLI, and then that's where I'm going to run Claude.
[07:04] Now, if it's your first time log um running
[07:08] Claude, you're probably going to have to authenticate, so you do need an account at claude.ai.
[07:11] You don't need a paid subscription.
[07:14] You can use the free tier, but you do need an account, and it will ask you to to validate.
[07:17] And at any time, you can do {slash} login to authenticate, and you can also do {slash} logout.
[07:26] All right.
[07:28] Now, let's just look at the the kind of welcome interface here.
[07:30] So, first off, it gives you the version, right?
[07:33] Claude Code version.
[07:34] It gives you the working directory, the model that you're using, which I have this set to Opus 4.8.
[07:38] Um this isn't my main working machine.
[07:41] The one behind me is, which is using Fable, but it also shows you the context window, which for me is a a million token context window.
[07:48] I'll talk more about that in in a few minutes.
[07:51] And I'm using extra high effort, which is kind of a new feature.
[07:55] I'll talk about that, too.
[07:57] And shows you your plan, which for me is Claude Max.
[07:59] Now, I want to talk about models.
[08:02] So, these are slash commands.
[08:04] If I just do slash, you can see there's a a big directory of these commands, and it shows you on the
[08:10] Right, what they do.
[08:12] So, I want to run model.
[08:13] And from here is where you can actually see and choose your models.
[08:18] In fact, I'm going to change mine to Fable.
[08:21] So, you as you can see, there's four available for me.
[08:26] There's Opus, Fable, Sonnet, and Haiku.
[08:28] Now, you can't use other LLMs.
[08:31] You can't use GPT or Gemini or anything like that.
[08:32] It has to be an Anthropic model.
[08:36] And basically, you have um these models, they they cost uh different amounts of tokens.
[08:42] So, Opus is a lot more expensive in tokens than Sonnet or Haiku, right?
[08:47] Sonnet is is an older model.
[08:49] It's It's decent for coding, but I would definitely prefer Opus over Sonnet.
[08:53] And then Haiku is the cheapest model, which is good for like really really easy, quick tasks.
[08:58] All right.
[09:00] So, you're going to select your model here.
[09:02] And you might be saying, well, why does it matter how many tokens?
[09:06] I have a subscription.
[09:07] I'm not paying, you know, I'm not using an API key where I pay per token.
[09:09] Well, there's limits to to your
[09:17] So, if you do slash usage, you can see the usage and what you're allocated.
[09:22] So, for me, I'm my my current session, a session is about 5 hours, I have 26% used.
[09:27] And it tells you when it resets.
[09:27] Resets at 12:29.
[09:31] Right now, it's 11:47.
[09:34] So, I'm definitely not going to use the rest of this within that allocation.
[09:35] And for the current week, this pertains to all models, I have 29% used.
[09:41] This resets June 13th.
[09:45] Today is June 12th, so it resets tomorrow.
[09:47] So, no way am I using, you know, 70%.
[09:50] And then even if you max this out, you still have uh an allocation of of the Sonnet model, right?
[09:56] So, if I use Opus, I max this out, I'll still be able to use Sonnet for an amount of time.
[10:04] Now, this this obviously pertains to your plan, right?
[10:06] If you're on the pro plan, you're going to have to be more conservative in terms of of your usage, you know, your model usage.
[10:13] You might even use Sonnet for
[10:15] lighter tasks and so on.
[10:17] But, this will show you, you know, show you your allocations.
[10:21] And then up here, you can see we have uh these we have stats and config.
[10:25] Actually, they used to be yeah, this is what I want.
[10:27] So, this will show you your usage by by day, by time, um favorite model, total tokens, your longest session, and so on.
[10:37] All right.
[10:39] So, just know that even if you have a subscription, you still want to you want to be wary of your token usage.
[10:43] Now, another thing that can can raise your token usage is the effort.
[10:46] So, I'm using extra high.
[10:49] So, if you do {slash} effort, and this is a new feature, but if you do this, you can select anywhere from low to ultra code.
[10:59] And obviously, the higher, the more tokens you use.
[11:01] I tend to keep mine on extra high, but again, if you're using like the pro plan, you might want to be a little more conservative and go to high or even medium.
[11:11] So, I keep mine at extra high.
[11:14] All right.
[11:14] Now, before I I do anything
[11:16] and I prompt, I don't want to do it from here.
[11:20] Very rarely do will I use a standalone terminal.
[11:22] I'll use it within VS Code, so I'm going to do {slash} exit to get out of this.
[11:28] And then let's go ahead and open up VS Code within the Coin CLI directory.
[11:34] Okay, so from here, let's close this stuff up.
[11:36] From here, there's really two ways to use Claude.
[11:39] I can just open up my integrated terminal or I can use the extension.
[11:43] I prefer the extension because it shows things in a much neater way.
[11:47] There are a couple limitations, but nothing really that I do daily, but I want to show you both.
[11:53] So, I'm going to start off with the regular terminal, which you can go to new terminal or just, you know, control tilde, and then we'll run Claude just like we did in the standalone terminal.
[12:05] And I'm just going to put this on the right.
[12:08] Okay, so typically I'll have my, you know, Claude open here.
[12:10] I'll have my code, and then of course my explorer, and I have access to everything.
[12:14] Now, I want to run my first prompt, which I
[12:18] actually have in a gist, if you guys want to kind of follow along.
[12:23] So, and I'll have the link in the description.
[12:25] So, it says, "Create a node script in Next.js that fetches the top five crypto prices from the the CoinGecko API and prints them in a clean table with the name, the current price, 24-hour change.
[12:37] Keep the code clean and simple."
[12:39] So, I'm going to copy that.
[12:42] And CoinGecko is just uh it's a free API that gives you crypto prices.
[12:47] So, no key or anything.
[12:47] So, we're going to run that, and let's see what it does.
[12:51] So, we want to pay attention to what what's going on over here.
[12:54] So, it's thinking.
[12:57] Now, the first thing it it did is it ran an internal tool called bash, right?
[13:02] So, basically, there's uh a set of internal tools that Claude code uses.
[13:05] There's bash, if you want if it wants to run a command, there's write to write to files, read, edit, grep to search file contents, um web fetch to to fetch from URLs, and
[13:19] there's a bunch of other ones as well,
[13:21] but those are kind of the main ones you're going to see.
[13:22] So, it ran the bash tool to look at the contents.
[13:24] It ran the LS command, saw the directory empty, and it saw I'm using node 24, so it can use dependency-free fetch, and then it used the right tool, right?
[13:35] So, it used bash, then it used right.
[13:37] Now, it didn't actually create this file yet.
[13:40] As you can see, it's not over here in the in the explorer, but it's proposing this index.js.
[13:43] This is the diff.
[13:46] So, anything in green is what it's going to add, and obviously it's all green because I just created the file.
[13:53] So, we have an API URL, which is the CoinGecko endpoint.
[13:56] We have an object of colors, so green and red.
[13:59] So, basically it it looks like it's going to have the 24-hour change in green if it's up and red if it's down.
[14:06] Then there's a function to actually make the fetch, right?
[14:09] So, fetch top coins, making the fetch request here.
[14:14] And let's see, we got a format price, a
[14:20] format change helper, a print table.
[14:24] And then this this all has to do with just formatting the table.
[14:28] And then a main function where it runs fetch top coins and print table, and main runs down here at the bottom.
[14:32] So, that's fine for a single file, I think that's fine.
[14:36] Now, you have a couple options.
[14:38] You can say yes to approve it, and it will create the file.
[14:40] You can say yes, allow all edits during this session, and what that means is that from now on, it won't ask you this when it creates something.
[14:50] It'll just It'll just do it automatically.
[14:51] Now, I would suggest if you're just starting to get into Cloud Code or a tool like this and just using AI in general, that you stick with the the default permission mode and just say yes.
[15:03] But once you kind of know what you're doing, you can, you know, you you can make it so it doesn't ask you every time.
[15:09] I can also say no and just cancel, but I'm going to say yes.
[15:13] And then it's going to create that file.
[15:15] You can see we have index.js over here.
[15:18] And then it's going to ask me if I want to run it.
[15:20] Okay, so run the script to
[15:22] verify the output and it's asking me.
[15:24] It's not just running it and I can choose this as well.
[15:26] Don't ask again for node scripts, but I'm just going to say yes.
[15:30] And it's going to run it.
[15:32] Not only is it going to run it and and you know, give the normal output of the table, but it's going to kind of give me a summary of of what happens.
[15:38] So as you can see the script works.
[15:40] Index.js is created and verified.
[15:43] Gives me the output.
[15:46] Shows me just uh some more some summarized points.
[15:50] Now, I could run this on my own obviously.
[15:53] If I open another terminal, I can run node index.
[15:55] That's how you run node scripts.
[15:57] And there it is.
[15:59] So it looks like everything's up today.
[16:02] Looks like a good day.
[16:04] But yeah, I can run it like that or let's close that terminal.
[16:06] I can use something called shell mode here.
[16:09] I can just say run the file, but it'll it'll kind of do this and give me all this summary crap.
[16:12] So if I want, I can just do exclamation and then node index and it should run it just like
[16:24] just like it does in the the terminal.
[16:27] All right, so just know that you can use exclamation if you want to just use shell mode.
[16:30] Now I can hit question mark and it shows me a bunch of these shortcuts.
[16:34] So shell mode exclamation {slash} for {slash} commands.
[16:37] So you already know that.
[16:39] {at} So if you want to mention a certain file specifically, you can do like {at} index.js or or whatever.
[16:47] Uh let's see what else we have.
[16:47] {slash} btw.
[16:49] So this is fairly new by the way.
[16:53] That's what it stands for I believe and it's for side questions.
[16:55] So basically if if Claude's working and doing something, but you think of something you else you want to say, which happens all the time, instead of just escaping out and then asking and then having it continue where it left off, you can do {slash} btw and ask a side question, which I think is pretty cool.
[17:13] And then let's see.
[17:13] We got shift tab will change the modes and I'll show you that in a second.
[17:17] Control O will show you verbose output.
[17:20] You can toggle tasks with control T.
[17:25] So, yeah, those are the main ones.
[17:27] Obviously, you know, you can paste and cut and stuff like that.
[17:31] But, let's go ahead and go over the modes.
[17:34] So, shift tab, if I hit it, you'll see this changes to accept edits on.
[17:36] What that means is that it's go it's not going to ask me.
[17:39] It's just going to accept edits.
[17:41] If I ask it to change something in this index.js and I have this mode enabled, it's just going to do it, right?
[17:52] If I hit shift tab again, I can go into plan mode.
[17:54] Now, plan mode, it won't actually edit your code.
[17:57] It's it's for planning, right?
[18:00] So, it's If you want to add a feature and you want to kind of query it and and ask its opinion or or maybe ask what you can do to make the app better, it'll go through plans, it'll ask you questions, and it'll ultimately create a markdown file, which I believe goes in your home directory in your dot cloud folder.
[18:18] So, that's plan mode, and then auto mode is is fairly new, and this is like super
[18:27] accept edits mode, where not only does it not ask you, but it'll make decisions.
[18:33] You can give it an overall goal of like creating some kind of SAS or something, and it'll basically just run for hours and make its own decisions.
[18:40] So, it's a little risky.
[18:44] It's not something I would suggest if you're building like an important user-facing app, an enterprise-level app, but if you're building your own stuff and just messing around, then it's it's cool.
[18:53] So, let's hit it again, shift tab, and that brings me back to just normal mode, where it'll ask my permission.
[18:59] And you can see it just added a recap here, and I showed I think I showed you that earlier.
[19:05] There's a a recap setting in the config that you can set.
[19:09] You can enable or disable.
[19:12] Mine's enabled, so it just gives me this node CLI that shows the top crypto prices, etc.
[19:16] The next thing I want to talk about is settings and permissions.
[19:20] So basically, you have custom settings that that will go in a file, and they can be either project-scoped or user-scoped.
[19:25] So, a project-scoped means that
[19:27] it'll be a settings file in a .cloud folder in your project.
[19:32] So, it would show right in here, and it only pertains to that project.
[19:37] And this scoping goes for not only settings, but also MCPs and skills and a lot of other things.
[19:44] So, you want to understand that.
[19:45] Project-scoped is just that, your project.
[19:47] And then you have user-scoped where it goes in your .cloud folder in your home directory, and whatever's in there will carry across all your projects.
[19:59] Whether it's a settings file with permissions or a skill or whatever.
[20:03] So, what I want to do is show you how to set a permission, and we do that with {slash} {slash} permissions.
[20:12] Now, this is kind of a crowded interface, so I'm going to make this a little bigger.
[20:16] So, basically, you have allow, ask, and deny permissions, and you might want to set like, let's say a get push.
[20:26] You want it to always ask you before it makes a a
[20:29] get push command. So, what I'll do is
[20:32] use my arrow key and go down to the add
[20:34] new rule while it's set on Actually, I'm
[20:37] going to hit the right arrow cuz I want
[20:38] it to ask, and then go to add new rule,
[20:42] and then you're going to put the tool
[20:43] that Cloud Code uses. Remember I talked
[20:46] about the tools like bash and write and
[20:48] web fetch and all that. So, I'm going to
[20:50] say for the bash tool, when it runs get
[20:55] push anything, I want that to to ask me.
[20:59] Okay? So, I'm going to go ahead and hit
[21:01] enter. Now, it's going to ask about the
[21:03] scope. So, again, we have project and
[21:06] user scopes. Project is going to put it
[21:09] into a settings.json
[21:11] in a .cloud folder in my project. Now,
[21:14] you also have this option of local. So,
[21:18] what that does is it puts it in your
[21:19] .cloud folder in the difference is the
[21:22] local one you wouldn't commit and share
[21:24] with your team. You'd put You'd put this
[21:26] in a .gitignore because it's just for
[21:29] you. If you choose this option, then
[21:34] settings.json is not get ignored and
[21:37] your team your whole team anyone that
[21:39] uses the the repo can use it. And then
[21:42] you also have user settings where this
[21:44] this get push permission would be across
[21:47] all projects regardless. So, I'm going
[21:49] to choose project settings number two
[21:52] and it should create a .cloud folder and
[21:56] it has a settings.json. And if we look
[21:58] at that real quick, you can see this is
[22:00] just obviously a JSON object with
[22:02] permissions, ask, and have an array of
[22:06] of anything it needs to ask for and have
[22:08] get push.
[22:09] All right. So, another thing that I'll
[22:11] set sometimes is a deny for for removing
[22:14] any files or folders. So, if I go over
[22:17] to deny
[22:18] and add new rule
[22:20] and then for the actual rule, let's say
[22:23] bash. So, that's the tool and then the
[22:26] command, let's do RM. Let's say we don't
[22:29] want it to remove folders. So, we'll say
[22:31] RM RF star, right? So, if I hit do that
[22:35] and set that to project settings, then
[22:37] that should have been added to uh
[22:41] to this file here. Okay, so now I have
[22:43] deny any removing of any folders.
[22:47] So, that's how settings works. That's
[22:49] how scope works. And that's how
[22:51] permissions work. So, let's escape out
[22:54] of this.
[22:55] All right. So, now what I want to do is
[22:57] actually um
[22:59] use the the extension the VS Code
[23:02] extension. So, I'm going to exit out of
[23:04] this.
[23:06] And
[23:08] just clear this up.
[23:10] And yeah, we'll just close that. And
[23:12] now, if you want to use the extension,
[23:13] obviously, you have to install it. Let's
[23:15] see, does it need an update?
[23:17] I'm just going to restart this. So, this
[23:19] is the extension here. Just go ahead and
[23:21] install it. And then once you do that,
[23:23] you can just do command shift P,
[23:25] open up your command palette, and Claude
[23:27] Code open new tab.
[23:31] And there we go. So, this is the ex- the
[23:34] extension, which makes things
[23:36] a lot prettier, in my opinion. So,
[23:38] that's why I like to use it. It's
[23:40] things just look nicer, and it's easier
[23:42] to know what's what. So, this is our
[23:44] prompt area. We can also upload images
[23:48] or uh files, whatever we want. We can
[23:50] add contacts, meaning whatever files and
[23:52] folders. We can have it browse the web.
[23:55] Uh we still have the same permit um same
[23:57] modes right here. So, I can do shift
[23:59] tab, and it still changes to edit
[24:02] automatically, plan mode, auto mode, and
[24:04] regular mode. Now, what I'd like to do
[24:06] is refactor what we have here, right?
[24:09] So, this code here, it's all in one
[24:11] file. I would personally like to see
[24:13] this in separate modules. So, I have
[24:18] in the gist here,
[24:20] I have this prompt that I want to run.
[24:21] It says, "Refactor this for readability
[24:23] and maintainability. Split it into
[24:26] focused ES modules, an API module for
[24:29] the CoinGecko fetch, a format module for
[24:32] the price and change helpers, and a
[24:34] table module for the printing. Keep the
[24:36] output identical and don't add any
[24:38] dependencies."
[24:39] So, I'm going to grab that. And since
[24:42] I'm going to use ES modules, I want to
[24:44] create a package.json.
[24:46] So, obviously, you know, I could go
[24:47] ahead and run in the terminal npm
[24:49] install, but let's just tell it to I'll
[24:52] just say init a package.json
[24:55] JSON
[24:56] So, stuff like this, it's up to you if
[24:58] you just want to run the command. I
[24:59] mean, that's all it's going to do is is
[25:01] use its bash tool to run npm init. All
[25:03] right, so now that we have that, let's
[25:05] go ahead and paste in this refactor
[25:08] prompt. And it should use ES modules, so
[25:11] it should break it up, create maybe an
[25:13] API.js.
[25:15] Just know that if you're following
[25:16] along, you're probably going to get
[25:17] something a little different. So, it's
[25:20] going to look at the current code first,
[25:21] it used the read tool.
[25:26] And let's see. So, this is what it what
[25:27] it's going to give us, an API.js file.
[25:30] It's going to go through one by one
[25:32] every file. So, this will have the API
[25:35] URL, it has the fetch top coins
[25:37] function.
[25:40] And oh, it even takes in a limit
[25:42] argument. That was going to be something
[25:43] I added, but looks like it already did
[25:45] that.
[25:48] Okay, so we'll accept that. And then,
[25:49] let's see, this is format.js,
[25:52] which has the colors object, the format
[25:54] prices format change.
[25:57] And then, this is table.js.
[26:00] So, this brings in those formatters, and
[26:04] looks like it outputs the table, right?
[26:06] So, it's exporting print table.
[26:09] And then, it should go to the index.js.
[26:12] This is the entry point, so this is the
[26:14] diff. Everything in red, obviously, is
[26:16] going to get deleted. Green is going to
[26:18] get added, which is the two imports, and
[26:20] then the rest stays the same. We'll say
[26:22] yes to that. And notice it did create a
[26:25] source folder, too. So, it's it's
[26:27] unpredictable, so that's why it's good
[26:29] to just
[26:30] um pay attention to what's going on,
[26:32] rather than vibe coding.
[26:34] And it's going to also add type module,
[26:37] because in order to use ES modules in
[26:40] Node, you have to um
[26:42] add this.
[26:43] So, we'll say yes to that. Okay, it's
[26:45] going to run it.
[26:48] And looks like we get the same output.
[26:50] If I click on that, it shows me the full
[26:52] table here.
[26:54] So, the refactor works, and the output
[26:56] is identical.
[26:58] The code is now split. Yep, so did
[27:00] exactly what what I asked it to do. Now,
[27:02] before I go any further, I just want to
[27:04] talk a little bit about context. If you
[27:05] remember when I first ran Claude, it
[27:07] showed I had a 1 million token context
[27:10] window. And basically, that's Claude's
[27:12] ongoing memory. It's like temporary
[27:14] memory. And we can check it at any time
[27:17] with {slash} context. This is one of the
[27:19] commands you're going to use the most
[27:20] of. And this will show me what's been
[27:23] used. So, 28,000 tokens out of 1
[27:26] million. So, nothing, 3%. And of that
[27:29] 28,000, 9.7 thousand is actually from
[27:33] our messages, our prompting. Where the
[27:35] rest comes from system tools and skills.
[27:38] If you use MCPs, that will blow out your
[27:40] context. So, you just want to be aware
[27:42] of this at all times. You don't In my
[27:45] opinion, you don't want to let it get
[27:46] near this because it'll start just
[27:49] forgetting things and and just not
[27:51] making good decisions. It is better now,
[27:54] I admit, with the newer models than
[27:56] before Sonnet. I would say if you let it
[27:58] get to, which was then the 200,000
[28:01] max, uh it would really just turn into
[28:04] an idiot. It would forget things you
[28:05] just told it 2 minutes ago. So, what I
[28:08] do is I build feature by feature,
[28:11] usually. And every feature
[28:14] it will usually take like 200,000, maybe
[28:17] 300,000 tokens. And then once that
[28:20] feature is completely implemented, you
[28:22] know, I I I commit, I push it, it's done
[28:24] with, then I clear my context. Now,
[28:28] you do still want some stuff to be
[28:30] global and to always be there. And the
[28:33] way you do that is you create a
[28:34] claude.md file. And whatever is in that
[28:37] file, Claude loads when it's when it
[28:40] when the instance is is run, whether you
[28:42] clear it, it'll still be there, whether
[28:44] you open a new tab, it'll still be
[28:46] there, anything you put in that file.
[28:49] So, what I usually put is like co-
[28:50] coding conventions, information about
[28:53] the project, anything that I need Claude
[28:55] to always know. Now, I'm not going to
[28:57] create the Claude MD right now because
[28:59] I'm going to actually scrap this and and
[29:01] clone
[29:02] uh another project of mine and I'm going
[29:05] to create it there, but just know that
[29:07] that's one way to kind of
[29:09] keep your your global memory. And Claude
[29:12] also has a memory.md file that it it
[29:15] adds important things to as well. So, it
[29:17] doesn't just go totally blank when you
[29:19] clear. Now, another thing you can do is
[29:21] have some kind of global con- context
[29:24] vault and that's what I do here. I
[29:26] created this memcreate.dev
[29:28] where you can install this and it's not
[29:30] just Claude code, well, right now it is,
[29:32] but I'm going to add compatibility for
[29:34] Codex and other stuff, but basically it
[29:37] will give you these skills, these
[29:39] commands like /save, which will compress
[29:42] the current session into a structured
[29:45] log and it'll save it in a vault
[29:47] somewhere. I use my Obsidian vault, but
[29:48] it could be any file. And then when you
[29:51] want to load whatever it saves, you just
[29:53] simply run /load. So, and this is across
[29:56] all projects. If I go and open one of my
[29:58] projects right now and I say /load and
[30:01] then the name of the project, it brings
[30:03] in like everything that's been that's
[30:05] been put in that session. So, that's
[30:07] just another way. There's There's a ton
[30:09] of different things you can do. Like I
[30:11] said, the AI using AI is like the the
[30:13] wild west right now. There's no standard
[30:16] conventions or anything. Everybody just
[30:18] is inventing their own way of doing
[30:20] things and that's just mine. You might
[30:22] use do something totally different. And
[30:24] you don't need to use something like mem
[30:26] create or special skills or anything. If
[30:29] If you want, you can just say like
[30:30] summarize
[30:33] the
[30:34] summarize what we've done
[30:38] and put it
[30:40] into a let's say context. So, we'll have
[30:43] a context folder / sessions. dot uh md.
[30:49] All right, so now it's going to create
[30:51] the sessions log, right? So, it has
[30:54] the date, what was done. So, initialize
[30:56] project, refactored. That's really all
[30:58] we did.
[31:00] Um verification, the current structure.
[31:02] So, I'll accept that.
[31:04] And now we have a folder with that
[31:06] session md. Now, I can go ahead and
[31:09] clear my context,
[31:10] right? If I clear it and then I run
[31:13] context again,
[31:15] now I still have 19,000 tokens used
[31:18] because of the system tools and other
[31:20] things. But messages, you can see is is
[31:23] basically nothing, 137. So, that's
[31:27] that's a workflow that you can have is
[31:29] just to manually have it record the
[31:31] session. And then when I clear it, I can
[31:34] say, "Hey, you know, read read the
[31:36] session and and whatever." So, that it
[31:38] has an ongoing memory along with the
[31:40] cloud md.
[31:42] So, let's uh
[31:44] let's add one more feature to this. So,
[31:46] I'm actually going to copy this right
[31:48] here. So, this says make the number of
[31:50] coins configurable via a command line
[31:53] argument, default to five if no argument
[31:55] is given. And we should be able to do
[31:57] like node index.js 10 or or however many
[32:01] crypto coins we want to get. So, let's
[32:04] go ahead and paste that in. Okay, so it
[32:07] looks like it's going to open the
[32:08] index.js and it's adding this parse
[32:10] limit function.
[32:12] And in main,
[32:15] it's going to get the limit here and
[32:17] it's going to pass it into fetch top
[32:19] coins, which already has a limit. It
[32:21] already had a limit, remember? So, it
[32:23] shouldn't have to change anything there.
[32:25] So, let's say yes. And let's see, test
[32:28] the CLI with the argument. So, it's kind
[32:30] of it's giving us 10.
[32:32] So, now that works. So, it's as easy as
[32:34] that. And I mean, we saw every bit of
[32:37] code it wrote. I mean, I didn't go dive
[32:39] deep into it. It's something very
[32:41] simple, but that's how you should use AI
[32:44] just overall is is
[32:47] not writing the code yourself, right? I
[32:49] didn't write a line of code, but I know
[32:50] exactly what's happening. And that's
[32:52] that's what what's important, and you
[32:54] want to understand concepts. You want to
[32:56] understand overall architecture. You
[33:00] don't have to know the exact syntax
[33:03] anymore of certain things, but you need
[33:04] to know what is happening. What does it
[33:06] do?
[33:07] So, yeah, let's go ahead and clear this
[33:10] up. And I think what I'm actually, you
[33:12] know what? I'm just going to close this
[33:13] up because I want to clone another
[33:15] project.
[33:17] And I have this crypto dash project.
[33:19] This is actually, I believe this is from
[33:20] my React course.
[33:22] It's just a very simple
[33:24] UI that uses, I believe, yeah, the
[33:27] CoinGecko API. So, it's kind of like a
[33:29] just a web UI of what we just did. A
[33:31] little more advanced. It has like
[33:33] sorting and searching and stuff.
[33:35] But, I want to clone this. So, let's go
[33:38] ahead and grab that.
[33:40] And then I'm going to go to my terminal.
[33:43] And let's actually, I'll CD. dot dot out
[33:47] of that. And let's
[33:49] let's make a directory for this. And you
[33:51] guys can follow along if you want. Let's
[33:53] say crypto dash.
[33:56] And then I'm going to CD into crypto
[33:58] dash.
[33:59] And then I'll just run Claude. Oh,
[34:02] actually,
[34:04] yeah, cuz I want to I want to
[34:06] show you that Claude can just use Git.
[34:08] So, I'll run Claude here. And then I'm
[34:10] going to say, I want
[34:12] to clone this repo
[34:15] into this
[34:17] root folder.
[34:21] And then I'll paste it. Okay, so it's
[34:22] going to check the folder, sees that
[34:24] it's empty. Now, it's going to run this
[34:26] command here, Git clone.
[34:29] Say yes.
[34:31] Okay, so now we have that. And I'm going
[34:33] to just exit out of this
[34:35] because I want to go into VS Code. So,
[34:37] I'm going to open up code
[34:40] in this folder. All right, so now I have
[34:43] the project open here and I'm going to
[34:45] open up Claude. So, command shift P and
[34:48] new tab. So, I'm going to go ahead and
[34:50] run npm install. I'll just tell Claude
[34:52] to do it. I'll say oh, I can just say
[34:54] install
[34:56] deps.
[34:59] And you don't need any key or anything.
[35:00] If you guys want to clone this, you can.
[35:04] npm install. I'll say yes.
[35:13] Okay, dependencies are installed. Now, I
[35:15] could tell Claude to run the server, but
[35:17] what I'll usually do is just open a
[35:18] terminal myself and let's run npm run
[35:22] dev.
[35:24] Okay, and this is not like a Next.js
[35:27] project. It just uses V.
[35:29] So, let's open up 551 Oh, it opens up
[35:33] here.
[35:34] No, I want to open it up in the browser.
[35:39] Actually, we'll just close that. So,
[35:40] it's still running. I'm just going to
[35:42] close the terminal.
[35:43] And then let's go here.
[35:47] All right, so very simple project. I can
[35:50] filter like if I say bit, obviously, I
[35:52] just gives me my Bitcoin. And I can
[35:54] click on one of these. It takes me to a
[35:56] page like this.
[35:59] And I can sort and all that.
[36:02] So, I actually want to create a Claude
[36:04] MD file and I already explained what
[36:05] that is. It loads every time you you
[36:08] create a Claude instance.
[36:10] Right? So,
[36:12] let's see. If I go back to VS Code and
[36:15] no matter what, if I run {slash} clear,
[36:18] whatever is in that file will stay. Now,
[36:20] I can create the file manually or what I
[36:23] would suggest is running {slash} init.
[36:26] So, {slash} init, what it does is it
[36:27] looks at your current project and it
[36:30] creates a Claude MD based on what it
[36:32] thinks it should as far as your project
[36:35] files.
[36:36] So, you can see it's going to read my
[36:37] package.json.
[36:40] It's listing the components.
[36:43] Reading the read me. It's looking at
[36:44] app.jsx. So, it's basically going
[36:47] through my entire project to see what it
[36:49] should put in there. And this is a very,
[36:50] very tiny project. So, it probably won't
[36:53] put much. Probably just like the scripts
[36:56] to run or something like that.
[37:01] Okay, so this file provides guidance.
[37:04] Yeah, so it's just showing the commands
[37:06] to npm run dev so that Claude never
[37:08] forgets that.
[37:10] Um requires a .env file with two coin
[37:13] So, this actually does use CoinGecko
[37:15] APIs. It works without it, but you'll
[37:18] get rate limited quick. So, you can add
[37:20] API keys. That's right. Forgot about
[37:23] that. Shows the architecture. So, Vite
[37:26] and React 19. It's a single-page
[37:28] application.
[37:30] Okay, so this is showing quite a bit.
[37:33] Showing all the files and and what's in
[37:35] them.
[37:37] Styling is in a single global style
[37:39] sheet. All right, so I'll say yes to
[37:41] that. And it created that Claude MD. And
[37:43] I can put whatever I want in there and
[37:45] it will always remember what I put in
[37:47] there. Now, just to kind of give you an
[37:49] example, I have the project from my AI
[37:51] course.
[37:53] And let's take a look at the Claude file
[37:55] here. So, this is what I'll what I'll
[37:57] commonly do is have a very small Claude
[38:01] MD file, but point to other files. So,
[38:04] here I have four main files I'm pointing
[38:06] to, which are in my context folder. I
[38:09] have project overview, which ob- just
[38:12] what it sounds like. Coding standards,
[38:15] so like standards with TypeScript and
[38:18] Next.js cuz that's what what the the
[38:20] project is.
[38:21] AI interaction, So, things like, you
[38:24] know, be concise, get to the point, um
[38:28] don't lie, you know, stuff like that.
[38:30] And then a current feature file, because
[38:32] like I said, I develop feature by
[38:34] feature. So, I fill this file with
[38:36] whatever I'm doing, I implement the
[38:38] feature, and then I I, you know, commit
[38:41] it, and then wipe it, and put the next
[38:45] feature in. That's kind of my process.
[38:46] And again, I'll show you that in the
[38:48] next AI course.
[38:50] Um and just to show you kind of what
[38:52] those files look like. So, if we go into
[38:54] context,
[38:56] there's a lot of stuff in here, but only
[38:57] those four being loaded with the Claude
[38:59] MD. So, like coding standards, strict
[39:02] strict mode enabled, no any types,
[39:05] functional components,
[39:07] server components by default. This is
[39:09] all stuff I want Claude to know,
[39:12] regardless of of, you know, if I clear
[39:14] my context or not.
[39:17] Um and I put this in here because with
[39:20] the older models, it would always
[39:21] install and try to configure Tailwind 3.
[39:25] So, I had to specifically say this here.
[39:27] So, I briefly talked about plan mode,
[39:29] where it doesn't actually edit your
[39:31] code, but you use it to just plan out
[39:33] stuff. So, I want to give you an example
[39:35] of that. So, to change it, I can click
[39:37] here and choose plan mode, or I can just
[39:39] do shift tab and just cycle through
[39:42] until it says plan mode, and then I have
[39:45] a prompt
[39:47] in the gist here.
[39:49] All right. Now, this this project that I
[39:52] have cloned is part of a course, and
[39:56] when you make projects for courses, you
[39:58] want to teach certain concepts, and
[40:00] sometimes the result isn't exactly what
[40:02] you would do if you weren't teaching a
[40:05] course. So, there is actually a lot of
[40:07] prop drilling in this project, and I
[40:09] want to fix that. So, I want to use plan
[40:11] mode to to kind of
[40:13] to figure out how we can fix it. So,
[40:15] this says, "Look at the app.jsx." and
[40:18] notice I'm using the at symbol so that's
[40:20] a mention. I'm mentioning that file and
[40:22] let me know how we could refactor this
[40:25] project to not prop drill the home page.
[40:27] What are your suggestions? Okay, so I'll
[40:30] grab that and if we take a look at the
[40:33] file that I'm talking about
[40:36] and we come down
[40:39] to yeah, right here. So you can see all
[40:42] these props I'm passing in the home
[40:43] page. So there's
[40:45] many other ways that we can do this. So
[40:48] let's figure it out with plan mode. So
[40:50] I'm going to go ahead and paste this in
[40:53] and make sure I'm in plan mode.
[40:55] And while it's in plan mode, it won't
[40:57] change anything. It's not going to you
[40:59] know, edit any files or create any new
[41:01] files or anything like that.
[41:04] So it says I already have good context
[41:06] on app jsx and home jsx from earlier.
[41:10] Okay, so that goes to what we were
[41:12] talking about earlier. Let me quickly
[41:14] look at the remaining control components
[41:16] and understand the full prop chain.
[41:19] So it's looking at my filter input file,
[41:21] limit selector, sort selector and this
[41:24] is what it'll do. It'll actually ask us
[41:26] questions. So which refactoring approach
[41:29] would you like to plan for? Move the
[41:31] state down and have a custom hook and it
[41:34] says it's that's what's recommended. So
[41:36] it'll collocate all state in home page
[41:38] and extract a use coin custom hook for
[41:42] fetching. No new dependencies app jsx
[41:44] becomes pure routing. So that's one
[41:46] option. Another is to use the context
[41:49] API which is built into react. A little
[41:52] you know, a little bit more code.
[41:54] Zeus stand store. So that's using an all
[41:56] out, you know, context store which I
[41:59] don't want and tan stack query. So I
[42:02] could replace the fetch in use effect
[42:05] with use query. Server state lives in
[42:08] query cache. So these are some real
[42:10] options. I'm going to go with the
[42:11] simplest which is to move the state down
[42:14] and have a custom hook. So, let's submit
[42:16] that.
[42:17] So, now what it's going to do is write a
[42:19] plan up for the recommended approach.
[42:23] And it's putting this into a markdown
[42:24] file, as you can see right here.
[42:27] And this is going to go in your home
[42:29] folder, I believe. It doesn't get put
[42:31] into your project folder.
[42:34] Let's see. Remove homepage prop
[42:36] drilling.
[42:38] So, it just kind of gives us an overview
[42:40] of the changes. It's going to create a
[42:42] new hook called use coins, and that's
[42:44] where it's going to do the fetching
[42:46] from.
[42:48] And let's see. Remove all nine props.
[42:56] Shows us what is going to be untouched.
[42:58] So, all the components like filter
[43:00] input, limit selector, that's all going
[43:02] to be un- un- touched. Verification.
[43:05] It'll run npm run lint.
[43:08] npm run dev. Okay. So,
[43:12] we can say yes and auto accept, yes and
[43:16] manually approve edits, and no keep
[43:18] planning. Or, we can tell it to do
[43:20] something else. So, I'm going to say
[43:22] auto accept, and that should bring us
[43:24] out of plan mode.
[43:26] So, see now it doesn't say plan mode,
[43:28] because now it's going to implement that
[43:30] that plan. So, now as you can see
[43:32] there's a hooks folder with that use
[43:34] coins.
[43:35] And then it's bringing that hook into
[43:37] the homepage, which you can see right
[43:39] here.
[43:42] And it's going to get rid of all the
[43:43] props for the homepage, cuz we're no
[43:45] longer going to be passing those in.
[43:48] And it's going to run lint and build.
[43:51] So, start the server, curl homepage, and
[43:54] try. So, I'm going to say no to this,
[43:55] cuz I already have the server going.
[43:58] In fact, I'll just say I have
[44:01] the server
[44:03] running, and I will test.
[44:07] Okay, it says the refactor is complete.
[44:10] Lint and production both pass, so let's
[44:12] open up
[44:14] I'm just going to restart the server
[44:16] here.
[44:22] Okay, and
[44:25] go back to the project.
[44:29] And there we go. So, we have all of our
[44:31] coins. If I click on one, so everything
[44:35] still works. I mean, there's there's not
[44:36] too much to test. It's very simple.
[44:39] But now our project is a little cleaner,
[44:41] right? If we look at the app.jsx
[44:46] and we look at these routes here, we no
[44:48] longer have that home page where we're
[44:50] passing in all that stuff. Okay? So,
[44:52] that's just an example
[44:54] of kind of using plan mode and and using
[44:57] that to refactor. Now, let's see what
[44:59] else I have here in the gist. So, I
[45:02] wanted to add a favorites feature.
[45:06] So, just to add just to add something. I
[45:08] mean, I know we just did a refactor, but
[45:10] let's let's add a new feature to the to
[45:12] the project. So, once again, I'll go
[45:15] into plan mode.
[45:18] And it says I want a features a
[45:20] favorites feature that lets us star
[45:22] coins from the list, filter to only show
[45:25] favorites, and persist with local
[45:27] storage. How would you implement this?
[45:30] So, it says this is a new task, so I'll
[45:32] overwrite the old plan. I already know
[45:34] most of the code base. Let me check coin
[45:36] card and the style sheet since this is a
[45:39] star since the star button will live
[45:41] there.
[45:43] And by the way, if this were a real if
[45:44] this were a real you know, I was going
[45:46] to keep this, I would have made a commit
[45:48] with the refactor.
[45:51] Okay, so let's see.
[45:54] User wants to mark coins as favorite
[45:56] changes, so there'll be a new file. So,
[45:58] it's going to create a new hook called
[46:00] use favorites.
[46:02] And it'll have a storage key with some
[46:04] state.
[46:05] So, favorites and set favorites. Use
[46:08] effect, it's going to set the storage
[46:11] key in local storage.
[46:14] And we'll have a toggle
[46:16] to toggle that value, bring it into the
[46:19] home page.
[46:22] And then in the coin card, it's going to
[46:24] add the star.
[46:27] Yeah, so and then CSS will add a star
[46:29] button class.
[46:33] And then all this stuff is all
[46:34] untouched. All right, so I'm going to
[46:36] auto accept. And that means that I'm
[46:39] letting it do it. It gets out of plan
[46:41] mode. So, it's showing me the diff of
[46:43] the home page. You can see it's bringing
[46:45] in use favorites, the new hook. It's
[46:47] adding the piece of state.
[46:49] And we have the toggle here.
[46:52] And we're adding it to the filter.
[46:55] So, show favorites only.
[46:58] And then adding the coin card.
[47:03] So, coin card is now going to get an is
[47:05] favorite and it's also going to have an
[47:07] on toggle favorite prop passed in.
[47:11] And then the CSS.
[47:13] So, I mean I'm seeing everything that's
[47:15] being done, right? Some people are just
[47:18] so against AI cuz just cuz I'm not
[47:20] typing this out. I know exactly what's
[47:22] happening.
[47:24] So, we're going to run lint. And this is
[47:26] a tiny project. I realize that. It's
[47:28] It's when you get into really large
[47:30] enterprise projects where AI can really
[47:33] be a problem.
[47:35] So, let's see. It's been implemented.
[47:37] Let's check it out.
[47:40] There we go. So, we got our our stars
[47:42] here. Let's say we want Bitcoin
[47:45] and I don't know, Solana.
[47:47] So, those are favorited and
[47:50] if I filter, if I click this, it shows
[47:53] my favorite only the favorites.
[47:57] So, that easy to to create that feature.
[47:59] I know it's simple, but it would have
[48:01] taken taken me a hell of a lot longer to
[48:03] actually type all that out. So, the next
[48:05] thing I want to look at are skills. A
[48:07] skill is basically a reusable workflow
[48:09] that you teach Claude once and it
[48:12] remembers forever. And skills are used
[48:14] in in tons of AI tools. It's not just a
[48:17] Claude code thing.
[48:18] So, and it's not just Claude code, you
[48:21] can also use it in Coda. In fact, you
[48:23] can see right here, if I go to skills, I
[48:26] have all these skills, my morning
[48:27] briefing, which says generate Brad's
[48:30] morning briefing, a one-page snapshot of
[48:33] today's calendar, last session's outcome
[48:35] and pending actions, what's active in
[48:37] projects and current state, any email
[48:40] items needing attention. So, I just type
[48:42] good morning and it runs the skill for
[48:44] me. And these are just markdown files,
[48:46] right? If I go to manage skill, you can
[48:48] see
[48:49] um this is just a markdown file right
[48:52] here.
[48:53] And I mean, you can manually write these
[48:56] if you want, but you can just tell
[48:57] Claude to write it. So, what I'm going
[48:59] to do is go back to the gist here, and I
[49:03] have a um skill here to handle get
[49:06] commit messages. So, it says create a
[49:08] project scope skill called skills as
[49:11] slash
[49:14] commands.
[49:15] So, the workflow is check that there are
[49:17] stage changes within get diff staged. If
[49:21] nothing is staged, stop and tell me to
[49:22] stage first. Read the staged diff.
[49:26] Generate a commit message in this
[49:27] format. So, it'll be the type, scope,
[49:30] the short a short subject, bullet of
[49:33] what what changed, and a bullet of why,
[49:36] and then run get commit with that
[49:38] message. And the different types will be
[49:40] feature, fix, refactor, chore, and so
[49:43] on. Um trigger when I say write a commit
[49:46] message, generate a commit. So, I don't
[49:48] have to run that slash command. I can,
[49:51] but I can also just say write a commit
[49:53] message or generate a commit and it'll
[49:55] it'll automatically know to load that
[49:57] skill. So, let's grab this.
[50:00] And we're simply going to run this as a
[50:02] prompt. So, we'll go ahead and paste
[50:04] that in. I also want to point out I said
[50:06] project scope skill. That's important
[50:09] because skills have they pay attention
[50:12] to scope just like settings and
[50:14] permissions, just like MCPs, and project
[50:17] scope means it's going to install it
[50:19] it's going to work for this project
[50:21] only. I could have said user scope and
[50:23] it and this would then work across all
[50:25] my projects.
[50:27] Okay, so this is the markdown file it's
[50:29] going to create. So, basically just
[50:31] everything I told it.
[50:34] So, let's say yes to that.
[50:37] And then it where it's going to put it
[50:39] is going to be my dot Claude folder
[50:41] under skills, you can now see commit
[50:44] message.
[50:45] And every skill is always going to the
[50:47] file is always going to be called
[50:48] skill.md.
[50:50] Okay, the folder is is what identifies
[50:53] it, but the the specific file will
[50:54] always be be skill.md. Let's see, two
[50:57] details worth noting, the description
[50:59] front matter includes your trigger
[51:00] phrases, so the skill activates on those
[51:03] naturally, and the slash command works.
[51:07] I already mentioned that.
[51:09] So, what I want to do now is actually
[51:11] clear my context just to to know when I
[51:14] make this commit, it goes off of the
[51:16] skill.
[51:17] So, let's run slash actually, I'll just
[51:19] say Yeah, I'll just say write a commit
[51:23] message.
[51:24] And that should run the skill. Yep, so
[51:26] right here, commit message skill. So, it
[51:28] knows to run it. So, it's not rigid like
[51:30] standard commands. You don't have to do
[51:32] slash something exactly, you just
[51:35] basically say what you want and it it
[51:37] picks it up. It knows if it should use
[51:39] the skill. Now, remember in the skill I
[51:41] said tell me if nothing is staged, and I
[51:43] haven't run get add anything, so it says
[51:46] nothing is staged, stage your changes.
[51:48] So I'll go ahead and just
[51:51] and just to show you I can run it
[51:53] just open a terminal.
[51:55] I mean I don't have to use, you know,
[51:57] Claude for for freaking everything. I'll
[51:59] just say get add
[52:02] get add all.
[52:04] Okay, so now I have my changes staged
[52:06] and I'm going to say once again, this
[52:08] time I'll use the actual command. I'll
[52:11] say commit {dash} msg. Now it doesn't
[52:13] show up because you
[52:16] one one when you create it you have to
[52:17] open up a new Claude instance for it to
[52:19] show up here. Okay, so it's it's not
[52:22] recognizing it because I didn't run a
[52:23] new Claude tab, but I'll just say write
[52:27] a commit message. Okay, so this looks
[52:29] like the format that I specified. So
[52:32] feature, that's the type the scope home
[52:36] add favorites with local storage
[52:38] persistent and then our points add use
[52:41] favorite hook, extract coin fetching
[52:44] into use coins. All right, so we'll say
[52:46] yes to that and there we go. So now it's
[52:48] been committed. So that's just a very
[52:50] simple example, but you can create
[52:52] anything into skill. If you have a
[52:53] certain way you want to create
[52:54] components or or absolutely anything
[52:57] that you do repetitively. If you find
[52:59] yourself doing the same thing over and
[53:01] over then create a skill for it. For my
[53:03] devsheets.io website where I have a
[53:06] whole bunch of different types of sheets
[53:08] for different frameworks and stuff, I
[53:10] have a validate sheet skill that will
[53:13] reach out to
[53:15] um to the documentation and actually
[53:16] uses an MCP called context seven and it
[53:19] will make sure that everything is right
[53:21] and it'll look for for updates. If
[53:23] something in the framework is updated,
[53:25] it'll add it to the sheet, things like
[53:27] that. So the next thing I want to talk
[53:28] about are MCPs which stands for model
[53:31] context protocol and there's all kinds
[53:33] of MCP servers and it allows Claude and
[53:36] not just Claude, but pretty much any AI
[53:38] tool to reach out to other services. And
[53:42] some of the the ones that I use are
[53:45] Contact 7, which gives the most
[53:47] up-to-date documentation on frameworks
[53:50] and all kinds of stuff. And the reason
[53:53] that that's very helpful is because
[53:55] obviously models are behind a little
[53:57] bit, and you want to get the most
[54:00] up-to-date information, so using that
[54:02] MCP allows them to do that. Another one
[54:04] I use a lot is Neon's MCP, which will
[54:07] allow my AI to directly interact with my
[54:10] Neon databases and make queries.
[54:13] And then Playwright, which is what I
[54:14] actually want to work with now, allows
[54:18] basically allows Claude to open the
[54:20] project up in a browser and run
[54:22] end-to-end tests or even just look at it
[54:25] and give you an opinion on the UI or
[54:27] something like that. It's just a way for
[54:28] it to actually see your project. And I
[54:31] use Playwright all the time on on my
[54:33] main machine.
[54:34] But there's MCPs for like Google
[54:36] services, for Slack, for just about any
[54:39] popular service you can think of.
[54:42] So, to install an MCP with Claude, let
[54:45] me go back to my gist here, you can run
[54:48] a command like this: Claude MCP add, and
[54:52] then you can specify the scope, so dash
[54:54] S user, meaning the user scope, so it's
[54:57] available on all projects, the name of
[55:00] it, and in this case we we're going to
[55:01] add NPX in the Playwright package. So,
[55:05] let's grab that, and that's going to be
[55:07] run in a terminal, not not in um
[55:11] not in Claude's interface. So, I'll open
[55:13] up my terminal, and let's go ahead and
[55:16] paste that in.
[55:18] And let's run that.
[55:20] Okay, so my it already exists, I already
[55:22] have it installed, so I should be able
[55:24] to use it. Let's just straight up ask.
[55:27] I'll say, "Do you
[55:28] have access to the Playwright
[55:35] MCP?"
[55:38] Playwright MCP?"
[55:38] Let's close that up.
[55:42] Okay, so it says no, it isn't connected
[55:43] to this session. You know what? I might
[55:45] have to restart this. I might have to
[55:48] open up a new tab. So, let's actually do
[55:50] that. Do you have access to the
[55:53] Playwright
[55:56] MCP? Yes. Okay, so now it does cuz I
[55:58] restarted the session.
[56:00] So, basically I can have it just open my
[56:03] project up in a browser and run some
[56:05] tests. So, I'm going to grab this
[56:08] which says use Playwright to open the
[56:10] project and then click the star icon on
[56:13] the on the first coin in the list. Then
[56:16] click the favorites filter. Tell me if
[56:19] the star the starred coin is the only
[56:22] one showing and take a screenshot.
[56:25] Which I just I think is amazing. If you
[56:27] think of like where we were a couple
[56:29] years ago to be able to do this now, I
[56:31] think it's crazy.
[56:33] So, let's go ahead and and let me just
[56:34] check the
[56:37] Yeah, so I'm just going to unfavorite
[56:38] everything here.
[56:41] Okay, so now
[56:42] let's run this. I already have the
[56:44] server running, so I'll tell it that.
[56:47] I already have it running. Now, what
[56:49] it's going to do is ask for permission
[56:51] for different kinds of tools. Like this
[56:54] one is called browser navigate. So, MCPs
[56:57] have their own set of tooling. So, I'm
[56:59] going to say yes to that.
[57:00] Now, it's opening this, right? And it
[57:03] should click the star, the first star.
[57:07] Now, it's going to ask permission for
[57:08] it.
[57:10] So, browser snapshot. Let's say yes to
[57:12] that. I'm just going to say allow
[57:14] always. Okay, so it's running
[57:16] Playwright.
[57:18] And get that browser back.
[57:22] Yep, so you can see it clicked the star
[57:23] and now it's just showing Bitcoin. Now,
[57:25] it's going to take a snapshot and it'll
[57:27] create this {dot} Playwright folder. If
[57:29] you're going going you're probably going
[57:30] to want to get ignore that. Yes, it
[57:32] works as expected after starring the
[57:34] Bitcoin, the first coin, and checking
[57:36] the favorites only filter, Bitcoin is
[57:38] the only coin showing. So, that is
[57:40] freaking awesome to me. That's still
[57:43] amazing. I do that stuff all the time,
[57:44] but it still amazes me.
[57:47] So, yeah, that's MCPs, and that's play
[57:50] right. All right, so this video is
[57:51] longer than expected as usual, but I
[57:54] wanted to just talk about sub agents
[57:55] real quick. So, a sub agent is basically
[57:58] a separate Claude session that gets spun
[58:00] up to handle a specific task, and then
[58:03] it reports it back to your main thread.
[58:05] And what's great about sub agents is
[58:07] they have their own context window. So,
[58:09] when I run {slash} context, and you see,
[58:12] you know, the used up tokens, it doesn't
[58:15] get added to that. At least the the
[58:17] whole thing doesn't. What does is what
[58:20] it comes back with, which is just simply
[58:21] just a summary of of what it finds. So,
[58:24] you can create a sub agent that will
[58:27] um basically look for dead code, or look
[58:30] for
[58:32] parts of your code it can optimize.
[58:34] That's really where I find it useful is
[58:36] to just make your code base better. So,
[58:39] what I want to do is create a sub agent.
[58:41] There are actually built-in ones.
[58:43] There's one called explore that's used
[58:46] just for that to kind of explore your
[58:47] your your code and come back with
[58:50] findings. So, I do have a prompt here to
[58:53] use the explore agent. It says, "Use it
[58:55] to map the data flow in this project.
[58:58] Where does the coin data come from? What
[59:00] components consume it? How uh how does
[59:03] state move through the app after
[59:06] uh after our recent refactor? Report
[59:09] back with a summary." So, this will use
[59:12] a built-in sub agent called explore. So,
[59:14] let's try that out. I'm going to go
[59:16] ahead and run that.
[59:19] Now, whatever it does within this
[59:20] explore agent is in its own context.
[59:24] So, it says, "A lot launch an explore
[59:26] agent to map the data flow across the
[59:28] code base. So, all this stuff it's doing
[59:30] right now, reading package.json, reading
[59:33] use favorites, that's in its own
[59:35] context. Okay, so this is basically the
[59:37] report that it gives back and this is
[59:39] what goes into our main context. So,
[59:42] here's the data flow map. Um one
[59:45] headline finding, the refactor
[59:47] moved all state out of app.jsx,
[59:50] where the coin data comes from. So, it
[59:53] has our hook, use coins, the coin
[59:55] details page, the coin chart component,
[59:59] where the state lives, which is in
[01:00:00] app.jsx.
[01:00:02] Um how the data moves down through the
[01:00:05] home.jsx, passes filter, limit, sort by.
[01:00:09] Just gives us a a summary. So, anytime
[01:00:10] you want to know anything about your
[01:00:12] code, you want to use a sub agent, so
[01:00:15] you don't add that to your context. Now,
[01:00:17] you can also, in addition to using the
[01:00:20] built-in ones, you can create your own.
[01:00:22] So, I have this last prompt here that
[01:00:24] says create a project-scoped sub agent
[01:00:27] called code reviewer. It should review
[01:00:29] the current uncommitted changes in this
[01:00:31] project and check for things like dead
[01:00:34] code or unused imports, console.log
[01:00:37] statements left in, missing key props on
[01:00:41] lists in React, um accessibility misses,
[01:00:44] and so on. So, anytime you want to not
[01:00:47] only check things, but, you know,
[01:00:49] optimize your code, sub agents are great
[01:00:51] for. So, I'm going to go ahead and run
[01:00:53] this.
[01:00:56] And again, I I specified I want it to be
[01:00:59] project-scoped, so it should get put in
[01:01:01] here in the projects.claud folder. If it
[01:01:05] were user-scoped, it would be in my
[01:01:07] home.claud folder. Okay, so this is it
[01:01:10] and it's just a markdown file.
[01:01:11] Literally, everything you do is a
[01:01:12] markdown file. So, your read-only code
[01:01:16] reviewer. Okay, so that's important,
[01:01:17] it's not going to make any changes, it's
[01:01:19] just to report. Your scope is to review
[01:01:23] only the current uncommitted changes.
[01:01:25] So, it's actually not going to go
[01:01:26] through the entire code base, just your
[01:01:28] uncommitted changes.
[01:01:31] Which do I even have any? I'm not sure.
[01:01:33] I don't even think I have any.
[01:01:35] Um but yeah, let's go ahead and accept
[01:01:37] that.
[01:01:39] And now you can see there's now an
[01:01:41] agents folder in my doc cloud folder
[01:01:43] with that code review markdown file.
[01:01:46] Yeah, it looks like all we have is
[01:01:47] playwright stuff for uh for uncommitted
[01:01:50] code.
[01:01:52] But let's just try it. We'll say review
[01:01:53] my code. So, right here, agent
[01:01:57] review uncommitted changes.
[01:02:00] And again, it has its own context
[01:02:02] window, which I think is is the greatest
[01:02:04] thing about sub using sub agents. So, I
[01:02:06] think it saw that I had no uncommitted
[01:02:09] code, and it's actually adding this
[01:02:10] here. So, it did say if there are no
[01:02:12] uncommitted changes, say so and stop. Do
[01:02:15] not review committed code instead. Now
[01:02:17] it says if there's no uncommitted
[01:02:19] changes, say so and stop. And then
[01:02:22] non-code artifacts like screenshots from
[01:02:25] playwright do not count as reviewable
[01:02:27] changes. So, what happened was it went
[01:02:30] to do that, right? Review my uncommitted
[01:02:32] code, and it sees all I have is like
[01:02:34] playwright screenshots. So, it decided
[01:02:37] to actually change. It learned from that
[01:02:40] and changed its own markdown file to now
[01:02:43] say, you know, ignore those playwright
[01:02:45] screenshots. So, I'll say yes to that,
[01:02:47] and now it's probably just going to tell
[01:02:48] me I have no
[01:02:50] uncommitted changes.
[01:02:52] Let's see. If you make some changes in
[01:02:54] source and say review my code again,
[01:02:56] you'll get the real severity group
[01:02:58] report. But I'm not going to do that cuz
[01:02:59] this video is getting way too long. But
[01:03:01] the point is you know what sub agents
[01:03:03] are, and you know what that you can do
[01:03:05] with them. You know, they they have
[01:03:06] their own context. All right. So, again,
[01:03:09] this video was a lot longer than I had
[01:03:11] planned. I always plan to make it like a
[01:03:13] a quick guide, but there's just too much
[01:03:16] to say and and and teach. So, hopefully
[01:03:19] you guys enjoyed it. Let me know if you
[01:03:20] did and I will see you next time.