<b>Cloud Code just released one of my</b>

<b>favorite features,</b>

<b>plugins and plugin marketplaces.</b>

<b>Plugins is the super elegant solution for</b>

<b>taking all of your custom</b>

<b>commands sub-agents hooks</b>

<b>and mcp servers and bundle it so that you</b>

<b>can easily share it with</b>

<b>your team members or the</b>

<b>open source community. Not only that but</b>

<b>you can also find other</b>

<b>marketplaces and in download and</b>

<b>install plugins that were developed by</b>

<b>other users. In this video</b>

<b>we'll cover two things. First</b>

<b>I'll show you how to download and use</b>

<b>plugins in your own</b>

<b>projects. Then I'll show you how to</b>

<b>build your own plugins and marketplaces.</b>

<b>Plugins are a lightweight</b>

<b>way to package and share any</b>

<b>combination of your slash commands,</b>

<b>sub-agents, mcp servers and hooks. And of</b>

<b>course you can easily</b>

<b>install plugins from other developers</b>

<b>using the slash plugin command. And</b>

<b>basically this is what</b>

<b>it's going to look like in the IDE. We</b>

<b>will have a look at this in the IDE</b>

<b>ourselves in a minute,</b>

<b>but basically how this works is you'll</b>

<b>grab a URL that contains a Cloud Code</b>

<b>marketplace and then</b>

<b>pass that into Cloud Code. This will then</b>

<b>show you all the plugins</b>

<b>that are available in that</b>

<b>marketplace. So you'll simply select the</b>

<b>ones you want and all the underlying</b>

<b>commands sub-agents</b>

<b>and hooks will automatically be</b>

<b>installed. And also moving forward</b>

<b>plugins will be our standard</b>

<b>way to bundle and share Cloud Code</b>

<b>customizations and will continue to</b>

<b>evolve the format as we add</b>

<b>more extension points. This really is an</b>

<b>important feature for Cloud</b>

<b>Code. Now the use cases should</b>

<b>be quite obvious. This makes it very easy</b>

<b>to share a curated list</b>

<b>of mcp servers and agents</b>

<b>with your team members. And because these</b>

<b>marketplaces can be deployed to GitHub,</b>

<b>open source maintainers can make changes</b>

<b>to something like the commands or agents</b>

<b>to ensure that they are used correctly.</b>

<b>And of course what I'm</b>

<b>excited about is the ability to</b>

<b>share these different workflows. So when</b>

<b>we deploy these</b>

<b>marketplaces to something like GitHub,</b>

<b>we can share it publicly and everyone can</b>

<b>benefit from it. And</b>

<b>this will also open up other</b>

<b>opportunities where experienced</b>

<b>developers can share their workflows and</b>

<b>tools with everyone else.</b>

<b>So let's actually have a look at using</b>

<b>marketplaces and plugins in our projects.</b>

<b>And afterwards we'll</b>

<b>show you how you can create your own</b>

<b>plugins and marketplaces. In the</b>

<b>description you'll find a link</b>

<b>to this GitHub repo. This is a Cloud Code</b>

<b>marketplace that was developed by</b>

<b>Anthropic themselves. We will</b>

<b>have a look at this project structure and</b>

<b>all the files that make up this</b>

<b>marketplace in the next</b>

<b>section. But at a super high level we</b>

<b>have this plugins folder</b>

<b>and in here we can see all the</b>

<b>different plugins. So we have a plugin</b>

<b>for the agent SDK. We have another plugin</b>

<b>for commit commands.</b>

<b>And this feature dev, pr review toolkit</b>

<b>and security guidance. Of</b>

<b>course when we expand each</b>

<b>of these plugins we can see all the</b>

<b>artifacts in it. So for this specific</b>

<b>plugin we have access</b>

<b>to custom subagents as well as custom</b>

<b>commands. If this plugin</b>

<b>included hooks and mcp servers</b>

<b>we would see those in this folder as</b>

<b>well. And also at the root of this</b>

<b>project we have this .cloud</b>

<b>plugin folder and when we click into that</b>

<b>we get this</b>

<b>marketplace.json file. This indicates</b>

<b>that this GitHub repo is indeed a Cloud</b>

<b>Code marketplace. So</b>

<b>really all we have to do is grab</b>

<b>the URL to this repo and in order to</b>

<b>install this marketplace</b>

<b>what we need to do is type</b>

