Modern Creator
Beau Johnson · YouTube

5 GitHub Repos That Upgrade an AI Coding Workflow

A working AI builder's field report on five GitHub repos that fix five specific agent failure modes, from runaway context to generic AI-slop output.

Posted
2 days ago
Duration
Format
Listicle
educational
Views
2.3K
27 likes
Big Idea

The argument in one line.

Five open-source repos add the discipline most AI coding sessions skip: one rebuilds apps you already own, one interviews you before writing code, one stops an agent's context window from flooding, one syncs video to scroll position, and one renders agent-written HTML straight to video.

Who This Is For

Read if. Skip if.

READ IF YOU ARE…
  • You build software with Claude Code, Codex, or Cursor and want to close the gap between a vague prompt and working code.
  • You're reverse-engineering or rebuilding a paid tool you already use, for your own business, and want a repeatable process.
  • You make short-form content and want your coding agent to generate branded B-roll cards and overlays automatically.
  • You've hit context-window degradation on long coding-agent sessions and want a concrete fix instead of just 'use a smaller task.'
SKIP IF…
  • You've never used an AI coding agent before; install basics and account setup aren't covered here.
  • You want a deep technical walkthrough of any single repo's codebase; this is a five-repo overview, not an implementation tutorial.
TL;DR

The full version, fast.

A full-time AI builder breaks down five GitHub repos he folds into his own coding-agent workflow. REA reverse-engineers any app you already own through a four-step ask-map-interrogate-manual process, turning it into a rebuild guide. Matt Pocock's skills add engineering discipline: an interview step before any code gets written, a shared glossary, test-driven development, and architecture review. context-mode keeps an agent's context window clean by sandboxing tool output and persisting decisions to SQLite across compaction events. Scroll World builds AI-video landing pages where scrolling drives video playback. HyperFrames turns prompts into rendered MP4 overlays for short-form content. His conclusion: the models are already good enough, so the skills and context you hand the agent decide how good the output is.

Free for members

Chat with this breakdown — free.

Sign in and you get 23 free chat messages on us — ask for the hook, quote a framework, find the exact transcript moment, generate a markdown action plan. Bring your own key when you want unlimited.

Create a free account →
Chapters

Where the time goes.

00:00 – 00:40

01 · Cold open: five repos preview

Quick-cut preview naming all five repos before the full video begins.

00:41 – 04:57

02 · What a repository is, and the five-stage workflow

Defines a GitHub repo as a plug-and-play skill or plugin, then maps all five repos onto an Understand / Plan / Stay Sharp / Ship / Show It framework.

04:58 – 07:37

03 · #1 REA: reverse engineer anything

REA's four-step ask/map/interrogate/manual process for rebuilding apps you own, illustrated with a Chrome extension built from a paid resale tool.

07:38 – 10:01

04 · #2 Matt Pocock's skills

A skills library built for real engineering discipline: /grill-me, /grill-with-docs, /tdd, /improve-codebase-architecture.

10:02 – 11:30

05 · #3 context-mode: stop drowning your agent

Sandboxes raw tool output and persists session state to SQLite so an agent's context window stays clean across compaction.

11:31 – 15:50

06 · #4 Scroll World: a website you fly through

Scroll-driven AI video landing pages: interview, generate, wire up, with a real cost and mobile-tuning breakdown from building heybeckon.ai.

15:51 – 18:03

07 · #5 HyperFrames: write HTML, render video

Converts prompts into rendered MP4 overlays using 21 built-in skills, used to generate this video's own on-screen cards.

18:04 – 18:47

08 · Bonus repos and a pre-install checklist

Two bonus repos plus four rules to check before installing any agent skill.

18:48 – 19:42

09 · Closing thought and community CTA

The skills-over-model-quality thesis, then a pitch for the free Shipping Skool community.

Atomic Insights

