Big Idea

The argument in one line.

Claude Code Skills are context-efficient markdown workflows that teach Claude to perform tasks it cannot do natively—like image generation—by auto-activating only when needed, unlike always-loaded MCP servers that consume tokens regardless of use.

Who This Is For

Read if. Skip if.

READ IF YOU ARE…

A developer using Claude Code who wants to extend the agent's capabilities beyond native functions like image generation or data processing.
Someone building AI agents for specific workflows who needs to understand how skills, MCPs, and custom commands differ and when to use each.
A builder creating production applications in Claude Code who needs to handle sensitive data like API keys securely within skills.

SKIP IF…

You're using Claude through the web interface or API without Claude Code — skills are a Claude Code-specific feature.
You're looking for guidance on building MCPs or integrating external tools — this focuses on skills and doesn't cover MCP server architecture.

TL;DR

The full version, fast.

Claude Code skills are markdown instruction files that teach the agent procedural workflows it can't perform natively, like generating images, while consuming almost zero context until the agent actually invokes them. Unlike MCP servers, which preload every tool and its metadata into memory, skills sit dormant and load only when the conversation triggers them, making them the leaner choice for specialized capabilities. You can install community skills from skills.sh with a single command at project or global scope, or build your own by feeding a working code example to the skill-creator skill. For anything requiring credentials, store API keys in a gitignored .env file and reference the variable name in instructions, never hardcode secrets into the skill itself.

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:54

01 · Cold open — finished result

Shows the AI-generated hero image on the completed fitness app, setting the before/after frame for the whole tutorial.

00:54 – 01:47

02 · What are Claude Code Skills

Infographic breakdown: skills are markdown files with precise instructions + resources that teach Claude a workflow it cannot do natively.

01:47 – 03:00

03 · Skills vs MCP Servers vs Custom Commands

Key differentiation: MCP tools always load into context; skills are lazy-loaded and near-zero token cost until invoked; custom commands are just saved prompts.

03:00 – 04:02

04 · Why skills save context tokens

Live demo of /context token usage: multiple skills installed, barely any context consumed until the skill is actually needed.

04:02 – 05:44

05 · Installing via Claude Code plugin marketplace

Plugin panel > Marketplaces > add Anthropic GitHub repo URL > browse plugins > spacebar to select > I to install.

05:44 – 07:55

06 · skills.sh — open agent skills ecosystem

Vercel's skills.sh: browse trending/all-time favorites, copy npx install command, choose project vs global scope, add Symlink.

07:55 – 09:46

07 · Viewing installed skills + token usage

Claude Code /skills panel shows all project skills with minimal token footprint. HTML listing trick visualizes exactly what is in context.

09:46 – 11:29

08 · frontend-design skill in action

Prompt Claude to use the frontend-design skill — skill loads into context at that moment — full app redesign executes. Browser-use skill auto-verifies the result.

11:29 – 12:36

09 · Skill creator skill

Install skill-creator skill to let Claude build new skills from documentation snippets.

12:36 – 15:31

10 · Free local image gen alternative

Bonus: open-source Hugging Face model, no API key, Python script runs locally. dog.png demo. Useful for icons/avatars, not photorealistic.

15:31 – 17:46

11 · Building Nano Banana Pro skill + .env pattern

Get working example from AI Studio, paste into Claude with skill-creator. Critical: never hard-code API keys — use .env + tell Claude variable name, Python reads os.environ.

17:46 – 19:01

12 · Testing the image generator skill

Claude auto-invokes image-generator skill, runs Python script, produces 600KB PNG of woman jogging on beach with AI assistant.

19:01 – 20:47

13 · Image optimizer skill — 631KB to 56KB

Create image optimizer skill (resize + WebP conversion). 631KB PNG becomes 56KB WebP. Placeholder on hero section replaced with the result.

20:47 – 20:52

14 · Final result + CTA

Final fitness app with generated+optimized image in hero. Like/subscribe ask, link to next video.