<b>slash plugin press enter and here we have</b>

<b>a few options. So we can</b>

<b>browse and install plugins.</b>

<b>And of course as we're saying we haven't</b>

<b>set up a marketplace yet.</b>

<b>So let's actually go to add</b>

<b>marketplace. Then let's paste in that</b>

<b>GitHub repository. Let's</b>

<b>press enter. So this is loading</b>

<b>the marketplace. And now we can see all</b>

<b>the plugins that are</b>

<b>available in that marketplace.</b>

<b>So to select a plugin we can simply press</b>

<b>space. And we can select</b>

<b>more than one by the way. So</b>

<b>I'll just select everything and press i.</b>

<b>Cool so we've installed the</b>

<b>plugins and now we simply have</b>

<b>to exit out of Claude. Then let's start</b>

<b>Claude again. And now when</b>

<b>we press front slash we can</b>

<b>actually see those custom commands</b>

<b>pulling through already. But this is</b>

<b>simply going to plugin. Then</b>

<b>let's go to manage and uninstall plugins.</b>

<b>Let's press enter. And here</b>

<b>we can see all the plugins</b>

<b>that we already installed. In fact I can</b>

<b>see I never installed this</b>

<b>one. So I'm going to select</b>

<b>it and press on apply changes. Of course</b>

<b>we have to exit Claude</b>

<b>again. And when we restart Claude</b>

<b>we now have access to the agent SDK</b>

<b>commands as well. Of course we should</b>

<b>also have access to all</b>

<b>of the agents. So if I enter add agent we</b>

<b>can see the sub-agents</b>

<b>coming in from the agent SDK,</b>

<b>the feature dev plugin and more. Now in</b>

<b>order to uninstall or</b>

<b>disable plugins all we have to do</b>

<b>is go to slash plugin again. Let's go to</b>

<b>manage and uninstall</b>

<b>plugins. Let's press enter. And now</b>

<b>we can simply disable the ones we don't</b>

<b>want. And press on apply changes. This</b>

<b>just disabled all of</b>

<b>the plugins. And if we wanted to</b>

<b>uninstall a marketplace we can simply go</b>

<b>to manage marketplaces,</b>

<b>open up Claude code and click on remove</b>

<b>marketplace. So we</b>

<b>just have to confirm that</b>

<b>we want to remove all of these plugins.</b>

<b>Let's say yes. And that's it. The</b>

<b>marketplace is now gone.</b>

<b>And if we restart Claude all of these</b>

<b>custom slash commands are</b>

<b>gone. And we no longer have</b>

<b>access to those sub-agents. So the</b>

<b>example from anthropic actually doesn't</b>

<b>include any hooks and</b>

<b>mcp servers. But just to give you a quick</b>

<b>demo of that I created my</b>

<b>own Claude code marketplace</b>

<b>in my own repository. Now you don't have</b>

<b>to install this really it</b>

<b>was just part of this tutorial.</b>

<b>But if we go to something like UI</b>

<b>components we now have this mcp.json</b>

<b>file. And in this file</b>

<b>we can see the shared cn mcp server. So</b>

<b>if we wanted to install</b>

<b>this we can simply copy the url</b>

<b>of this repository. All right so let's</b>

<b>open up Claude again then</b>

<b>just do double check if we go</b>

<b>to mcp. We don't have any mcp service</b>

<b>configured. Then let's go</b>

<b>to plugin and let's go to add</b>

<b>marketplace. Let's paste in that repo.</b>

<b>And cool so from this I'm just going to</b>

<b>select UI components</b>

<b>and press enter. Let's press enter to</b>

<b>install now. And that's it. Let's exit</b>

<b>Claude. Let's go back in.</b>

<b>And now if I go to mcp we can see the</b>

<b>shared cn component that was</b>

<b>installed from that plugin.</b>

<b>So currently it's disabled. I'm just</b>

<b>going to enable it. And</b>

<b>that's it. Now we have access to</b>

<b>the shared cn mcp server all because of</b>

<b>this plugin that we just</b>

<b>installed. Now that we know</b>

<b>how to use Claude code plugins and</b>

<b>marketplaces let's move on to actually</b>

<b>building our very own</b>

<b>plugin and marketplace. Then we'll also</b>

<b>deploy it to get up so other</b>

<b>users can install it and use</b>

<b>it themselves. The first thing you want</b>

<b>to do is start with a</b>

