5 GitHub Repos for Claude Code: REA, Matt Pocock Skills, HyperFrames

0:00I just found five GitHub repositories that make me a better builder. And in this video, I'm going to be sharing them and breaking them down with you. So, the first one is Matt PCO skills. This is a huge repository on GitHub right now that has made many builders become more efficient when it comes to AI engineering and building products. Well, another one is called Scroll World, which actually builds beautiful landing pages that refuse to be made into AI slop. Another one as well is called reverse engineer anything. This is the popularized viral GitHub repo that allows you to clone any single app and reverse engineer it to build your own personalized software. So let's jump right into the video. All right, these five repos are going to absolutely transform your workflow. So if you are a

0:47builder or like building with AI, these are some of the repos that I've been incorporating into my workflow just to make me a better, more efficient builder. So, the ones that we're going to be covering today is the Matt Pocco skills, how it should be used, what it is about, why I think it is a great start for people just getting into building with AI. We're also going to be talking about the viral REA, reverse engineer anything. You're going to be able to take this repo and clone any app in existence just as long as you actually have a copy of it on your hard drive. The next one is called context mode. It allows you to stay sharp. So, this allows you to optimize your context window for AI coding agents. Another one that I have been loving is the hyperframes repository. So, if you're a

1:33content creator, this is a great way to put overlays to create call to actions automatically through your AI coding agent. Another one is called Scrollworld, which allows you to make beautiful websites. Let me show you here. So, I used Scroll World on my ADE website that I've built personally called Hey Beckan. And it was one of the best things that I've ever built. And you can see here it kind of tells a story of what my product is about, how it works, and it takes the user through a nice little journey. So, I'm going to be showing you how to kind of use these repos, why I think they can be helpful for people that are just getting started with building with AI. And I think that these are some of the best ones. It's hard to keep up at times, which is why

2:18I'm making this video. I think you could probably get away with making a weekly GitHub repo video every week because there's so many open-source projects that are coming out that are just amazing. So, these are the five that we're going to be covering today. I guess it's important to understand, especially if you're a beginner, what is a repository? A repository is a set of skills or an open-source project that you can incorporate inside of your AI coding workflow, specifically AI agents. So, it doesn't always have to be a skill. It doesn't have to always be some kind of plugin for your website, but you kind of get the gist of it. It is a plug-and-play system that you can hand to your coding agent. It can be a skill. It can be a type of plug-in. So, for example, REA, this is one that has blown

3:03up. And how does like it actually work? It is a plug-in tool MCP for your coding agent to reverse engineer the programs that are you are having on your hard drive. So take example Photoshop. You're going to be able to actually break that down using your coding agent using this repo to reverse engineer how the act app actually works. Number two would be like planning. Those are a set of skills and the most popular ones on the internet right now are handsdown Matt PCO skills. Um, I'm going to put a link to all these repos down below. Please go and check them out. Hand them to your coding agent and see if any of those repositories are going to be in line with what you're trying to build. So, Matt PCO skills

3:48super helpful. Just gives you a little bit more direction when you're building specific features for your products. Another one is called stay sharp, which is context mode. This is going to help with context drift and context rot to make sure you're maximizing the context windows with your AI coding agent. Another one is called scroll world. You saw that here um as an example, but I just think it's a really neat way to make your website stand out and not look like AI slop. I'm tired of seeing AI slop websites out there. It's time to step it up a bit. So, Scroll World is a great one that people are going to actually remember that site when people go to it because it stands out. Another one is hyperframes. If you make any type of content, short form content, dialing in your hyperframes or even your motion,

4:33there is a remotion skill as well that works very similar and giving that to your coding agent to know to pick up certain assets to create call to action just to make your website or your video a little bit more polished. So, this is the same install for most of them inside of Cloud Code. Cloud code is just forward slashpluginarketplace and then you're going to add ownerreo. What I usually do for the simplicity of it is I just take the link of the repo and I hand it to my agent. Simple. Don't overthink it. So, we're going to be focusing on the first one. Verse engineer everything. This is one that has exploded 239,000 stars on GitHub just this week. I don't think there has ever been a fasting faster GitHub repository that has grown

5:18this fast in that short amount of time. So in essence, it is a plugin that you give to your coding agent whether that's codeex, cursor, cloud code. Rea is the router. So, it's going to break down the app you're trying to reverse engineer in any type of language, whether it's Python, Rust, C++, and it's going to break that down and interrogate that app with your coding agent to be able to have a map in an outline to be able to build this app out for more personalized software. So, it's one MCP server plus one skill for your coding agent to reverse engineer products that you're using today. Whisper Flow, Photoshop. We created a new app for our resell business called Wind Snap. It is just a

6:03recreation of a popular app that's they charge $30 a month for. I was like, you know what? I don't want to do that. Let's build our own. So, we reverse engineered that product and now I have a personalized app for my resell business to be able to help me make better datadriven decisions. I do have a full breakdown of this repository in general. You could check it out on the channel. I did it a few days ago and you can learn a little bit more about reverse engineer anything. There's many videos on YouTube you could check out. But moving on, reverse engineer anything in your workflow is study what already works. So four steps, one prompt in and then build the manual out. So you can ask your agent, build this app, whatever whisper flow into its parts and then it's going to map it out. Each part goes into the right tool and then it's going to