Lines worth screenshotting.

  • A GitHub repo can function as a plug-and-play skill or plugin you hand directly to a coding agent, with no custom integration required.
  • REA (Reverse Engineer Anything) reverse-engineers any app you already own through four steps, ask, map, interrogate, manual, producing a rebuild guide rather than a copy.
  • The rule governing REA: only examine software you own or are explicitly permitted to study, then build your own version from what you learn.
  • Matt Pocock's skills open with a /grill-me interview step that forces the coding agent to ask clarifying questions before writing any code.
  • context-mode routes raw tool output, a 56 KB Playwright snapshot, 59 KB of GitHub issues, through a sandbox and returns only the answer, keeping the context window from filling with noise.
  • context-mode logs edits, tasks, and decisions to a SQLite database, so an agent session can survive a context-compaction event without losing its place.
  • Scroll World ties a webpage's scroll position directly to a generated video's timeline, so scrolling plays the video frame by frame instead of triggering fixed animations.
  • Building a six-scene Scroll World landing page cost about $27: stills from GPT Images 2.0, video clips from Kling 3.0.
  • Every 'dive' transition prompt in the Scroll World sequence ends with the same instruction, slow, steady forward drift toward the horizon, to keep scene transitions visually consistent.
  • HyperFrames converts a text prompt into HTML and CSS animation, then renders that animation to MP4, with 21 built-in skills for launch videos, captions, and motion graphics.
  • The creator's rule for AI-generated B-roll cards: every word that appears on screen has to be a word he actually said in the video, nothing invented.
  • Before installing any agent skill, check that you trust its author and read its license; context-mode ships under Elastic 2.0, not the more permissive MIT license.
  • REA grew to roughly 239,000 GitHub stars in a single week, which the creator calls the fastest growth he's seen from any repository.
  • The stated bottleneck in AI coding isn't the model anymore, it's the skills and context you hand it.
Takeaway

Five GitHub repos add the discipline most AI coding sessions skip

WHAT TO LEARN

Each repo fixes one specific failure mode in AI-assisted building: vague requirements, runaway context, unrebuildable black-box apps, and generic AI-slop output.

02What a repository is, and the five-stage workflow
  • A GitHub repo in this context isn't just source code to read, it's a skill or plugin you hand directly to a coding agent, like REA, or a project you can clone to learn from.
  • The one-workflow-five-stops framework maps each repo to a stage: REA to Understand, Matt Pocock's skills to Plan, context-mode to Stay Sharp, Scroll World to Ship, and HyperFrames to Show It.
  • Treat a repo as plug-and-play: install it through Claude Code's plugin marketplace, or by pasting the repo link to your agent, and test whether it fits before building around it.
03#1 REA: reverse engineer anything
  • REA pairs one MCP server with one coding-agent skill to reverse-engineer any app you already own, growing to roughly 239,000 GitHub stars in its first week.
  • The four-step process is Ask (break the app into parts), Map (route each part to the right tool), Interrogate (back every claim with evidence), then Manual (document how it works plus the proof).
  • The stated rule: only examine software you own or are permitted to study; the creator's example is a Chrome extension he rebuilt from a $30/month paid resale tool.
04#2 Matt Pocock's skills
  • A library of small, composable Claude Code skills aimed at real engineering discipline instead of unstructured vibe coding, with roughly 300,000 GitHub stars.
  • A pre-code interview step forces the agent to ask clarifying questions, like which carriers do you track or who reviews the result, before writing anything, to avoid wasted usage on wrong assumptions.
  • A shared glossary file keeps the project's terms consistent, a failing test gets written before the fix, and a separate step finds where the codebase can be simplified.
05#3 context-mode: stop drowning your agent
  • context-mode targets context rot: a single Playwright snapshot can run 56 KB and 20 GitHub issues another 59 KB, which fills an agent's context window fast.
  • The fix routes raw tool output through a sandbox and returns only the answer to the agent, while edits, tasks, and decisions persist to a SQLite database across context-compaction events.
  • Check the license before adopting any skill: context-mode ships under Elastic 2.0, not the more permissive MIT license most of these repos use.
06#4 Scroll World: a website you fly through
  • Scroll World builds landing pages where the user's scroll position drives an AI-generated video's playback time instead of triggering fixed animations.
  • The three-step build is Interview (lock brand, scenes, and budget before spending), Generate (AI stills turned into video clips), Wire Up (a vanilla JS scroll engine stitches scenes, works on any stack).
  • A six-scene build cost about $27 using GPT Images 2.0 stills and Kling 3.0 clips, and getting the scroll feel smooth on mobile Safari and Chrome took the most iteration.
07#5 HyperFrames: write HTML, render video
  • HyperFrames converts a text prompt into HTML/CSS animation and renders it to MP4, with 21 built-in skills for launch videos, captions, and motion graphics.
  • It generated this video's own on-screen cards, logos, repo cards, quoted posts, in place of manual video-editor work.
  • The hard rule for agent-generated overlay text: every word on a card has to be a word actually spoken in the video, nothing invented.
08Bonus repos and a pre-install checklist
  • Two bonus repos worth a look: diagram-design for editorial explainer diagrams, and Anthropic's own official Claude Code plugin directory.
  • Before installing any skill, only add ones from authors you trust and read the license; not every repo defaults to MIT.
  • Scroll World spends real money per generation, so approve the budget before starting, not after it's already spent.
Glossary

Terms worth knowing.

