Leon van Zyl • 18:21 • 17 segments
Cloud Code plugins provide a lightweight way to package and share slash commands, sub-agents, MCP servers, and hooks, making it easy to distribute custom functionality to team members or the open source community.
Installing plugins is straightforward using the "/plugin" command - users can add marketplaces by URL, browse available plugins, select desired ones, and all underlying components will be automatically installed.
Creating your own plugin marketplace requires setting up a specific folder structure with a marketplace.json manifest file and individual plugin folders, each containing their own plugin.json file and relevant components.
Plugins can be easily deployed to GitHub repositories, allowing for public sharing and automatic updates when changes are made to the repository.
The plugin system creates opportunities for experienced developers to share their workflows and tools with others, fostering a community of reusable components that everyone can benefit from.
"This really is an</b> <b>important feature for Cloud</b> <b>Code"
00:38
"For each</b> <b>plugin, we can also provide a</b> <b>version, a category, and keywords"
08:00
"</b> <b>Now this is really important"
11:00
"But the important</b> <b>part is if we make any changes</b> <b>to the plugin on this repository, those</b>"
17:01
✓ Obsidian export ready
./data/notes/-KusSduAP1A_Claude_Code_Plugins_Just_Changed_My_Workflow_Forev.md
<b>Cloud Code just released one of my</b> <b>favorite features,</b> <b>plugins a...
<b>Plugins are a lightweight</b> <b>way to package and share any</b> <b>combinat...
<b>So let's actually have a look at using</b> <b>marketplaces and plugins in our...
<b>slash plugin press enter and here we have</b> <b>a few options. So we can</b>...
<b>order to uninstall or</b> <b>disable plugins all we have to do</b> <b>is go t...
<b>But if we go to something like UI</b> <b>components we now have this mcp.json...
<b>installed. Now that we know</b> <b>how to use Claude code plugins and</b> <b>...
<b>Then we can also provide this</b> <b>metadata object. This contains the</b> <...
<b>tutorial though, we'll just create one</b> <b>plugin. At this stage, we</b> <...
<b>work. So I'm going to press escape to</b> <b>exit out of this. And in</b> <b>...
<b>each of those to our</b> <b>plugin. In order to configure this</b> <b>folder ...
<b>plugin folder, let's create a subfolder</b> <b>called commands. This is</b> <...
<b>saying the plugin was installed. So we</b> <b>just have to restart Claude</b>...
<b>website styler. And for</b> <b>the description, use this agent to create</b> ...
<b>to mcp, I can save the shared</b> <b>cn mcp server is being pulled in because...
<b>need to create a commit and</b> <b>publish this branch. If you're</b> <b>usin...
<b>changes will automatically</b> <b>take effect in our project.</b> <b>How awes...
<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>
