📱

Get Our Mobile App

Take your business learning on the go!

Download on the App StoreGet it on Google Play

Top 5 Claude Code Skills... 100,000+ github stars

Jack Roberts22:07

Transcription

In this video, I'll share the top five new Claude code skills that will make your business cheaper, faster, and better so you stop wasting time and make more money, even if you are a complete beginner. And if you don't know who I am, my name is Jack Roberts. I built and sold my last tech startup with 60,000 customers. Now I scale my own AI businesses and tell you all the stuff that actually works. So if you haven't already, grab that coffee. Let's dive straight in.

Starting with Andre Karpathy's Graphify. What you're looking at on screen here is a graph of one of my projects that I have that I'm using Claude code. And effectively, what it's done, if I come over and just walk you through what it does, and then I can show you exactly how to set up and why it's so cool. So if you think of Karpathy's Graphify, it basically turns any codebase that you've got, fancy word of just saying project, into a queryable knowledge graph. So effectively, the coolest thing about it, it works in any language, 25 over 25 languages. It's multimodal. So it means it will read PDF papers, it can do audio files, it will transcribe those with Whisper. And this was kicked off after Andre Karpathy's big tweet about, "Hey, this is how I do all of my knowledge bases." And it's just applying that same concept for memory but to codebases. And there's a really good reason why this is so good and why it's over 70 times cheaper when you're asking questions to your codebase in Claude code. Effectively, you run one command to activate it. Graphify. It's like I said, it's inspired by Karpathy's LLM knowledge bases and it's super cool.

So, think about your codebase as a city. Okay, every file in that codebase is a station. Every import is a subway line, and every community is a neighborhood. Now, the good nodes are what we call the Grand Central Stations. We call these the guard nodes within the network. As you can see in this one here, these are the largest nodes that connect to most other places within the codebase. And the idea is when you actually want to ask it a question, instead of walking the streets door by door, Claude rides the lines directly to what it needs. Which means that every new session you create within Claude code, you have to start from scratch. But if we use this knowledge graph, it just shortcuts that massively and saves you so many tokens.

Now, for example, I have my AI with Jack dashboard here, and I've got the entire codebase sat on my computer. So, what I'm going to do is open up Anti-gravity. And I've got the terminal here. If Anti-gravity sounds like Spanish, check out this video on screen. It shows you exactly how to use Claude code. So you'll be up and running in no time. So effectively, all you're going to do is basically say to uh Claude, "Hey there, I'd like you to go ahead and install and clone this repo so that I can use it within this project, please." Okay. And then you're just going to copy and paste in the GitHub repo. And what this will then do is essentially go over to GitHub, grab all the stuff and bring it down. And then we can actually query it. And I encourage you to do this, test yourself and do SLGraphify and normal questions. So say for example, there's something in this repo. Here's an actual use case, right? I have YouTube Chat here where you can have conversations with me, and it's got every school post I've ever done, every YouTube video I've ever done. You can ask it questions, which is cool. And it says, "Hey, this is the most relevant resource in the community that's probably going to be helpful for you, right?" Like, "Hey, what is Anti-gravity?" It will tell me that. But what if I was building another project and I wanted to know how the RAG system behind this actually works? Well, ordinarily we'd have to get basically spend a ton of tokens to do this. You see, it's now pointing module, and there we go. Now we're ready to rock and roll. But with Graphify, what we can do is just use this new query-based, this new kind of knowledge graph to get there way quicker, way less tokens, and just actually get to the heart of what is connected faster.

Now that's installed. What we need to do is I'm first of all going to clear this context just so we get a brand new window so we can save on our tokens. Now I'm going to do forward slash, I'm going to come in and Graphify, and then we're going to ask it a question. So let's just say something like, "Hey there, explain to me how the RAG system works for the YouTube chat, please." And if you're wondering how I'm actually talking to my computer with my mouse, all I'm doing is I'm using Glider.com. I'll put a link down below so you can check that out if you'd like to. Now, this is going ahead and it's going to use the graph skill to do this for us. And it can also produce then for us that wonderful kind of like queryable graph that you saw at the beginning of the video. And just like that, it's gone ahead and given me the answer. And I asked it to clarify, "Did you use Graphify to do this?" It said, "Yeah." And it's opened up the chart. And this is now the visual representation of that codebase. And then the other thing that's good to know is that this works best for larger repos. So if you have something that's 30 files or less, the overhead can eat the win. This really crushes it when you're looking at 500 files plus.