Atomic Insights

Lines worth screenshotting.

Claude Code skills auto-activate based on conversation context — when you ask Claude to generate an image, it scans available skills, finds the image generation skill, and invokes it without any slash command.
Skills differ from MCP servers in a critical way: MCP server tools are always preloaded into context and consume tokens whether used or not; skills only consume tokens when the agent invokes them.
Skills differ from custom commands in that custom commands are manually triggered reusable prompts; skills are autonomously invoked by the agent when the context matches.
skills.sh is an open agent skills ecosystem (by Vercel) with a searchable marketplace of community-built skills including a find-skills skill that can search and install other skills automatically.
Installing a skill at project level adds it to the repository so every team member who clones the project gets the same skill set — skills become part of the project's infrastructure.
A Nano Banana Pro image-generator skill stores the API key in a .env file that the skill's Python script reads at runtime — sensitive credentials never appear in the skill markdown file itself.
An image optimizer skill that converts a 631KB PNG to a 56KB WebP demonstrates that skills can wrap external tools (like image processing libraries) and invoke them as part of a seamless Claude workflow.
The front-end design skill from Anthropic's official repository provides layout guidelines, component patterns, and aesthetic rules that Claude applies to every UI element it generates.
Claude without any skills builds a functional UI based on its training data alone; the same prompt with the front-end design skill produces a measurably more refined and consistent output.
You can install skills via the /plugin command inside Claude Code or by running a single CLI command copied from skills.sh — both paths take under two minutes.
A skill creator skill (available on skills.sh) takes instructions in plain language and generates a complete, properly formatted skill markdown file — skills can build other skills.
A find skills skill lets Claude automatically search the marketplace for a skill that matches a stated capability gap and install it — making the skill library self-expanding.

Takeaway

The lazy-load architecture is the whole argument.

Skills over MCPs — when it matters

Skills cost near-zero context until the agent needs them — that is the moat over MCPs for capability-heavy projects.

Use the Skills vs MCP vs Custom Commands infographic (00:54) as the canonical explainer for MCN+ curriculum on extending Claude Code.
The .env + variable-name-in-prompt pattern validates the JoeFlow ~/.claude/.env + load_env design — this is the community-standard approach.
The skill-creator skill (skills.sh install) is a fast path to building new JoeFlow skills: feed it the API docs and a working code snippet.
skills.sh is the discovery layer — worth listing your own skills there when they are ready to share.
The 'barely any tokens until invoked' framing is the strongest pitch for skills when users ask why not just use an MCP.

Glossary

Terms worth knowing.

