I Stopped Using PowerPoint After Building This Claude Code Skill (Full Tutorial + 3 Templates)

Hey everyone. Today I want to show you how I build beautiful slide decks using AI and HTML. I haven't made a PowerPoint or Google slide deck manually for at least a few months. Instead, what I do is I give AI a rough outline and use my slash slide skill to return a beautiful animated HTML deck in a matter of minutes. In fact, this deck that you're seeing now is made by my slide skill. So, let's walk through why I build slides in HTML now. The 12 slide format that my skill comes with. How to use the skill to generate decks yourself, and then look at exactly how the skill works. By the end of this tutorial, I want you to be able to make your own slide skill or you can just copy mine. All right, so let's dive in. So, why build slides in HTML? I have been making PowerPoint and Google slide decks manually for over a decade. And frankly, I'm kind of sick of it. It sucks to have to manually edit, copy, and drag boxes around. It's just like a lot of work. So, that's why I decided to make a slides AI skill. And I can tell you guys, it's so much better and easier because the skill lets you go from nothing to first draft in a matter of minutes. It generates live interactive charts that users can interact with. It lets you add images directly and have AI work on the dimensions and the alignment. And most importantly, it adds subtle animations for illustrations and slide transitions

that it creates for you so the entire deck comes alive. Okay, so I spent a lot of time improving the skill to generate 12 common slide formats. Let's take a quick tour of some of these now. We have the two-column format, which is ideal for readability and text and images side by side. We have the stack grid, which is great for highlighting three top stats with animations that you just saw. we have the comparison table slide for comparing two features side by side, steps for three steps complete with animated illustrations, road map for walking through quarterly milestones and more, code block for technical walkthroughs where you want to show actual code, quote slide for a big quote with, you know, speaker attribution, and last but not least, fully interactive charts. So, you can see here I can hover over each chart to see the number for each stack bar here, and it is way more interactive and interesting than a static chart, right? And not only that, but I've also made three visual templates for the scale from the default template that we're showing here to a dark and a light template. So, let me quickly show you what a dark template looks like now. All right. So, I pre-generated this dark template about the state of AI coding in 2026. Let's do a quick walk-through. So, we're talking about the market, the leaders, Codex versus Claude Code, and what's next. And yeah, these are some numbers that AI did some research of. I'm particularly impressed by this chart here that shows uh different models and how they benchmark on software engineering tasks. And you can see right now that GPT 5. 5 and even 5. 4 is potentially leading over the Claude models for agent AI coding tasks. Right, we can keep uh doing the slide. Here's a comparison of Codex versus Claude Code. Um and yeah, timeline slide and so on and so forth. And you can also include images in your slide. Uh all you got to do is paste it into Claude Code or Codex, or drag and drop it into the right folder, and you can include the image as part of the slide. So, that's the dark slide template. And here's a quick deck for the light side template. Uh here we talked about a slide deck for five principles to ship products faster that I really believe in. And let's take a quick look. So yeah, do you fewer things better with the stats. Do the simple thing first. Validate the riskiest assumptions first. I love how I decided to make a three-step slide. And prototype for PRDs and finally um go ship something, right? Okay. So Michael here is not just show you my scale, but to teach you guys how

to make your own version of the slide scale. So let's take a look under the hood at exactly how the scale works. Basically, there are six different steps. The first part is the scale will read the scale. md and styles. md file that has the workflow and the templates and formats respectively. Next, it's going to ask us a few clarifying questions. And also do some online research to pull in more facts to clarify the outline of the deck. Then it's going to go ahead and generate all the slides as a single HTML file before doing a visual quality assurance pass by rendering every slide as an image and inspecting those images for layout issues or bugs. And finally, it's going to deliver the whole deck to you. All right, so that's how it kind of works at a high level. But let's actually try now in Claude code to generate a deck.