<b>blank project. Every Claude</b>

<b>marketplace contains at least two</b>

<b>folders. And that's dot Claude plugin and</b>

<b>plugins. Claude plugin</b>

<b>will contain our marketplace manifest.</b>

<b>And the plugins folder</b>

<b>will contain all the plugins</b>

<b>available in this marketplace. Let's</b>

<b>start with the manifest. All</b>

<b>we have to do is create a file</b>

<b>called marketplace dot JSON. This file</b>

<b>contains an object with the following</b>

<b>mandatory properties.</b>

<b>First is the name of your marketplace.</b>

<b>Then we want to provide the</b>

<b>details of the owner. This</b>

<b>object contains the name and email</b>

<b>address of the maintainer of this</b>

<b>marketplace. Optionally,</b>

<b>you can also provide a URL to the owner's</b>

<b>website or get a pre-book.</b>

<b>Then we can also provide this</b>

<b>metadata object. This contains the</b>

<b>description of the marketplace, as well</b>

<b>as the current version</b>

<b>number. Finally, we have to supply a list</b>

<b>of plugins that are</b>

<b>available in this marketplace.</b>

<b>Each of these are an object that contains</b>

<b>a unique name for the</b>

<b>plugin, the path to the</b>

<b>plugin folder within this marketplace</b>

<b>folder. So in fact, at this</b>

<b>stage, we can actually create</b>

<b>that folder and it's called this website</b>

<b>dev. Then we can provide</b>

<b>a description for the tool</b>

<b>like commands, agent hooks, and tools for</b>

<b>building websites. For each</b>

<b>plugin, we can also provide a</b>

<b>version, a category, and keywords. These</b>

<b>are not actually used by any</b>

<b>agents. It simply helps you</b>

<b>to organize all of our different plugins.</b>

<b>This is actually all we</b>

<b>need to set up our marketplace.</b>

<b>If you want to add more plugins to your</b>

<b>marketplace, then it's simply</b>

<b>a matter of effectively copying</b>

<b>this object and giving the plugin a</b>

<b>different name, creating a folder for</b>

<b>that plugin. For this</b>

<b>tutorial though, we'll just create one</b>

<b>plugin. At this stage, we</b>

<b>can test if our marketplace is</b>

<b>actually working. So in order to do that,</b>

<b>we can open up our</b>

<b>terminal. Let's open up Claude Code.</b>

<b>And if you recall from the beginning of</b>

<b>this video, we can simply go to plugin,</b>

<b>then we can go to add</b>

<b>marketplace. And previously, we had to</b>

<b>provide a URL to the</b>

<b>marketplace GitHub repository. Now,</b>

<b>of course, we haven't deployed this yet.</b>

<b>So in order for us to pull in this</b>

<b>marketplace just for</b>

<b>testing, we can enter period and front</b>

<b>slash. This will look for a</b>

<b>marketplace in our current</b>

<b>directory. And we get this message saying</b>

<b>that the marketplace cannot contain</b>

<b>spaces and we need to</b>

<b>use kibab case. Cool. So I'm just going</b>

<b>to change this to Leon demo</b>

<b>marketplace. All right, so let's</b>

<b>run this again. And this time it is</b>

<b>pulling in the marketplace. As we can see</b>

<b>the one plugin that we've</b>

<b>configured called website dev. Now keep</b>

<b>in mind the website dev</b>

<b>folder is still empty. So if we</b>

<b>try to install this, it simply won't</b>

<b>work. So I'm going to press escape to</b>

<b>exit out of this. And in</b>

<b>fact, to keep things clean, I'm just</b>

<b>going to go to manage marketplaces and</b>

<b>remove our marketplace.</b>

<b>Then I'll press Y to confirm. Now let's</b>

<b>set up our first plugin. What</b>

<b>exactly are plugins in Claude</b>

<b>code? Well, they're a collection of</b>

<b>agents hooks, MCP servers and slash</b>

<b>commands. So each plugin</b>

<b>should contain these objects that relate</b>

<b>to its specific feature. For example,</b>

<b>it's how you created</b>

<b>a plugin that will do security checks on</b>

<b>your code, you could then</b>

<b>create a plugin called security</b>

<b>tools. And then all of the agents hooks</b>

<b>MCP servers and slash commands that</b>

<b>relate to security will be</b>

<b>added to this plugin. Now a marketplace</b>

<b>can contain one or many</b>