Claude Code: Anthropic's command-line coding agent that runs in a terminal, edits files, executes commands, and can be extended with skills, MCP servers, and custom commands.
Skill: A markdown file with precise instructions (and optional scripts or resources) that teaches an AI agent how to perform a specific workflow. The agent auto-loads the skill into context only when the conversation calls for it.
MCP server: Model Context Protocol server that exposes tools to an AI agent — like browser control or database access. Unlike skills, MCP tools and their metadata stay loaded in the agent's context at all times.
Custom command: A reusable prompt the user saves and re-triggers by name. Unlike skills, custom commands never auto-activate and don't carry workflow logic — they're just stored text.
Context window: The total amount of text (measured in tokens) an AI model can hold in working memory at once. Skills are favored over MCP servers partly because they consume very little of this budget until invoked.
Token: The unit of text an AI model reads and bills against — roughly a short word or piece of a word. Lower token usage means cheaper, faster, and more room for actual work.
Marketplace (plugin marketplace): A repository (typically hosted on GitHub) that bundles installable plugins or skills for an AI coding tool. Users add a marketplace by URL, then browse and install its contents.
skills.sh: An open ecosystem website from Vercel for discovering, searching, and installing community-made agent skills with a single copy-paste command.
Symlink: A filesystem shortcut that points one location to another. When installing a skill via symlink, the skill lives in one place but appears inside multiple tool folders so several agents can share it.
Headless mode: Running a browser without a visible window. Useful for automation, but disabled here so the user can watch the agent navigate the page in real time.
Nano Banana Pro: Google's paid image-generation model accessed through the Gemini API and AI Studio, capable of producing photorealistic images at 1K, 2K, or 4K resolutions.
Google AI Studio: Google's web-based playground for testing Gemini models, tweaking parameters, and exporting working code snippets for the prompt you just ran.
Gemini API: Google's developer API for calling Gemini language and image models from code. Requires an API key for authentication and billing.
API key: A secret string that authenticates a request to a paid service. Treat it like a password — exposing it lets others run charges against your account.
.env file: A plain text file at a project's root that stores secrets like API keys as environment variables. Scripts read from it at runtime so the values never get hard-coded into source files.
.gitignore: A file that tells Git which paths to leave out of commits. Listing .env here is the standard guard against accidentally publishing secrets to a public repository.
Environment variable: A named value made available to running programs by the operating system or a loader. Scripts pull secrets from environment variables instead of embedding them in code.
Hugging Face: A hub for downloading open-source AI models. Mentioned as a place to find free image-generation models you can run on your own hardware instead of paying an API.
Python SDK: A library of Python code that wraps an external service so a script can call it with simple function calls. The Gemini SDK is what the image-generation skill imports under the hood.
WebP: A modern image format that compresses photos and graphics much smaller than PNG or JPEG at similar quality, making pages load faster on the web.

Resources

Things they pointed at.

05:44toolskills.sh ↗

04:50linkAnthropic skills GitHub repo ↗

11:52linkClaude Code Docs — Extend Claude with skills ↗

14:12productGoogle AI Studio — Nano Banana Pro ↗

12:36productAgentic Labs school community ↗

Quotables

Lines you could clip.

09:50

“Unlike MCP servers where the tools along with their documentation is always sitting in memory — Claude only loads the minimum amount of context, and only if the skill is needed will it dive into these folders.”

Clean, jargon-light explanation of a non-obvious architectural difference — no setup needed→ TikTok hook↗ Tweet quote

01:05

“Skills are basically markdown files with very precise instructions.”

Best one-line definition of Claude Code Skills in the whole video→ IG reel cold open↗ Tweet quote

15:55

“Please do not pass it to Claude directly and please do not ask Claude to hard code it in the skills itself.”

Direct authoritative security warning — clippable as a standalone tip→ 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.

analogystory

00:00Now let's have a look at adding an image to this hero section. Please generate an image of a woman jogging next to the beach. The agent correctly identified that it's got access to our image generator skill.

00:11And if we have a look at it, we get this image with this little chat bot saying, hey, you got this, keep going. And on this placeholder, once we place with an image generated by Claude code, we can use skills to give our agents access to extra capabilities. Like you saw in the intro, we were able to get Claude code to generate images, which is something that Claude can't do natively.

00:31So in this video, you'll learn everything you need to know to get started with using skills from finding and installing skills to creating your very own skills. We'll also have to look at the differences between skills, MCP servers, and custom commands.

00:46And we'll also look at advanced topics like creating skills that rely on sensitive data like API keys. So, I think this infographic describes it best. We can use skills to teach Cloud Code how to do something that it couldn't do natively.

01:01For example, generating images. Skills are basically markdown files with very precise instructions. And along with those instructions, we can also include any other resources.

01:12For example, if the agent needs to generate an image, the markdown file will contain precise instructions on how to use a Python script to generate those images. Or another example is the front end design skill, which provides a lot of context and resources for building high quality UI designs.

01:30So we can use skills to specify very specific workflows and even provide domain knowledge. So basically, we can use skills to take the existing knowledge built into Claude along with any tools that it already has access to to execute very specific workflows.

01:47Skills get confused with MCP servers all the time, but the real difference is that MCP servers simply provide new tools to the agent. So these tools could give the agent access to control a browser window or to access a database, etcetera.

