New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Create HTML Component

by videojs in videojs/video.js

Create or change Video.js custom-element UI components. An agent skill from videojs/video.js.

Custom licenceAuto-check passed

Install Create HTML Component

skills CLI
$ npx skills add videojs/video.js --skill create-html-component -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install videojs/video.js create-html-component --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/videojs/video.js.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/create-html-component .claude/skills/create-html-component && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
create-html-component
GitHub stars
40k
Token cost
~729 tokens
SKILL.md length
347 words
Files
1
Skills in repo
38
Repo updated
First seen
Licence
Custom licence

At a glance

Create or change Video.js custom-element UI components. An agent skill from videojs/video.js.

  • Works in 8 steps: Classify the request as a reusable… → Put runtime-neutral state and actions in… → Match the nearest UIElement or… → …
  • HTML component boundaries
  • SKILL.md covers Workflow and Example
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Create HTML Component is an agent skill from videojs/video.js. Create or change Video.js custom-element UI components. Use for HTML component boundaries, properties, events, controllers, light-DOM parts, styling hooks, registration, or lifecycle.

Its SKILL.md is about 730 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

The repository describes itself as: Video.js v10 - open source media player framework for HTML and React.

When your agent uses it

  • HTML component boundaries
  • Light-DOM parts

Example prompts

  • “/create-html-component”

Workflow steps

8 steps, taken from the first numbered list in SKILL.md.

  1. Classify the request as a reusable primitive or app/skin composition before defining its contract. Then define the state owner, semantics…
  2. Put runtime-neutral state and actions in packages/core/src/core/ui/; put reusable DOM interaction in packages/core/src/dom/ui/; keep the…
  3. Match the nearest UIElement or MediaButtonElement pattern. Send properties down and semantic events up; use controllers or context only…
  4. Let ReactiveElement own rendered DOM updates: derive changes from reactive properties and controller state, then apply them through its…
  5. Add markup for semantics, focus, content, or parts consumers must place, omit, or replace. Leave purely visual structure to skins, CSS, or…
  6. Expose discrete state through mapped data-* attributes and dynamic layout values through stable CSS custom properties. Define each token's…
  7. Keep the element class free of registration side effects. Register it with safeDefine under packages/html/src/define/ui/, update…
  8. Clean up subscriptions, observers, listeners, locks, and async work across disconnect and destroy. Add focused core and HTML tests; verify…

What it can do on your machine

Read from SKILL.md and the folder at commit 50f59a2. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Create HTML Component loads about 729 tokens when it runs. Until then it costs about 51 tokens; SKILL.md has 347 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~51
When it runs · the whole SKILL.md, loaded when a task matches
~729

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

Its licence (Custom licence) doesn't allow us to republish the file, so here is its outline and opening line. It has 347 words (~729 tokens).

“Read the relevant core contract, nearest HTML element and tests, definition entry, and UI design record before choosing a pattern. Use packages/html/src/ui/play-button/ for a simple control and packages/html/src/ui/slider/ for a compound control. Read packages/element/README.md when changing reactive properties, lifecycle, or…”

— opening of SKILL.md by videojs, Custom licence
name
create-html-component

Read the full SKILL.md on GitHub

Files

Just SKILL.md in .agents/skills/create-html-component of videojs/video.js.

Open the folder on GitHubat commit 50f59a2

Used in 1 other repository

We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders. This page covers the copy in videojs/video.js, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Create HTML Component next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Create HTML Component compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Create HTML Component this skillvideojs/video.js40k—~729Automated safety check: PassCustom licence
Decorative Elementsthedaviddias/Front-End-Checklist74k—~672Automated safety check: PassMIT
Scaffold Elementremotion-dev/remotion62k—~202Automated safety check: PassCustom licence
Html5 Semantic Elementsthedaviddias/Front-End-Checklist74k—~449Automated safety check: PassMIT
Custom Element Accessibilitythedaviddias/Front-End-Checklist74k—~655Automated safety check: PassMIT
Upload Element Previewsremotion-dev/remotion62k—~265Automated safety check: PassCustom licence

