3 Claude Code Skills to Make Sense of AI Code

00:00 Let’s be honest for a moment. Do you really read the code that Claude Code writes for you? I know we should be the human in the loop. We should review it and really get a good understanding of it.

00:12 But do we really do this? I don’t. But I have three skills that I will show with you today, which makes me confident about the code that Claude Code writes.

00:22 And these three skills are specific for three stages when I’m working on projects. One is a skill that I use before I start a project, which really helps me to drill down my ideas that I have in my mind.

00:34 So instead of having just like one ambiguous prompt, I really dive in deep with my design decisions. The second skill is a skill that gives me a visual overview about my code.

00:45 And the third skill I will share with you even gives me an interactive session that lets me dive in deep into my code and I have to explain things back and get a really good understanding of the code under the hood.

00:58 So even if you don’t write the code yourself, these three skills really make you a better developer by understanding what’s happening behind the scenes.

01:07 I’m Philipp from Real Python and I teach hundreds of developers how to use Claude Code efficiently. So if what I’m showing you in this video catches your attention, I recommend checking out realpython.com slash workshops slash Claude code or the link in the description where you can see when I have my next Claude Code live courses and I would love seeing you there.

01:30 So let’s get started and let me show you the three skills I have prepared for you today. Oh, and one more thing before we start, I will not show you how to install these skills.

01:39 Instead, I will leave you the instructions below this video because the installation is basically the same for all these skills with slightly different commands and this video really focuses on using the skills.

01:50 If you have any problems with the skills, just let me know in the comments and I will help you out. The first skill I will use is called grill-me. It’s a skill by Matt Pocock.

02:00 I use this before I actually start with the project. The moment before Claude Code writes any code, I use grill-me. And if you have a look at the skill file of grill-me, it basically just has one content line and that says, call the skill tool with grilling.

02:19 So the actual skill that we will use is the grilling skill, but the command that you use to invoke the skill is called slash grill-me. So what does this skill exactly do?

02:31 Well, basically, it grills you. That means it will ask you relentlessly about any plans, decisions, or ideas that you’re having. And how the skill does this is actually quite smart.

02:44 Matt took this idea and maps this idea or plan that you are having to a design tree. It kind of like goes deeper into this tree. To make this whole process a bit more convenient for you, there is also already an answer pre-selected saying yes.

03:01 So you can also go through this tree quite quickly. To see the skill in action, let’s open Claude in our project. And then you can invoke the skill with slash grill-me.

03:13 And after that, you can basically just ramble your idea because then the skill will grill you on this unstructured idea to kind of boil down this idea to some project that makes more sense.

03:28 And since I want to ramble, I’m using a dictation tool here. And I will just kind of brain dump my idea. I want to create a little web application that is just some kind of timer that I see in the browser.

03:45 And I want to be able to set a timer and also the font and the color of the time and the background color. But once I’ve set the timer and I say go, then almost everything should disappear from the interface until I click on the website.

04:05 And then the timer pauses. And then I can say stop or something. And there are the settings for the colors. Something like that. This is super unstructured.

04:16 And if you would just send this prompt to Claude, he would come up with something. But using the grill-me skill, you will now be prompted to answer questions to really make good design decisions.

04:28 Once you press enter, now the skill will kick in. You see this by the saying there successfully loaded the skill grilling. And now the questioning will start.

04:39 You have this blob of questions to use the shortcuts for Q1 and then A, B, C. And again, there is one answer already selected. So you could also say yes to all.

04:51 So the first question is what this is for. And for me, that is 1B because I want to have it as a countdown for when I’m doing some streamings. And then I can show it in OBS or my recording software.

05:04 So here I’m not using the recommended answer. So the second question is countdown or count up. So second is countdown. I could just type two yes or two agreed.

05:17 Question three is, is it a go button or your voice when you say go and stop? I mean, that would be kind of like cool, but three buttons. Question four, what stays visible while running?

05:29 You said almost everything disappears for yes, only the digits stay. Question five is full screen. So yes, I think that would make sense. Question six is what happens at zero when the countdown finishes?