02:01And, of course, we can combine skills with tools to create very specialized workflows. And custom commands are purely reusable prompts.

02:10So custom commands are not really related to skills or MCP servers in any way. These are simply reusable prompts that the user can store to easily access those prompts again.

02:21Whereas skills is actually auto activated by the agent based on the conversation's context. If we ask the agent to generate an image, it will then see it's got access to the image generation skill, pull in that skills markdown file, and then follow the instructions in that file to generate an image. Of course, for the MCP servers and any other tools, those will always be available in the agent's context.

02:45So, yes, you could have a tool that can generate images as well, but keep in mind that tool along with all of its metadata will be preloaded into the agent's context and consume tokens whether or not the agent needs a tool or not.

02:59That's why in some instances, skills are preferred over MCP servers because as you'll see in this video, skills actually take up very little context. If you are interested in this infographic, I'll link to it in the description of this video.

03:13I use Claude without any skills or MCP servers to create this landing page for a fitness app. So this is very much based on the training data built into Claude.

03:23And it doesn't look bad, but we will use our skills to greatly improve this design. And of course, towards the end of the video, I'll show you how to create your own skill for generating images, and then we'll replace this placeholder with our actual AI generated image.

03:38So how do we add skills to Claude Code? Luckily, that's super easy. We can download skills from existing marketplaces, so skills created by other users, or we can create our very own skills.

03:50Let's start by downloading skills from existing marketplaces. Now, there are really two ways to do this. Now, one solution, and this is actually the most complex solution, I'll show you an easier way in a second, is to use the built in plugins function within Claude code.

04:05So within Claude, we can go to plugin, and by default, you won't see any plug ins in this list. What you'll have to do is press right to go to marketplaces and then add a new marketplace like the official Anthropic marketplace.

04:20So these marketplaces are typically stored in GitHub repositories. And Anthropic has this official repository, which I'll link to in the description as well. And in this repo, we have access to several plugins.

04:33So if we go into the plugin folder, we can see all these available plugins. And within there, we have something like the front end design skill, which basically contains a folder for the skill itself and this markdown file containing very strict instructions on using this skill.

04:51Now, we don't really care about the contents of these files at this stage. If you want, you can definitely read through it, but it's nothing more than very detailed instructions. Now, there are many repositories out there and if you note the repository path, all you have to do is copy the URL then we can go to add marketplace, paste in that GitHub URL, and of course, I'm getting this message because I've already installed this marketplace.

05:16But for you, you will now see this marketplace, you will be able to browse all the plugins, and you can simply press space bar to select any plugins you want, like this front end design skill.

05:28So after selecting the skill that you want, you can simply press I on the keyboard to install that skill. And then afterwards, if we run the skills command, we will see the front end design skill has been installed.

05:42Now, this has been installed at user level. Now, I'm going to show you a way easier way to find and install skills. Simply go to this website skills.sh.

05:53This is a really cool project from Vercel, and this is an open agent skills ecosystem. This makes it really easy to search for new skills. You can also view all the training skills, what's hot right now, or just have a look at the all time favorites.

06:09This is such a cool project. If we have a look at these all time favorite skills, the most popular one seems to be this find skills skill.

06:18So with this skill, we can ask the agent to automatically search this marketplace for a suitable skill, and it will be able to install the skill itself. Another really useful skill is a skill creator skill.

06:30So with this skill, we can give our agents some instructions and it will be able to create the skill itself. There are so many really useful skills here.

06:39I do recommend this for Sell React best practices skill if you are using Vite or React or Next. And I also really like this front end design skill. So let's actually have a look at installing this skill.

06:52All we have to do is copy this command, then back in our project, let's paste in that command and press enter. Now we can select our tool or CLI.

07:02So I've got Cloth Code installed and I'm also using cursor. So I'll just press space to select these tools.

07:09Let's press enter. Then we can specify if we want to use the skill at project level or globally across all of our projects.