<b>different plugins. So you</b>

<b>could have your security tools plugin,</b>

<b>and you can have a separate plugin for</b>

<b>all of your UI and UX</b>

<b>tools. And we will have a look at adding</b>

<b>each of those to our</b>

<b>plugin. In order to configure this</b>

<b>folder as a Claude code plugin, we have</b>

<b>to create a subfolder called</b>

<b>dot Claude dash plugin. And</b>

<b>within this folder, create a new file</b>

<b>called plugin dot JSON.</b>

<b>Again, we'll create an object</b>

<b>that contains the name of this plugin.</b>

<b>Now this is really important.</b>

<b>This name needs to match the</b>

<b>name in our marketplace file. So this</b>

<b>name every year, we call it</b>

<b>website dev. So in the plugin,</b>

<b>we need to call it website dev as well.</b>

<b>Then we also have to provide a</b>

<b>description for simplicity</b>

<b>psych, we can actually simply copy the</b>

<b>description from this marketplace file</b>

<b>and paste it in here.</b>

<b>Then we have to provide a version. Again,</b>

<b>we can probably just copy</b>

<b>it from the marketplace file.</b>

<b>And finally, we have to provide this</b>

<b>author object containing our name and</b>

<b>email address. Really</b>

<b>simple stuff. Now let's have a look at</b>

<b>adding our first tool to</b>

<b>this plugin folder with in our</b>

<b>plugin folder, let's create a subfolder</b>

<b>called commands. This is</b>

<b>where we'll store any custom</b>

<b>commands. Now if you already have a list</b>

<b>of commands that</b>

<b>you're using your projects,</b>

<b>you can simply copy and paste them into</b>

<b>this file. But for this</b>

<b>tutorial, let's create something</b>

<b>really simple. And let's call this</b>

<b>website starter dot MD. Then for our</b>

<b>commands, we have to provide</b>

<b>a description. For example, create a</b>

<b>basic HTML web page, then we</b>

<b>can provide any prompt we want,</b>

<b>like create a simple dot HTML file based</b>

<b>on the user's requirements.</b>

<b>Of course, these commands can</b>

<b>be super complex, but I don't want to</b>

<b>spend too much time</b>

<b>looking at how to create prompts.</b>

<b>This is really about adding our commands</b>

<b>to the marketplace. So</b>

<b>with this minimal setup,</b>

<b>watch this back in our terminal, this run</b>

<b>Claude, then let's go to</b>

<b>plugins, let's add our marketplace</b>

<b>is entered dot front slash, then I'm</b>

<b>going to select this</b>

<b>plugin and press I. So this is</b>

<b>saying the plugin was installed. So we</b>

<b>just have to restart Claude</b>

<b>code. And now in Claude code,</b>

<b>when I press front slash and type</b>

<b>website, we can indeed see our custom</b>

<b>command. Now what's really</b>

<b>cool about these plugins is if I had to</b>

<b>go and create a new command, like</b>

<b>generate random names</b>

<b>dot MD, let's add some description like</b>

<b>generate random names, and</b>

<b>let's just give a prompt like</b>

<b>create a list of 20 random names. Watch</b>

<b>what happens in Claude</b>

<b>code. If I exit out of Claude</b>

<b>code, then let's go back in immediately.</b>

<b>And when I press front slash and type</b>

<b>website, we can already</b>

<b>see the new command showing up. And we</b>

<b>didn't have to reinstall the</b>

<b>marketplace or the plugin or</b>

<b>anything. So what's cool about these</b>

<b>plugins is they automatically</b>

<b>pull in all the latest changes.</b>

<b>This includes changes to the actual</b>

<b>prompt. So if I made a</b>

<b>change to this prompt right now,</b>

<b>the next time I start Claude code, all of</b>

<b>those changes will</b>

<b>automatically be pulled</b>

<b>from the marketplace and the plugin,</b>

<b>which I think is really cool. Now let's</b>

<b>move on to agents in the</b>

<b>plugin folder is create a new subfolder</b>

<b>called agents. And let's</b>

<b>create a new agent and we'll</b>

<b>just call this one website styler dot MD.</b>

<b>Now each agent needs at</b>

<b>least a name and a description.</b>

<b>And optionally, you can also provide the</b>

<b>model for the name, let's call this</b>

<b>website styler. And for</b>

<b>the description, use this agent to create</b>

<b>beautiful styles for our</b>

