docs(skin): design doc for improved skin authoring

[sampotts]

No description provided.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
v10-sandbox	Ready	Preview, Comment	Jun 12, 2026 7:13am

[netlify]

✅ Deploy Preview for vjs10-site ready!

Name	Link
🔨 Latest commit	83027a6
🔍 Latest deploy log	https://app.netlify.com/projects/vjs10-site/deploys/6a2bb1a2c6d301000823d994
😎 Deploy Preview	https://deploy-preview-1686--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.

[github-actions]

📦 Bundle Size Report

🎨 @videojs/html — no changes

Presets (7)

Entry	Size
/video (default)	41.75 kB
/video (default + hls)	175.09 kB
/video (minimal)	41.40 kB
/video (minimal + hls)	174.97 kB
/audio (default)	35.57 kB
/audio (minimal)	32.84 kB
/background	4.22 kB

Media (9)

Entry	Size
/media/background-video	1.06 kB
/media/container	1.72 kB
/media/dash-video	236.69 kB
/media/hls-video	134.98 kB
/media/mux-audio	160.96 kB
/media/mux-video	160.95 kB
/media/native-hls-video	4.63 kB
/media/simple-hls-audio-only	15.46 kB
/media/simple-hls-video	17.15 kB

Players (5)

Entry	Size
/video/player	7.50 kB
/audio/player	5.30 kB
/background/player	3.92 kB
/live-video/player	7.52 kB
/live-audio/player	5.32 kB

Skins (30)

Entry	Type	Size
/video/minimal-skin.css	css	5.23 kB
/video/skin.css	css	5.19 kB
/video/minimal-skin	js	41.40 kB
/video/minimal-skin.tailwind	js	41.83 kB
/video/skin	js	41.70 kB
/video/skin.tailwind	js	42.13 kB
/audio/minimal-skin.css	css	3.45 kB
/audio/skin.css	css	3.36 kB
/audio/minimal-skin	js	32.81 kB
/audio/minimal-skin.tailwind	js	33.18 kB
/audio/skin	js	35.56 kB
/audio/skin.tailwind	js	35.90 kB
/background/skin.css	css	133 B
/background/skin	js	1.16 kB
/live-video/minimal-skin.css	css	5.23 kB
/live-video/skin.css	css	5.19 kB
/live-video/minimal-skin	js	40.84 kB
/live-video/minimal-skin.tailwind	js	41.18 kB
/live-video/skin	js	40.74 kB
/live-video/skin.tailwind	js	41.14 kB
/live-audio/minimal-skin.css	css	3.45 kB
/live-audio/skin.css	css	3.36 kB
/live-audio/minimal-skin	js	27.03 kB
/live-audio/minimal-skin.tailwind	js	26.57 kB
/live-audio/skin	js	29.56 kB
/live-audio/skin.tailwind	js	29.16 kB
/global.css	css	176 B
/shared.css	css	88 B
/tailwind.css	css	228 B
/skin-element	js	1.37 kB

UI Components (37)

Entry	Size
/ui/airplay-button	2.13 kB
/ui/alert-dialog	865 B
/ui/alert-dialog-close	434 B
/ui/alert-dialog-description	249 B
/ui/alert-dialog-title	332 B
/ui/buffering-indicator	2.11 kB
/ui/captions-button	2.26 kB
/ui/captions-radio-group	2.11 kB
/ui/cast-button	2.21 kB
/ui/compounds	5.21 kB
/ui/controls	2.01 kB
/ui/error-dialog	2.44 kB
/ui/fullscreen-button	2.15 kB
/ui/hotkey	2.69 kB
/ui/menu	3.87 kB
/ui/mute-button	2.14 kB
/ui/pip-button	2.19 kB
/ui/play-button	2.24 kB
/ui/playback-rate-button	2.23 kB
/ui/playback-rate-radio-group	2.04 kB
/ui/popover	1.49 kB
/ui/poster	1.93 kB
/ui/seek-button	2.18 kB
/ui/seek-indicator	2.60 kB
/ui/seek-indicator-value	271 B
/ui/slider	1.07 kB
/ui/status-announcer	2.43 kB
/ui/status-indicator	2.46 kB
/ui/status-indicator-value	126 B
/ui/thumbnail	2.37 kB
/ui/time	1.88 kB
/ui/time-slider	2.78 kB
/ui/tooltip	1.68 kB
/ui/volume-indicator	2.63 kB
/ui/volume-indicator-fill	252 B
/ui/volume-indicator-value	251 B
/ui/volume-slider	3.56 kB

Sizes are marginal over the root entry point.

⚛️ @videojs/react — no changes

Presets (7)

Entry	Size
/video (default)	34.65 kB
/video (default + hls)	167.04 kB
/video (minimal)	34.72 kB
/video (minimal + hls)	166.93 kB
/audio (default)	28.40 kB
/audio (minimal)	28.42 kB
/background	754 B