REA (Reverse Engineer Anything)
A GitHub repo pairing one MCP server with one coding-agent skill that studies an app you own and rebuilds it as personalized software.
Matt Pocock's skills
A widely-used library of small, composable Claude Code skills for real software engineering, including /grill-me, /tdd, and /improve-codebase-architecture.
context-mode
A skill that routes a coding agent's raw tool output through a sandbox so only the final answer returns to the context window, preventing context rot.
Scroll World
A GitHub repo that builds scroll-driven landing pages where the user's scroll position controls an AI-generated video's playback time.
HyperFrames
A repo built by HeyGen that turns a text prompt into HTML/CSS animation and renders it to MP4, used for short-form video overlays and motion graphics.
Context rot
The degradation in an AI coding agent's output quality as its context window fills with irrelevant or excessive information.
MCP (Model Context Protocol)
A standard that lets a coding agent call external tools or servers as part of its workflow.
Vibe coding
Writing code by prompting an AI agent without deeper engineering practices like planning, testing, or architecture review.
Resources

Things they pointed at.

Quotables

Lines you could clip.

00:41
“All right, these five repos are going to absolutely transform your workflow.”
direct cold-open promise line that stands alone as a hook→ TikTok hook↗ Tweet quote
07:09
“Only software you own are allowed to examine, learn how it works, and then you build your own version.”
the clearest statement of REA's ethical boundary, quotable as a rule→ IG reel cold open↗ Tweet quote
16:36
“I haven't used Premiere Pro in months, because my AI agents have been editing my videos for the last few months.”
concrete, surprising claim about a changed workflow→ TikTok hook↗ Tweet quote
17:06
“The rule is every word on a card is a word I actually said, nothing made up.”
tight, specific standard for AI-generated overlays→ newsletter pull-quote↗ Tweet quote
18:04
“Your agent is only going to be as good as the context and the skills and the foundation that you give it.”
thesis-level closing line, works as a standalone takeaway→ newsletter pull-quote↗ Tweet quote
The Script

Word for word.

Read-along

Don't just watch it. Burn it in.

See every word as it's spoken — crank it to 2× and still catch all of it. The same dual-channel trick behind Amazon's Kindle + Audible.

metaphoranalogy
I 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 Pocock 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 Reveal.
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 builder 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 Pocock 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 content creator, this is a great way to put overlays to create call to actions automatically through your AI coding agent.
Another one is called Scroll World, which allows you to make beautiful websites. Let me show you here. So I used to scroll world on my ADE website that I've built personally called Hey Beckon.
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 I'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.
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 plugin.
So for example, REA, this is one that has blown up. And how does like it actually work? It is a plugin 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 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 hands down Matt Pocock skills. 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 Pocock's skills, super helpful. It 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 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 remotion, there is a remotion skill as well that works very similar in giving that to your coding agent to know to pick up certain assets to create calls. 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 and cloud. Cloud code is just forward slash plugin marketplace. And then you're going to add owner slash repo.
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 faster GitHub repository that has grown this fast in that short amount of time. So in essence, it is... a plugin that you give to your coding agent, whether that's Codex, 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 and 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. Whisperflow, Photoshop.
We created a new app for our resale business called WinSnap. It is just a recreation of a popular app that 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 engineer.
that product and now I have a personalized app for my resale business to be able to help me make better data -driven decisions. I do have a full breakdown of this repository in general. You can 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, Whisperflow, 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 interrogate.
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. So for my example, like I explained, we made WinSnap. WinSnap 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, and then you build your own version. So Matt Pocock Skills is another amazing, set of skills that you really need to check out.
I mean, this is an 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 a vibe coding.
These skills are designed to be small, easy to adapt and composable. They work with any model that are based on decades of engineering experience. And like I said, I got that link down below.
So talking more about how agents fail, you know, they hallucinate. Maybe they didn't build exactly what you were trying to convey. Or maybe the prompt that you're giving 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 slash grill me 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 slash grill with docs is a shared glossary markdown file for the project. A forward slash TDD.
is for writing a failing test first and then fixing it. And then a forward slash improved code -based architecture finds where to simplify. So these are just skills to help you be a better builder overall.
Not saying you need skills to build amazing products, but this is just going to help you build a good foundation for first -time builders out there. And these skills, I know they may seem intimidating, but they do all work together. So the forward slash grill me to spec to tickets implement forward slash TDD forward slash 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 that asked 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 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 part 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 Pocock. dash skills at Claude plugins, dash 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 pretty quickly if you're not managing context.
So this is 300 or 30. 30 ,000 stars on GitHub. just this week, which is pretty amazing.
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, clod or codex 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 it left off without a summarization which is really nice and you can see kind of how it works 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 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 repo and apply it to your product and then take that user on a journey, almost like telling a little story 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 Kling 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 that connector scene then 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 clicks 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 and 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 j 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 to generate those six scenes, there was a few mix ups 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 could 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 take 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 HeyBeckon with it, I was able to generate these scenes and then time all together using Kling with that dive in scene. 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 getting it ready for mobile.
That took several tries but once you do get it ready for mobile because you want to have a great mobile experience that 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 Codex, 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 HeyGen, 65 ,000 stars. In 5 ,000 stars this week, Apache 2 .0 built for agents.
So you prompt, and the agent writes the HTML and CSS for the animation, and then the hyperframes render it, and then it exports it into an mv4.
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 X posts 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 way 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 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 typed in 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 worth 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. 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 Anthropix Official Guide for Cloud Code Plugins. This is where Matt Pocock's skills live. You can just do that right in the terminal, Anthropix forward slash 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 and the foundation that you give it. So Things like having a good, proper, well -structured cloud markdown file or a good structured PRD, a product requirements document, before you even write any lines of code.
And I know that sounds very intimidating and tedious 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.
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 desired 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 link down below called Ship.
school. We do a couple bootcamp calls a week. We have 72 members.
We also have a classroom full of resources and guides to getting set up on Hermes, Grokbot, 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 could 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.
The Hook