05:48 I think it makes sense to go into the negative because if I don’t start my stream on time, I don’t want it to be just showing like zero zero or playing a sound or something like that.

05:57 Question seven, the text deck. Yeah, I think let’s keep it simple. So it’s just use a simple HTML file. And question eight, remember the settings? Yes. So what I like here is that is actually like a structured way of asking me questions.

06:13 And once you send this back, Claude Code gets all these answers with the main idea that you had. And then it comes back with the next set of questions. So here, to not bore you too much, I will do the magic of editing and answer the questions.

06:29 All right. So I answered a bunch of questions. We’re now at round three, which is not that many for a small project. If you have a bigger idea, of course, there will be more rounds.

06:39 And that’s what I love about this skill, because it really makes you think about your idea. At some point, it’s also okay to decide it’s enough for now. And it’s important then that you don’t just say like, yeah, yes to all, whatever you think is good, but to wrap up this grilling session naturally.

06:56 And you can do this by just saying, let’s end the grill here. You can use natural language, and this will stop the grilling session. And for the last part of the questions, since we had this default of yes, Claude now assumes that you go with these parts.

07:16 And again, you can decide to push back on that and say, I don’t want to make any decisions on that, or just roll with it. So I can just say that. Don’t make the assumptions for round three.

07:28 Keep this open for now and build it based on the questions I actually answered. All right. And once you did that, then Claude jumps into working mode and comes back with the plan for the project.

07:44 Well, actually, it didn’t come back with a plan, but it implemented it already because I wasn’t in plan mode. That is okay. So let’s have a look how our page looks like.

07:54 Yeah, we have a timer and we can change the background color and we can change the text color, which is nice. And then we can change the font. And once we say go, it goes into full screen and then shows the timer.

08:16 And when I click, I can click stop. So that’s actually pretty nice. Kind of like what I envisioned. I can also change the size. What is the problem with that?

08:27 The problem is I have no idea how the code looks. If we look at our project folder, there is this index HTML file and all the JavaScript, all the CSS and HTML obviously is in there.

08:39 So that is something we will tackle next. The second skill I want to show you is the show-me skill. And this skill is amazing if you have some code that your agent wrote and you have not really an idea how the code works under the hood, how it looks like.

08:58 And with show me, you can explore this code. It’s a skill by Dex Horthy. And the pitch of this skill is to make your agent converse visually instead of walls of prose.

09:12 Because I mean, you could ask Claude Code like, hey, explain how our index HTML file works. But with this skill, you get different visual ways of seeing how your code works.

09:23 And actually, you have eight views that you can select from. So one is pseudocode, I think it’s in English. The other one is a call tree, like how is your application working?

09:33 Then a component tree, like how do these modules fit together? File tree, a mermaid chart, which is a kind of a diagram diff to see what code changes happened, the whole block of code and an HTML file.

09:49 And since our project is very little, and we basically just have an HTML file, I will check out what makes most sense for us. So having a look at the skill itself, there is one rule, but I like this one rule that you should use when using this skill.

10:06 And that’s pick the smallest view that makes the key point clear for you. So for me, this will be kind of like I want to understand what’s happening inside of this HTML file and how is the logic connected underneath it.

10:19 Let’s jump back to the terminal. And now I want to understand how my index HTML file looks under the hood and how the pieces kind of like fit together. So now we got a bit more information.

10:35 And one nice thing is here, now we have kind of like a file inside look with the component. So if you remember the slide from before, this one here is the component look.

10:47 So we have our index HTML file with the style and there the center digits, the floating panel, and the CSS classes are defined. And then there is the body, which has then the display and the panels, and then the script, which has the logic for the fonts and the settings, the formats, and so on and so on.

11:09 So the key idea is CSS does the showing and hiding. The script never hides elements one by one. So we are using set state. And then it shows this flowchart here or the code for the flowchart.

11:24 So what I want to do now is to ask Claude Code to render this mermaid flowchart for me to look at it. Please render the mermaid flowchart so I can have a look at it.

11:37 And that is a nice way when you’re using a skill and you’re in Claude Code, you can grab all the potential that Claude Code has and make it make sense of your ideas.