Similar skills

  • Decorative Elements

    thedaviddias/Front-End-Checklist

    A skill your agent uses when reviewing rendered HTML, interactive components, or design-system patterns related to Hide decorative elements from assistive technology.

    74k GitHub stars~672 tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Scaffold Element

    remotion-dev/remotion

    Official

    Scaffold a new Remotion Element for development in the docs Remotion Studio.

    62k GitHub stars~202 tokensUpdated today
    Media & CreativeAuto-check passed

  • Html5 Semantic Elements

    thedaviddias/Front-End-Checklist

    A skill your agent uses when reviewing templates, rendered HTML, or shared components related to Use semantic HTML elements.

    74k GitHub stars~449 tokensUpdated yesterday
    Auto-check passed

  • Custom Element Accessibility

    thedaviddias/Front-End-Checklist

    A skill your agent uses when reviewing custom element class definitions or Web Component source code to check for missing ARIA reflection, keyboard handling, and form association.

    74k GitHub stars~655 tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Upload Element Previews

    remotion-dev/remotion

    Official

    Upload a Remotion Element's preview assets to remotion.media and replace local preview URLs.

    62k GitHub stars~265 tokensUpdated today
    Media & CreativeAuto-check passed

  • Element Hiding

    thedaviddias/Front-End-Checklist

    A skill your agent uses when reviewing a website for layout and functionality issues caused by adblocker filter rules targeting common ad-related class names and IDs.

    74k GitHub stars~596 tokensUpdated yesterday
    Legal & ComplianceAuto-check passed

More from videojs/video.js

All 38 skills in this repo

  • Commit PR

    videojs/video.js

    Commit, push, and create or update a Video.js pull request. An agent skill from videojs/video.js.

    40k GitHub stars~445 tokensUpdated today
    Auto-check passed

  • Maintain Tests

    videojs/video.js

    Gate and audit test value. An agent skill from videojs/video.js.

    40k GitHub stars~2.2k tokensUpdated today
    Auto-check passed

  • Write API Reference

    videojs/video.js

    Write generated Video.js API reference pages. An agent skill from videojs/video.js.

    40k GitHub stars~804 tokensUpdated today
    Auto-check passed

  • Write Docs

    videojs/video.js

    Write Video.js guides, concepts, READMEs, and JSDoc. An agent skill from videojs/video.js.

    40k GitHub stars~741 tokensUpdated today
    Auto-check passed

  • Write Locale Translations

    videojs/video.js

    Translate or audit the values in a Video.js locale pack. An agent skill from videojs/video.js.

    40k GitHub stars~723 tokensUpdated today
    Auto-check passed

  • Change Spf Behavior

    videojs/video.js

    Change SPF playback-engine behaviors. An agent skill from videojs/video.js.

    40k GitHub stars~451 tokensUpdated today
    Auto-check passed

Questions about Create HTML Component

What does Create HTML Component do?

Create or change Video.js custom-element UI components. An agent skill from videojs/video.js. js.js custom-element UI components.

When should I use Create HTML Component?

Create HTML Component fits situations like: HTML component boundaries; light-DOM parts.

How do I install Create HTML Component in Claude Code?

Run `npx skills add videojs/video.js --skill create-html-component -a claude-code`. Or copy the skill folder (.agents/skills/create-html-component in videojs/video.js) into .claude/skills/create-html-component in your project. Claude Code loads it when a task matches its description.

How do I install Create HTML Component in Codex?

Run `npx skills add videojs/video.js --skill create-html-component -a codex`. Or copy the skill folder (.agents/skills/create-html-component in videojs/video.js) into .agents/skills/create-html-component in your project. Codex loads it when a task matches its description.

Can I use Create HTML Component in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add videojs/video.js --skill create-html-component -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/create-html-component, .gemini/skills/create-html-component, .github/skills/create-html-component and .opencode/skills/create-html-component in your project.

What does Create HTML Component need to run?

SKILL.md names no scripts, command-line tools or credentials: Create HTML Component is instructions for the agent only.

Does Create HTML Component access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Create HTML Component safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Create HTML Component use?

Create HTML Component has a licence file (the repository's licence) that doesn't match a standard licence. Read it on GitHub before reusing the skill.

How many tokens does Create HTML Component use?

About 729 tokens (SKILL.md is roughly 2.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Create HTML Component?

Skills that share tags, products or a category with Create HTML Component: Decorative Elements (thedaviddias/Front-End-Checklist, 74k stars), Scaffold Element (remotion-dev/remotion, 62k stars), Html5 Semantic Elements (thedaviddias/Front-End-Checklist, 74k stars) and Custom Element Accessibility (thedaviddias/Front-End-Checklist, 74k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Create HTML Component?

videojs (a GitHub organization) maintains it in videojs/video.js, which has 39,909 GitHub stars. The repository holds 38 skills in this directory. The repository was last updated on October 7, 2026.

Source: videojs/video.js on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.