Media (8)

Entry	Size
/media/background-video	575 B
/media/dash-video	235.21 kB
/media/hls-video	133.61 kB
/media/mux-audio	159.74 kB
/media/mux-video	159.75 kB
/media/native-hls-video	3.13 kB
/media/simple-hls-audio-only	14.04 kB
/media/simple-hls-video	15.79 kB

Skins (27)

Entry	Type	Size
/tailwind.css	css	228 B
/video/minimal-skin.css	css	5.14 kB
/video/skin.css	css	5.10 kB
/video/minimal-skin	js	34.61 kB
/video/minimal-skin.tailwind	js	40.03 kB
/video/skin	js	34.55 kB
/video/skin.tailwind	js	39.92 kB
/audio/minimal-skin.css	css	3.32 kB
/audio/skin.css	css	3.23 kB
/audio/minimal-skin	js	28.33 kB
/audio/minimal-skin.tailwind	js	28.81 kB
/audio/skin	js	28.33 kB
/audio/skin.tailwind	js	31.88 kB
/background/skin.css	css	90 B
/background/skin	js	272 B
/live-video/minimal-skin.css	css	5.14 kB
/live-video/skin.css	css	5.10 kB
/live-video/minimal-skin	js	30.83 kB
/live-video/minimal-skin.tailwind	js	36.11 kB
/live-video/skin	js	30.79 kB
/live-video/skin.tailwind	js	36.06 kB
/live-audio/minimal-skin.css	css	3.32 kB
/live-audio/skin.css	css	3.23 kB
/live-audio/minimal-skin	js	20.92 kB
/live-audio/minimal-skin.tailwind	js	23.65 kB
/live-audio/skin	js	20.92 kB
/live-audio/skin.tailwind	js	23.75 kB

UI Components (31)

Entry	Size
/ui/airplay-button	2.09 kB
/ui/alert-dialog	1.10 kB
/ui/buffering-indicator	1.90 kB
/ui/captions-button	2.13 kB
/ui/captions-radio-group	1.95 kB
/ui/cast-button	2.11 kB
/ui/controls	1.90 kB
/ui/error-dialog	2.36 kB
/ui/fullscreen-button	2.17 kB
/ui/gesture	1.28 kB
/ui/hotkey	1.99 kB
/ui/live-button	2.02 kB
/ui/menu	5.65 kB
/ui/mute-button	2.10 kB
/ui/pip-button	2.13 kB
/ui/play-button	2.10 kB
/ui/playback-rate	2.46 kB
/ui/playback-rate-button	2.17 kB
/ui/popover	2.31 kB
/ui/poster	1.76 kB
/ui/seek-button	2.12 kB
/ui/seek-indicator	1.97 kB
/ui/slider	3.42 kB
/ui/status-announcer	1.77 kB
/ui/status-indicator	2.00 kB
/ui/thumbnail	2.14 kB
/ui/time	1.99 kB
/ui/time-slider	2.98 kB
/ui/tooltip	2.46 kB
/ui/volume-indicator	1.97 kB
/ui/volume-slider	2.46 kB

Sizes are marginal over the root entry point.

🧩 @videojs/core — no changes

Entries (10)

Entry	Size
.	7.94 kB
/dom	16.29 kB
/dom/media/custom-media-element	1.90 kB
/dom/media/dash	234.36 kB
/dom/media/google-cast	4.07 kB
/dom/media/hls	132.99 kB
/dom/media/mux	158.95 kB
/dom/media/native-hls	2.52 kB
/dom/media/simple-hls	15.16 kB
/dom/media/simple-hls-audio-only	13.39 kB

🏷️ @videojs/element — no changes

Entries (2)

Entry	Size
.	996 B
/context	943 B

📦 @videojs/store — no changes

Entries (3)

Entry	Size
.	1.39 kB
/html	696 B
/react	360 B

🔧 @videojs/utils — no changes

Entries (10)

Entry	Size
/array	104 B
/dom	2.06 kB
/events	319 B
/function	327 B
/object	275 B
/predicate	265 B
/string	192 B
/style	190 B
/time	478 B
/number	158 B

📦 @videojs/spf — no changes

Entries (4)

Entry	Size
.	4.45 kB
/dom	6.31 kB
/hls	14.61 kB
/background-looping-video	12.29 kB

---

ℹ️ How to interpret

All sizes are standalone totals (minified + brotli).

Icon	Meaning
✅	No change
🔺	Increased ≤ 10%
🔴	Increased > 10%
🔽	Decreased
🆕	New (no baseline)

Run pnpm size locally to check current sizes.

[mihar-22]

superseded by #1696 but using as reference for ideas, ty! 🙏