00:00:00Claude Code is really great, but our team has started using it for everything.
00:00:03Anthropic noticed this and a while back they introduced the concept of skills.
00:00:07But with the release of Nano Banana Pro, people started going a different direction entirely,
00:00:12using Google products like anti-gravity to build better sites.
00:00:15We tried anti-gravity, but in our opinion it is too broken right now.
00:00:19We know the people that like anti-gravity will be at our throats.
00:00:21But this is a topic for another video, but the images it generates are free.
00:00:25So we thought, why not have Claude handle the coding and anti-gravity handle just the images.
00:00:30But here's the thing.
00:00:31For these different use cases, you shouldn't be re-prompting Claude every single time.
00:00:35You should train it and make a dedicated skill.
00:00:37So Claude recently released a guide on how skills are actually supposed to be built.
00:00:41And the most important part is testing and iteration.
00:00:44And honestly, the guide really changed the way that we think about these skills.
00:00:48You might have already heard about the Skill Creator.
00:00:50It's Claude Code's official skill that provides you guidance for creating effective skills.
00:00:55But one of our team members found that it's still outdated
00:00:58according to the new guide that we've published.
00:01:00So we had it updated and it changed a lot of things
00:01:02according to the new guidelines and made really nice improvements.
00:01:05Using this updated Skill Creator and a lot of painful iteration,
00:01:09we've made this new nano banana UI skill.
00:01:12But the skill we started with and the skill we ended up with were two completely different things.
00:01:16Both of these skills would be available in AI Labs Pro.
00:01:19For those who don't know, it's our recently launched community
00:01:22where you get ready to use templates that you can plug directly into your projects
00:01:26for this video and all previous ones.
00:01:28If you've found value in what we do and want to support the channel,
00:01:31this is the best way to do it. The link's in the description.
00:01:34We already had the coordination process between Claude Code and Anti-Gravity figured out.
00:01:38So we opened up the same directory in Claude Code and in Anti-Gravity as well.
00:01:42Claude initialized the project and all Anti-Gravity needed to care about was this public folder,
00:01:47which would have all the images inside it.
00:01:49Claude was going to give us the prompts and the file names for the images that
00:01:53Anti-Gravity needed to produce. Those prompts went into Anti-Gravity.
00:01:56It fired up its image generation tool and using parallel processing,
00:02:00it generated multiple images at the same time.
00:02:03You can see that it generated three images and all three of them were placed in this images folder.
00:02:08After they were placed, Claude automatically knew that they were there and could easily work with them.
00:02:12But the moment we started actually generating images, multiple things started breaking.
00:02:17Now you've probably already heard this a lot of times, but description engineering is one of the
00:02:21most important things when building out these repeated workflows. These descriptions are the
00:02:26YAML front matter that are always loaded into Claude Code's context when you open them up.
00:02:30And this is how Claude actually decides whether it needs to load your skill or not.
00:02:34But a lot of users have reported skills loading into context when they're not needed.
00:02:38And that's because most descriptions only say what the skill does.
00:02:41A good description actually answers two questions.
00:02:44What does the skill do? And when should Claude use it?
00:02:46This is where trigger phrases come in. They're the things that actually call for the skill to be used,
00:02:51like "build a landing page" or when we mention "nano banana". But it's not just about when to use it.
00:02:57The guide also mentions negative triggers, which tell Claude when it shouldn't use the skill.
00:03:01For example, we're defining that it shouldn't load for simple bug fixes or database work.
00:03:05So the difference between a good description and a bad one is clear.
00:03:08You can see this skill from the new skill creator has multiple trigger phrases and negative triggers,
00:03:13whereas this one from the old skill creator just describes what the skill does.
00:03:17There's also instructions that are purely quantitative and related to syntax,
00:03:21but you don't need to know about those.
00:03:23Also, if you are enjoying our content, consider pressing the hype button,
00:03:27because it helps us create more content like this and reach out to more people.
00:03:31Now normally, while generating different images, most of them had to be different
00:03:35dimensions because they needed to be fitted or used for different use cases.
00:03:39And that was what the prompt specified before we made the changes.
00:03:42But what happened every time was that whenever we tried to use these custom dimensions,
00:03:46the image generation tool in anti-gravity only generated square images.
00:03:50Normally this isn't a problem with the simple model that's in the Gemini app or in Google AI Studio.
00:03:55But here we had to change the process and modify the skill accordingly.
00:03:58It was referenced throughout the skill.md in the appropriate stages,
00:04:02and it was also referenced inside the prompting rules that whenever it should write a prompt,
00:04:06it shouldn't specify any dimensions or aspect ratio, because it didn't really matter.
00:04:10And if it did need to crop the image for a specific use,
00:04:12it should do that later on with its crop image tool.
00:04:15And this is why the scripts folder is really important.
00:04:18It hosts these executable tools that Claude can call with specific arguments,
00:04:22and you discover these tools according to your different use cases.
00:04:25Now a good script actually has these CLI arguments with different modes,
00:04:29so that Claude can call it easily.
00:04:31And one thing that one of us discovered was very much needed is preview modes as well,
00:04:35which help Claude preview the output before actually doing some destructive operations.
00:04:40Let's take a break to talk about today's sponsor.
00:04:42After this, we're going to look at the one structural mistake
00:04:45that most people make when building their skills.
00:04:47CREAM
00:04:47For developers and SaaS founders, the biggest headache isn't building.
00:04:50It's the nightmare of global taxes and VAT compliance.
00:04:53CREAM is a merchant of record that handles this burden entirely, letting you focus on development.
00:04:58Built for the next wave of digital business,
00:05:00CREAM offers a lightning-fast setup to accept payments in 100+ countries on day one.
00:05:05They've eliminated the confusion of hidden fees,
00:05:07offering a transparent flat rate of 3.9% + 40 cents.
00:05:11That is it.
00:05:11Same rate whether the customer is in Tokyo or Texas, American Express or Google Pay.
00:05:16You get powerful features like automated revenue splits to ensure a smooth launch.
00:05:20Always use their isolated test mode and the dedicated TypeScript SDK.
00:05:23Plus, CREAM offers official AI agent skills for Claude Code, Cursor, and WinSurf.
00:05:28Just tell your AI assistant to integrate CREAM,
00:05:30and it'll instantly generate production-ready, secure code based on their latest API best practices.
00:05:36Just remember, never commit your API keys to version control.
00:05:39If you're ready for a payment stack, click the link in the pinned comment.
00:05:42Stop worrying about taxes and start scaling with CREAM.io.
00:05:45You might have already heard us talking about progressive disclosure in many of our previous
00:05:50videos because it's not only related to skills, but it's also very important for the context window.
00:05:55This means that the agent should only know about something if it needs it at that time.
00:05:59You already know that the description is always loaded inside Claude Code's context.
00:06:03And this is how these skills use a three-level structure,
00:06:06where the first level is always inside Claude's context.
00:06:09Then the second level is the body of the skill.md, and it should have references to level 3,
00:06:14including the full workflow and instructions on how to use the references.
00:06:18And within that structure, the official guide defines something called the critical section.
00:06:23You should list the most important information right there at the front,
00:06:26and not have it hidden beneath all these different instructions.
00:06:29You can clearly see that this skill only has the skill.md and doesn't have the level 3 structure.
00:06:34This is because all of the workflow, the tips, the different recommendations,
00:06:38and troubleshooting guidelines are placed inside a single file.
00:06:41This isn't how it should be structured,
00:06:43because it might not need these guidelines at the present moment.
00:06:45It should only load the workflow first,
00:06:47and then pull in the prompting rules only when it's time to write or use them.
00:06:51Now on the other hand, this skill is clearly structured with references
00:06:54and the different scripts that it needs.
00:06:56And along with the workflow, the file clearly has triggers for when to run each script,
00:07:01and when to check the references for the different guidelines.
00:07:04So in the skill.md, it only has the workflow for the nano banana skill.
00:07:08And after that, in the references section, it has the different guidelines,
00:07:12where the prompting rules contain the 13 different tester rules
00:07:15that we found after our iteration testing.
00:07:17But even with all of this structure, Claude Code still found ways to skip steps.
00:07:22After it had generated the first batch of images,
00:07:24they were bound to need regenerations,
00:07:26because nano banana doesn't always generate the most accurate output.
00:07:29The surprising thing is that Claude didn't verify this by itself.
00:07:33We had to ask it whether the images were good according to the design that it wanted to make.
00:07:37Otherwise, it would have just gone ahead and implemented the ones that it produced.
00:07:41Now again, this is why we said that iteration is the biggest thing in building these skills.
00:07:45Now we already had a step for validating assets, which used the validate images script,
00:07:49but that only validated whether the images were good structurally,
00:07:52not whether the images were aesthetically correct.
00:07:55It didn't have anything to do with the aesthetics.
00:07:57For the aesthetics, Claude had to do a visual review by itself,
00:08:00where it would look at these questions and decide whether the image would pass or fail.
00:08:04And if it did fail, it needed to provide a reason as well.
00:08:07This is because if the image did fail a visual review,
00:08:09it needed to delete that image, then write a new corrected prompt.
00:08:13And depending on which mode you were in, if you were in anti-gravity mode,
00:08:16it would give you a new prompt, including the reason why the previous one failed,
00:08:20so that anti-gravity could generate new and better images.
00:08:23And therefore, this is why anti-gravity is saying that it has regenerated the glass image,
00:08:27and that this time it follows the requirements.
00:08:29This is why if you're building a workflow, it's really important to have these validation gates.
00:08:34Validation gates are explicit blockers that define the thing that should be completed
00:08:39before it can move on to the next part of the workflow.
00:08:41And as you saw, if it's up to Claude, it'll happily build UI around missing or corrupted images,
00:08:46and won't even verify anything unless you tell it to.
00:08:48So for example, in this skill,
00:08:50you can clearly see that the workflow has these multiple steps that it needs to follow.
00:08:54And among the other mistakes,
00:08:55it hasn't really written any validation gate before moving on to the next step.
00:08:59Now these validation gates are still prompts.
00:09:01It's not like there are some magical bash commands.
00:09:04But if it has to be reused every single time and there is no variation in it,
00:09:08you should actually make a tool and list that tool as the validation gate.
00:09:11But in this case, among the multiple steps, we have these validation gates
00:09:15that not only help stop it from moving from one part of the process to the other,
00:09:19but also form a mini process inside each workflow as well.
00:09:22As you're experimenting and iterating with your process over and over again,
00:09:26you'll find that you do run into a lot of errors, some of which you've already seen.
00:09:30For example, missing or corrupt images, partial API outputs,
00:09:34or scripts exiting due to a partial failure.
00:09:36And throughout that, as you're iterating on the skill,
00:09:39a good skill creator should note the error handling for each of these and define them clearly.
00:09:44Because if it's already happened once, it can happen again.
00:09:46And it should be handled in this format.
00:09:48Define the error, then the cause, so that Claude knows,
00:09:51and then the steps to actually fix the problem.
00:09:54Again, when we tell it to build a landing page, it just loads in the skill and reads your files.
00:09:58If you already have a Next.js project, it detects that and asks you questions,
00:10:02like what the landing page is for and whether you would like AI generated images or not.
00:10:06If you say that you don't want them, it just uses its front-end resources to build the landing page.
00:10:11This is because while we were building it, we also asked Claude to go ahead and finish
00:10:16this front-end design skill, which has plenty of amazing guidelines
00:10:19for actually implementing really good-looking sites.
00:10:22And after we were done with the whole experimentation, this is what it actually generated for us.
00:10:27So you can see that this is the image we had generated,
00:10:29and it has this subtle animation effect on it.
00:10:32Other than that, it's a really clean-looking landing page, and the images aren't really overdone.
00:10:36They're only applied in places where they were actually needed.
00:10:39But when it was first generated, there were problems with the font that it was using.
00:10:43It just wasn't working well.
00:10:44So we went ahead and got this specific typography font that they experimented with,
00:10:48and this is what actually fixed the typography problems for us.
00:10:51So again, we're just recruiting different resources
00:10:54that aren't even related to this nano banana design skill,
00:10:57and we're putting them in there so that it has those capabilities where it needs them.
00:11:00In progressive disclosure, we already discussed the additional files with references and scripts.
00:11:06Now we're diving deep into references, their domain-specific intelligence.
00:11:09And while your skill is all ready for one specific domain,
00:11:12it can have these small, multiple knowledge packets as separate components as well.
00:11:16For example, in these references, we've listed design patterns,
00:11:19front-end aesthetics, and prompting rules.
00:11:21In this way, we can keep on expanding the skill's knowledge base without polluting the context window.
00:11:26Up till now, all the advice you've seen tells you how to train Claude to do tasks in a better way.
00:11:31But it doesn't tell you how to actually use it properly.
00:11:33For that, we have another video where we show you the 10 most
00:11:36updated ways to gain an advantage with Claude code.
00:11:39You're going to see the video on the end screen,
00:11:41so you might as well click that instead of searching it up.
00:11:43That brings us to the end of this video.
00:11:45If you'd like to support the channel and help us keep making videos like this,
00:11:49you can do so by using the super thanks button below.
00:11:51As always, thank you for watching, and I'll see you in the next one.