07:16I like setting up skills at project level because that way I can add them to the repository and my entire team will have access to the same skills. Then I'll select Symlink, let's proceed with installation, and what this did is in the Claude folder, we now have this skill subfolder with this front end design skill.

07:36And in here, we've got our skill dot n d file. Since we also selected cursor, we can find the skill in the cursor folder as well.

07:45And as a catch all, it's also created the skill in the dot agents folder. A lot of tools and frameworks use the dot agent folder as well. Let's go ahead and install a few more.

07:56If you want to create video animations, you can install Remotion as well. It's a really cool and fun skill.

08:02But I'm actually going to install the find skills skill. Apologies for saying skills so many times. Then let's install this.

08:11Cool. Let's also grab the React best practices as I am using Next. Js in this project.

08:17Let's install this skill. And if we wanted to give our agent access to a browser, we can install the browser use skill as well. And that's it.

08:25I think you get the idea. So we've got a skill for using the browser. We've got a skill for finding skills in the marketplace.

08:32And then we have some skills to assist with the front end design and using React. Right. Now, if we open Cloth Code and we go to skills, we can see all of our project skills over here.

08:43If you don't see the skills, simply restart Clawed Code and they should be available. And look at this. You can see that these skills barely use any tokens.

08:52If we run the context command, we can see a token usage for the skills over here as well. And although we've added a lot of skills to this project, we're barely using any tokens.

09:03And that is because Claude only loads the minimum amount of context into memory and only if the skill is needed will it dive into these folders to pull in all of these additional files and context.

09:15But until then, the context window is really lean. There's actually a very nice way to visualize this by asking Claude code, please create an HTML file in the root of this project listing all of the skills that you have available. Do not dive into the details of the skills, only list the context that you have available at this current point in time on this page.

09:36And this is the only information that's loaded into context at this point in time. It's just enough for the agent to be aware of what skills are available and when to use them.

09:46Speaking of using skills, let's get taught to fix this UI. Please, can you use your front end design skill to fix up this user interface? The website looks really bland and it's very sort of AI sloppish.

09:59So use your front end design skill to create something that looks modern, that represents an AI powered fitness app. The only thing I want you to keep is the Euro section with a placeholder image.

10:11We'll load the image after the fact. Now you might have noticed that I asked Broad explicitly to use the skill. Now you don't have to do that.

10:18The agent should be able to identify the skill and then use it automatically. But I personally like to nudge the agent towards using these skills. And look at that.

10:27The agent now loaded the skill into memory, and it's only at this point in time that all of this context, everything in here, and you can see this is really a large file, all of this context is only loaded into the conversation at this point in time.

10:43Unlike MCP servers where the tools along with their documentation is always sitting in memory. So Claude is currently cooking and this app should look very different in a few moments.

10:55Once Claude made these changes, but let's also get it to verify the changes by using the browser. Please use your browser use skill to verify your changes. The UI needs to look correct.

11:07And there you go. I'm not pressing anything. This is the agent actually just going through the page itself and checking if everything is okay.

11:15I did ask the agent not to run the browser in headless mode because I wanted to see the browser myself. I think the colors and the font work way better with a fitness brand, and I also like the new logo. Everything else just looks really professional.

11:29Let's have a look at adding an image to this hero section. Now, by default, Claude can't generate images. So what we could do is give it a skill to teach it how to generate images.

11:40Creating skills is really easy. Of course, you can try to do it yourself by going through this documentation and then just following the instructions.

11:49Or what you can do is simply just copy the content of this page, give it to Claude, and say, hey. I want you to create a skill based on this documentation, and this is the skill that I want you to create.

11:59An even easier solution is to simply download the skill creator skill. So copy this command, then let's run the skill. I'll select Claude code.

12:10We'll install the project level, And now our agent has access to a skill creator skill. I'll just restart Claude code. Now this is really up to you.