Okay, so I'm going to go ahead and open Claude code. And here I'm invoking the slide scale with /slides. And I'm just going to ask it to make a Claude code best practices deck. And here I've linked the Claude code best practices. So this is a written document with a bunch of Claude code best practices. All right, so let's go back here. And let's go ahead and generate this deck live. You can see here that Claude has started to work. And the first thing it's going to do is it's going to read through the scale and ask us a questions. So here we go. Do you have the content ready or just a topic? Let's say we just have the topic. How many slides do we want? Uh let's just go with a tight overview. Uh there we go. Which style? Let's do the brand default style. And who is the audience? Let's say a product managers and developers. And let's say, by the way, make the slide super visually interesting so that we have something fancy to look at. Submit. Okay. So, you know, it went through all these questions and it has got a few more questions to go. Want me to research the best practices URL before drafting? Yes, definitely fetch and use the documents. And now it's going to do some online searches. So, I included online search step because you can give AI a slide template and with a bunch of copy that you can have. But, since it has web search capabilities, why not also get it to do some research about your topic to make the slide even better. Okay. So, Claude had generated a slide deck. I'm going to show you what I went through, right? So, specifically, it ran a separate QA agent to, again, take a screenshot of every single slide on the deck and do a QA pass to find layout or any other issues. You can see that it actually found a ton of issues that it fixed. And it's still running uh the QA pass. So, this is really important. It's best practice to include instructions in the scale for the AI to QA its own work before you check its work manually, right? All right. So, without further ado, let's take a look at the deck that I generated. So, here it is. Claude code best practices. How to get the most out of a AI chat coding environment. Here's about context filling it fast. Give it a way to verify yourself, exactly like the QA agent that we just talked about. Here is the process to work with Claude code. Be specific in your prompts. Write a great Claude MD, and it's smart enough to use the code block slide. Manage session aggressively. Develop your own intuition, and that's it. And there's a link to actually go ahead and read the full documentation. So, you know, for us to manually make this deck especially to the level quality as this, it would have taken us probably an hour or so, or maybe more. But, you can see here that we generated this full deck in a matter of a few minutes, right? So

super easy, and we can continue to iterate with Claude afterwards to make it even better. Okay, so before we wrap up, so far I've shown you what the skill can do, and I want to show you what's actually inside the skill file. So, I have this portal at behindthecraft. com, where I've included all my handcrafted skills. And here is the slide builder skill that we just covered. So, again, the skill has a couple different files, skill. md, styles. md, and slides, which is a code file. Let's take a look at skill. md. You know, this stuff seems very mystical, but in the end of the day, a skill is basically just a text file with instructions for the AI, right? So, you can see here that there's a description about when to trigger the skill. And we have it ask clarifying questions first, right? So, exactly the questions that we saw earlier in the tutorial. Do you have content? How many slides do you want? And what style do you want? Um And then, step two is it does some online research based on the content that we provided it, so that it has additional content to supplement it, and it keeps asking you more questions. And then, at some point, it starts generating the deck, right? And there's some like pretty specific instructions here about having a variety of slide formats. Don't just use the same format each time. And by the way, I did not write all this text myself manually, right? I basically iterate with AI to uh come up with this text through trial and error. And I'm going to show you guys that next, too. Let's keep going down here. I have this stuff about animations, uh saving the slide, and very importantly, as I mentioned, doing the visual QA pass. Um actually taking screenshots of each slide in the deck, and then inspecting it to make sure that things look good. And if not, actually updating the HTML to fix it. All right. So, that is the skill. md. And then we have here the styles. md, which has the different uh formats for the brand. Um kind of colors to use, and so on and so forth. And yeah, there's like a lot of information here. Okay. So, how do I make all this stuff? This seems pretty intimidating, right? But let me show you how I made this. So, basically, I um made a default skill through AI, just asked it to let me guess slide skill for me to create beautiful slides, have some beautiful animations, and use these style guidelines. But then it didn't get it perfect in one shot, right? So, uh I basically got it to generate a few decks, and then gave it a bunch of feedback, and then it went off and fixed all of this stuff. And uh yeah, as I explained it, there's a lot of trial and iteration to get the skill to the place that it is right now. And if you want to uh copy my skill exactly as is, check out behindthecraft. com, which has a slide skill along with 10 other hand-curated skills. And just a heads-up that you need to upgrade to the paid new service subscription to access the portal, but I promise you that it's worth it. But of course, if you don't want to pay, you can always just make your own slide skill using what I covered in this tutorial, right? Start by getting an early draft going with AI. Get it to generate a slide deck, and then give it feedback along the way to improve it, and then ask it to save it as a skill. All right. So, that's about it. You know, I made a point in previous videos that code is basically the foundation of all knowledge work. And in this video, I hope that I showed you how easy it is to create simple HTML pages to represent beautiful animated slides. You can also follow the same process to create interactive documents and other HTML artifacts. The funny thing with the AI is that it takes more time to set up a skill like this to create slides than to just make the slides yourself, but once you have the skill, you can use it over and over again to 10x your output and save so much time every week.

So, the most important lesson in this tutorial is not so much the skill, but to always build a system to do the work instead of just manually doing the work yourselves. And as always, my goal is to give you practical AI tutorials that you can put into practice right away. So, please like and subscribe and leave any comments if you have any questions, and I'll see you next time.