feat(skin): generate framework skins from registry

[mihar-22]

Summary

• generate React CSS skins from the canonical prepared registry graph without a second VJSC transform
• keep package-facing skin components as thin wrappers with the existing props contract and exact JS/CSS export filenames
• move handwritten Background sources into Skins and generate all framework outputs as ignored build artifacts
• replace tracked React CSS skin implementations with the shared generator
• make framework package tasks wait for the prepared registry through Vite+
• expose reusable VJSC graph and style-generation APIs rather than duplicating registry types or build logic
• keep the existing site source viewer compatible with generated package facades until it is replaced later in the stack
• preserve complete, byte-stable CSS across consecutive builds

Verification

• VJSC, Skins, React, and site unit suites
• focused framework-generator tests
• existing site skin-source generation
• consecutive cold registry builds with zero second-pass writes
• clean-output React and Sandbox builds with exact skin exports
• pnpm build:packages
• pnpm typecheck
• pnpm lint
• pnpm check:workspace
• generated framework artifacts are ignored and untracked

Closes #2492

Stack

• Depends on test(skin): validate Shadcn registry installs #2551.
• Followed by feat(html): generate VJSC skin templates #2546.

---

Note

Medium Risk
Large-scale swap of tracked player UI implementations for generated output; public API is preserved via wrappers but any generator or graph drift could change runtime DOM/CSS across all presets.

Overview
React preset skins (skin.tsx, minimal-skin.tsx, and matching CSS) are no longer maintained by hand. They are generated from the canonical VJSC component graph during @videojs/skins#generate (renamed from prepare:shadcn) and written under packages/react/src/internal/skins/ plus thin public wrappers that keep the same export names and props (renderPoster, etc.). Those paths are gitignored; Background remains authored under packages/skins/framework/react/ and is copied in by the generator.

A new skin-primitives module gives generated skins an acyclic import surface into React UI primitives. React build, root typecheck:workspace, and prepare:dev now depend on @videojs/skins#generate. React no longer bundles @videojs/skins at pack time; CSS is copied from package src presets. Preset barrels drop Tailwind skin re-exports.

VJSC gains shared graph helpers (module collection, import rewriting, merged stylesheet emission) used by both the Shadcn registry and the new framework generator. cn accepts false/null; site ejected-skins inlining follows forwarded exports through skin-primitives. Tests were updated for generated markup class names and decoupled from @videojs/skins Tailwind tokens.

