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

create-react-component

Create Video.js React UI components with core state contracts, compound parts, and styling hooks.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Building media player UI components in React requires consistent decisions about state ownership, component boundaries, render customization, and styling contracts. This Skill guides the creation or modification of Video.js React UI components so they follow the framework's established architecture instead of ad-hoc patterns.

Core Features & Use Cases

  • Component Contract Design: Classify requests as reusable primitives or app/skin compositions, then define state owners, semantics, APIs, optional parts, and opt-outs.
  • Layered Architecture Guidance: Place runtime-neutral state in packages/core, DOM interaction in the DOM layer, and narrow player-state subscriptions in React.
  • Compound Parts & Exports: Build compound components with tree-shakeable ESM namespace exports, render escape hatches, and data-attribute/CSS-variable styling hooks.
  • Use Case: When asked to create a React chapter-skip control, produce a scoped core contract, composable React adapter, stable styling hooks, deliberate render customization, exports, and focused tests.

Quick Start

Create a new Video.js React UI component for a playback speed control following the framework's component architecture.

Frequently Asked Questions about create-react-component

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

FAQPage Schema
How do I create a React UI component for Video.js v10?▼

Start by classifying the request as a reusable primitive or app/skin composition, then define its state owner, semantics, APIs, and styling contract. Put runtime-neutral state in packages/core, reuse createMediaButton when its contract fits, and add focused tests for rendered behavior.

How to build compound components in the Video.js React package?▼

Add a compound part only for a semantic, focusable, placeable, omittable, or replaceable node, keeping context values narrow and scoped to the owning root. Export compound APIs as tree-shakeable ESM namespaces using export * as Name from './index.parts' with parts as direct re-exports.

When should I use createMediaButton versus UIComponentProps?▼

Reuse createMediaButton when its contract fits the control's behavior. Otherwise use UIComponentProps with renderElement so DOM props, event handlers, state callbacks, and refs compose correctly for custom components.

Does Video.js v10 React support custom rendering of components?▼

Yes, components preserve the default semantic element while allowing deliberate replacement through the render prop. Omitted parts and unsupported features must not leave hidden behavior or required markup behind.

How should styling hooks work in Video.js React components?▼

Expose discrete state through mapped data-* attributes and dynamic layout values through stable CSS custom properties, leaving visual defaults to skins and CSS. Complex selectors like :has() introduced by composition signal the primitive boundary or styling hooks need improvement.

Related Skills

Explore More Software Engineering Skills→
remimoulremimoul

shadcn-ui

Implement accessible shadcn/ui components with Radix UI and Tailwind CSS.

Community
Intermediate
TitoPrauseeTitoPrausee

vite-react-library-setup

Convert an unbuilt React project into a publishable Vite 5 library.

Community
Intermediate
langfuselangfuse
34.0k

vercel-composition-patterns

Guides React component refactoring using compound components, context providers, and composition patterns.

Official
Intermediate
dylantarredylantarre
38

layout-primitives

Create reusable layout primitives with CSS flexbox, grid, and React components.

Community
Basic