# Video.js Agent Skills
> Video.js is built at [Mux](https://www.mux.com) by the teams behind Video.js, Plyr, Vidstack, and Media Chrome.
Official agent skills for building customizable, accessible video and audio players with [Video.js 10](https://videojs.org), an open-source library of composable, framework-native components for React and the web.
The plugin ships three skills: [`videojs`](skills/videojs/SKILL.md) to install and configure a player, [`videojs-skin`](skills/videojs-skin/SKILL.md) to design your own skin, and [`videojs-ui`](skills/videojs-ui/SKILL.md) to build and review player UI. Each is deliberately thin. They teach an agent how Video.js 10 is put together, where to find installation instructions and docs that match the installed version, and what to check before handing code back. The Video.js CLI prints version-matched installation plans, and the player packages ship their docs under `docs/`, so the agent can work locally and offline instead of relying on training data or a live fetch.
## Installing
Choose one installation method. Using the plugin does not start an MCP server, register hooks, run scripts, or connect an account. To print these steps in a terminal, run `npx @videojs/cli agents skills`.
### Codex
Install from the Video.js plugin marketplace:
```sh
codex plugin marketplace add videojs/skills
codex plugin add videojs@videojs
```
Start a new Codex session after installation.
### Claude Code plugin
Run these commands in your shell:
```sh
claude plugin marketplace add videojs/skills
claude plugin install videojs@videojs
```
Start a new Claude Code session, or run `/reload-plugins` in an open session, after installation. From inside Claude Code, the equivalent commands are `/plugin marketplace add videojs/skills` and `/plugin install videojs@videojs`.
### VS Code / GitHub Copilot
Install directly from this repository:
1. Enable `chat.plugins.enabled` in VS Code settings.
2. Open the Command Palette and run **Chat: Install Plugin From Source**.
3. Enter `https://github.com/videojs/skills`.
### Cursor
Open **Customize**, select **Plugins**, choose **From GitHub Repository**, and enter `https://github.com/videojs/skills`. The repository's Cursor marketplace installs all three skills.
### npx skills
```sh
npx skills add https://github.com/videojs/skills
```
Select your agent when prompted. Installation is project-local by default; add `-g` to install globally.
### Manual
Clone this repository and copy each folder in `skills/` (`videojs`, `videojs-skin`, and `videojs-ui`) into the appropriate skill directory:
| Agent | Skill directory |
| --- | --- |
| Claude Code | `~/.claude/skills/` |
| Cursor | `~/.cursor/skills/` |
| OpenCode | `~/.config/opencode/skills/` |
| OpenAI Codex | `~/.codex/skills/` |
| Pi | `~/.pi/agent/skills/` |
### Or let your agent install it
Paste this into your agent:
```text
Install the Video.js skills using one method. In Codex, run `codex plugin marketplace add videojs/skills`, then `codex plugin add videojs@videojs`, and start a new session. In Claude Code, run `claude plugin marketplace add videojs/skills`, then `claude plugin install videojs@videojs`, and start a new session or run `/reload-plugins`. In VS Code or Cursor, install `https://github.com/videojs/skills` as a plugin from source. For another agent, run `npx skills add https://github.com/videojs/skills` and select the agent. Then use the Video.js skills when working on this project.
```
## Use
Ask your agent, for example:
> Add an HLS player with captions and a quality menu to the product page using Video.js.
> Play this Mux playback ID in our Next.js app with Video.js, with Mux Data turned on.
> Migrate this Video.js 8 embed to Video.js 10 in React.
> Design a Video.js skin for our podcast player that matches our brand.
In Claude Code, you can invoke the skills explicitly with `/videojs:videojs`, `/videojs:videojs-skin`, and `/videojs:videojs-ui`.
| Skill | Purpose |
| --- | --- |
| [videojs](skills/videojs/SKILL.md) | Build customizable, accessible Video.js 10 video and audio players; choose the framework, install method, use case, skin, and media source; locate version-matched bundled docs; verify imports and playback setup |
| [videojs-skin](skills/videojs-skin/SKILL.md) | Design your own Video.js skin: set up a standalone project and preview workbench with `npx @videojs/cli skin create`, build the skin's look, layout, and motion within the player's accessibility and structure rules, review it across sizes, languages, and playback states, and publish the workbench |
| [videojs-ui](skills/videojs-ui/SKILL.md) | Build, polish, and review player UI such as controls, menus, time displays, icon states, and motion, adjusting interface-craft skills for UI that sits over moving video, with a media-player accessibility review |
With your permission, the skills can also draft bug reports, docs feedback, and friction logs for [videojs/v10](https://github.com/videojs/v10). It shows you the exact text first, and nothing is sent unless you say so.
### Design your own skin
Build a Video.js skin from a starting point, preview it in a local workbench across player sizes, languages, and playback settings, and publish the workbench to share. Nothing needs cloning; choose how you want to work. Either way you need [Node.js](https://nodejs.org) installed; the skill checks for it and explains how to install it if it's missing.
**With your agent.** Install the skills using any method above, then ask, for example:
> Help me design my own Video.js skin for our podcast player.
The `videojs-skin` skill asks which framework, styling, starting skin, and player type you want, runs the CLI to create the project and start the workbench, then works on the skin with you. It publishes the workbench to Vercel, Netlify, or Cloudflare Pages only when you ask, and you sign in to the host yourself.
**From the command line.** Run the same command the skill uses and answer its questions:
```sh
npx @videojs/cli skin create
```
The project's `README.md` explains the workbench and publishing, and its `AGENTS.md` points any agent you bring in later at the `videojs-skin` skill.
### Companion skills for player UI
The `videojs-skin` and `videojs-ui` skills pair with these optional skills from other authors, and suggest them when they would help:
- [Jakub Krehel's skills](https://github.com/jakubkrehel/skills), the [Interfaces cheat sheet](https://interfaces.dev/cheat-sheet) as one skill per area: `better-ui`, `better-typography`, `better-colors`, `better-accessibility`, `better-layout`, `better-writing`, and the combined `better-interface` review.
- [Emil Kowalski's skills](https://github.com/emilkowalski/skills), especially `emil-design-eng`, `animate`, and `review-animations`, for control-bar polish and motion.
- [shadcn/ui's official skill](https://ui.shadcn.com/docs/skills) for theming conventions, and registry commands when the skin moves into an app that uses shadcn.
- An audit skill for a final pass, such as `web-design-guidelines` from [Vercel's agent skills](https://github.com/vercel-labs/agent-skills) or `accessibility` from [Addy Osmani's web quality skills](https://github.com/addyosmani/web-quality-skills).
Video.js docs remain the source of truth for player structure, state, accessibility, and Video.js registry commands.
## How the docs are found
1. `npx @videojs/cli agents init` for complete, version-matched installation instructions. Run it from the app directory that owns or will own the player package. The command only prints instructions.
2. `node_modules/@videojs/<html|react>/docs/llms.txt`, bundled with every release.
3. [videojs.org](https://videojs.org/docs/framework/html/llms.txt) as Markdown for docs beyond installation when nothing is installed yet, or when commands cannot run, with pre-release pages on [main.videojs.org](https://main.videojs.org/llms.txt).
See the [Build with AI](https://videojs.org/docs/framework/html/guides/build-with-ai) guide for other ways to feed Video.js docs to your tools.
## Contributing
Keep each `SKILL.md` short and stable across releases. Version-specific detail belongs in the docs that ship inside the packages, and conditional detail belongs in that skill's `references/` folder. State each rule once, in the skill that owns it, and point to it from the others. Run `node scripts/validate-plugin.mjs` before opening a pull request; it checks every folder in `skills/`. Open an issue or pull request in this repository for the skills, and in [videojs/v10](https://github.com/videojs/v10) for the docs it points to.
## License
[Apache-2.0](LICENSE).