Build with AI

The Video.js skill gives coding agents the context they need to build, customize, debug, and migrate Video.js players. It teaches the agent how Video.js 10 is composed, then points it to documentation that matches the version installed in your project.

AI Quickstart

Paste this prompt into your coding agent:

Install the Video.js skill: run `npx @videojs/cli agents skills` and follow the steps for the agent you are running in. If you can't run commands, follow the install instructions at https://github.com/videojs/skills instead. Then use the Video.js skill when you work on video or audio in this project. When installation details are needed, run `npx @videojs/cli agents init --framework react` to print the version-matched choices and instructions without changing files.

Video.js Skill

The skill contains guidance and Markdown references. It does not install Video.js, run background services, or connect to an account.

Install the skill

Follow the steps for your coding agent. To print the same steps in a terminal, run:

npx @videojs/cli agents skills

Add --agent claude-code,cursor to print only those agents. --scope project or --scope local changes the Claude Code installation scope from its user default, and --global adds -g to the skills installer command. Like agents init, the command only prints instructions.

Codex

Add the Video.js plugin marketplace, then install the plugin:

codex plugin marketplace add videojs/skills
codex plugin add videojs@videojs

Start a new Codex session after installation.

Claude Code

Add the Video.js plugin marketplace, then install the plugin:

claude plugin marketplace add videojs/skills
claude plugin install videojs@videojs

Start a new Claude Code session, or run /reload-plugins in the current session.

You can invoke the skill directly with /videojs:videojs.

VS Code

Enable chat.plugins.enabled, run Chat: Install Plugin From Source from the Command Palette, and enter:

https://github.com/videojs/skills

Start a new VS Code session after installation, or reload the window.

Cursor

Open Customize, select Plugins, choose From GitHub Repository, and enter:

https://github.com/videojs/skills

Start a new Cursor session after installation, or reload the window.

Other coding agents

Use the open skills installer and select your agent when prompted:

npx skills add https://github.com/videojs/skills

Start a new session in your coding agent after installation.

Project-local installation is the default. Add -g if you want the skill available in every project.

To skip the prompts, name the agent and confirm up front, for example npx skills add https://github.com/videojs/skills --agent <agent> --yes.

Use the skill

Ask for the player you want to build or the problem you want to solve. 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.

The skill checks your framework and installation method before choosing player, skin, and media code. It also checks imports and playback setup against current documentation before handing the work back.

How skills find docs

The skill uses documentation in this order:

1. Version-matched installation instructions. npx @videojs/cli agents init lists valid choices for every framework. Adding flags prints one complete installation plan. When the project already has a different @videojs/react or @videojs/html version, the plan names the pinned command for that release. The command only returns instructions; it does not prompt, install packages, or write files.
2. Installed package docs. node_modules/@videojs/react/docs/llms.txt and node_modules/@videojs/html/docs/llms.txt index the docs shipped with each package version. These files work offline and match the code in your project.
3. Live docs. If commands cannot run, the skill reads the relevant React or HTML documentation index, then follows it to the matching installation guide.
4. Installed types. If the docs are unavailable, the skill checks package exports and TypeScript declarations instead of guessing version-specific APIs.

This order matters because most model training data describes Video.js 8. Video.js 10 has a different component model, package structure, and installation flow.

The old npx @videojs/cli docs workflow was removed. @videojs/cli now contains only agents init and agents skills, in a single file with no dependencies, so running it does not download the player packages.

Troubleshoot

If your agent does not use the skill, start a new session or reload plugins, then ask it to use the Video.js skill explicitly. If it writes videojs(), data-setup, registerPlugin, or other Video.js 8 APIs, ask it to read the installed llms.txt before changing code.

Report problems with the skill in the videojs/skills repository. Report package and documentation problems in videojs/v10.

Use the docs

You can still provide documentation directly when a tool cannot install skills.

Copy one page

Each docs page has a Copy page menu. Copy the Markdown, open the .md version, or send the page to ChatGPT or Claude.

Open a Markdown URL

Add .md to any docs URL. For this page, use:

https://videojs.org/docs/framework/react/guides/build-with-ai.md

Each docs page also advertises its Markdown URL as an alternate format so compatible tools can discover it.

Request Markdown

Request the normal docs URL with an Accept: text/markdown header:

curl -H "Accept: text/markdown" \
  https://videojs.org/docs/framework/react/guides/build-with-ai

Start from llms.txt

The llms-full.txt files contain the complete documentation corpus. Use them only when your tool requires one file because they are larger than most useful task contexts.

Related pages