skills.rest
videojs
videojsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

create-html-component

Creates Video.js custom-element UI components with core contracts, styling hooks, and tests.

931|91|Updated Aug 13, 2025
Search Tags:#web components#custom elements#typeScript#videojs#media player#UI Component#reactive element
One-click install
npx skills add https://github.com/videojs/v10 --skill create-html-component
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: create-html-component
Source: https://github.com/videojs/v10/tree/main/.agents/skills/create-html-component
Command: npx skills add https://github.com/videojs/v10 --skill create-html-component

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Building Video.js v10 UI controls requires coordinating core state contracts, custom element adapters, registration entries, styling hooks, and tests across multiple packages, which is error-prone without a defined workflow.

Core Features & Use Cases

  • Component Contract Design: Classifies requests as reusable primitives or app/skin compositions, then defines state owners, semantics, APIs, and styling contracts.
  • Layered Implementation: Places runtime-neutral state in packages/core, DOM interaction in packages/core/src/dom/ui, and keeps the custom element a thin adapter using ReactiveElement lifecycle.
  • Registration and Testing: Registers elements with safeDefine under packages/html/src/define/ui, updates HTMLElementTagNameMap, and adds focused core and HTML tests.
  • Use Case: When asked to create an HTML chapter-skip control, produce a scoped core contract, thin custom element, definition entry, headless styling hooks, cleanup logic, and focused tests.

Quick Start

Ask the assistant to create a new Video.js HTML UI control such as a chapter-skip button following the create-html-component workflow.

Frequently Asked Questions about create-html-component

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a custom element UI component in Video.js v10?▼

Define the state contract in packages/core/src/core/ui, add DOM interaction in packages/core/src/dom/ui, then build a thin custom element adapter extending UIElement or MediaButtonElement. Register it with safeDefine under packages/html/src/define/ui and update HTMLElementTagNameMap.

How do Video.js v10 components expose styling hooks?▼

Components expose discrete state through mapped data-* attributes and dynamic layout values through stable CSS custom properties. Each token needs a defined owner, units, and fallback, while purely visual structure is left to skins and CSS.

Where does component state logic live in the videojs/v10 monorepo?▼

Runtime-neutral state and actions belong in packages/core/src/core/ui, while reusable DOM interaction goes in packages/core/src/dom/ui. The custom element in packages/html stays a thin adapter that sends properties down and semantic events up.

When should I use controllers instead of properties in Video.js elements?▼

Use controllers or context only across a real ownership boundary; otherwise send properties down and semantic events up. If an API starts coordinating independent behavior, extract another element or controller instead of adding modes and options.

What cleanup is required when a Video.js custom element disconnects?▼

Clean up subscriptions, observers, listeners, locks, and async work across disconnect and destroy. Let ReactiveElement own rendered DOM updates through its lifecycle so scheduling, updateComplete, and tests remain authoritative.

Related Skills

Explore More Software Engineering Skills→
videojsvideojs
888

design

Draft Video.js 10 design documents capturing architectural decisions and component interfaces.

Official
Basic
GCWingGCWing
1.9k

create-bitfun-skin

Author, validate, and package sparse .bitfun-appearance skin packages against the BitFun Appearance contract.

Community
Advanced
ancolemanancoleman
503

theming-components

Manage design tokens and switch themes with CSS custom properties.

Community
Advanced
mmsu-pawpatrolmmsu-pawpatrol
2

videojs-react

Integrate Video.js v10 components and controls into React apps.

Official
Intermediate