<b>website. This description will be</b>

<b>used by the orchestrator agent to figure</b>

<b>out when to use the sub agent, then we</b>

<b>can specify the model</b>

<b>and also go with sonnet. And again, if</b>

<b>you already have sub agents in your</b>

<b>project, you could just</b>

<b>copy them across to the subfolder. So</b>

<b>let's keep this really simple. It's a</b>

<b>your role is to improve</b>

<b>the look and feel of a website by</b>

<b>implementing proper styling,</b>

<b>ensure that a separate dot CSS</b>

<b>file exists and include beautiful</b>

<b>gradients and color tokens</b>

<b>that work well together. Something</b>

<b>like that. Of course, we can add as many</b>

<b>agents as we want. But for</b>

<b>now, let's simply restart</b>

<b>Claude code. And now when we press the</b>

<b>add sign and search for agent,</b>

<b>we can see our website styler</b>

<b>agent at the bottom of this list. Now</b>

<b>what we can also do is add</b>

<b>mcp servers in our plugin folder</b>

<b>is create a new file called dot mcp dot</b>

<b>JSON. And in this file, we</b>

<b>can add the configuration for</b>

<b>our mcp servers like this shared cn mcp</b>

<b>server over here. Because I'm using</b>

<b>Windows, I had to add</b>

<b>this CMD command. But if you're using Mac</b>

<b>or Linux or WSL, this will</b>

<b>simply be in PX without all the</b>

<b>stuff over a year. So this means when I</b>

<b>start up Claude code and go</b>

<b>to mcp, I can save the shared</b>

<b>cn mcp server is being pulled in because</b>

<b>of our plugin. How awesome</b>

<b>is that? It makes it so easy</b>

<b>to share all of these common plugins with</b>

<b>our team members. And finally hooks. If</b>

<b>you've got any hooks</b>

<b>that you want to include in this</b>

<b>marketplace, again, create a new</b>

<b>subfolder within your plugin</b>

<b>called hooks. And then within this</b>

<b>folder, create a new file called hooks</b>

<b>dot JSON, and then simply</b>

<b>add in any code related to this hook. Now</b>

<b>you can actually do some</b>

<b>really cool stuff with hooks,</b>

<b>like play a sound whenever the change</b>

<b>completes, or even send notifications to</b>

<b>your phone. I've got</b>

<b>a dedicated video on that that I'll link</b>

<b>in the description of this</b>

<b>video. How do we share it with</b>

<b>the rest of the world? Well, all we have</b>

<b>to do is initialize this</b>

<b>folder as a GitHub repository,</b>

<b>you can do it in the terminal by running</b>

<b>git init. Or if you're using</b>

<b>an IDE, you can simply click on</b>

<b>initialize repository. Either way, we now</b>

<b>need to create a commit and</b>

<b>publish this branch. If you're</b>

<b>using an IDE, it will simply ask you what</b>

<b>the repository's name</b>

<b>should be. So I'll just call</b>

<b>this Claude code plugins tutorial, and</b>

<b>create this as a public repository. And</b>

<b>we should now see our</b>

<b>marketplace on GitHub. Just to test all</b>

<b>of this out, I'm actually going to</b>

<b>uninstall the marketplace.</b>

<b>So under marketplaces, let's actually</b>

<b>remove this marketplace,</b>

<b>I'll press Y. And that's it.</b>

<b>So what I can do now is simply copy this</b>

<b>URL, then let's start</b>

<b>Claude code, and let's go to</b>

<b>plugin, let's go to add marketplace. And</b>

<b>this time we'll paste in</b>

<b>the URL to our GitHub repo.</b>

<b>Cool. So we can go back. And now we're</b>

<b>connected to our marketplace</b>

<b>on GitHub. We can of course</b>

<b>install and manage the plugins as we did</b>

<b>before. But the important</b>

<b>part is if we make any changes</b>

<b>to the plugin on this repository, those</b>

<b>changes will automatically</b>

<b>take effect in our project.</b>

<b>How awesome is that? If you enjoyed this</b>

<b>video, then hit the like</b>

<b>button and hit subscribe to</b>

<b>support my channel. I create a lot of</b>

<b>content on Claude code. So by</b>

<b>subscribing, you'll stay</b>

<b>notified whenever I release a new video.</b>

<b>Thank you for watching. I'll see you in</b>

<b>the next one. Bye bye.</b>