I remember one of my first clients I ever had asked me to go and scrape a lot of stuff. But once I did that, I ran into so many issues because all the websites aren't basically designed for AI. They're designed for humans. Some are in JavaScript, some are in HTML, and you end up with way less results, which is why the next repo saves a lot of that headache. And that is Firecrawl. And I'm going to show you something that you may not have seen as a use case for Firecrawl before if you're not familiar with it. So the idea is it's AI agents that basically use and search the web and get clean data. That's basically the TDR of it. So effectively super easy to install into command line. We're also going to connect this together in Claude to make it super easy to get started.

Now why is it so cool? Well, think of it like this. The web is like HTML soup if you think it from this perspective, and Firecrawl is the strainer. The idea is the web is very messy. Ads, cookie banners, infinite scrolls. I've been on those news websites. I'm like, "Oh my gosh." You know, you can never reach the bottom. We've all been on those trash, terrible websites. Uh, JavaScript that hydrates half the content. The idea is Firecrawl is going to reshape any URL into AI-ready structured data. So it's something that AI can actually go ahead and use, and we're going to be able to take that data. And the cool thing about it, and this is one of the big things, is scraping is a large part of any AI automation system that you're going to have. And the philosophy behind it is it can cost you a lot of tokens if you're just scraping HTML. Firecrawl can save you sometimes to 80% on that sort of stuff, or any kind of web scraper, really. It's up to you what you want to use, but Firecrawl, I've always found to be a really good example.

So what I'm going to show you right now is how we can use Firecrawl. Let's say that we wanted to grow our business and get more customers. How would that physically work? So I'm going to come over now to Claude and what we're going to do is add Firecrawl as a connector. To do that, I'm going to come down here to the bottom left, and I've removed this specifically for you so I could show you. I'm going to come down here to Manage Connectors. And so once you're on this page, you're going to come on, click on plus, and click on Add Custom Connector. And in the top, you're going to type in Firecrawl. And then you need to add a remote MCP server URL, which essentially is this one right here on docs.firecrawl. You're going to copy that. Come back over to Claude and just drop that information in. And then you can see this information here with the curly brackets is what you're going to replace with your API key. So if you come then over to Firecrawl, create an account if you haven't, or sign in. You get an API key basically completely for free. You don't need to pay anything for it. Come over, just literally grab that, and then we're going to come back over to Claude and then we're literally just going to replace this with our API key. Then once you've done that, you'll see this page. You want to go instead of "Need approval," I'm going to go for "Always allow" just so I'm not forever clicking buttons. I'm a savage of that. I hate just sitting there clicking buttons all day. But once that's done, we can now basically use it.

So if we come back over to the chat window, I'm going to give it a question now. So let's ask it something like, "Hey there, what I'd like you to do is use the Firecrawl MCP. I want you to go ahead and find for me 20 leads in the pool cleaning business in Austin. So, I'm starting a website generation service for businesses like that. I would love to know their name, their email address, uh, their website, and maybe like one to two interesting facts that you can glean from those websites, and then just go ahead and quote for me uh either like an interactive HTML document or some kind of Excel, just some interesting way for me to consume that data." Then, I'm going to send that one off, and then we can just literally let it go and run and do that for us. Now this is the world that we live in now that we can ask these questions, just give it the tools it needs to do, and it runs ahead and happens. I think really the only big limitation is just A, your imagination, and B, doing the actual thing. And just like that, we now have this full HTML document. I asked for it in an HTML document 'cause I thought it'd be more visible, visual for you to see, but basically you could put this in anything you want to. You can see we've got them here. We have their email address, their website, "Family owned by Alex," "Texas native," "Unique niches," "Airbnb pool service," and basically cleaning. So, you get these ideas. I can export it as JSON, CSV, anything that I want to.

And so, a couple of good to knows on the completely free tier, you can get around 500 credits, which I've always found really generous, but just be aware at a certain point, as with all things, you may need to upgrade. The hobby plan is $16 a month. And obviously, the performance can vary on some very particular sites, but in the main, I've always found it really fantastic, but just really good to be aware of.