6:48interrogate. This is every claim comes with evidence and then it's going to do the manual which is how it works plus the proof. At that point, your agent can then start building out the app once it understands these four steps. Ask, map, interrogate, and then the manual review. [snorts] So for my example, like I explained, we made Windnap. Windnap is my own Chrome extension that just takes screenshots of the items that we sell on the live streaming platforms. So, it helps us align those items with the buyers in case if there's any type of mistake. So, we use REA to be able to reverse engineer the popularized app to create my own personalized one that fits my specific needs. There's a rule here, though. Only software you own are allowed to examine, learn how it works,

7:33and then you build your own version. So, Matt Pocco skills is another amazing set of skills that you really need to check out. I mean, this is a amazing repository. 300,000 stars. This had just released a couple months ago, and it's taken the world by storm. So, these are his agent skills that he uses to actually do real engineering and not just vibe coding. These skills are designed to be small, easy to adapt, and composable. They work with any model. They're based on decades of engineering experience. And like I said, I got that link down below. So talking about more about how agents fail, you know, they hallucinate. Maybe they didn't build exactly what you were trying to convey or way maybe the prompt that you're

8:18giving to the agent is way too wordy or the code doesn't work. It became a ball of mud and features didn't work. So these skills fix that. There is a forward slme skill where it interviews you before it actually codes. So it just understands a little bit more context of what you're trying to build, who you are. The forward slashgrilwith docs is a shared glossery markdown file for the project. A forward slashtdd is for writing a failing test first and then fixing it. And then a forward slashimprove codebase architecture finds where to simplify. So these are just skills to help you be a better builder overall. Not saying you need skills to be an build amazing products, but this is just going to help you build a good foundation for first-time builders out

9:03there. And these skills, I know they may seem intimidating, but they do all work together. So the forward slme to spec to tickets implement sltdd/code review. So those all can be used in combination with one another. So if you're wanting to say like build me one shipment tracker for every carrier, the kind of question it asks before writing any kind of code is which carriers do you track today? So we're using UPS, USPS. It needs to know that information before building the feature out. What counts as arrived when it's delivered to the end buyer? Who looks at it? You or your crew? What happens when tracking goes stale? All these questions are important. So, the grill me is a huge

9:48part of these skills that can help you just be a better builder before you let your AI agent run along guessing as it builds. What a way to waste usage. So, to install this, you're going to hit Claude plugin install matt poco-skillsclad plugins-official or like I said, just get the repository from the description and hand it to your agent. If you're not using it already, you need to be. Number three is context mode. This is a huge one for people that are really context aware and want to avoid context rot, especially dealing with models that only have maybe 250,000 to 500,000 token context windows because they can start hallucinating perfectly quickly if you're not managing context. So, this is 300 or 30,000 stars on GitHub just this week, which is pretty

10:34amazing. The problem is with coding agents is managing your context and making sure you're not putting too much context in and filling up that context window and having your agents hallucinate. Well, this solves that. So, the fix here is the tool output goes into a sandbox and then out comes the answer only. So the big thing is when it comes to working with any type of you know claude or codeex is they do go through compaction events and a lot of that data is lost in that compaction event. So this survives that compaction event. Edits, tasks and decisions are saved in an SQLite database. So the agent picks up where it had left off without a summarization which is really nice. And you can see kind of how it

11:20works here. It just allows for you and your coding agent to maximize your usage. I don't know, whatever plan you're using and to be able to have your agent hallucinate a lot less. Highly recommend this one. Scroll world is another one for you to not produce AI slop websites. You could go back and see Heybeckin.ai. I have that link down below and you can see how that GitHub repo works. So, it's kind of more of a hidden one. It's not super flashy. 10,000 stars on GitHub. It has been out for a couple months, but essentially you're using AI and AI video generation to create a story around your product that takes the journey for the user. So you're going to be able to take this GitHub repo and apply it to your product and then take that user on a journey almost like telling a little

12:06story once they hit your landing page. So no more walls of text. I'm tired of it. And you actually take them in on a story and it's beautiful. for any product that you sell. This can be a great way for you to stand out because I guarantee you not a lot of people are using this method. So, it takes a scene. So, I used Cling 3.0 to generate five scenes and then I gave that to Claude and it was able to take those scenes and break them down frame by frame and align it with each scroll. So, as you're scrolling through my site, it aligns with every single scroll. So, it looks like almost like a movie is unfolding as you scroll through the site. And then it connects these scenes all together into scene one, scene two, there is a dive-in scene, there's a connector scene, and then it goes and that connector scene

12:53then connects scene one into scene two. So your scroll position is the video's time and then the camera generally moves and scrolls only as the person scrolls through the site. So how this would work is like it will interview you. You know what is your brand like? What are the scenes that you want to generate around this brand? What is the budget? What is the game plan before you start spending money? Because it does cost money to generate these scenes. So, it's going to need AI stills. I just used GPT images 2.0 to generate the stills. And then you're going to want to take those images and then convert them into video clips. I just used Cling 3.0. You can use whatever. You could use Seed Dance, much better. It is more expensive, but if you're looking for good quality, that's what I would use. I just use 1080p. You could use 4K if you choose.

