# Build with AI Install the Video.js skill and give AI coding agents version-matched docs for building and migrating players The [Video.js skill](https://github.com/videojs/skills) 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: **Terminal** ```sh 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: **Terminal** ```sh 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: **Terminal** ```sh 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: ```text 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: ```text 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: **Terminal** ```sh 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 --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](https://videojs.org/docs/framework/react/llms.txt) or [HTML](https://videojs.org/docs/framework/html/llms.txt) 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](https://github.com/videojs/skills/issues). Report package and documentation problems in [videojs/v10](https://github.com/videojs/v10/issues). ## 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: ```text 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: **Terminal** ```sh curl -H "Accept: text/markdown" \ https://videojs.org/docs/framework/react/guides/build-with-ai ``` ### Start from llms.txt [`videojs.org/docs/framework/react/llms.txt`](https://videojs.org/docs/framework/react/llms.txt) lists every React guide and reference page with a short description. Give the index to your tool, then load only the pages the task needs. 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 ### Guides - [Installation](https://videojs.org/docs/guides/installation/react): Install Video.js packages and build an accessible, customizable video player with composable controls - [Architecture](https://videojs.org/docs/framework/react/guides/architecture): How Video.js players are structured — state, UI, media, and extensions - [Build your own UI component](https://videojs.org/docs/framework/react/guides/build-your-own-component): Create custom player controls that read state, dispatch actions, and stay accessible. --- React documentation: https://videojs.org/docs/framework/react/llms.txt All documentation: https://videojs.org/llms.txt