Now, knowledge is power. We've been told this our entire lives. And one of the best use cases that I found actually with Claude code is when you combine it to the world's number one research and intelligence agent. I was doing a presentation recently and I had a load of fact-checked information, and it didn't quite look right to me. So, I ran it through NotebookLM, and the insights I got from it genuinely found things that other methods hadn't done. Which is why I really think NotebookLM is such a cool integration, specifically when we combine it with Claude code. So you can drop in over 300 sources, PDFs, YouTube videos, as we all know. The skill is incredible. It connects via a cookie, and I've got that skill for you. I'll put a link for you down below. We're going to look through it together, and it's really cool. Obviously, recently NotebookLM expanded out. You can do cinematic overviews. You can do so many different things. The idea here is that you can give it any information. It can generate podcasts for you. But the key thing is when we use that within Claude code, we can do it programmatically. So Claude code knows everything about you. It knows what you like to do, your business, and based on that, it can actually curate for you specialized and specific NotebookLMs, and then we can either like query those NotebookLMs or download those files on our computer or do anything that we want to. It's really, it really is like having a personal research team, and it can get things beyond that just regular internet search can actually access.

So to download it, I'm going to put the link down below. All you're going to do is show up to this page here. Going to come down to Claude NotebookLM Skill, and then just download that. Then within the Claude app, which is the one that we downloaded here, you're going to upload that skill. And what it will ask you to do is to sign in. So we'll open up Google Chrome. You sign in, and then it connects and authenticates with your cookie. And then basically all you do, basically turn it into a skill and NotebookLM. And this NotebookLM skill I've recently upgraded with the support of some incredible people inside my community. Daniel, if you're watching, a huge thank you. Just to make sure, but it's super duper like even more robust in things like co-work, if that's where you'd like to use it. So, it's so cool that we can collaborate on that kind of stuff.

So, what I could do here, for example, is say, "Hey, based on everything that you know about me, could you create for me a new notebook on growing on Instagram? I'd like you to grab, let's just say, 20 different YouTube videos from experts who are exceptional at growing uh short-form content." Uh, and then just let me know when that is complete, please. That's all I do. And I'm going to send that one off right there. Now, this is really cool because effectively Claude has, and specifically based on the memory systems that I've developed, and I'll put a link on screen if you want to check that one out. But basically, it knows about me. So, it can actually go ahead now and build specific knowledge bases for me um that I can then query and just basically get this incredible research. Then after a couple minutes, this is now all complete. So, it's created for us. I've opened this up for us here as well, as you can see, and I have 20 different sources I can use here. This is really cool as well because there is no cost to you in using this NotebookLM, right? So effectively you've got the sources, you can query it at $0. And if you had all these as text on your computer, Claude would have to process through everything. But with this system, it sends a question off and an answer comes back, which I think is really freaking cool.

So what we can do now is just query it something. So if I say something like, "Awesome. If you had to give me three pieces of really succinct advice for growing your Instagram in 2026 in the AI niche, what would they be?" And again, it can just query now that notebook by just asking any question that you like. And then we get some answers back. "Visual payoff in frame one. Don't open with a talking head or say, 'Today, I'm going to show you.' People have short attention spans now, right? Have you noticed that? Build one repeatable format, not 50 one-offs. Pick a single hook shape and stick to it." Interesting. And then "Document builds, don't teach tools. Everyone is posting top tools where you are blah blah blah." So really cool. And now we have this in a pocket. And if you want to know more you can do with this, I'll put a link on screen so you can click that and go down the beautiful rabbit hole. And a couple of good to knows/caveats is this is an unofficial API because we're using the cookies in the browser. Another one is it's a one-time browser per machine. So it's solely used and it can feel a little clunky sometimes if you're doing team development. I refined a lot of it in the API, but it's just one to watch out for. I didn't need to reauthenticate today, but in times past that has been a little bit of a complaint. So if you can overcome those small hurdles, you can unlock some really cool stuff with it.

Now if something isn't broken, you don't need to fix it. And that's the thesis behind the fourth tool we've got here, which is called Awesome Design. Some say it's very aptly named and very conveniently called Awesome Design. So let's talk about what it actually is. So in essence, it's got nine different categories. So in this itself, you'll see the idea is it helps you build beautiful websites and apps and things like that. They have different collections of websites like Claude, Coherent, Llama Labs, for AI developer tools, backend productivity, and SaaS design, creatives, fintech, the list goes on and on. And effectively what it does is it's codified the design system behind the best websites on the planet. So instead of you starting from scratch, and AI is really good at coding, but it doesn't always understand what excellence looks like. So the idea is, well, if we could just tell it like specifically like, "This is what good," and here are the frameworks, it can reproduce these beautiful designs but in your own specific style. So we have these design systems inspired by Apple. It's got the different uh typography. It's got the fonts. It's got everything you want. So you can kind of have a look around with this and play around with it and have a little see, a little flirt with the with the website so to speak. Right? I want to play with maybe Lamborghini. What does that one look like? Well, this is a design system of Lamborghini. And you can take this as an initial idea and then play around with it and build it out as you kind of want to basically. So it's a design MD library. And the cool thing is you just add this GitHub repo and then you can start designing cool things. As I say, it's a wardrobe of 68 brand identities. Very, very freaking cool. No bespoke designer, no three-week mood board. You just pick, you paste, and you ship.