13:40and you join those seamlessly. You don't join them seamlessly. Your AI agent does all the work for you. It wires it up in the vanilla JavaScript scrub engine and then it works in any stack. So, this can be applied to multiple varieties. So, costs, you know, I would say about 27 bucks is what I spent uh to generate those six scenes. There was a few mixups and mistakes, so I'm sure I could have gotten it to around $20. But if you're spending $20 to make a beautiful website that is going to convert. I mean, this is a this is something that you can package and sell to other people as well because everyone is going to want that type of storytelling when it comes to selling any type of product. I mean, can you guys all agree that I have seen so much AI slop websites out there? It's getting pretty annoying. You have to do

14:25take a little bit of time to refine that skill to be able to just get better than the next person, right? Don't be lazy. So, how we built Hey Beckin with it, I was able to generate these scenes and then tie them all together using cling with that divein scene and the connector scene and then I just hand all that off to my agent to stitch it all together. So, the recipe is the stills in GPT images 2.0 and then using cling to write all the videos. And then here's the trick is every dive prompt ends the same way. Slow, steady, forward drift towards the horizon. The hard part is getting it mobile. Uh getting it ready for mobile. Um that took several tries, but once you do get it ready for mobile because you want to have a great mobile experience

15:11that I would say is going to take you the most time to dial in. I highly recommend just using Opus 5.5 to do this for you. I did it on Opus 4.7, so it took a lot longer. And then what I would do is just grab that repo in the link below and maybe you already have a landing page and tell Claude or Codeex, whatever agent you're using, and say, "Recreate this, but use this scroll world skill and give me a demo of what that would look like." So, hyperframes is a good one for any type of AI video editor. If you do any type of content creation or shorts, hyperframes is nice because you could tailor it for your use cases and your assets specifically. So this is by Hey Genen, 65,000 stars in 5,000 stars this week. Apache 2.0 built for agents. So you prompt and the agent

15:57writes the HTML and CSS for the animation and then the hyperframes render it and then it exports it into an MP4. So h um it's a set of 21 skills. Hyperframes picks the right one. So, if you're doing a product launch video or captions, face explainer videos, talking head recut or pull request videos or motion graphics, very simple for this GitHub repo to be able to reproduce any of that. So, I put them on my shorts. I put them in these YouTube videos, all of these little cards that come up from popular exposts or anything that you see popping up on the screen in this video uses hyperframes built by my agent to edit these videos. It's like I haven't used Premiere Pro in months because my AI agents have been editing my videos for the last few months. And that's the

16:42way to go if you're building or planning on building and making content. Your agents can be so good at this. They can color grade. They can take out all the ums and the pauses out of this video and no need to pay for Premiere Pro anymore. Okay. So, for example, like how I use it for for the B-roll is it takes my long form video, it transcribes it, and then AI picks the best moments of the video, and then it uses hyperframe scene into the short. So, what it draws is the brand's real logo, a GitHub repo card, a bar channel of numbers, what I say, a typedin command into a terminal, or one text card per short. The rule is every word on a card is a word I actually said, nothing made up. And you can see examples here. It just makes the videos a little more engaging. Another couple that I left out of this video, but are

17:28worth looking at. There's so many. I mean, you can get lost in the sauce on GitHub. And maybe I'll make more of these videos every week just kind of keeping you up to date on what I'm using and what I think can be helpful for builders out there. So, there's another one called diagram design, which is editorial diagrams for your agent. So, a great way for explainer videos or being able to present in any way. That's something you can give to your agent and have them use. Another one is just Anthropics official guide for Claude Code plugins. This is where Matt PCO skills live. Um, you can just do that right in the terminal. Uh, anthropics/cloud plugins official and check it out. And I would say before you install any of these, I would say the most important thing is your agent is only going to be as good as the context and the skills

18:14and the foundation that you give it. So things like having a good proper well ststructured clawed markdown file or a good structured PRD a product requirements document be before you even write any lines of code and I know that sounds very intimidating and tedious into the building project into building with AI but these are the foundations that you need to build to be able to build good products otherwise you're going to get a bunch of slop and mush that's not going to be well structured. These models are really good and they're not the bottleneck anymore. With Muse coming out, with Argon, Google's new model that finally dropped after months and now Opus 5.5 and Fable 5.5 around the corner, these models are so good that you just really need to give it a set of skills to be able to get the

18:59desired outcome that you're looking for. So that's why I made this video to be able to equip your agent with these set of skills to build a proper website to create good content that's engaging and that's why I want to help you guys grow. So if you're interested on being part of a community, I have a free community linked down below called Shipping School. We do a couple boot camp calls a week. We have 72 members. We also have a classroom full of resources and guides to getting set up on Hermes Grockbot, learning what AI inference is, how to build with AI, how to get set up with cloud code, and like I said, it's free, so you can check it out. We also have a free Discord you can join. And now is a better time than any to start building with AI. We'll see you in the next one. Have a blessed rest of the day.