11:47 So here we have this mermaid chart now that the show-me skill produced. And we are looking at it in the browser now. And here you can see how the JavaScript under the hood works.

12:01 It’s important that since you didn’t write the code yourself, that this is the moment where you try to understand what exactly is happening. And usually you would now go deeper into that.

12:13 And for example, ask like, hey, so what exactly does sanitize do? And with this visual representation, you have a nice way of learning how your code works under the hood without going into the nitty gritty of the code.

12:28 However, of course, it also would make sense to look at the source code. But this visual representation is a nice way to have an aside for that. So what is the mental model you can have for the show-me skill?

12:39 And that is basically asking for the shape of your code and not for some kind of summary of what your code does. If you’re using a skill like the show-me skill, you’re using the skill from someone else.

12:52 But it’s also cool to actually write your own skills. And if you’re curious about this, I highly recommend checking out my live course Claude Code for Python Developers, where I show you, besides a bunch of other things, how you can create your own skills that really matches your own workflow.

13:09 The link is below this video, and I would love to see you in one of my live courses. Skill number three is a gem. And what I like about this is that it’s actually really well researched about the didactics behind the skill.

13:25 So the skill is called learning-opportunities. And the idea behind it is the skill asks you, hey, do you want to make a quick learning exercise about the topic that you committed?

13:37 And then you have around 10 to 15 minutes in order to actually answer questions about the code base and learn deeply what you actually just did. And that is amazing, especially when you’re creating projects with agents, and you don’t really know the code under the hood, right?

13:55 So with every commit, you learn something. So over time, you really understand the project. The person behind that is Dr. Cat Hicks. She’s a psychological scientist who studies software teams.

14:09 And that really shows in this skill. It’s based on a bunch of researches, which you can have a look at if you’re curious about this and if you want to dive in deeper.

14:20 But the really nice thing about it is that it goes in four directions in the cycle. You, for example, have to predict what the code does, or you need to trace the path inside the code.

14:34 You need to debug something, or you teach something back. And then Claude takes your input and tells you if it’s right or wrong. And how the skill does this is quite clever.

14:48 So you go through exercise, and you can stop at any points that you don’t want to continue, because maybe you don’t want to do this with every commit, right?

14:59 So if you decline right away, you’re not asked more questions. And here’s a little bonus. This skill actually has some counterpart. So what if you don’t write the project yourself, but you, for example, clone a Git repository and you want to understand it better?

15:15 For that, there is also an orient part, and there you can get questions about a repository where you don’t produce the code yourself. All right, and this concludes the three skills I wanted to show you.

15:28 So when you’re setting up a project, and you want to brain dump the ideas that you’re having, and you really want to get grilled about your design decisions, then you use the grill-me skill.

15:41 And while you’re creating the project, and you want to understand how the code works, you use Show Me. And then while you’re committing stuff, and you want to really get a deep understanding after you’ve written the code, then you use the learning-opportunities skill in order to get questions about the code base.

16:01 And the reason why I selected these skills for you is because I feel like they are working perfectly together. And it’s kind of like has this cycle, especially with the show-me skill and the Learning Opportunities one, where you continue to understand your code, even if your agent writes the code.

16:20 Now, of course, this doesn’t only have upsides. This will really slow you down. And for you, it’s a decision if you want to do that. I feel sometimes I want to go fast, and then I don’t use these skills.

16:32 But if I really want to understand my code base, then I really spend my time off using the skills to understand everything I’m writing. Because in the end, I’m the human in the loop, and I need to take responsibility for the code, even if Claude Code wrote the code.

16:48 Now, to work efficiently with Claude Code, there is much, much more that you can investigate. And again, I invite you to join my live course, Claude Code for Python Developers, where we talk about CLAUDE.md conventions, how to plan features, besides the grill-me skill that I showed you in this video, and how you can create a workflow that gives you good, reusable results.

17:11 If you’re curious, you will find the link below this video, or you can go to realpython.com slash workshops slash claude-code. I would love to see you there, and I hope this video was useful for you.

17:24 Thanks for watching, and see you next time!