So with that in mind, shall we have a little play around and see what that looks like? Well, to do it, we're going to do only one really simple thing. We're going to come over here. I'm going to copy this. Then we're going to head over to Claude or Anti-gravity. So I've got a new session here. I'm just going to say, "Hey there. I'd like you to install this GitHub repo." And once you've done that, I want you to build a website for a in the style of this. Okay. And I'm going to come down. Here's a GitHub repo. And then let's go over and pick one together that we think looks pretty cool. So what if we wanted to do something like, why not in the style of Claude, right? I mean, that could be convenient. We're doing a video on Claude. Let's make it a Claude-inspired one, right? Let's copy this design MD. Come back over, do it in the style of Claude. Okay. And then I'm just going to come over and throw that in there. And then let it run right and do everything for us.

Now, one question you might be wondering is, Jack, why are you sometimes using Anti-gravity and sometimes using the Claude desktop? In reality, in both examples, I'm using Claude. I'm using Opus 4.6. So, the end outcome is the same. It doesn't really make a difference from that. Really, at this point, it just comes down to what you prefer and what your preference is. Um, you can just do everything within the Claude app if you prefer. Anti-gravity has a few different aspects to it that you can play around with if you want to. But one of the things you'll notice is that the direction travel for Claude now is you have these buckets on the left-hand side which are your folders, and then you can pick the individual chats within those folders to have conversations. So, honestly, at this stage, it is becoming more of a preference thing. You could do the exact same thing, Anti-gravity, if you wanted to. Beautiful. And now that's complete. We can actually go ahead and check this out. So we can click on this and have a look. And the cool thing with this new Claude thing is we can actually just look at it in the browser. Have a look. Let's see what it looks like. It does look very Claude-y to me. So I think they've really crushed that. Again, they got the typography nailed down. And again, this is an example website of what it would look like. You can see they have these different platforms you can play around with. And you can customize this in any which way that you want to, which I think is really freaking cool. So, for example, it's so easy as, "Hey, instead of saying give your AI agents taste, could we say give your AI agent personality?" You know, whatever you want to. And where we're at right now with anything like apps and websites is we just amend it with our language. And just like that, it's completely done. If you want to learn how to turn pages like this into websites that are online, that are SEO optimized, have all the systems look gorgeous, just click a video on screen if you want to go deeper into that topic.

A couple of things that are good to know about it is that it's a library, not a skill. So these are predefined templates. Granted, very cool templates to be fair, like Apple and Claude. They're really decent, but it's a curated list. So think of them as design inspirations, like uh pre-packaged ideas that you can build on. The quality can vary with mileage. So some are going to be great, and some are probably not so great. So do I always say these things? Create four or five. When I built ajack.com for my community to help them out, I actually built probably four simultaneously in four separate environments. And even then added one or two prompts in each of them to get the right first initial kind of like starter, and then I go deeper. So feel free to run it a couple of times with them.

Now imagine if you could use Claude code frameworks without actually having to pay for Claude code. Sometimes, Albert Einstein, we don't want him mopping the floors. We want him at the whiteboard doing the heavy-duty stuff. So the idea behind the fifth tool is actually that we want to, where possible, if it doesn't require big brain power, we can just send a smaller model to do it within Claude code. Of course, what I'm talking about here is Claude code router. What does that mean, Jack? Well, I'm going to explain to you. So, is that we can keep the Claude code UX, but we just swap the brain around. Okay, it's a local proxy. Claude code thinks it's talking to Anthropic, but you route to a different, cheaper model via OpenRouter, basically. So, it can support Kimmy K2.6, DeepSeek, Qwen, local LLMs, OpenRouter, basically, is what it is. It works with your existing skills and muscle memory, which is great. So, you don't need to retrain it. It's essentially the exact same dashboard. We're just going to swap out the engine behind it. So, think about if you have like a Ferrari. You have the Ferrari, and you have the engine. The engine is Claude code Opus 4.6. But if we're just parking the car, we don't need like a Formula 1 engine. We can probably just use something from a Fiat Punto. I say Fiat Punto 'cause that was my very first car, and I have a lot of sentimentality for it, guys. Honestly, I'll own that car again one day. But the idea here is that we can actually reduce our cost because tokenomics is like the biggest limiting factor for people, and we just don't need a bazooka to open up a wooden door, right? So if you look at Kimmy K2.6, for example, the API credits, you know, you're looking at 88% cheaper where we don't need to be doing Opus 4.7, Opus 4.6, and then we can have root overflows to DeepSeek and any models that we want to.