The bait, then the rug-pull.

A full-time AI builder walks through five GitHub repos he's folded into his own Claude Code workflow: one that reverse-engineers any app you already own, one that interviews you before writing a line of code, one that keeps a coding agent's context window from flooding, one that turns scroll position into video playback, and one that renders agent-written HTML straight to MP4.

Frameworks

Named ideas worth stealing.

05:02model

One workflow, five stops

  1. Understand (REA)
  2. Plan (Matt Pocock's skills)
  3. Stay Sharp (context-mode)
  4. Ship (Scroll World)
  5. Show It (HyperFrames)

The video's organizing structure: each of the five repos plugs into one stage of a coding-agent workflow.

Steal formapping any tool stack you're evaluating onto where it actually helps: understanding, planning, context management, shipping, presenting
06:39list

REA's four-step rebuild process

  1. Ask - break the app into its parts
  2. Map - route each part to the right tool
  3. Interrogate - back every claim with evidence
  4. Manual - document how it works plus the proof

The process REA's MCP server and skill run against an app you own to produce a rebuild guide.

Steal forany project where you need to understand an existing tool well enough to rebuild a personalized version
09:33concept

Matt Pocock's pre-code interview (/grill-me)

Before writing code, the agent asks clarifying questions, like which carriers do you track or what counts as 'arrived', to avoid building on wrong assumptions.

Steal forany coding session where requirements are vague
12:01list

Scroll World's three-step build

  1. Interview - lock brand, scenes, and budget before spending
  2. Generate - AI stills converted to video clips
  3. Wire Up - a vanilla JS scroll engine stitches scenes seamlessly

How a scroll-driven AI video landing page gets built end to end.

Steal forany landing page that wants a cinematic scroll experience instead of a wall of text
16:05model

HyperFrames prompt-to-MP4 pipeline

  1. Prompt, agent writes HTML + CSS animation
  2. HyperFrames renders the animation
  3. Exports to MP4

The pipeline behind the on-screen cards shown throughout this video.

Steal forshort-form editors who want agent-generated overlays instead of manual Premiere Pro work
CTA Breakdown

How they asked for the click.

VERBAL ASK
19:17product
“Join the free Shipping Skool community, we do a couple bootcamp calls a week, we have a classroom full of resources and guides, and a free Discord.”

Soft CTA placed only after the full lesson is delivered; frames the community as a learning resource (bootcamp calls, classroom) rather than a hard sell.

Storyboard

Visual structure at a glance.

cold open
hookcold open00:00
framework overview
promiseframework overview04:03
REA
valueREA05:17
Matt Pocock's skills
valueMatt Pocock's skills08:00
context-mode
valuecontext-mode10:13
Scroll World
valueScroll World11:27
HyperFrames
valueHyperFrames15:52
before you install anything
valuebefore you install anything18:05
community CTA
ctacommunity CTA19:34
Frame Gallery

Visual moments.

One-click upgrade to your Google

Get more breakdowns in your search results

Add Modern Creator as a preferred source and Google shows you more of our breakdowns in Search, Top Stories, and AI Overviews. It only changes what you see, and you can undo it in your Google settings anytime.

Add to Preferred SourcesOpens your Google source preferences with us pre-loaded. Tick the box and you're done.
Watch next

More from this channel + related breakdowns.