^{Reviewed by Cursor Bugbot for commit 8e8f827. Bugbot is set up for automated code reviews on this repo. Configure here.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
v10-sandbox	Ready	Preview	Sep 3, 2026 6:57pm UTC

[pkg-pr-new]

• @videojs/sandbox

@videojs/core

pnpm add https://pkg.pr.new/@videojs/core@2545

@videojs/element

pnpm add https://pkg.pr.new/@videojs/element@2545

@videojs/html

pnpm add https://pkg.pr.new/@videojs/html@2545

@videojs/media

pnpm add https://pkg.pr.new/@videojs/media@2545

@videojs/react

pnpm add https://pkg.pr.new/@videojs/react@2545

@videojs/spf

pnpm add https://pkg.pr.new/@videojs/spf@2545

@videojs/store

pnpm add https://pkg.pr.new/@videojs/store@2545

@videojs/utils

pnpm add https://pkg.pr.new/@videojs/utils@2545

commit: 5b7ca50

[github-actions]

📦 Bundle Size Report

🎨 @videojs/html — no changes

Presets (7)

Entry	Initial	Lazy
/video (default)	62.61 kB	56.87 kB
/video (default + hls)	201.59 kB	56.87 kB
/video (minimal)	62.33 kB	56.87 kB
/video (minimal + hls)	201.25 kB	56.87 kB
/audio (default)	52.20 kB	56.87 kB
/audio (minimal)	48.36 kB	56.87 kB
/background	11.52 kB	56.87 kB

Media (18)

Entry	Initial
/media/mux-video	142.40 kB
/media/mux-audio	142.23 kB
/media/background-video	1.16 kB
/media/cloudflare-video	6.28 kB
/media/dash-video	211.61 kB
/media/hls-audio	22.09 kB
/media/hls-background-video	16.80 kB
/media/hls-video	28.04 kB
/media/hlsjs-video	141.22 kB
/media/mux-background-video	16.83 kB
/media/native-hls-video	7.57 kB
/media/shaka-video	199.18 kB
/media/spotify-audio	6.27 kB
/media/tiktok-video	6.33 kB
/media/twitch-video	6.22 kB
/media/vimeo-video	13.05 kB
/media/wistia-video	60.23 kB
/media/youtube-video	6.81 kB

Extensions (2)

Entry	Initial
/extensions/google-cast	6.52 kB
/extensions/mux-data	26.94 kB

Players (5)

Entry	Initial	Lazy
/video/player	9.70 kB	56.87 kB
/audio/player	6.14 kB	56.87 kB
/background/player	4.46 kB	56.87 kB
/live-video/player	9.06 kB	56.87 kB
/live-audio/player	6.15 kB	56.87 kB

Skins (29)

Entry	Type	Initial	Lazy
/video/minimal-skin.css	css	6.63 kB	—
/video/skin.css	css	6.45 kB	—
/video/minimal-skin	js	60.80 kB	56.87 kB
/video/minimal-skin2	js	7.18 kB	—
/video/skin	js	61.00 kB	56.87 kB
/video/skin2	js	7.05 kB	—
/audio/minimal-skin.css	css	4.96 kB	—
/audio/skin.css	css	4.89 kB	—
/audio/minimal-skin	js	46.87 kB	56.87 kB
/audio/minimal-skin2	js	5.36 kB	—
/audio/skin	js	50.69 kB	56.87 kB
/audio/skin2	js	5.32 kB	—
/background/skin.css	css	139 B	—
/background/skin	js	9.77 kB	56.87 kB
/background/skin2	js	187 B	—
/live-video/minimal-skin.css	css	6.63 kB	—
/live-video/skin.css	css	6.45 kB	—
/live-video/minimal-skin	js	54.96 kB	56.87 kB
/live-video/minimal-skin2	js	7.18 kB	—
/live-video/skin	js	57.50 kB	56.87 kB
/live-video/skin2	js	7.05 kB	—
/live-audio/minimal-skin.css	css	4.96 kB	—
/live-audio/skin.css	css	4.89 kB	—
/live-audio/minimal-skin	js	39.71 kB	56.87 kB
/live-audio/minimal-skin2	js	5.36 kB	—
/live-audio/skin	js	43.34 kB	56.87 kB
/live-audio/skin2	js	5.32 kB	—
/global.css	css	190 B	—
/shared.css	css	118 B	—

UI Components (50)

Entry	Initial	Lazy
/ui/airplay-button	11.26 kB	56.87 kB
/ui/alert-dialog	9.44 kB	56.87 kB
/ui/audio-track-radio-group	11.38 kB	56.87 kB
/ui/buffering-indicator	8.61 kB	56.87 kB
/ui/captions-button	11.51 kB	56.87 kB
/ui/captions-radio-group	11.46 kB	56.87 kB
/ui/cast-button	11.25 kB	56.87 kB
/ui/container	9.47 kB	56.87 kB
/ui/controls	8.96 kB	56.87 kB
/ui/controls-backdrop	1.69 kB	56.87 kB
/ui/controls-content	1.67 kB	56.87 kB
/ui/dialog	9.35 kB	56.87 kB
/ui/dialog-backdrop	1.70 kB	56.87 kB
/ui/dialog-close	2.06 kB	56.87 kB
/ui/dialog-description	1.69 kB	56.87 kB
/ui/dialog-popup	1.90 kB	56.87 kB
/ui/dialog-title	1.70 kB	56.87 kB
/ui/error-dialog	13.01 kB	56.87 kB
/ui/fullscreen-button	11.27 kB	56.87 kB
/ui/gesture	9.56 kB	56.87 kB
/ui/hotkey	9.97 kB	56.87 kB
/ui/live-button	9.74 kB	56.87 kB
/ui/menu	20.47 kB	56.87 kB
/ui/mute-button	11.28 kB	56.87 kB
/ui/pip-button	11.22 kB	56.87 kB
/ui/play-button	11.23 kB	56.87 kB
/ui/playback-rate-button	11.32 kB	56.87 kB
/ui/playback-rate-radio-group	11.37 kB	56.87 kB
/ui/popover	8.56 kB	56.87 kB
/ui/poster	8.67 kB	56.87 kB
/ui/quality-radio-group	11.97 kB	56.87 kB
/ui/seek-button	11.27 kB	56.87 kB
/ui/seek-indicator	12.69 kB	56.87 kB
/ui/seek-indicator-value	1.10 kB	—
/ui/slider	12.12 kB	56.87 kB
/ui/status-announcer	10.59 kB	56.87 kB
/ui/status-indicator	13.03 kB	56.87 kB
/ui/status-indicator-value	1.10 kB	—
/ui/thumbnail	9.84 kB	56.87 kB
/ui/time	10.88 kB	56.87 kB
/ui/time-slider	15.04 kB	56.87 kB
/ui/time-slider-chapter-title	8.79 kB	56.87 kB
/ui/time-slider-chapters	9.76 kB	56.87 kB
/ui/title	8.17 kB	56.87 kB
/ui/tooltip	9.95 kB	56.87 kB
/ui/volume-indicator	13.03 kB	56.87 kB
/ui/volume-indicator-fill	1.11 kB	—
/ui/volume-indicator-value	1.10 kB	—
/ui/volume-popover	14.72 kB	56.87 kB
/ui/volume-slider	12.79 kB	56.87 kB

⚛️ @videojs/react

Path	Base initial	PR initial	Initial diff	Lazy diff
/video/minimal-skin.css	6.52 kB	8.34 kB	+1.82 kB (+28.0%)	—
/video/skin.css	6.35 kB	8.36 kB	+2.02 kB (+31.8%)	—
/video/minimal-skin	49.09 kB	52.58 kB	+3.50 kB (+7.1%)	0 B
/video/skin	49.09 kB	52.44 kB	+3.35 kB (+6.8%)	0 B
/audio/minimal-skin.css	4.81 kB	5.62 kB	+823 B (+16.7%)	—
/audio/skin.css	4.74 kB	5.47 kB	+750 B (+15.5%)	—
/audio/minimal-skin	38.10 kB	40.13 kB	+2.03 kB (+5.3%)	0 B
/audio/skin	38.04 kB	40.04 kB	+2.00 kB (+5.3%)	0 B
/live-video/skin.css	6.35 kB	6.77 kB	+430 B (+6.6%)	—
/live-video/minimal-skin	40.81 kB	43.78 kB	+2.97 kB (+7.3%)	0 B
/live-video/skin	40.86 kB	43.80 kB	+2.94 kB (+7.2%)	0 B
/live-audio/minimal-skin.css	4.81 kB	4.23 kB	-600 B (-12.2%)	—
/live-audio/skin.css	4.74 kB	4.12 kB	-626 B (-12.9%)	—
/live-audio/minimal-skin	29.34 kB	30.83 kB	+1.49 kB (+5.1%)	0 B
/live-audio/skin	29.31 kB	30.82 kB	+1.51 kB (+5.2%)	0 B
/video (default)	49.17 kB	52.57 kB	+3.40 kB (+6.9%)	0 B
/video (default + hls)	187.06 kB	190.56 kB	+3.50 kB (+1.9%)	0 B
/video (minimal)	49.19 kB	52.62 kB	+3.43 kB (+7.0%)	0 B
/video (minimal + hls)	187.05 kB	190.49 kB	+3.44 kB (+1.8%)	0 B
/audio (default)	38.13 kB	40.10 kB	+1.98 kB (+5.2%)	0 B
/audio (minimal)	38.14 kB	40.25 kB	+2.11 kB (+5.5%)	0 B
/video/minimal-skin.tailwind	56.01 kB	—	removed	-56.87 kB
/video/skin.tailwind	55.88 kB	—	removed	-56.87 kB
/audio/minimal-skin.tailwind	43.27 kB	—	removed	-56.87 kB
/audio/skin.tailwind	43.22 kB	—	removed	-56.87 kB
/live-video/minimal-skin.tailwind	47.47 kB	—	removed	-56.87 kB
/live-video/skin.tailwind	47.58 kB	—	removed	-56.87 kB
/live-audio/minimal-skin.tailwind	33.31 kB	—	removed	-56.87 kB
/live-audio/skin.tailwind	33.39 kB	—	removed	-56.87 kB

Small changes (1, ≤ 300 B)

Path	Base initial	PR initial	Initial diff	Lazy diff
/live-video/minimal-skin.css	6.52 kB	6.70 kB	+183 B (+2.7%)	—

Presets (7)

Entry	Initial	Lazy
/video (default)	52.57 kB	56.87 kB
/video (default + hls)	190.56 kB	56.87 kB
/video (minimal)	52.62 kB	56.87 kB
/video (minimal + hls)	190.49 kB	56.87 kB
/audio (default)	40.10 kB	56.87 kB
/audio (minimal)	40.25 kB	56.87 kB
/background	581 B	56.87 kB

Media (22)

Entry	Initial
/media/mux-video/hls-js	140.61 kB
/media/mux-video/spf	27.39 kB
/media/mux-audio/hls-js	140.55 kB
/media/mux-audio/spf	21.32 kB
/media/background-video	402 B
/media/cloudflare-video	4.34 kB
/media/dash-video	210.29 kB
/media/hls-audio	20.33 kB
/media/hls-background-video	16.46 kB
/media/hls-video	26.34 kB
/media/hlsjs-video	139.44 kB
/media/mux-audio	140.56 kB
/media/mux-background-video	16.45 kB
/media/mux-video	140.54 kB
/media/native-hls-video	5.76 kB
/media/shaka-video	197.52 kB
/media/spotify-audio	4.22 kB
/media/tiktok-video	4.18 kB
/media/twitch-video	4.30 kB
/media/vimeo-video	11.19 kB
/media/wistia-video	60.05 kB
/media/youtube-video	4.86 kB

Extensions (2)

Entry	Initial
/extensions/google-cast	5.34 kB
/extensions/mux-data	25.70 kB

Players (5)

Entry	Initial	Lazy
/video/player	7.56 kB	56.87 kB
/audio/player	4.00 kB	56.87 kB
/background/player	2.27 kB	56.87 kB
/live-video/player	6.96 kB	56.87 kB
/live-audio/player	3.99 kB	56.87 kB

Skins (18)

Entry	Type	Initial	Lazy
/video/minimal-skin.css	css	8.34 kB	—
/video/skin.css	css	8.36 kB	—
/video/minimal-skin	js	52.58 kB	56.87 kB
/video/skin	js	52.44 kB	56.87 kB
/audio/minimal-skin.css	css	5.62 kB	—
/audio/skin.css	css	5.47 kB	—
/audio/minimal-skin	js	40.13 kB	56.87 kB
/audio/skin	js	40.04 kB	56.87 kB
/background/skin.css	css	90 B	—
/background/skin	js	277 B	—
/live-video/minimal-skin.css	css	6.70 kB	—
/live-video/skin.css	css	6.77 kB	—
/live-video/minimal-skin	js	43.78 kB	56.87 kB
/live-video/skin	js	43.80 kB	56.87 kB
/live-audio/minimal-skin.css	css	4.23 kB	—
/live-audio/skin.css	css	4.12 kB	—
/live-audio/minimal-skin	js	30.83 kB	56.87 kB
/live-audio/skin	js	30.82 kB	56.87 kB

UI Components (39)

Entry	Initial	Lazy
/ui/airplay-button	10.43 kB	56.87 kB
/ui/alert-dialog	4.71 kB	56.87 kB
/ui/audio-track	7.93 kB	56.87 kB
/ui/audio-track-radio-group	9.45 kB	56.87 kB
/ui/buffering-indicator	7.77 kB	56.87 kB
/ui/captions-button	10.40 kB	56.87 kB
/ui/captions-radio-group	9.57 kB	56.87 kB
/ui/cast-button	10.40 kB	56.87 kB
/ui/controls	7.68 kB	56.87 kB
/ui/dialog	4.73 kB	56.87 kB
/ui/error-dialog	11.77 kB	56.87 kB
/ui/fullscreen-button	10.36 kB	56.87 kB
/ui/gesture	7.99 kB	56.87 kB
/ui/hotkey	8.38 kB	56.87 kB
/ui/live-button	8.76 kB	56.87 kB
/ui/menu	19.30 kB	56.87 kB
/ui/mute-button	10.41 kB	56.87 kB
/ui/pip-button	10.36 kB	56.87 kB
/ui/play-button	10.35 kB	56.87 kB
/ui/playback-rate	7.99 kB	56.87 kB
/ui/playback-rate-button	10.35 kB	56.87 kB
/ui/playback-rate-radio-group	9.50 kB	56.87 kB
/ui/popover	8.13 kB	56.87 kB
/ui/poster	7.54 kB	56.87 kB
/ui/quality	8.42 kB	56.87 kB
/ui/quality-radio-group	9.92 kB	56.87 kB
/ui/seek-button	10.38 kB	56.87 kB
/ui/seek-indicator	11.95 kB	56.87 kB
/ui/slider	12.73 kB	56.87 kB
/ui/status-announcer	10.06 kB	56.87 kB
/ui/status-indicator	12.26 kB	56.87 kB
/ui/thumbnail	8.71 kB	56.87 kB
/ui/time	9.74 kB	56.87 kB
/ui/time-slider	14.15 kB	56.87 kB
/ui/title	7.24 kB	56.87 kB
/ui/tooltip	8.90 kB	56.87 kB
/ui/volume-indicator	12.32 kB	56.87 kB
/ui/volume-popover	14.17 kB	56.87 kB
/ui/volume-slider	12.11 kB	56.87 kB

🧩 @videojs/core — no changes

Entries (76)

Entry	Initial	Lazy
.	13.15 kB	—
/dom	22.42 kB	56.87 kB
/vjsc	1.82 kB	—
/i18n	3.23 kB	56.87 kB
/i18n/locales/all	34.97 kB	—
/i18n/locales/ar	1.22 kB	—
/i18n/locales/az	1.09 kB	—
/i18n/locales/bg	1.29 kB	—
/i18n/locales/bn	1.23 kB	—
/i18n/locales/bs	1.00 kB	—
/i18n/locales/ca	1.07 kB	—
/i18n/locales/cs	1.07 kB	—
/i18n/locales/cy	1.02 kB	—
/i18n/locales/da	1006 B	—
/i18n/locales/de	1.09 kB	—
/i18n/locales/el	1.49 kB	—
/i18n/locales/en	785 B	—
/i18n/locales/es	1018 B	—
/i18n/locales/et	1.05 kB	—
/i18n/locales/eu	1.03 kB	—
/i18n/locales/fa	1.22 kB	—
/i18n/locales/fi	1.04 kB	—
/i18n/locales/fr	1.07 kB	—
/i18n/locales/gd	1.10 kB	—
/i18n/locales/gl	1022 B	—
/i18n/locales/he	1.14 kB	—
/i18n/locales/hi	1.30 kB	—
/i18n/locales/hr	1.02 kB	—
/i18n/locales/hu	1.10 kB	—
/i18n/locales/id	919 B	—
/i18n/locales/it	1.01 kB	—
/i18n/locales/ja	1.18 kB	—
/i18n/locales/ko	1.14 kB	—
/i18n/locales/lt	1.02 kB	—
/i18n/locales/lv	1.09 kB	—
/i18n/locales/mr	1.30 kB	—
/i18n/locales/nb	987 B	—
/i18n/locales/ne	1.29 kB	—
/i18n/locales/nl	1.00 kB	—
/i18n/locales/nn	987 B	—
/i18n/locales/oc	1.08 kB	—
/i18n/locales/pl	1.14 kB	—
/i18n/locales/pt	1.03 kB	—
/i18n/locales/pt-BR	1.03 kB	—
/i18n/locales/pt-PT	1.01 kB	—
/i18n/locales/ro	1.07 kB	—
/i18n/locales/ru	1.40 kB	—
/i18n/locales/sk	1.10 kB	—
/i18n/locales/sl	1.04 kB	—
/i18n/locales/sr	1.07 kB	—
/i18n/locales/sv	1.01 kB	—
/i18n/locales/te	1.32 kB	—
/i18n/locales/th	1.29 kB	—
/i18n/locales/tr	1.08 kB	—
/i18n/locales/uk	1.41 kB	—
/i18n/locales/vi	1.11 kB	—
/i18n/locales/zh	1.02 kB	—
/i18n/locales/zh-CN	1.02 kB	—
/i18n/locales/zh-TW	1.02 kB	—
/i18n/text/airplay	101 B	—
/i18n/text/buttons	137 B	—
/i18n/text/captions	93 B	—
/i18n/text/cast	114 B	—
/i18n/text/common	90 B	—
/i18n/text/container	75 B	—
/i18n/text/errors	285 B	—
/i18n/text/fullscreen	98 B	—
/i18n/text/live	126 B	—
/i18n/text/menu	249 B	—
/i18n/text/pip	101 B	—
/i18n/text/playback	80 B	—
/i18n/text/seek	105 B	—
/i18n/text/slider	65 B	—
/i18n/text/status	222 B	—
/i18n/text/time	280 B	—
/i18n/text/volume	133 B	—

🏷️ @videojs/element — no changes

Entries (2)

Entry	Initial
.	1.05 kB
/context	943 B

📦 @videojs/store — no changes

Entries (3)

Entry	Initial
.	1.72 kB
/html	703 B
/react	365 B

🔧 @videojs/utils — no changes

Entries (13)

Entry	Initial
/array	271 B
/dom	5.02 kB
/events	320 B
/function	386 B
/i18n	249 B
/jwt	176 B
/object	535 B
/predicate	297 B
/percent	281 B
/string	239 B
/style	212 B
/time	976 B
/number	199 B

📦 @videojs/media

Path	Base initial	PR initial	Initial diff	Lazy diff
/dom/dash	209.83 kB	3.28 kB	-206.54 kB (-98.4%)	—
/dom/wistia	60.09 kB	1.89 kB	-58.20 kB (-96.9%)	—

Entries (23)

Entry	Initial
.	1.07 kB
/dom	121 B
/dom/dash	3.28 kB
/dom/wistia	1.89 kB
/dom/audio-host	1.10 kB
/dom/cloudflare	3.69 kB
/dom/custom-media-element	2.13 kB
/dom/dash	209.83 kB
/dom/google-cast	4.06 kB
/dom/hls-js	139.16 kB
/dom/media-host	1.20 kB
/dom/media-played-ranges	576 B
/dom/mux	162.88 kB
/dom/native-hls	5.25 kB
/dom/shaka	197.02 kB
/dom/spotify	3.58 kB
/dom/tiktok	3.57 kB
/dom/twitch	3.62 kB
/dom/video-host	1.39 kB
/dom/vimeo	10.62 kB
/dom/wistia	60.09 kB
/dom/youtube	4.25 kB
/media-tracks	2.05 kB

📦 @videojs/spf — no changes

Entries (10)

Entry	Initial
.	4.55 kB
/dom	6.60 kB
/hls	22.06 kB
/media-tracks	504 B
/hls-background-video	15.89 kB
/hls-audio	19.82 kB
/hls-video	25.85 kB
/mux-audio	20.76 kB
/mux-background-video	15.89 kB
/mux-video	26.67 kB

---

ℹ️ How to interpret

Each entry is independently bundled, minified, and brotli-compressed. Initial size includes its static import graph; lazy dynamic chunks are reported separately.

Entries are not additive because their dependency graphs overlap. Preset rows represent realistic combined bundles.

Changes of 300 B or less across initial, lazy, and total size are collapsed, not discarded.

Run pnpm size locally to check current initial sizes.

[netlify]

✅ Deploy Preview for vjs10-site ready!

Name	Link
🔨 Latest commit	8e8f827
🔍 Latest deploy log	https://app.netlify.com/projects/vjs10-site/deploys/6a99c2e18c60260008713811
😎 Deploy Preview	https://deploy-preview-2545--vjs10-site.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.