So with that in mind, why don't we give it a shot and see what that looks like? So all you're going to do is head over to this GitHub repo here, come into code, and copy this one. This one I would use in Anti-gravity rather than Claude code because I think the way they built that like with the actual, it is really pushed and hardcoded to be Claude. Um, so I'm imagining it wouldn't be as effective there. So let's go over to Anti-gravity. So I've got Claude code open, and basically I'm just going to say, "Hey there, I'd like to go ahead and install this GitHub repo. Tell me what you need from me, like my OpenRouter API key, for example, and let me know when you are ready." Okay. Once that's done, I'm just going to paste in that GitHub repo like so. And actually, what I might do is just highlight all this text real quick and probably just ask Glider to, "Hey there, Glider. Um, would you improve this prompt in any way that would basically give it better instructions?" It's something I like to do occasionally when I'm actually asking questions to Claude. Yeah. Okay, that does sound a lot better. Then let's just enter that one in, for example. Uh, and then we can just send that off. And just like that, it's now come back and confirmed what it needs for us to proceed. And actually, I'm glad I did that because the questions are way better this way. It just needs the Open API key. So I'm going to say, "Awesome. Model preference? Just use reasonable default. I'd like you to avoid any Chinese-based models, please." Okay. Now I'm going to go over there. Come over to OpenRouter.ai and I'm just going to go ahead and create a new API key. I'll put like $10 into this. I think that's usually fair. Even if you're doing free models, it's always worth $10 so OpenRouter knows that you're a real person and actually going to use the service. Even if they don't charge you anything if you're doing free models, then it'll show you an API key. Just simply copy that, come back over, and then share it with Anti-gravity. Wonderful. No hassle complete. You can see it's all rocking and rolling. So, have a look at this. Look, everything's up and running. Here's your setup summary. This is where it's running. The model routing is OpenRouter, no Chinese models. This is default. This is the background. Blah blah blah. It's got everything that we want to.

So, for example, to use it, we need to run this command. So, let's go ahead and open a new terminal and give it that exact command. We call it. Open up a new terminal. Let's just paste in the code and we should have it there. So, let's see if it works. "Hey there, that's what it says. Quantizing." Looks like it's working to me, which is pretty sweet. Okay, so I've tested it. It's come back and it's asking for help. So, it might say something like, "Do me a favor. Create for me a file on my desktop. 20 words. Why spring spaniels are the best dog on the planet." Okay, throw that out. You can ask it questions now, and this will reroute it to the most appropriate model for that particular task. If it needs big brains, it uses a big brain model. If it doesn't, it goes down. One of the really cool things that we can do with this as well is configure it if we like to within the other node. So, we can say, "I don't want any Chinese models," or "I just want you to use 4.6 and 4.0." Really freaking cool. So, this says that it's opened up. So, let's just see if we can check that one out, for example. And there we go. "Loyal, intelligent companions," etc. One thing that you may find as well is it gets a little bit prickly with some of the Gemini models. But again, you can just change that by chatting to it in the initial terminal.

Now, before you go ahead and cancel your Opus Max plan, a couple of things that you should know. Number one is that Claude MCPs rely on Anthropic specific tool call formatting. So, they can misbehave if they're not Claude backends. Like, I find a little bit of prickliness with Gemini, and some of them do need tool calling. So, make sure you're doing that, which is why it's good. Like, if it doesn't need tool calling, it won't use those specific things. Um, you also get more latency, so it takes a little bit more time. I mean, granted, you can make your lattes in between, which is great, but the point is it's not going to be as lightning fast. Again, this is a trade-off, right, between price and speed and performance. So, this is the idea is that sometimes we don't need it to be super fast and super high performance. And again, tool calling quality cliffs below Kimmy K2.6 and DeepSeek for multi-file refactors. Don't route to a random cheap model, but that is the job and the purpose of the repo to help you guide through that to save you tons of money.

Now, these five repos are incredible, but one of the most epic things that I've done all year long is build a design system. And the ROI on that is probably one of the highest I've done. And you can apply to your business by watching this video right.