12:20I'm going to use Nano Banana Pro, which is a paid service for generating these images. But I think for fun and as an added bonus, I'll also show you how to use an open source model, which is completely free and it should work on everyone's hardware.

12:34But before we create our own skill, you might want to join my school community. This is a fantastic place for accessing all the resources in my videos, and you can share ideas and get assistance from like minded people in this community. So if you want a structured way to learn all of these different skills, then this is the place for you.

12:51I also started uploading exclusive videos and q and a live streams. And I've only priced this at $7 a month, which is a complete steal for the value and you will be supporting my channel. Now as I mentioned, we will be using Nano Banana Pro to generate these images, but I do want to prove to you that it is possible to use open source models as well.

13:10So in this other repository, I created this local image gen skill. This will use a free open source model to generate the images.

13:19So you don't need an API key, you don't need accounts, there's no cost involved, nothing. The agent will simply run this Python script, and this script uses a really tiny model for generating these images, which means we can simply ask Claude Code, please use your local image gen skill to generate an image of a dog.

13:38Please store it in the open images folder. And let's just send that. It's just for fun.

13:43The agent is loading in that local image gen skill. It's now running the underlying Python script for generating the image. And now we have this dog dot PNG file, which is a little bit tiny, but indeed it is an image of a dog.

13:57Now I probably won't use this to generate anything photorealistic, but this could be useful for generating icons or user profile images.

14:06And, of course, you don't have to use this specific model either. You can go on Hugging Face and generate something that will work on your hardware setup. If you are interested in playing around with a skill, I'll upload it to the community.

14:18But what you're interested in is building your own skills. So how can we create a nano banana image generation skill that Claude Code can use? The first thing is to figure out what that workflow actually looks like.

14:30So we need to find a skill. Remember, skills are really these predetermined or procedural workflows that you want the agent to go through whenever performing an action.

14:40For generating images with Nano Banana Pro, we need the agent to use a script. And the easiest way to do that is to create a working example.

14:50So I'll send the guy to a I studio dot Google dot com, and I'll select the Nano Banana Pro model. Then for the aspect ratio, I'll just select an example like this, a woman running on the beach.

15:05I'll just add photo realistic. Let's run this. And cool.

15:09We now have this image, so let's go to get code. And now we have this example code snippet. So I'm actually going to copy this.

15:18Then back in our project, let's say I need you to create a new skill using your skill creator skill. This skill will allow us to generate images using the nano pen nano pro model from Google. Here is an example code snippet for generating images.

15:35Keep in mind that images can be one k, two k, or four k. Always default to one k unless otherwise specified. For the aspect ratio, generate square images by default.

15:48Always store the images in the following folder. Then I'll just type public slash generated images.

15:55But here is a really important topic, working with sensitive data, including things like API keys. The Gemini API, as with many other SDKs and APIs, require an API key to work.

16:09So this is actually expecting the Gemini API key to be passed to it. Now you do not want to hard code these keys in the skills because if you deploy that skill or maybe even share it with someone else, you're going to leak your API key. So how do you store sensitive data and securely pass it to these skills?

16:28Well, in this instance, what we have to do is create a new file in the root of the project and call it dot env. This dot env file should always be excluded by Git and should never be published to the repository. So in your dot ignore file, always ensure that you are excluding dot env files.

16:47And if you don't have a dot ignore file in your project, simply create one. Then in this file, I'm going to create this variable. So in AI Studio, I'll go to get API key.

16:59You can just create a new key or I'll just reuse this one. And I'm going to do this off camera, but all you have to do is paste in your key and save this dot ENV file. Now, I'm going to tell Claude, I have already created a dot ENV file and I stored the Gemini API key in that file under this variable like so.

17:20So just always keep in mind, if you are working with sensitive data, please do not pass it to Claude directly and please don't ask Claw to hard code it in the skills itself.

17:30Right. Let's run this. And as you can see, the skill creator skill was loaded, and of course, it's asking a few questions like, you mentioned an example code snippet for generating images with a Nano Banana Pro model, but it wasn't included.

