Agent Plugin

Our agent plugin gives your agent the standard in one install: skills that build and review components the way the standard asks, and our MCP server, which they read it from. It follows Agent Plugins, the open format for packaging skills and MCP servers, so the same plugin works in every client that supports it. Install it shows you how.

The MCP server on its own gives your agent the standard as tools, but your agent still has to know when to reach for them, and the server's prompts only run when you start them. Skills are instructions your agent picks up on its own when a task calls for them. Ask it to build a dialog, or to review your checkout page, and it reads the contract, checks the work against every rule and cites each one by its ID, without being told how.

The plugin is in plugins/open-components in our repository. It's free, with nothing to sign in to.

Install it

Most clients install it from our repository in one or two commands, from the marketplace file at its root, which lists the plugin. Then start a new session, so your agent picks up the skills.

Claude Code

claude plugin marketplace add uxfront-com/open-components
claude plugin install open-components@open-components

That installs it for you, in every project. In a session, run the same as slash commands:

/plugin marketplace add uxfront-com/open-components
/plugin install open-components@open-components

Its skills then start with /open-components:, as in /open-components:build-component, and /mcp lists the server as plugin:open-components:open-components.

Codex

codex plugin marketplace add uxfront-com/open-components
codex plugin add open-components@open-components

Or run /plugins in Codex and install it from the marketplace's tab. Run /mcp to check that the server is connected.

GitHub Copilot

In Copilot CLI:

copilot plugin marketplace add uxfront-com/open-components
copilot plugin install open-components@open-components

In a session, use the same slash commands as in Claude Code. For Copilot's cloud agent on github.com, add the marketplace and the plugin to .github/copilot/settings.json in your repository. VS Code reads it too, and recommends the plugin to everyone who opens the repository:

{
  "extraKnownMarketplaces": {
    "open-components": {
      "source": { "source": "github", "repo": "uxfront-com/open-components" }
    }
  },
  "enabledPlugins": {
    "open-components@open-components": true
  }
}

VS Code

Run Chat: Install Plugin From Source from the Command Palette and enter https://github.com/uxfront-com/open-components. VS Code finds the plugin in the repository and installs it, after asking you to trust the source.

You can also add our repository to your marketplaces in settings.json, then search for @agentPlugins in the Extensions view and click Install:

{
  "chat.plugins.marketplaces": ["uxfront-com/open-components"]
}

Cursor

In the Cursor CLI, add our marketplace, then install the plugin from /plugin:

agent plugin marketplace add https://github.com/uxfront-com/open-components.git

In the editor, copy the plugin into your local plugins folder, then run Developer: Reload Window:

git clone --depth 1 https://github.com/uxfront-com/open-components.git /tmp/open-components
cp -R /tmp/open-components/plugins/open-components ~/.cursor/plugins/local/open-components

Kiro

Kiro calls plugins powers. Open the Powers panel, choose Add Custom Power, then Import power from GitHub, and enter the plugin's folder:

https://github.com/uxfront-com/open-components/tree/main/plugins/open-components

Hermes Agent

hermes plugins install uxfront-com/open-components/plugins/open-components --enable

That downloads only the plugin's folder. Run hermes plugins list to check that it's enabled.

OpenClaw

openclaw plugins install open-components --marketplace uxfront-com/open-components

Run openclaw plugins inspect open-components to check it, which shows its format as Agent Plugins.

OpenHands

Under Plugins, click Add plugin, set Source to github:uxfront-com/open-components and Path to plugins/open-components, then click Install. With the SDK, pass the same as a plugin source:

PluginSource(source="github:uxfront-com/open-components", repo_path="plugins/open-components")

Other clients

• Any client that supports Agent Plugins can load the plugin from a folder: clone our repository and point it at plugins/open-components. NanoClaw, for one, only takes templates from a folder, so copy it to templates/open-components, then run:

  ncl groups create --template open-components --name "Open Components"
  

• Clients that run Agent Skills but not plugins can still have the skills. This installs them in Claude Code, Codex, Cursor, Gemini CLI and dozens of other agents, from /.well-known/skills/ on this site:

  npx skills add https://opencomponents.dev
  

  
  It leaves out the MCP server, so connect it yourself, or let the skills read the standard from this site.

What it offers

Skills

Your agent picks a skill when your request matches what it's for. In most clients, you can also start one yourself, as a slash command like /build-component.

They ask for what the MCP server's prompts ask for, under the same names, then follow the steps the prompts point your agent at.

The MCP server

The plugin connects our MCP server, at https://mcp.opencomponents.dev/mcp, under the name open-components. The MCP Server page covers its tools, prompts and resources. If you've already added the server yourself, remove that entry once the plugin is installed, so your agent doesn't see every tool twice.

Where a client doesn't connect the MCP servers in a plugin, or can't reach ours, the skills read the same contracts and pages from this site, at their /raw URLs.

An example

Once the plugin is installed, just ask:

Review our Button against Open Components.

Your agent picks up review-component, reads the Button's contract with get-contract, and lists the rules the component itself meets with list-rules. Then it reports every rule as pass or fail, with its ID and the evidence from your code, and fixes the failures.