17:42Alright. That's my bad. So I'm just going to pass that to Claude.

17:46Alright. So we now have this image generator skill. If we have a look at the skills file, we have a description and all the instructions for using the script, as well as all of the different sizes and aspect ratios.

17:59This is really, really cool. Now the secret sauce behind the skill is this script.

18:05So in the scripts folder, we have this Python file, and it's this Python file that's going to use the Gemini SDK to generate the image.

18:13And this is grabbing the Gemini API key from our environment variables. It's not hard coded in the script at all. So let's test it out.

18:22I'm actually going to exit out of Claude. Let's go back in. Let's say, please generate an image of a woman jogging next to the beach.

18:31There should be a little AI assistant floating just behind her shoulder, motivating her to keep going.

18:38I accidentally pressed escape, so let's just say resume. The agent correctly identified that it's got access to our image generator skill. It's running the Python script.

18:48Alright. So we've got our new file in this generated images folder. And if we have a look at it, we get this image with this little chat bot saying, hey, you got this, keep going.

18:58This will be the perfect image to use on our website. But the problem is if we have a look at the file size, this is over 600 kilobytes, which is way too big for a website.

19:08So thankfully, what we can do is create a new skill. So let's say, please create a new skill. What I want the skill to do is I'm going to provide a link to a to an image, and this image needs to be optimized for a website.

19:23At the moment, these images are massive, so I want them to be resized for use in a website, and they should be high quality enough to be used in a euro section, and they should be converted to WebP.

19:37These converted images should then be moved to the public folder. I'm actually just going to type public slash assets like that.

19:45Alright. Let's send this. So now in the Cloud folder under skills, we now have this image optimizer skill, which also uses a Python script for resizing the images and converting them to WebP.

19:56So I'll just restart Cloud Code again, and it say, please use your optimized image skill on this image. Then let's throw in this image that we generated earlier. Let's send this.

20:08And just as a reminder, this image is 631 kilobytes. And now we have this assets folder, and in here, let's open up this version of the image.

20:18And as you can see, the details are all there. This looks fantastic. But this version of the image is only 56 kilobytes.

20:25That's way better. Please, can you replace the placeholder on the home page with this optimized image?

20:32And it's in this. And now this placeholder was replaced with an image generated by Cloth code. How awesome is that?

20:40If you enjoyed this video, please hit the like button and subscribe to my channel for more Claude code and agentic coding tutorials. Then also check out this other video, and I'll see you in the next one. Bye bye.

The Hook

The bait, then the rug-pull.

The video opens on the finished product — a polished fitness-app hero with an AI-generated beach jogger and a floating chatbot coaching her — then rewinds to the blank, AI-sloppy version to make the point visceral. Everything in between is the skills stack that produced it.

Frameworks

Named ideas worth stealing.

00:54model

Skills vs MCP Servers vs Custom Commands

Skills — markdown instructions, auto-activated, lazy-loaded
MCP Servers — always in context, always consuming tokens
Custom Commands — saved prompts, manually triggered

The three extension mechanisms for Claude Code, differentiated by when they load into context and how they are invoked.

Steal forAny explainer about extending Claude Code — the infographic framing is immediately understandable and reusable for MCN+ curriculum

15:55model

API Key Security Pattern for Skills

.env file in project root (gitignored)
Tell Claude the variable name in your prompt
Generated Python script reads from os.environ
Never hard-code in skill files, never pass to Claude directly

The correct pattern for handling sensitive credentials when building Claude Code skills.

Steal forDirect validation against JoeFlow own ~/.claude/.env + load_env loader pattern

03:00concept

Lazy-load context architecture

Skills only load their full markdown + supporting files into context when the agent determines the skill is needed. Until then only the skill name + one-line description is in context.

Steal forSelling skills-over-MCPs argument when context window management matters

CTA Breakdown