diff --git a/.github/workflows/website-tests.yml b/.github/workflows/website-tests.yml
index 1ad16c49b2..7c7d5d0f14 100644
--- a/.github/workflows/website-tests.yml
+++ b/.github/workflows/website-tests.yml
@@ -72,7 +72,7 @@ jobs:
         run: pnpm build:packages
 
       - name: Generate site content
-        run: pnpm exec vp run site#api-docs:generate && pnpm exec vp run site#ejected-skins && pnpm exec vp run site#cdn-manifest
+        run: pnpm exec vp run site#api-docs:generate && pnpm exec vp run site#cdn-manifest
 
       - name: Astro check
         run: cd site && pnpm astro check --minimumSeverity warning
diff --git a/site/package.json b/site/package.json
index b0775d55b1..0cab596d42 100644
--- a/site/package.json
+++ b/site/package.json
@@ -4,7 +4,7 @@
   "type": "module",
   "scripts": {
     "api-docs": "vp run site#api-docs:generate",
-    "clean": "rimraf --glob dist .netlify 'src/content/generated-*-reference' src/content/cdn-media.json src/content/ejected-skins.json",
+    "clean": "rimraf --glob dist .netlify 'src/content/generated-*-reference' src/content/cdn-media.json",
     "astro": "astro",
     "check:anchors": "tsx scripts/check-anchors.ts",
     "test": "vp test run",
diff --git a/site/scripts/build-ejected-skins.ts b/site/scripts/build-ejected-skins.ts
deleted file mode 100644
index b2a2a35f8a..0000000000
--- a/site/scripts/build-ejected-skins.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { main } from './ejected-skins/index.ts';
-
-main().catch((error) => {
-  console.error('\x1b[35m[ejected-skins]\x1b[0m', '\x1b[31merror:\x1b[0m', error);
-  process.exit(1);
-});
diff --git a/site/scripts/ejected-skins/config.ts b/site/scripts/ejected-skins/config.ts
deleted file mode 100644
index bf21e2bb88..0000000000
--- a/site/scripts/ejected-skins/config.ts
+++ /dev/null
@@ -1,147 +0,0 @@
-import { VJS10_CDN_BASE } from '../../src/consts';
-
-export type MediaType = 'video' | 'audio';
-export type SkinVariant = 'default' | 'minimal';
-export type SkinStyle = 'css' | 'tailwind';
-
-interface SkinMetadata {
-  id: string;
-  name: string;
-  platform: 'html' | 'react';
-  style: SkinStyle;
-  mediaType: MediaType;
-  group: string;
-  variant: SkinVariant;
-  live: boolean;
-}
-
-export interface HtmlSkinDef extends SkinMetadata {
-  platform: 'html';
-  template: string;
-  css?: string;
-  iconSet: SkinVariant;
-}
-
-export interface ReactSkinDef extends SkinMetadata {
-  platform: 'react';
-  source: string;
-  css?: string;
-}
-
-export type SkinDef = HtmlSkinDef | ReactSkinDef;
-
-export const HTML_CDN_BASE = VJS10_CDN_BASE;
-export const DEMO_VIDEO_SRC = 'https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4';
-export const DEMO_POSTER_SRC = 'https://image.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/thumbnail.webp';
-export const DEMO_LIVE_SRC = 'https://stream.mux.com/v69RSHhFelSm4701snP22dYz2jICy4E4FUyk02rW4gxRM.m3u8';
-export const DEMO_LIVE_POSTER_SRC =
-  'https://image.mux.com/v69RSHhFelSm4701snP22dYz2jICy4E4FUyk02rW4gxRM/thumbnail.webp';
-
-export const LIVE_MEDIA = {
-  video: { subpath: 'hlsjs-video', tag: 'hlsjs-video', component: 'HlsJsVideo' },
-  audio: { subpath: 'mux-audio', tag: 'mux-audio', component: 'MuxAudio' },
-} as const satisfies Record<MediaType, { subpath: string; tag: string; component: string }>;
-
-export interface EjectedSkinEntry {
-  id: string;
-  name: string;
-  platform: 'html' | 'react';
-  style: SkinStyle;
-  html?: string;
-  tsx?: Record<string, string>;
-  jsx?: Record<string, string>;
-  css?: string;
-}
-
-const MEDIA_TYPES: MediaType[] = ['video', 'audio'];
-const SKIN_VARIANTS: SkinVariant[] = ['default', 'minimal'];
-const LIVE_MODES = [false, true];
-
-function titleCase(value: string): string {
-  return `${value[0]!.toUpperCase()}${value.slice(1)}`;
-}
-
-function getGroup(mediaType: MediaType, live: boolean): string {
-  return live ? `live-${mediaType}` : mediaType;
-}
-
-function getId(
-  platform: SkinDef['platform'],
-  style: SkinStyle,
-  variant: SkinVariant,
-  mediaType: MediaType,
-  live: boolean
-): string {
-  const base = `${variant}-${live ? 'live-' : ''}${mediaType}`;
-
-  if (platform === 'react') return `${base}-react${style === 'tailwind' ? '-tailwind' : ''}`;
-
-  return `${base}${style === 'tailwind' ? '-tailwind' : ''}`;
-}
-
-function getName(
-  platform: SkinDef['platform'],
-  style: SkinStyle,
-  variant: SkinVariant,
-  mediaType: MediaType,
-  live: boolean
-): string {
-  const base = `${titleCase(variant)} ${live ? 'Live ' : ''}${titleCase(mediaType)}`;
-
-  if (platform === 'react') return `${base} (React${style === 'tailwind' ? ' + Tailwind' : ''})`;
-
-  return style === 'tailwind' ? `${base} (Tailwind)` : base;
-}
-
-function createHtmlSkin(style: SkinStyle, variant: SkinVariant, mediaType: MediaType, live: boolean): HtmlSkinDef {
-  const group = getGroup(mediaType, live);
-  const file = variant === 'minimal' ? 'minimal-skin' : 'skin';
-  const template =
-    style === 'tailwind'
-      ? `site/scripts/ejected-skins/templates/html/${group}/${file}.tailwind.ts`
-      : `packages/html/src/internal/skins/${variant}-${group}/template.ts`;
-
-  return {
-    id: getId('html', style, variant, mediaType, live),
-    name: getName('html', style, variant, mediaType, live),
-    platform: 'html',
-    style,
-    mediaType,
-    group,
-    variant,
-    live,
-    template,
-    ...(style === 'css' && { css: `packages/html/src/define/${group}/${file}.css` }),
-    iconSet: variant,
-  };
-}
-
-function createReactSkin(style: SkinStyle, variant: SkinVariant, mediaType: MediaType, live: boolean): ReactSkinDef {
-  const group = getGroup(mediaType, live);
-  const file = variant === 'minimal' ? 'minimal-skin' : 'skin';
-  const styleSuffix = style === 'tailwind' ? '.tailwind' : '';
-
-  return {
-    id: getId('react', style, variant, mediaType, live),
-    name: getName('react', style, variant, mediaType, live),
-    platform: 'react',
-    style,
-    mediaType,
-    group,
-    variant,
-    live,
-    source: `packages/react/src/presets/${group}/${file}${styleSuffix}.tsx`,
-    ...(style === 'css' && { css: `packages/react/src/presets/${group}/${file}.css` }),
-  };
-}
-
-function createSkins<T extends SkinDef>(create: (variant: SkinVariant, mediaType: MediaType, live: boolean) => T): T[] {
-  return LIVE_MODES.flatMap((live) =>
-    SKIN_VARIANTS.flatMap((variant) => MEDIA_TYPES.map((mediaType) => create(variant, mediaType, live)))
-  );
-}
-
-export const SKINS: SkinDef[] = [
-  ...createSkins((variant, mediaType, live) => createHtmlSkin('css', variant, mediaType, live)),
-  ...createSkins((variant, mediaType, live) => createReactSkin('css', variant, mediaType, live)),
-];
diff --git a/site/scripts/ejected-skins/html.ts b/site/scripts/ejected-skins/html.ts
deleted file mode 100644
index ccbf636ae7..0000000000
--- a/site/scripts/ejected-skins/html.ts
+++ /dev/null
@@ -1,158 +0,0 @@
-import { readFileSync } from 'node:fs';
-import { dirname, resolve } from 'node:path';
-import { fileURLToPath, pathToFileURL } from 'node:url';
-
-import {
-  DEMO_LIVE_POSTER_SRC,
-  DEMO_LIVE_SRC,
-  DEMO_POSTER_SRC,
-  DEMO_VIDEO_SRC,
-  HTML_CDN_BASE,
-  type HtmlSkinDef,
-  LIVE_MEDIA,
-  type SkinDef,
-} from './config.ts';
-import { pkgDistUrl, validatePackageImports } from './package-resolver.ts';
-
-const scriptDir = dirname(fileURLToPath(import.meta.url));
-const workspaceRoot = resolve(scriptDir, '../../..');
-
-function escapeHtml(value: string): string {
-  return value.replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;').replaceAll('"', '&quot;');
-}
-
-export function extractTemplateLiteral(source: string): string {
-  const match =
-    source.match(
-      /function\s+getTemplateHTML\s*\([^)]*\)\s*\{[\s\S]*?return\s+(?:\/\*\s*html\s*\*\/\s*)?`([\s\S]*?)`\s*;?\s*\}/
-    ) ?? source.match(/createTemplate\s*\(\s*(?:\/\*\s*html\s*\*\/\s*)?`([\s\S]*?)`\s*\)/);
-  if (!match) throw new Error('Could not extract HTML template literal');
-
-  return match[1];
-}
-
-export function parseImportedNames(source: string): Map<string, string> {
-  const imports = new Map<string, string>();
-  const importRegex = /import\s+\{([^}]+)\}\s+from\s+['"]([^'"]+)['"]/g;
-  let match: RegExpExecArray | null;
-
-  while ((match = importRegex.exec(source)) !== null) {
-    const names = match[1]
-      .split(',')
-      .map((name) => name.trim())
-      .filter(Boolean);
-
-    for (const name of names) {
-      const [importedName, localName = importedName] = name.split(/\s+as\s+/);
-
-      imports.set(localName, match[2]);
-    }
-  }
-
-  return imports;
-}
-
-export function evaluateTemplate(templateBody: string, context: Record<string, unknown>): string {
-  const fn = new Function(...Object.keys(context), `return \`${templateBody}\`;`);
-  const html = fn(...Object.values(context)) as string;
-  const lines = html.split('\n').map((line) => line.trimEnd());
-  const minIndent = lines
-    .filter((line) => line.length > 0)
-    .reduce((minimum, line) => Math.min(minimum, line.length - line.trimStart().length), Infinity);
-
-  return lines
-    .map((line) => (line.length > 0 ? line.slice(minIndent) : line))
-    .join('\n')
-    .trim();
-}
-
-export function createRenderMediaIcon(iconSet: 'default' | 'minimal') {
-  return (name: string, attrs?: Record<string, string>): string => {
-    const family = iconSet === 'minimal' ? ' family="minimal"' : '';
-    const attrText = Object.entries(attrs ?? {})
-      .map(([key, value]) => ` ${key}="${escapeHtml(value)}"`)
-      .join('');
-
-    return `<media-icon name="${escapeHtml(name)}"${family}${attrText}></media-icon>`;
-  };
-}
-
-export function replaceSlots(html: string, skin: Pick<SkinDef, 'mediaType' | 'live'>): string {
-  const { live, mediaType } = skin;
-  const tag = live ? LIVE_MEDIA[mediaType].tag : mediaType === 'audio' ? 'audio' : 'video';
-  const playsInline = mediaType === 'video' ? ' playsinline' : '';
-  const mediaElement = `<${tag} src="${live ? DEMO_LIVE_SRC : DEMO_VIDEO_SRC}"${playsInline}></${tag}>`;
-
-  html = html.replace(
-    /^([ \t]*)<!--\s*@deprecated[^\n]*\n\s*<slot name="media"><\/slot>\n\s*<slot><\/slot>/m,
-    `$1${mediaElement}`
-  );
-
-  // No shadow root once ejected, so the poster slot collapses to the image it carried.
-  // The src arrives from the player's `poster`, resolved through the store.
-  return html.replace(/^([ \t]*)<slot name="poster">[\s\S]*?<\/slot>/m, '$1<img alt="" decoding="async" />');
-}
-
-export function prependHtmlSkinScripts(html: string, skin: HtmlSkinDef): string {
-  const cdnFileName = skin.variant === 'minimal' ? `${skin.group}-minimal` : skin.group;
-  const scriptTags = [`<script type="module" src="${HTML_CDN_BASE}/${cdnFileName}.js"></script>`];
-
-  if (skin.live) {
-    scriptTags.push(
-      `<script type="module" src="${HTML_CDN_BASE}/media/${LIVE_MEDIA[skin.mediaType].subpath}.js"></script>`
-    );
-  }
-
-  const cssLink = skin.style === 'css' ? '\n<link rel="stylesheet" href="./player.css">' : '';
-  const playerTag = `${skin.group}-player`;
-  const posterAttr =
-    skin.mediaType === 'audio' ? '' : ` poster="${skin.live ? DEMO_LIVE_POSTER_SRC : DEMO_POSTER_SRC}"`;
-  const indented = html
-    .split('\n')
-    .map((line) => (line.length > 0 ? `  ${line}` : line))
-    .join('\n');
-
-  return `${scriptTags.join('\n')}${cssLink}\n\n<${playerTag}${posterAttr}>\n${indented}\n</${playerTag}>`;
-}
-
-async function loadImportedNames(
-  source: string,
-  template: string,
-  templatePath: string,
-  context: Record<string, unknown>
-): Promise<void> {
-  const modules = new Map<string, Record<string, unknown>>();
-
-  for (const [name, specifier] of parseImportedNames(source)) {
-    if (!new RegExp(`\\b${name}\\b`).test(template)) continue;
-
-    let imported = modules.get(specifier);
-
-    if (!imported) {
-      const url = specifier.startsWith('@videojs/')
-        ? pkgDistUrl(specifier)
-        : pathToFileURL(resolve(workspaceRoot, dirname(templatePath), specifier)).href;
-
-      imported = (await import(url)) as Record<string, unknown>;
-      modules.set(specifier, imported);
-    }
-
-    if (name in imported) context[name] = imported[name];
-  }
-}
-
-export async function processHtmlSkin(skin: HtmlSkinDef): Promise<string> {
-  const sourcePath = resolve(workspaceRoot, skin.template);
-  const source = readFileSync(sourcePath, 'utf-8');
-
-  validatePackageImports(source, skin.template);
-  const templateBody = extractTemplateLiteral(source);
-  const context: Record<string, unknown> = { SEEK_TIME: 10, VOLUME_STEP: 5 };
-
-  await loadImportedNames(source, templateBody, skin.template, context);
-  context.renderIcon = createRenderMediaIcon(skin.iconSet);
-
-  const html = evaluateTemplate(templateBody, context);
-
-  return prependHtmlSkinScripts(replaceSlots(html, skin), skin);
-}
diff --git a/site/scripts/ejected-skins/index.ts b/site/scripts/ejected-skins/index.ts
deleted file mode 100644
index dc1317e3ec..0000000000
--- a/site/scripts/ejected-skins/index.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-import { mkdirSync, writeFileSync } from 'node:fs';
-import { dirname, resolve } from 'node:path';
-import { fileURLToPath } from 'node:url';
-
-import { z } from 'astro/zod';
-
-import { type EjectedSkinEntry, SKINS, type SkinDef } from './config.ts';
-import { processHtmlSkin } from './html.ts';
-import { processReactSkin, resolveCss } from './react.ts';
-
-const scriptDir = dirname(fileURLToPath(import.meta.url));
-const outputPath = resolve(scriptDir, '../../src/content/ejected-skins.json');
-const prefix = '\x1b[35m[ejected-skins]\x1b[0m';
-
-const outputSchema = z.array(
-  z.discriminatedUnion('platform', [
-    z.object({
-      id: z.string(),
-      name: z.string(),
-      platform: z.literal('html'),
-      style: z.enum(['css', 'tailwind']),
-      html: z.string(),
-      css: z.string().optional(),
-    }),
-    z.object({
-      id: z.string(),
-      name: z.string(),
-      platform: z.literal('react'),
-      style: z.enum(['css', 'tailwind']),
-      tsx: z.record(z.string(), z.string()),
-      jsx: z.record(z.string(), z.string()),
-      css: z.string().optional(),
-    }),
-  ])
-);
-
-export async function buildEjectedSkin(skin: SkinDef): Promise<EjectedSkinEntry> {
-  const entry: EjectedSkinEntry = {
-    id: skin.id,
-    name: skin.name,
-    platform: skin.platform,
-    style: skin.style,
-  };
-
-  if (skin.platform === 'html') {
-    entry.html = await processHtmlSkin(skin);
-  } else {
-    const { tsx, jsx } = await processReactSkin(skin);
-
-    entry.tsx = tsx;
-    entry.jsx = jsx;
-  }
-
-  if (skin.css) {
-    entry.css = resolveCss(skin.css);
-  }
-
-  return entry;
-}
-
-export async function generateEjectedSkins(skins: SkinDef[] = SKINS): Promise<EjectedSkinEntry[]> {
-  const entries: EjectedSkinEntry[] = [];
-
-  for (const skin of skins) {
-    console.log(prefix, `Processing: ${skin.id}`);
-    entries.push(await buildEjectedSkin(skin));
-  }
-
-  return outputSchema.parse(entries);
-}
-
-export async function main(): Promise<void> {
-  console.log(prefix, 'Building ejected skins...\n');
-  const entries = await generateEjectedSkins();
-
-  mkdirSync(dirname(outputPath), { recursive: true });
-  writeFileSync(outputPath, `${JSON.stringify(entries, null, 2)}\n`);
-  console.log(prefix, `✅ Wrote ${entries.length} entries to ${outputPath}`);
-}
diff --git a/site/scripts/ejected-skins/package-resolver.ts b/site/scripts/ejected-skins/package-resolver.ts
deleted file mode 100644
index 4c44317b68..0000000000
--- a/site/scripts/ejected-skins/package-resolver.ts
+++ /dev/null
@@ -1,124 +0,0 @@
-import { existsSync, readFileSync } from 'node:fs';
-import { dirname, relative, resolve } from 'node:path';
-import { fileURLToPath, pathToFileURL } from 'node:url';
-
-type PackageExportTarget = string | Record<string, string>;
-
-interface PackageManifest {
-  name: string;
-  exports?: Record<string, PackageExportTarget>;
-}
-
-interface PackageSpecifierParts {
-  packageDir: string;
-  packageName: string;
-  subpath: string;
-}
-
-const scriptDir = dirname(fileURLToPath(import.meta.url));
-const workspaceRoot = resolve(scriptDir, '../../..');
-const packagesRoot = resolve(workspaceRoot, 'packages');
-
-const packageManifestCache = new Map<string, PackageManifest>();
-
-function parsePackageSpecifier(specifier: string): PackageSpecifierParts {
-  const parts = specifier.split('/');
-
-  if (parts.length < 2 || parts[0] !== '@videojs') {
-    throw new Error(`Expected a @videojs package specifier, got "${specifier}"`);
-  }
-
-  const packageName = `${parts[0]}/${parts[1]}`;
-  const packageDir = resolve(packagesRoot, parts[1]);
-  const subpath = parts.length > 2 ? `./${parts.slice(2).join('/')}` : '.';
-
-  return { packageDir, packageName, subpath };
-}
-
-function readPackageManifest(packageDir: string): PackageManifest {
-  const cached = packageManifestCache.get(packageDir);
-  if (cached) return cached;
-
-  const manifestPath = resolve(packageDir, 'package.json');
-  if (!existsSync(manifestPath)) throw new Error(`Missing package manifest: ${manifestPath}`);
-
-  const manifest = JSON.parse(readFileSync(manifestPath, 'utf-8')) as PackageManifest;
-
-  packageManifestCache.set(packageDir, manifest);
-  return manifest;
-}
-
-function matchExportPattern(pattern: string, subpath: string): string | null {
-  if (!pattern.includes('*')) return pattern === subpath ? '' : null;
-
-  const [prefix, suffix] = pattern.split('*');
-  if (!subpath.startsWith(prefix) || !subpath.endsWith(suffix)) return null;
-
-  return subpath.slice(prefix.length, subpath.length - suffix.length);
-}
-
-function selectExportTarget(exportTarget: PackageExportTarget, specifier: string, packageName: string): string {
-  if (typeof exportTarget === 'string') return exportTarget;
-
-  for (const condition of ['default', 'development', 'import', 'module', 'node', 'types']) {
-    const target = exportTarget[condition];
-    if (target) return target;
-  }
-
-  throw new Error(`Package "${packageName}" exports "${specifier}" but does not provide a supported target condition`);
-}
-
-export function resolvePackageExportFile(specifier: string): string {
-  const { packageDir, packageName, subpath } = parsePackageSpecifier(specifier);
-  const exportsField = readPackageManifest(packageDir).exports;
-  if (!exportsField) throw new Error(`Package "${packageName}" does not define exports`);
-
-  const exactTarget = exportsField[subpath];
-
-  if (exactTarget) {
-    const target = selectExportTarget(exactTarget, specifier, packageName);
-    const filePath = resolve(packageDir, target.replace(/^\.\//, ''));
-    if (!existsSync(filePath)) throw new Error(`Resolved file does not exist: ${filePath}`);
-
-    return filePath;
-  }
-
-  for (const [pattern, exportTarget] of Object.entries(exportsField)) {
-    const wildcardValue = matchExportPattern(pattern, subpath);
-    if (wildcardValue === null) continue;
-
-    const targetPattern = selectExportTarget(exportTarget, specifier, packageName);
-    const filePath = resolve(packageDir, targetPattern.replace('*', wildcardValue).replace(/^\.\//, ''));
-    if (!existsSync(filePath)) throw new Error(`Resolved file does not exist: ${filePath}`);
-
-    return filePath;
-  }
-
-  throw new Error(`Package "${packageName}" does not export "${subpath}"`);
-}
-
-export function pkgDistUrl(specifier: string): string {
-  return pathToFileURL(resolvePackageExportFile(specifier)).href;
-}
-
-export function validatePackageImports(source: string, sourcePath: string): void {
-  const specifiers = new Set<string>();
-  const importRegex = /from\s+['"](@videojs\/[^'"]+)['"]/g;
-  let match: RegExpExecArray | null;
-
-  while ((match = importRegex.exec(source)) !== null) specifiers.add(match[1]);
-
-  for (const specifier of specifiers) {
-    try {
-      resolvePackageExportFile(specifier);
-    } catch (error) {
-      const message = error instanceof Error ? error.message : String(error);
-
-      throw new Error(`Invalid package import "${specifier}" in "${sourcePath}": ${message}`);
-    }
-  }
-}
-
-export function toRepoPath(filePath: string): string {
-  return relative(workspaceRoot, filePath);
-}
diff --git a/site/scripts/ejected-skins/react.ts b/site/scripts/ejected-skins/react.ts
deleted file mode 100644
index e834ea0385..0000000000
--- a/site/scripts/ejected-skins/react.ts
+++ /dev/null
@@ -1,1157 +0,0 @@
-/**
- * Build ejected skin snippets for copy-paste usage.
- *
- * Produces `site/src/content/ejected-skins.json` with:
- *
- * - HTML skins: rendered HTML templates with <media-icon> elements and resolved classes
- * - React skins: TSX (with types) and JSX (types stripped) with public icon imports
- * - CSS variants include a `css` field with all @imports resolved
- * - Tailwind variants omit the `css` field (users bring their own Tailwind)
- *
- * Prerequisites: `pnpm build:packages` (at minimum html, react, icons, skins, utils).
- */
-
-import { existsSync, readFileSync, statSync } from 'node:fs';
-import { dirname, resolve } from 'node:path';
-import { fileURLToPath } from 'node:url';
-
-import ts from 'typescript';
-
-import { resolveImports } from '../../../build/plugins/resolve-css-imports.ts';
-import { normalizeImports } from '../normalize-imports.ts';
-import {
-  DEMO_LIVE_POSTER_SRC,
-  DEMO_LIVE_SRC,
-  DEMO_POSTER_SRC,
-  DEMO_VIDEO_SRC,
-  LIVE_MEDIA,
-  type ReactSkinDef,
-} from './config.ts';
-import { pkgDistUrl, toRepoPath, validatePackageImports } from './package-resolver.ts';
-
-const __dirname = dirname(fileURLToPath(import.meta.url));
-const ROOT = resolve(__dirname, '../../..');
-
-function createSourceFile(filePath: string, source: string): ts.SourceFile {
-  return ts.createSourceFile(filePath, source, ts.ScriptTarget.Latest, true, ts.ScriptKind.TSX);
-}
-
-function isDirectivePrologueStatement(statement: ts.Statement): boolean {
-  return ts.isExpressionStatement(statement) && ts.isStringLiteral(statement.expression);
-}
-
-type NamedDeclaration =
-  | ts.FunctionDeclaration
-  | ts.ClassDeclaration
-  | ts.InterfaceDeclaration
-  | ts.TypeAliasDeclaration
-  | ts.EnumDeclaration;
-
-function isNamedDeclaration(statement: ts.Statement): statement is NamedDeclaration {
-  return (
-    ts.isFunctionDeclaration(statement) ||
-    ts.isClassDeclaration(statement) ||
-    ts.isInterfaceDeclaration(statement) ||
-    ts.isTypeAliasDeclaration(statement) ||
-    ts.isEnumDeclaration(statement)
-  );
-}
-
-function getStatementName(statement: ts.Statement): string | null {
-  if (isNamedDeclaration(statement)) {
-    return statement.name?.text ?? null;
-  }
-
-  if (ts.isVariableStatement(statement)) {
-    const decl = statement.declarationList.declarations[0];
-
-    return decl && ts.isIdentifier(decl.name) ? decl.name.text : null;
-  }
-
-  return null;
-}
-
-function isRelativeImport(specifier: string): boolean {
-  return specifier.startsWith('./') || specifier.startsWith('../');
-}
-
-function resolveRelativeModulePath(importerPath: string, specifier: string): string {
-  const basePath = resolve(dirname(importerPath), specifier);
-  const candidates = [
-    basePath,
-    `${basePath}.ts`,
-    `${basePath}.tsx`,
-    `${basePath}.js`,
-    `${basePath}.jsx`,
-    resolve(basePath, 'index.ts'),
-    resolve(basePath, 'index.tsx'),
-    resolve(basePath, 'index.js'),
-    resolve(basePath, 'index.jsx'),
-  ];
-
-  for (const candidate of candidates) {
-    if (existsSync(candidate) && statSync(candidate).isFile()) {
-      return candidate;
-    }
-  }
-
-  throw new Error(`Could not resolve relative import "${specifier}" from "${toRepoPath(importerPath)}"`);
-}
-
-function stripExportModifier(text: string): string {
-  return text.replace(/^export\s+default\s+/, '').replace(/^export\s+/, '');
-}
-
-function getImportStatementText(source: string, node: ts.ImportDeclaration): string {
-  return source.slice(node.getFullStart(), node.getEnd()).trim();
-}
-
-function findLocalDeclarationText(sourceFile: ts.SourceFile, localName: string): string | null {
-  for (const statement of sourceFile.statements) {
-    if (getStatementName(statement) === localName) {
-      return statement.getText(sourceFile);
-    }
-  }
-
-  return null;
-}
-
-function getNamedExportText(sourceFile: ts.SourceFile, exportName: string): string | null {
-  for (const statement of sourceFile.statements) {
-    const isExported = hasExportModifier(statement);
-
-    if (isExported && getStatementName(statement) === exportName) {
-      return stripExportModifier(statement.getText(sourceFile));
-    }
-
-    if (
-      ts.isExportDeclaration(statement) &&
-      !statement.moduleSpecifier &&
-      statement.exportClause &&
-      ts.isNamedExports(statement.exportClause)
-    ) {
-      for (const element of statement.exportClause.elements) {
-        const exportedName = element.name.text;
-        const localName = element.propertyName?.text ?? exportedName;
-
-        if (exportedName === exportName) {
-          return findLocalDeclarationText(sourceFile, localName);
-        }
-      }
-    }
-  }
-
-  return null;
-}
-
-function getLocalDeclarationTexts(sourceFile: ts.SourceFile): Map<string, string> {
-  const declarations = new Map<string, string>();
-
-  for (const statement of sourceFile.statements) {
-    if (ts.isExportDeclaration(statement)) continue;
-
-    const name = getStatementName(statement);
-    if (!name) continue;
-
-    const text = ts.canHaveModifiers(statement)
-      ? stripExportModifier(statement.getText(sourceFile))
-      : statement.getText(sourceFile);
-
-    declarations.set(name, text);
-  }
-
-  return declarations;
-}
-
-function getForwardedExportImport(
-  sourceFile: ts.SourceFile,
-  exportName: string,
-  localName: string,
-  isTypeOnly: boolean
-): string | null {
-  for (const statement of sourceFile.statements) {
-    if (!ts.isExportDeclaration(statement) || !statement.moduleSpecifier) continue;
-
-    if (!ts.isStringLiteralLike(statement.moduleSpecifier)) continue;
-
-    const source = statement.moduleSpecifier.text;
-    if (isRelativeImport(source)) continue;
-
-    let importedName = exportName;
-
-    if (statement.exportClause) {
-      if (!ts.isNamedExports(statement.exportClause)) continue;
-
-      const specifier = statement.exportClause.elements.find((element) => element.name.text === exportName);
-      if (!specifier) continue;
-
-      importedName = specifier.propertyName?.text ?? exportName;
-      isTypeOnly ||= statement.isTypeOnly || specifier.isTypeOnly;
-    }
-
-    const binding = importedName === localName ? importedName : `${importedName} as ${localName}`;
-    const typeKeyword = isTypeOnly ? 'type ' : '';
-
-    return `import ${typeKeyword}{ ${binding} } from '${source}';`;
-  }
-
-  return null;
-}
-
-function collectDeclarationClosure(
-  sourceFile: ts.SourceFile,
-  declarationName: string,
-  declarations: Map<string, string>,
-  seen = new Set<string>()
-): string[] {
-  if (seen.has(declarationName)) {
-    return [];
-  }
-
-  const declarationText = declarations.get(declarationName) ?? getNamedExportText(sourceFile, declarationName);
-  if (!declarationText) throw new Error(`Could not find declaration "${declarationName}" in "${sourceFile.fileName}"`);
-
-  seen.add(declarationName);
-
-  const identifierRegex = /\b[A-Za-z_]\w*\b/g;
-  const dependencyNames = new Set<string>();
-  let match: RegExpExecArray | null;
-
-  while ((match = identifierRegex.exec(declarationText)) !== null) {
-    const identifier = match[0];
-
-    if (identifier !== declarationName && declarations.has(identifier)) {
-      dependencyNames.add(identifier);
-    }
-  }
-
-  const dependencyTexts = [...dependencyNames].flatMap((name) =>
-    collectDeclarationClosure(sourceFile, name, declarations, seen)
-  );
-
-  return [...dependencyTexts, declarationText];
-}
-
-function inlineModuleExport(
-  sourceFile: ts.SourceFile,
-  importName: string,
-  localName: string,
-  isTypeOnly: boolean
-): string {
-  const declarations = getLocalDeclarationTexts(sourceFile);
-
-  if (!declarations.has(importName) && !getNamedExportText(sourceFile, importName)) {
-    const forwardedImport = getForwardedExportImport(sourceFile, importName, localName, isTypeOnly);
-    if (forwardedImport) return forwardedImport;
-  }
-
-  const exportTexts = collectDeclarationClosure(sourceFile, importName, declarations);
-  const exportText = exportTexts.join('\n\n');
-
-  if (importName === localName) {
-    return exportText;
-  }
-
-  const aliasKeyword = isTypeOnly ? 'type' : 'const';
-
-  return `${exportText}\n\n${aliasKeyword} ${localName} = ${importName};`;
-}
-
-function inlineRelativeImports(
-  source: string,
-  sourcePath: string,
-  rewriteSource = (value: string, _path: string) => value
-): string {
-  source = rewriteSource(source, sourcePath);
-  const sourceFile = createSourceFile(sourcePath, source);
-
-  const declarationsToInline: string[] = [];
-  const extraImports = new Set<string>();
-  const declarationsSeen = new Set<string>();
-  const replacements: Array<{ start: number; end: number; text: string }> = [];
-
-  for (const statement of sourceFile.statements) {
-    if (!ts.isImportDeclaration(statement)) {
-      continue;
-    }
-
-    const specifier = statement.moduleSpecifier.getText(sourceFile).slice(1, -1);
-    if (!isRelativeImport(specifier)) continue;
-
-    const importClause = statement.importClause;
-
-    if (!importClause?.namedBindings || !ts.isNamedImports(importClause.namedBindings) || importClause.name) {
-      throw new Error(`Unsupported relative import in "${toRepoPath(sourcePath)}": ${statement.getText(sourceFile)}`);
-    }
-
-    const targetPath = resolveRelativeModulePath(sourcePath, specifier);
-    const targetSource = rewriteSource(readFileSync(targetPath, 'utf-8'), targetPath);
-
-    validatePackageImports(targetSource, toRepoPath(targetPath));
-    const transformedTargetSource = inlineRelativeImports(targetSource, targetPath, rewriteSource);
-    const transformedTargetFile = createSourceFile(targetPath, transformedTargetSource);
-
-    for (const targetStatement of transformedTargetFile.statements) {
-      if (isDirectivePrologueStatement(targetStatement)) {
-        continue;
-      }
-
-      if (!ts.isImportDeclaration(targetStatement)) {
-        break;
-      }
-
-      const targetSpecifier = targetStatement.moduleSpecifier.getText(transformedTargetFile).slice(1, -1);
-
-      if (isRelativeImport(targetSpecifier)) {
-        throw new Error(
-          `Relative import remained after inlining in "${toRepoPath(targetPath)}": ${targetStatement.getText(
-            transformedTargetFile
-          )}`
-        );
-      }
-
-      extraImports.add(getImportStatementText(transformedTargetSource, targetStatement));
-    }
-
-    for (const element of importClause.namedBindings.elements) {
-      const importName = element.propertyName?.text ?? element.name.text;
-      const localName = element.name.text;
-      const declaration = inlineModuleExport(transformedTargetFile, importName, localName, element.isTypeOnly);
-
-      if (!declarationsSeen.has(declaration)) {
-        declarationsSeen.add(declaration);
-        declarationsToInline.push(declaration);
-      }
-    }
-
-    replacements.push({
-      start: statement.getFullStart(),
-      end: statement.getEnd(),
-      text: '',
-    });
-  }
-
-  let transformedSource = source;
-
-  for (const replacement of replacements.sort((a, b) => b.start - a.start)) {
-    transformedSource = `${transformedSource.slice(0, replacement.start)}${replacement.text}${transformedSource.slice(
-      replacement.end
-    )}`;
-  }
-
-  if (extraImports.size > 0) {
-    transformedSource = `${[...extraImports].join('\n')}\n${transformedSource}`;
-  }
-
-  if (declarationsToInline.length > 0) {
-    const insertPos = findLastImportEnd(transformedSource);
-    const block = `\n${declarationsToInline.join('\n\n')}\n`;
-
-    transformedSource = `${transformedSource.slice(0, insertPos)}${block}${transformedSource.slice(insertPos)}`;
-  }
-
-  transformedSource = normalizeImports(transformedSource);
-
-  for (const relativeSpecifier of collectRelativeImportSpecifiers(transformedSource)) {
-    throw new Error(`Relative import "${relativeSpecifier}" remains in "${toRepoPath(sourcePath)}" after inlining`);
-  }
-
-  return transformedSource;
-}
-
-function collectRelativeImportSpecifiers(source: string): string[] {
-  const specifiers = new Set<string>();
-  const importRegex = /from\s+['"]((?:\.\/|\.\.\/)[^'"]+)['"]/g;
-  let match: RegExpExecArray | null;
-
-  while ((match = importRegex.exec(source)) !== null) {
-    specifiers.add(match[1]);
-  }
-
-  return [...specifiers];
-}
-
-// ---------------------------------------------------------------------------
-// CSS resolution
-// ---------------------------------------------------------------------------
-
-export function resolveCss(cssPath: string): string {
-  const abs = resolve(ROOT, cssPath);
-  const raw = readFileSync(abs, 'utf-8');
-
-  return resolveImports(raw, dirname(abs));
-}
-
-// React skin processing - resolve imports, produce TSX + JSX.
-
-/** Serialize a JS value to source code. */
-function serializeValue(value: unknown, indent = 0): string {
-  if (typeof value === 'string') return JSON.stringify(value);
-
-  if (typeof value === 'function') {
-    // Function tokens (like `root`) — resolve with false (no shadow DOM)
-    return `() => ${JSON.stringify((value as (arg: boolean) => string)(false))}`;
-  }
-
-  if (typeof value === 'object' && value !== null) {
-    const entries = Object.entries(value as Record<string, unknown>);
-    const pad = '  '.repeat(indent + 1);
-    const closePad = '  '.repeat(indent);
-    const parts = entries.map(([k, v]) => `${pad}${k}: ${serializeValue(v, indent + 1)}`);
-
-    return `{\n${parts.join(',\n')},\n${closePad}}`;
-  }
-
-  return String(value);
-}
-
-/** Strip TypeScript types from TSX source to produce plain JSX. */
-function tsxToJsx(source: string): string {
-  const result = ts.transpileModule(source, {
-    compilerOptions: {
-      target: ts.ScriptTarget.ESNext,
-      module: ts.ModuleKind.ESNext,
-      jsx: ts.JsxEmit.Preserve,
-    },
-  });
-
-  return result.outputText;
-}
-
-// -- React source transforms --
-// Each transform removes its import(s) and collects any non-import code
-// (const declarations, type defs, inlined components) into `postImport`.
-// After all transforms, collected code is inserted after the final import.
-
-/**
- * Remove `cn` import and replace all `cn(...)` calls with template literals. `cn(a, b)` → `` `${a} ${b}` ``, with
- * string literal args inlined directly.
- */
-function inlineCn(source: string): string {
-  if (!source.match(/import\s+\{[^}]*\bcn\b[^}]*\}\s+from\s+['"]@videojs\/utils\/style['"]/)) {
-    return source;
-  }
-
-  source = source.replace(/import\s+\{[^}]*\bcn\b[^}]*\}\s+from\s+['"]@videojs\/utils\/style['"];?\n?/g, '');
-  return replaceCnCalls(source);
-}
-
-/** Convert parsed `cn(...)` args into a template literal expression. */
-function cnToConcat(args: string[]): string {
-  const isLiteral = (a: string) => /^['"]/.test(a) && /['"]$/.test(a);
-  const unwrap = (a: string) => a.slice(1, -1);
-
-  // All string literals → merge into a single quoted string
-  if (args.every(isLiteral)) {
-    return `'${args.map(unwrap).join(' ')}'`;
-  }
-
-  // Build template literal parts
-  const parts = args.map((a) => {
-    if (isLiteral(a)) return unwrap(a);
-
-    if (a === 'className') return `\${className ?? ''}`;
-
-    return `\${${a}}`;
-  });
-
-  return `\`${parts.join(' ')}\``;
-}
-
-/** Replace all `cn(...)` calls with simple string concatenation. */
-function replaceCnCalls(source: string): string {
-  const parts: string[] = [];
-  let i = 0;
-
-  while (i < source.length) {
-    const cnIndex = source.indexOf('cn(', i);
-
-    if (cnIndex === -1) {
-      parts.push(source.slice(i));
-      break;
-    }
-
-    // Ensure `cn(` is a standalone call, not part of another identifier
-    if (cnIndex > 0 && /\w/.test(source[cnIndex - 1])) {
-      parts.push(source.slice(i, cnIndex + 3));
-      i = cnIndex + 3;
-      continue;
-    }
-
-    parts.push(source.slice(i, cnIndex));
-
-    // Find the matching closing paren
-    const argsStart = cnIndex + 3;
-    let depth = 1;
-    let j = argsStart;
-
-    while (j < source.length && depth > 0) {
-      if (source[j] === '(') depth++;
-      else if (source[j] === ')') depth--;
-
-      if (depth > 0) j++;
-    }
-
-    const argsStr = source.slice(argsStart, j);
-    const args = splitTopLevelCommas(argsStr).map((a) => a.trim());
-
-    parts.push(cnToConcat(args));
-    i = j + 1; // skip past closing paren
-  }
-
-  return parts.join('');
-}
-
-/** Split a string by commas that are not inside parentheses, brackets, or template literals. */
-function splitTopLevelCommas(str: string): string[] {
-  const result: string[] = [];
-  let current = '';
-  let depth = 0;
-  let templateDepth = 0;
-
-  for (let i = 0; i < str.length; i++) {
-    const ch = str[i];
-
-    if (ch === '(' || ch === '[') depth++;
-    else if (ch === ')' || ch === ']') depth--;
-    else if (ch === '`') templateDepth = templateDepth > 0 ? templateDepth - 1 : templateDepth + 1;
-    else if (ch === ',' && depth === 0 && templateDepth === 0) {
-      result.push(current);
-      current = '';
-      continue;
-    }
-
-    current += ch;
-  }
-
-  if (current) result.push(current);
-
-  return result;
-}
-
-/** Rewrite package-private or local React icon imports to public package re-exports for ejected skins. */
-function rewriteReactIconImports(source: string): string {
-  return source
-    .replace(/from\s+['"]@videojs\/icons\/react(?:\/default)?['"]/g, "from '@videojs/react/icons'")
-    .replace(/from\s+['"]@videojs\/icons\/react\/minimal['"]/g, "from '@videojs/react/icons/minimal'")
-    .replace(/from\s+['"]@\/icons['"]/g, "from '@videojs/react/icons'")
-    .replace(/from\s+['"]@\/icons\/minimal['"]/g, "from '@videojs/react/icons/minimal'")
-    .replace(/from\s+['"]\.\.\/\.\.\/icons['"]/g, "from '@videojs/react/icons'")
-    .replace(/from\s+['"]\.\.\/\.\.\/icons\/minimal['"]/g, "from '@videojs/react/icons/minimal'");
-}
-
-function rewriteEjectedModule(source: string, sourcePath: string): string {
-  source = rewriteReactIconImports(source);
-
-  const skinPrimitivesPath = resolve(ROOT, 'packages/react/src/internal/skin-primitives.ts');
-  if (sourcePath !== skinPrimitivesPath) return source;
-
-  // Generated package skins use a private acyclic facade. Ejected source should
-  // consume the same components through the package's public entry point.
-  return source.replace(
-    /export (type )?(\{[^}]+\}) from '\.\.\/[^']+';/g,
-    (_, typeKeyword = '', bindings: string) => `export ${typeKeyword}${bindings} from '@videojs/react';`
-  );
-}
-
-/**
- * Replace `@videojs/skins/*` imports (private package) with inline const declarations containing the resolved token
- * values.
- */
-async function inlineSkinTokens(source: string, postImport: string[]): Promise<string> {
-  const regex = /import\s+\{([^}]*)\}\s+from\s+['"](@videojs\/skins\/[^'"]+)['"]\s*;?\n?/;
-  let match: RegExpMatchArray | null;
-
-  while ((match = source.match(regex)) !== null) {
-    const names = match[1]
-      .split(',')
-      .map((s) => s.trim())
-      .filter(Boolean);
-    const moduleSpec = match[2];
-    const mod = await import(pkgDistUrl(moduleSpec));
-
-    const declarations = names.map((name) => `const ${name} = ${serializeValue(mod[name])};`).join('\n');
-
-    source = source.replace(match[0], '');
-    postImport.push(declarations);
-  }
-
-  return source;
-}
-
-/**
- * Consolidate `@/` path alias imports into `@videojs/react`. All UI components and hooks are re-exported from the main
- * package entry.
- */
-function rewritePathAliases(source: string): string {
-  const aliasRegex = /import\s+(type\s+)?\{([^}]+)\}\s+from\s+['"]@\/[^'"]+['"];?\n?/g;
-  const valueNames = new Set<string>();
-  const typeNames = new Set<string>();
-  const matches: string[] = [];
-
-  let match: RegExpExecArray | null;
-
-  while ((match = aliasRegex.exec(source)) !== null) {
-    matches.push(match[0]);
-    const isTypeImport = !!match[1];
-    const names = match[2]
-      .split(',')
-      .map((s) => s.trim())
-      .filter(Boolean);
-
-    for (const name of names) {
-      if (isTypeImport || name.startsWith('type ')) {
-        typeNames.add(name.replace(/^type\s+/, ''));
-      } else {
-        valueNames.add(name);
-      }
-    }
-  }
-
-  if (matches.length === 0) return source;
-
-  for (const m of matches) {
-    source = source.replace(m, '');
-  }
-
-  const allNames = [
-    ...valueNames,
-    ...[...typeNames].filter((name) => !valueNames.has(name)).map((name) => `type ${name}`),
-  ];
-  const importLine = `import { ${allNames.join(', ')} } from '@videojs/react';\n`;
-
-  const lastImportIndex = findLastImportEnd(source);
-
-  source = `${source.slice(0, lastImportIndex)}${importLine}${source.slice(lastImportIndex)}`;
-
-  return source;
-}
-
-/**
- * Rewrite imports from private/internal packages: - `@videojs/core/dom` → merge into `@videojs/react` (re-exported
- * publicly) - `@videojs/utils/predicate` → inline function definitions - `isRenderProp` from `@videojs/react` → inline
- * (not a public export)
- */
-function inlinePrivatePackages(source: string): { source: string; utilities: string[] } {
-  const utilities: string[] = [];
-
-  // Merge @videojs/core/dom imports into @videojs/react
-  const coreDomMatch = source.match(/import\s+\{([^}]+)\}\s+from\s+['"]@videojs\/core\/dom['"]/);
-
-  if (coreDomMatch) {
-    const names = coreDomMatch[1]
-      .split(',')
-      .map((s) => s.trim())
-      .filter(Boolean);
-
-    source = source.replace(/import\s+\{[^}]+\}\s+from\s+['"]@videojs\/core\/dom['"];?\n?/g, '');
-    source = source.replace(
-      /import\s+\{([^}]+)\}\s+from\s+['"]@videojs\/react['"]/,
-      (_, existing: string) => `import { ${existing.trim()}, ${names.join(', ')} } from '@videojs/react'`
-    );
-  }
-
-  // Inline @videojs/utils/predicate
-  const predicateMatch = source.match(/import\s+\{([^}]+)\}\s+from\s+['"]@videojs\/utils\/predicate['"]/);
-
-  if (predicateMatch) {
-    source = source.replace(/import\s+\{[^}]+\}\s+from\s+['"]@videojs\/utils\/predicate['"];?\n?/g, '');
-    const names = predicateMatch[1]
-      .split(',')
-      .map((s) => s.trim())
-      .filter(Boolean);
-
-    for (const name of names) {
-      if (name === 'isString') {
-        utilities.push("function isString(value: unknown): value is string {\n  return typeof value === 'string';\n}");
-      }
-    }
-  }
-
-  // Inline isRenderProp — not a public export from @videojs/react
-  const reactImportMatch = source.match(/import\s+\{([^}]+)\}\s+from\s+['"]@videojs\/react['"]/);
-
-  if (reactImportMatch?.[1].includes('isRenderProp')) {
-    source = source.replace(/import\s+\{([^}]+)\}\s+from\s+['"]@videojs\/react['"]/, (_, names: string) => {
-      const nameList = names
-        .split(',')
-        .map((s: string) => s.trim())
-        .filter(Boolean);
-      const filtered = nameList.filter((n: string) => n !== 'isRenderProp');
-
-      if (!filtered.some((n: string) => n.includes('RenderProp'))) {
-        filtered.push('type RenderProp');
-      }
-
-      return `import { ${filtered.join(', ')} } from '@videojs/react'`;
-    });
-
-    // Ensure isValidElement is in the react import
-    const reactCoreMatch = source.match(/import\s+\{([^}]+)\}\s+from\s+['"]react['"]/);
-
-    if (reactCoreMatch && !reactCoreMatch[1].includes('isValidElement')) {
-      source = source.replace(
-        /import\s+\{([^}]+)\}\s+from\s+['"]react['"]/,
-        (_, names: string) => `import { ${names.trim()}, isValidElement } from 'react'`
-      );
-    }
-
-    utilities.push(
-      "function isRenderProp(value: unknown): value is RenderProp<unknown> {\n  return typeof value === 'function' || isValidElement(value);\n}"
-    );
-  }
-
-  return { source, utilities };
-}
-
-/** Find the index of the closing `)` that matches the `(` at `openIndex`. */
-function findMatchingParen(source: string, openIndex: number): number {
-  let depth = 0;
-
-  for (let i = openIndex; i < source.length; i++) {
-    if (source[i] === '(') depth++;
-    else if (source[i] === ')') depth--;
-
-    if (depth === 0) return i;
-  }
-
-  return -1;
-}
-
-/** Find the byte offset just past the last import statement in the source. */
-function findLastImportEnd(source: string): number {
-  // Match both `import ... from '...'` and side-effect `import '...'`
-  const importRegex = /^import\s+(?:.+from\s+)?['"][^'"]+['"];?\s*$/gm;
-  let lastEnd = 0;
-  let match: RegExpExecArray | null;
-
-  while ((match = importRegex.exec(source)) !== null) {
-    lastEnd = match.index + match[0].length + 1;
-  }
-
-  return lastEnd;
-}
-
-// ---------------------------------------------------------------------------
-// React output cleanup
-// ---------------------------------------------------------------------------
-
-/**
- * The members a `Base*SkinProps` alias adds on top of `BaseSkinProps`, without their JSDoc: the comments describe the
- * skin component, not the player the ejected file exports.
- */
-function getAddedMembers(statement: ts.Statement, sourceFile: ts.SourceFile): string[] {
-  if (!ts.isTypeAliasDeclaration(statement) || !ts.isIntersectionTypeNode(statement.type)) return [];
-
-  return statement.type.types
-    .filter(ts.isTypeLiteralNode)
-    .flatMap((literal) => literal.members)
-    .map((member) => member.getText(sourceFile).trim().replace(/;$/, ''));
-}
-
-/**
- * Replace the `BaseSkinProps` type chain with a clean interface. Removes the intermediate type aliases and produces a
- * flat exported interface, carrying over whatever members those aliases added.
- */
-export function resolvePropsInterface(source: string): string {
-  const sourceFile = createSourceFile('props.tsx', source);
-
-  const toRemove: Array<{ start: number; end: number }> = [];
-  const addedMembers: string[] = [];
-
-  let mainPropsName: string | null = null;
-  let mainPropsStart = -1;
-  let mainPropsEnd = -1;
-  let mainPropsExported = false;
-
-  for (const statement of sourceFile.statements) {
-    if (ts.isImportDeclaration(statement)) continue;
-
-    const name = getStatementName(statement);
-
-    // `BaseSkinProps` and the per-media aliases built on it, e.g.
-    // `BaseVideoSkinProps`. Leaving one behind would reference a removed type.
-    if (name?.startsWith('Base') && name.endsWith('SkinProps')) {
-      toRemove.push({ start: statement.getFullStart(), end: statement.getEnd() });
-      addedMembers.push(...getAddedMembers(statement, sourceFile));
-      continue;
-    }
-
-    if (name?.endsWith('SkinProps')) {
-      mainPropsName = name;
-      mainPropsStart = statement.getFullStart();
-      mainPropsEnd = statement.getEnd();
-      mainPropsExported = hasExportModifier(statement);
-    }
-  }
-
-  if (!mainPropsName) return source;
-
-  const exportKw = mainPropsExported ? 'export ' : '';
-  const members = ['children?: ReactNode', 'style?: CSSProperties', 'className?: string', ...addedMembers];
-  const interfaceText = `${exportKw}interface ${mainPropsName} {\n${members.map((member) => `  ${member};`).join('\n')}\n}`;
-
-  const replacements = [
-    ...toRemove.map((r) => ({ ...r, text: '' })),
-    { start: mainPropsStart, end: mainPropsEnd, text: interfaceText },
-  ].sort((a, b) => b.start - a.start);
-
-  for (const r of replacements) {
-    source = `${source.slice(0, r.start)}${r.text}${source.slice(r.end)}`;
-  }
-
-  // Remove PropsWithChildren from react import if no longer used in the body
-  const bodyAfterImports = source.slice(findLastImportEnd(source));
-
-  if (!bodyAfterImports.includes('PropsWithChildren')) {
-    source = source.replace(/import\s+\{([^}]+)\}\s+from\s+['"]react['"]/, (_, names: string) => {
-      const nameList = names
-        .split(',')
-        .map((s: string) => s.trim())
-        .filter(Boolean);
-      const filtered = nameList.filter((n: string) => !n.includes('PropsWithChildren'));
-
-      return `import { ${filtered.join(', ')} } from 'react'`;
-    });
-  }
-
-  return source;
-}
-
-// ---------------------------------------------------------------------------
-// React output reorganization
-// ---------------------------------------------------------------------------
-
-type SectionKey = 'top' | 'mainType' | 'main' | 'labels' | 'components' | 'errorDialog' | 'utilities' | 'icons';
-
-const SECTION_HEADERS: Partial<Record<SectionKey, string>> = {
-  mainType: 'Skin',
-  labels: 'Labels',
-  components: 'Components',
-  errorDialog: 'Error Dialog',
-  utilities: 'Utilities',
-  icons: 'Icons',
-};
-
-function hasExportModifier(statement: ts.Statement): boolean {
-  const modifiers = ts.canHaveModifiers(statement) ? ts.getModifiers(statement) : undefined;
-
-  return modifiers?.some((m) => m.kind === ts.SyntaxKind.ExportKeyword) ?? false;
-}
-
-function classifyDeclaration(name: string, isExported: boolean): SectionKey {
-  if (isExported && name.endsWith('Skin')) return 'main';
-
-  if (isExported && name.endsWith('SkinProps')) return 'mainType';
-
-  if (name === 'SEEK_TIME') return 'mainType';
-
-  if (name.endsWith('Label')) return 'labels';
-
-  if (name === 'ErrorDialog' || name === 'ErrorDialogClassNames' || name === 'ERROR_CLASSNAMES') return 'errorDialog';
-
-  if (name.endsWith('Icon')) return 'icons';
-
-  if (name.startsWith('is') && name[2] === name[2]?.toUpperCase()) return 'utilities';
-
-  if (name === 'Button' || name.endsWith('Popover') || name.startsWith('Slider')) return 'components';
-
-  return 'top';
-}
-
-function sectionHeader(title: string): string {
-  return `// ================================================================\n// ${title}\n// ================================================================`;
-}
-
-/**
- * Reorganize the React skin output into well-defined sections. Classifies each top-level declaration and reassembles
- * with section headers. Extra declarations (utilities, icon components) are appended to their sections.
- */
-function reorganizeReactOutput(source: string, extraUtilities: string[], extraIconComponents: string[]): string {
-  const sourceFile = createSourceFile('output.tsx', source);
-
-  const imports: string[] = [];
-  const sections: Record<SectionKey, string[]> = {
-    top: [],
-    mainType: [],
-    main: [],
-    labels: [],
-    components: [],
-    errorDialog: [],
-    utilities: [],
-    icons: [],
-  };
-
-  for (const statement of sourceFile.statements) {
-    if (isDirectivePrologueStatement(statement)) continue;
-
-    if (ts.isImportDeclaration(statement)) {
-      imports.push(statement.getText(sourceFile));
-      continue;
-    }
-
-    const name = getStatementName(statement);
-    const exported = hasExportModifier(statement);
-    const section = name ? classifyDeclaration(name, exported) : 'top';
-
-    sections[section].push(statement.getText(sourceFile));
-  }
-
-  // Append extra declarations from transforms
-  sections.utilities.push(...extraUtilities);
-  sections.icons.push(...extraIconComponents);
-
-  // Assemble output
-  const sectionOrder: SectionKey[] = [
-    'top',
-    'mainType',
-    'main',
-    'labels',
-    'components',
-    'errorDialog',
-    'utilities',
-    'icons',
-  ];
-
-  const parts: string[] = [imports.join('\n')];
-
-  for (const key of sectionOrder) {
-    const declarations = sections[key];
-    if (declarations.length === 0) continue;
-
-    const header = SECTION_HEADERS[key];
-
-    if (header) {
-      parts.push(sectionHeader(header));
-    }
-
-    parts.push(declarations.join('\n\n'));
-  }
-
-  return `'use client';\n\n${parts.join('\n\n')}\n`;
-}
-
-/**
- * Flatten `ERROR_CLASSNAMES` into the inlined `ErrorDialog` component so the ejected output has plain className strings
- * instead of the classNames-prop indirection.
- *
- * @temporary Remove once the ErrorDialog component no longer uses the
- *   `classNames` prop pattern. Tracked in https://github.com/videojs/v10/pull/1077.
- *   Cleanup: delete this function + its call in `processReactSkin` (step 9).
- */
-function flattenErrorClasses(source: string): string {
-  if (!source.includes('const ERROR_CLASSNAMES')) return source;
-
-  // -- 1. Parse ERROR_CLASSNAMES const into a key → raw-expression map -------
-  const blockMatch = source.match(/const ERROR_CLASSNAMES\s*=\s*\{([\s\S]*?)\};/);
-  if (!blockMatch) return source;
-
-  const classMap = new Map<string, string>();
-
-  // Match `key: <value>,` handling multi-char expressions (property access,
-  // array/filter/join chains, string literals, etc.)
-  for (const [, key, value] of blockMatch[1].matchAll(/(\w+)\s*:\s*(.+?)\s*(?:,\s*$|,?\s*(?=\}))/gm)) {
-    classMap.set(key, value);
-  }
-
-  // -- 2. Replace className={classNames?.X} with resolved values -------------
-  for (const [key, value] of classMap) {
-    const isStringLiteral = /^'[^']*'$/.test(value) || /^"[^"]*"$/.test(value);
-    const replacement = isStringLiteral
-      ? `className=${value.replace(/'/g, '"')}` // 'foo' → className="foo"
-      : `className={${value}}`;
-
-    source = source.replace(new RegExp(`className=\\{classNames\\?\\.${key}\\}`, 'g'), replacement);
-  }
-
-  // Any remaining classNames?.X refs (keys absent from ERROR_CLASSNAMES) → drop attr
-  source = source.replace(/\s*className=\{classNames\?\.\w+\}/g, '');
-
-  // -- 3. Remove ErrorDialogClassNames interface -----------------------------
-  source = source.replace(/(?:export )?interface ErrorDialogClassNames\s*\{[\s\S]*?\}\n*/g, '');
-
-  // -- 4. Remove ERROR_CLASSNAMES const --------------------------------------
-  source = source.replace(/const ERROR_CLASSNAMES\s*=\s*\{[\s\S]*?\};\n*/g, '');
-
-  // -- 5. Simplify ErrorDialog signature (drop classNames prop) --------------
-  source = source.replace(
-    /(?:export )?function ErrorDialog\(\{\s*classNames\s*\}\s*:\s*\{\s*classNames\?\s*:\s*ErrorDialogClassNames\s*\}\)/g,
-    'function ErrorDialog()'
-  );
-
-  // -- 6. Simplify call site -------------------------------------------------
-  source = source.replace(/<ErrorDialog\s+classNames=\{ERROR_CLASSNAMES\}\s*\/>/g, '<ErrorDialog />');
-
-  return source;
-}
-
-/**
- * Move the destructured props from the skin function body into the function argument so the signature reads e.g.:
- * `function VideoSkin({ children, className, style, ...rest }: VideoSkinProps)`
- */
-function destructureSkinProps(source: string): string {
-  return source.replace(
-    /export function (\w+Skin\w*)\(props: (\w+Props)\): ReactNode \{\n\s*const \{ (.+?) \} = props;\n/,
-    'export function $1({ $3 }: $2): ReactNode {\n'
-  );
-}
-
-/**
- * Flatten the skin into a Player component. Produces two files: - `player.ts`: owns the `createPlayer({ features })`
- * call and exports `Player`. - `VideoPlayer.tsx` / `AudioPlayer.tsx`: imports `Player` from `./player` and owns the
- * React component. Splitting these avoids React Fast Refresh bailing out (a file must export only components for Fast
- * Refresh to apply edits).
- *
- * Also: merges SkinProps into PlayerProps (adding `src`), inlines the skin body into VideoPlayer/AudioPlayer wrapped in
- * `Player`, and removes the separate Skin export.
- */
-function flattenSkinIntoPlayer(
-  source: string,
-  skin: Pick<ReactSkinDef, 'group' | 'live' | 'mediaType' | 'style'>
-): { player: string; component: string } {
-  const { group, live, mediaType, style } = skin;
-  const isVideo = mediaType === 'video';
-  const mediaTag = live ? LIVE_MEDIA[mediaType].component : isVideo ? 'Video' : 'Audio';
-  const features = live ? (isVideo ? 'liveVideoFeatures' : 'liveAudioFeatures') : `${mediaType}Features`;
-  const playerName = `${live ? 'Live' : ''}${isVideo ? 'VideoPlayer' : 'AudioPlayer'}`;
-  const playsInline = isVideo ? ' playsInline' : '';
-
-  const player = [
-    `import { createPlayer } from '@videojs/react';`,
-    `import { ${features} } from '@videojs/react/${group}';`,
-    '',
-    `export const { Player } = createPlayer({ features: ${features} });`,
-    '',
-  ].join('\n');
-
-  // 1. Add media, CSS, and Player imports
-  const mediaImport = live
-    ? `import { ${mediaTag} } from '@videojs/react/media/${LIVE_MEDIA[mediaType].subpath}';`
-    : `import { ${mediaTag} } from '@videojs/react/${group}';`;
-  const playerImports = [mediaImport];
-
-  if (style === 'css') playerImports.push("import './player.css';");
-
-  playerImports.push("import { Player } from './player';");
-  source = source.replace(/(import \{[^}]*\} from '@videojs\/react';)/, `$1\n${playerImports.join('\n')}`);
-
-  // 2. Rename SkinProps → PlayerProps, replace `children` with `src`
-  const posterProp = isVideo ? '\n  poster?: string | undefined;' : '';
-
-  source = source.replace(/export interface \w+SkinProps/, `export interface ${playerName}Props`);
-  source = source.replace(/(\s*)children\?: ReactNode;/, `$1src: string;${posterProp}`);
-
-  // 3. Replace the skin function: rename, swap children→src, wrap in Player
-  //    Match the destructured form: function XSkin({ children, className, poster, ...rest }: XSkinProps): ReactNode {
-  source = source.replace(
-    /export function \w+Skin\w*\(\{ children, ([^}]+)\}: \w+SkinProps\): ReactNode \{\n([\s\S]*?)\n\}/,
-    (_, destructuredRest: string, body: string) => {
-      // Replace {children} with <Video/Audio> element inside the body
-      let newBody = body.replace(/^\n+/, '').replace(/(\s*)\{children\}/, `$1<${mediaTag} src={src}${playsInline} />`);
-
-      // Wrap the return body in <Player>, re-indenting everything
-      // inside `return (...)` by 2 extra spaces for the new wrapper.
-      const returnIdx = newBody.indexOf('return (');
-
-      if (returnIdx !== -1) {
-        const parenStart = newBody.indexOf('(', returnIdx);
-        const parenEnd = findMatchingParen(newBody, parenStart);
-        const inner = newBody.slice(parenStart + 1, parenEnd).replace(/^\n+|\n+$/g, '');
-        const reindented = inner
-          .split('\n')
-          .map((line) => (line.trim() === '' ? '' : `  ${line}`))
-          .join('\n');
-        const playerProps = isVideo ? ' poster={poster}' : '';
-
-        newBody = `${newBody.slice(0, returnIdx)}return (\n    <Player${playerProps}>\n${reindented}\n    </Player>\n  )${newBody.slice(parenEnd + 1)}`;
-      }
-
-      const posterSrc = live ? DEMO_LIVE_POSTER_SRC : DEMO_POSTER_SRC;
-      const posterExample = isVideo ? `\n *   poster="${posterSrc}"` : '';
-
-      // @example JSDoc and the function signature
-      const header = [
-        '/**',
-        ' * @example',
-        ' * ```tsx',
-        ` * <${playerName}`,
-        ` *   src="${live ? DEMO_LIVE_SRC : DEMO_VIDEO_SRC}"${posterExample}`,
-        ' * />',
-        ' * ```',
-        ' */',
-        `export function ${playerName}({ src, ${isVideo ? 'poster, ' : ''}${destructuredRest}}: ${playerName}Props): ReactNode {`,
-      ].join('\n');
-
-      return `${header}\n${newBody}\n}`;
-    }
-  );
-
-  // 4. Remove the "Skin" section header (it's now part of "Player")
-  source = source.replace(/\/\/ =+\n\/\/ Skin\n\/\/ =+\n\n/, `${sectionHeader('Player')}\n\n`);
-
-  return { player, component: source };
-}
-
-/** Process a React skin: rewrite icon imports, resolve imports, and produce both TSX and JSX versions. */
-export async function processReactSkin(
-  skin: ReactSkinDef
-): Promise<{ tsx: Record<string, string>; jsx: Record<string, string> }> {
-  const absPath = resolve(ROOT, skin.source);
-  let source = readFileSync(absPath, 'utf-8');
-
-  source = rewriteReactIconImports(source);
-  validatePackageImports(source, skin.source);
-  const postImport: string[] = [];
-
-  // 1. Inline relative imports recursively so the output is self-contained.
-  source = inlineRelativeImports(source, absPath, rewriteEjectedModule);
-
-  // 2. Resolve @videojs/skins/* tokens (Tailwind skins only, private package)
-  source = await inlineSkinTokens(source, postImport);
-
-  // 3. Replace cn calls with template literals
-  source = inlineCn(source);
-
-  // 4. Consolidate @/ path aliases → @videojs/react
-  source = rewritePathAliases(source);
-
-  // 5. Inline private package imports (core/dom → react, predicates, isRenderProp)
-  const privates = inlinePrivatePackages(source);
-
-  source = privates.source;
-
-  // 6. Insert collected non-import code after the final import statement
-  if (postImport.length > 0) {
-    const insertPos = findLastImportEnd(source);
-    const block = `\n${postImport.join('\n\n')}\n`;
-
-    source = `${source.slice(0, insertPos)}${block}${source.slice(insertPos)}`;
-  }
-
-  // 7. Replace Base*SkinProps chain with a clean interface
-  source = resolvePropsInterface(source);
-
-  // 8. Flatten ERROR_CLASSNAMES into ErrorDialog JSX (@temporary — remove with flattenErrorClasses)
-  source = flattenErrorClasses(source);
-
-  // 9. Reorganize into sections with comment headers
-  let tsx = reorganizeReactOutput(source, privates.utilities, []);
-
-  // 10. Destructure skin props in function argument instead of body
-  tsx = destructureSkinProps(tsx);
-
-  // 11. Flatten skin into player (split into player.ts + Player.tsx, wrap in Player)
-  const { player, component } = flattenSkinIntoPlayer(tsx, skin);
-  const componentFile = `${skin.live ? 'Live' : ''}${skin.mediaType === 'video' ? 'VideoPlayer' : 'AudioPlayer'}`;
-
-  return {
-    tsx: {
-      'player.ts': player,
-      [`${componentFile}.tsx`]: component,
-    },
-    jsx: {
-      'player.js': tsxToJsx(player),
-      [`${componentFile}.jsx`]: tsxToJsx(component),
-    },
-  };
-}
diff --git a/site/scripts/tests/ejected-skins.test.ts b/site/scripts/tests/ejected-skins.test.ts
deleted file mode 100644
index ddbd3af651..0000000000
--- a/site/scripts/tests/ejected-skins.test.ts
+++ /dev/null
@@ -1,170 +0,0 @@
-import { describe, expect, it } from 'vite-plus/test';
-
-import {
-  DEMO_LIVE_POSTER_SRC,
-  DEMO_LIVE_SRC,
-  DEMO_POSTER_SRC,
-  DEMO_VIDEO_SRC,
-  SKINS,
-} from '../ejected-skins/config.ts';
-import {
-  createRenderMediaIcon,
-  evaluateTemplate,
-  extractTemplateLiteral,
-  parseImportedNames,
-  prependHtmlSkinScripts,
-  replaceSlots,
-} from '../ejected-skins/html.ts';
-import { buildEjectedSkin } from '../ejected-skins/index.ts';
-import { resolvePropsInterface } from '../ejected-skins/react.ts';
-
-describe('ejected skin configuration', () => {
-  it('has a unique id for every configured skin', () => {
-    expect(new Set(SKINS.map(({ id }) => id)).size).toBe(SKINS.length);
-  });
-
-  it('defines both platforms using the remaining CSS sources', () => {
-    expect(new Set(SKINS.map(({ platform }) => platform))).toEqual(new Set(['html', 'react']));
-    expect(new Set(SKINS.map(({ style }) => style))).toEqual(new Set(['css']));
-  });
-
-  it('only defines source-backed combinations', () => {
-    expect(SKINS).toHaveLength(16);
-    expect(SKINS.filter(({ live }) => live)).toHaveLength(8);
-  });
-});
-
-describe('ejected HTML skins', () => {
-  it('extracts and evaluates the skin template', () => {
-    const source = `function getTemplateHTML() { return /*html*/ \`\n  <button>\${label}</button>\n\`; }`;
-
-    expect(evaluateTemplate(extractTemplateLiteral(source), { label: 'Play' })).toBe('<button>Play</button>');
-  });
-
-  it('extracts a generated skin template', () => {
-    const source = 'export const template = createTemplate(/* html */ `<button>Play</button>`);';
-
-    expect(extractTemplateLiteral(source)).toBe('<button>Play</button>');
-  });
-
-  it('collects imported names and aliases', () => {
-    const imports = parseImportedNames("import { playText, pauseText as pause } from '@videojs/core';");
-
-    expect([...imports]).toEqual([
-      ['playText', '@videojs/core'],
-      ['pause', '@videojs/core'],
-    ]);
-  });
-
-  // Mirrors the real templates: the poster slot carries an image.
-  const slotSource = [
-    '<!-- @deprecated use the default slot -->',
-    '<slot name="media"></slot>',
-    '<slot></slot>',
-    '  <slot name="poster">',
-    '    <img alt="" decoding="async">',
-    '  </slot>',
-  ].join('\n');
-
-  it('replaces the media slot and collapses the poster slot to its fallback image', () => {
-    const result = replaceSlots(slotSource, { mediaType: 'video', live: false });
-
-    expect(result).toContain(`<video src="${DEMO_VIDEO_SRC}" playsinline></video>`);
-    expect(result).toContain('  <img alt="" decoding="async" />');
-    expect(result).not.toContain('<slot name="poster">');
-  });
-
-  it('gives live skins a media element and a live source', () => {
-    const result = replaceSlots(slotSource, { mediaType: 'video', live: true });
-
-    expect(result).toContain(`<hlsjs-video src="${DEMO_LIVE_SRC}" playsinline></hlsjs-video>`);
-    expect(result).toContain('  <img alt="" decoding="async" />');
-  });
-
-  it('escapes generated media icons', () => {
-    expect(createRenderMediaIcon('minimal')('play&pause', { label: 'a"b' })).toBe(
-      '<media-icon name="play&amp;pause" family="minimal" label="a&quot;b"></media-icon>'
-    );
-  });
-
-  it('wraps snippets with the matching player and CDN bundle', () => {
-    const skin = SKINS.find(({ id }) => id === 'minimal-audio');
-    if (skin?.platform !== 'html') throw new Error('Missing HTML skin fixture');
-
-    expect(prependHtmlSkinScripts('<media-controls></media-controls>', skin)).toContain(
-      '/audio-minimal.js"></script>\n<link rel="stylesheet" href="./player.css">\n\n<audio-player>'
-    );
-  });
-
-  it('loads the media bundle alongside the preset bundle for live skins', () => {
-    const skin = SKINS.find(({ id }) => id === 'minimal-live-video');
-    if (skin?.platform !== 'html') throw new Error('Missing live HTML skin fixture');
-
-    const result = prependHtmlSkinScripts('<media-controls></media-controls>', skin);
-
-    expect(result).toContain('/live-video-minimal.js"></script>');
-    expect(result).toContain('/media/hlsjs-video.js"></script>');
-    expect(result).toContain('<live-video-player poster=');
-  });
-
-  it('gives a video player the poster the collapsed slot no longer carries', () => {
-    const skin = SKINS.find(({ id }) => id === 'default-video');
-    if (skin?.platform !== 'html') throw new Error('Missing HTML skin fixture');
-
-    expect(prependHtmlSkinScripts('<media-poster></media-poster>', skin)).toContain(
-      `<video-player poster="${DEMO_POSTER_SRC}">`
-    );
-  });
-
-  it('gives a live video player the live poster', () => {
-    const skin = SKINS.find(({ id }) => id === 'minimal-live-video');
-    if (skin?.platform !== 'html') throw new Error('Missing live HTML skin fixture');
-
-    expect(prependHtmlSkinScripts('<media-poster></media-poster>', skin)).toContain(
-      `<live-video-player poster="${DEMO_LIVE_POSTER_SRC}">`
-    );
-  });
-});
-
-describe('ejected React skins', () => {
-  it('produces CSS skin sources with matching dependencies', async () => {
-    const cssSkin = SKINS.find(({ id }) => id === 'default-live-video-react');
-    if (cssSkin?.platform !== 'react') throw new Error('Missing live React skin fixture');
-
-    const cssEntry = await buildEjectedSkin(cssSkin);
-    const cssSource = cssEntry.tsx?.['LiveVideoPlayer.tsx'];
-
-    expect(cssSource).toContain("import './player.css';");
-    expect(cssSource).toContain('export function LiveVideoSkin');
-  });
-});
-
-describe('resolvePropsInterface', () => {
-  // Mirrors the real chain: the video alias sits between `BaseSkinProps` and
-  // the skin's own props type.
-  const source = [
-    'type BaseSkinProps<T = unknown> = PropsWithChildren<T & { style?: CSSProperties; className?: string }>;',
-    '',
-    'type BaseVideoSkinProps<T = unknown> = BaseSkinProps<T> & {',
-    '  /** Describes the skin component, not the player the ejected file exports. */',
-    '  renderPoster?: RenderProp<Poster.State> | undefined;',
-    '};',
-    '',
-    'export type VideoSkinProps = BaseVideoSkinProps;',
-  ].join('\n');
-
-  it('flattens the chain into one interface, leaving no alias behind', () => {
-    const result = resolvePropsInterface(source);
-
-    expect(result).not.toContain('BaseSkinProps');
-    expect(result).not.toContain('BaseVideoSkinProps');
-    expect(result).toContain('export interface VideoSkinProps {');
-  });
-
-  it('carries over what an alias added, without its JSDoc', () => {
-    const result = resolvePropsInterface(source);
-
-    expect(result).toContain('  renderPoster?: RenderProp<Poster.State> | undefined;');
-    expect(result).not.toContain('Describes the skin component');
-  });
-});
diff --git a/site/src/components/Code/Shared.tsx b/site/src/components/Code/Shared.tsx
index b86b3bb413..26000aa1d5 100644
--- a/site/src/components/Code/Shared.tsx
+++ b/site/src/components/Code/Shared.tsx
@@ -18,8 +18,8 @@ interface Highlighted {
 }
 
 // Build-time memo: identical (code, lang) pairs repeat across pages
-// (e.g. the same ejected skin block on both /concepts/skins and
-// /how-to/customize-skins). Shiki's codeToHast + hastToHtml is the
+// (e.g. the same install command on several skin references). Shiki's
+// codeToHast + hastToHtml is the
 // dominant cost per ServerCode; caching the rendered output reuses
 // it across every page in a single build.
 const highlightCache = new Map<string, Highlighted>();
diff --git a/site/src/components/docs/DocsLink.astro b/site/src/components/docs/DocsLink.astro
index 00abfa21c6..8e414f7f52 100644
--- a/site/src/components/docs/DocsLink.astro
+++ b/site/src/components/docs/DocsLink.astro
@@ -6,8 +6,10 @@ import A from '../typography/A.astro';
 
 interface Props extends Omit<HTMLAttributes<'a'>, 'href'> {
   slug: string;
+  /** Heading ID within the target guide. */
+  anchor?: string;
 }
-const { slug, class: className } = Astro.props;
+const { slug, anchor, class: className } = Astro.props;
 
 const { framework: paramFramework } = Astro.params;
 
@@ -15,10 +17,11 @@ if (!paramFramework || !isValidFramework(paramFramework)) {
   throw new Error(`Invalid or missing framework param "${paramFramework ?? 'undefined'}".`);
 }
 
-const { url: href } = resolveDocsLinkUrl({
+const { url } = resolveDocsLinkUrl({
   targetSlug: slug,
   contextFramework: paramFramework,
 });
+const href = anchor ? `${url}#${anchor}` : url;
 ---
 
 <A href={href} class={className ?? undefined}><slot /></A>
diff --git a/site/src/components/docs/DocsLinkCard.astro b/site/src/components/docs/DocsLinkCard.astro
index 5d00b1edb1..f696ed705b 100644
--- a/site/src/components/docs/DocsLinkCard.astro
+++ b/site/src/components/docs/DocsLinkCard.astro
@@ -6,9 +6,11 @@ import { resolveDocsLinkUrl } from '@/utils/docs/routing';
 
 interface Props extends Omit<HTMLAttributes<'a'>, 'href'> {
   slug: string;
+  /** Heading ID within the target guide. */
+  anchor?: string;
   description?: string;
 }
-const { slug, description } = Astro.props;
+const { slug, anchor, description } = Astro.props;
 
 const { framework: paramFramework } = Astro.params;
 
@@ -16,10 +18,11 @@ if (!paramFramework || !isValidFramework(paramFramework)) {
   throw new Error(`Invalid or missing framework param "${paramFramework ?? 'undefined'}".`);
 }
 
-const { url: href } = resolveDocsLinkUrl({
+const { url } = resolveDocsLinkUrl({
   targetSlug: slug,
   contextFramework: paramFramework,
 });
+const href = anchor ? `${url}#${anchor}` : url;
 ---
 
 <div
diff --git a/site/src/components/docs/EjectedSkin.astro b/site/src/components/docs/EjectedSkin.astro
deleted file mode 100644
index e615ddde95..0000000000
--- a/site/src/components/docs/EjectedSkin.astro
+++ /dev/null
@@ -1,90 +0,0 @@
----
-import { getEntry } from 'astro:content';
-import type { BundledLanguage } from 'shiki';
-import ServerCode from '@/components/Code/ServerCode.astro';
-import { Tab, TabsList, TabsPanel, TabsRoot } from '@/components/Tabs.tsx';
-
-interface Props {
-  id: string;
-}
-
-const { id } = Astro.props;
-const entry = await getEntry('ejectedSkins', id);
-if (!entry) return;
-
-const skin = entry.data;
-
-const EXT_TO_LANG: Record<string, BundledLanguage> = {
-  ts: 'ts',
-  tsx: 'tsx',
-  js: 'js',
-  jsx: 'jsx',
-};
-
-function langFromFilename(filename: string): BundledLanguage {
-  const ext = filename.split('.').pop() ?? '';
-
-  return EXT_TO_LANG[ext] ?? 'tsx';
-}
-
-// Order React files so the component file is first (initial tab), then config files.
-const reactFiles = skin.tsx
-  ? Object.entries(skin.tsx).sort(([a], [b]) => {
-      const aIsComponent = a.endsWith('.tsx') || a.endsWith('.jsx');
-      const bIsComponent = b.endsWith('.tsx') || b.endsWith('.jsx');
-      if (aIsComponent === bIsComponent) return a.localeCompare(b);
-
-      return aIsComponent ? -1 : 1;
-    })
-  : [];
----
-
-{
-  skin.platform === "react" ? (
-    <TabsRoot client:idle>
-      <TabsList client:idle label={`${skin.name} implementation`}>
-        {reactFiles.map(([filename], index) => (
-          <Tab client:idle value={filename} initial={index === 0}>
-            {filename}
-          </Tab>
-        ))}
-        {skin.css && (
-          <Tab client:idle value="css">
-            skin.css
-          </Tab>
-        )}
-      </TabsList>
-      {reactFiles.map(([filename, code], index) => (
-        <TabsPanel client:idle value={filename} initial={index === 0}>
-          <ServerCode code={code} lang={langFromFilename(filename)} />
-        </TabsPanel>
-      ))}
-      {skin.css && (
-        <TabsPanel client:idle value="css">
-          <ServerCode code={skin.css} lang="css" />
-        </TabsPanel>
-      )}
-    </TabsRoot>
-  ) : (
-    <TabsRoot client:idle>
-      <TabsList client:idle label={`${skin.name} implementation`}>
-        <Tab client:idle value="html" initial>
-          HTML
-        </Tab>
-        {skin.css && (
-          <Tab client:idle value="css">
-            CSS
-          </Tab>
-        )}
-      </TabsList>
-      <TabsPanel client:idle value="html" initial>
-        <ServerCode code={skin.html!} lang="html" />
-      </TabsPanel>
-      {skin.css && (
-        <TabsPanel client:idle value="css">
-          <ServerCode code={skin.css} lang="css" />
-        </TabsPanel>
-      )}
-    </TabsRoot>
-  )
-}
diff --git a/site/src/components/docs/SidebarItem.astro b/site/src/components/docs/SidebarItem.astro
index 9c50a3c926..eb49ab7035 100644
--- a/site/src/components/docs/SidebarItem.astro
+++ b/site/src/components/docs/SidebarItem.astro
@@ -70,10 +70,11 @@ function getGroupRotate(depth: number) {
           "flex items-center gap-4 py-2 text-faded-black dark:text-manila-light",
           "cursor-pointer",
           depth === 0
-            ? "font-display text-h4 leading-tight uppercase"
+            ? "font-display text-h4 uppercase font-bold"
             : "text-p3",
-          depth > 0 && "border-l pl-4",
-          isActive ? "border-orange" : "border-manila-75 dark:border-warm-gray",
+          depth > 0 && "pl-4",
+          depth > 0 && isActive &&
+            "relative before:absolute before:inset-y-0 before:left-0 before:w-px before:bg-orange",
           getGroupMargin(depth),
         ]}
         style={
@@ -82,12 +83,17 @@ function getGroupRotate(depth: number) {
       >
         <span class="flex-1">{item.sidebarLabel}</span>
         <DropdownIcon
-          width={"0.65rem"}
+          width={"0.5rem"}
           className={getGroupRotate(depth)}
           aria-hidden="true"
         />
       </summary>
-      <div>
+      <div class="relative">
+        <span
+          aria-hidden="true"
+          class="absolute inset-y-0 w-px bg-manila-75 dark:bg-warm-gray"
+          style={`left: calc(var(--spacing) * ${depth * 4})`}
+        />
         {item.contents.map((contentItem) => (
           <Astro.self
             item={contentItem}
@@ -104,7 +110,7 @@ function getGroupRotate(depth: number) {
         "flex items-center gap-1.5 py-2 text-p3 text-faded-black dark:text-manila-light",
         "cursor-pointer",
         depth === 0 && "font-bold",
-        depth > 0 && "border-l border-manila-75 pl-4 dark:border-warm-gray",
+        depth > 0 && "pl-4",
       ]}
       style={`margin-left: calc(var(--spacing) * ${(depth - 1) * 4})`}
       href={item.href}
@@ -120,9 +126,10 @@ function getGroupRotate(depth: number) {
         "flex items-center gap-4 py-2 text-p3 text-faded-black dark:text-manila-light",
         "cursor-pointer",
         depth === 0 && "font-bold",
-        depth > 0 && "border-l pl-4",
+        depth > 0 && "pl-4",
         depth > 0 && isActive && "font-bold",
-        isActive ? "border-orange" : "border-manila-75 dark:border-warm-gray",
+        depth > 0 && isActive &&
+          "relative before:absolute before:inset-y-0 before:left-0 before:w-px before:bg-orange",
       ]}
       style={`margin-left: calc(var(--spacing) * ${(depth - 1) * 4})`}
       href={`/docs/framework/${framework}/${item.slug}`}
diff --git a/site/src/components/home/Demo/Base.tsx b/site/src/components/home/Demo/Base.tsx
deleted file mode 100644
index b42d63eb1b..0000000000
--- a/site/src/components/home/Demo/Base.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { useStore } from '@nanostores/react';
-import type { ReactNode } from 'react';
-
-import { Tab, TabsList, TabsPanel, TabsRoot } from '@/components/Tabs';
-import { framework, skin } from '@/stores/homePageDemos';
-
-interface BaseDemoProps {
-  className?: string;
-  baseDefaultHtml: ReactNode;
-  baseMinimalHtml: ReactNode;
-  baseDefaultReact: ReactNode;
-  baseMinimalReact: ReactNode;
-}
-
-export default function BaseDemo(props: BaseDemoProps) {
-  const $framework = useStore(framework);
-  const $skin = useStore(skin);
-
-  const isHtml = $framework === 'html';
-  const isDefault = $skin === 'default';
-
-  const codeSlot = isHtml
-    ? isDefault
-      ? props.baseDefaultHtml
-      : props.baseMinimalHtml
-    : isDefault
-      ? props.baseDefaultReact
-      : props.baseMinimalReact;
-
-  const codeLabel = isHtml ? 'HTML' : 'React';
-
-  return (
-    <TabsRoot variant="expanded" key={`${$framework}-${$skin}`} className={props.className} maxWidth={false}>
-      <TabsList variant="expanded" label={`${codeLabel} implementation`}>
-        <Tab variant="expanded" value="code" initial>
-          {codeLabel}
-        </Tab>
-      </TabsList>
-      <TabsPanel variant="expanded" value="code" initial className="bg-faded-black dark:bg-soot m-2.5 mt-0">
-        {codeSlot}
-      </TabsPanel>
-    </TabsRoot>
-  );
-}
diff --git a/site/src/components/home/Demo/Demo.astro b/site/src/components/home/Demo/Demo.astro
deleted file mode 100644
index b7e87c2960..0000000000
--- a/site/src/components/home/Demo/Demo.astro
+++ /dev/null
@@ -1,117 +0,0 @@
----
-import { getEntry } from 'astro:content';
-import ServerCode from '@/components/Code/ServerCode.astro';
-import FrameworkControl from '../FrameworkControl';
-import BaseDemo from './Base';
-import { generateHTMLCode, generateReactCode } from './baseCode';
-import EjectDemo from './Eject';
-
-const defaultVideo = (await getEntry('ejectedSkins', 'default-video'))!.data;
-const defaultVideoReact = (await getEntry('ejectedSkins', 'default-video-react'))!.data;
-const minimalVideo = (await getEntry('ejectedSkins', 'minimal-video'))!.data;
-const minimalVideoReact = (await getEntry('ejectedSkins', 'minimal-video-react'))!.data;
----
-
-<section
-  class="mx-auto mb-10 grid w-full max-w-305 gap-x-5 gap-y-20 px-5 lg:mb-0 lg:grid-cols-2 lg:gap-y-0"
->
-  <section
-    class="row-span-4 grid border-faded-black lg:grid-rows-subgrid lg:border-t lg:py-10 dark:border-manila-light"
-  >
-    <h2
-      class="mb-2.5 text-center font-display text-h2 text-faded-black uppercase lg:mb-1.25 dark:text-manila-light"
-    >
-      Assemble your player
-    </h2>
-    <p
-      class="font-instrument-sans mb-8 text-center text-p2 font-light text-warm-gray md:mb-10 dark:text-manila-dark"
-    >
-      Feel at home with your framework, skin, and media source
-    </p>
-
-    <FrameworkControl client:idle className="mb-5 md:hidden" />
-    {/* @ts-expect-error — astro#9451 */}
-    <BaseDemo client:idle className="m-0 lg:h-100">
-      <ServerCode
-        slot="baseDefaultHtml"
-        code={generateHTMLCode("default")}
-        lang="html"
-      />
-      <ServerCode
-        slot="baseMinimalHtml"
-        code={generateHTMLCode("minimal")}
-        lang="html"
-      />
-      <ServerCode
-        slot="baseDefaultReact"
-        code={generateReactCode("default")}
-        lang="tsx"
-      />
-      <ServerCode
-        slot="baseMinimalReact"
-        code={generateReactCode("minimal")}
-        lang="tsx"
-      />
-    </BaseDemo>
-  </section>
-  <section
-    class="row-span-4 grid border-faded-black lg:grid-rows-subgrid lg:border-t lg:py-10 dark:border-manila-light"
-  >
-    <h2
-      class="mb-2.5 text-center font-display text-h2 text-faded-black uppercase lg:mb-1.25 dark:text-manila-light"
-    >
-      Take full control
-    </h2>
-    <p
-      class="font-instrument-sans mb-8 text-center text-p2 font-light text-warm-gray md:mb-10 dark:text-manila-dark"
-    >
-      Make your player truly your own with fully-editable components
-    </p>
-    <FrameworkControl client:idle className="mb-5 md:hidden" />
-    {/* @ts-expect-error — astro#9451 */}
-    <EjectDemo client:idle className="m-0 lg:h-100">
-      <ServerCode
-        slot="defaultHtmlCode"
-        code={defaultVideo.html!}
-        lang="html"
-      />
-      <ServerCode slot="defaultHtmlCss" code={defaultVideo.css!} lang="css" />
-      <ServerCode
-        slot="defaultReactCode"
-        code={defaultVideoReact.tsx!["VideoPlayer.tsx"]!}
-        lang="tsx"
-      />
-      <ServerCode
-        slot="defaultReactPlayer"
-        code={defaultVideoReact.tsx!["player.ts"]!}
-        lang="ts"
-      />
-      <ServerCode
-        slot="defaultReactCss"
-        code={defaultVideoReact.css!}
-        lang="css"
-      />
-      <ServerCode
-        slot="minimalHtmlCode"
-        code={minimalVideo.html!}
-        lang="html"
-      />
-      <ServerCode slot="minimalHtmlCss" code={minimalVideo.css!} lang="css" />
-      <ServerCode
-        slot="minimalReactCode"
-        code={minimalVideoReact.tsx!["VideoPlayer.tsx"]!}
-        lang="tsx"
-      />
-      <ServerCode
-        slot="minimalReactPlayer"
-        code={minimalVideoReact.tsx!["player.ts"]!}
-        lang="ts"
-      />
-      <ServerCode
-        slot="minimalReactCss"
-        code={minimalVideoReact.css!}
-        lang="css"
-      />
-    </EjectDemo>
-  </section>
-</section>
diff --git a/site/src/components/home/Demo/Eject.tsx b/site/src/components/home/Demo/Eject.tsx
deleted file mode 100644
index 77df458a2d..0000000000
--- a/site/src/components/home/Demo/Eject.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import { useStore } from '@nanostores/react';
-
-import { Tab, TabsList, TabsPanel, TabsRoot } from '@/components/Tabs';
-import { framework, skin } from '@/stores/homePageDemos';
-
-interface EjectDemoProps {
-  className?: string;
-  defaultHtmlCode: React.ReactNode;
-  defaultHtmlCss: React.ReactNode;
-  defaultReactCode: React.ReactNode;
-  defaultReactPlayer: React.ReactNode;
-  defaultReactCss: React.ReactNode;
-  minimalHtmlCode: React.ReactNode;
-  minimalHtmlCss: React.ReactNode;
-  minimalReactCode: React.ReactNode;
-  minimalReactPlayer: React.ReactNode;
-  minimalReactCss: React.ReactNode;
-}
-
-export default function EjectDemo(props: EjectDemoProps) {
-  const $framework = useStore(framework);
-  const $skin = useStore(skin);
-
-  const isHtml = $framework === 'html';
-  const isDefault = $skin === 'default';
-
-  const codeSlot = isHtml
-    ? isDefault
-      ? props.defaultHtmlCode
-      : props.minimalHtmlCode
-    : isDefault
-      ? props.defaultReactCode
-      : props.minimalReactCode;
-  const playerSlot = isHtml ? null : isDefault ? props.defaultReactPlayer : props.minimalReactPlayer;
-  const cssSlot = isHtml
-    ? isDefault
-      ? props.defaultHtmlCss
-      : props.minimalHtmlCss
-    : isDefault
-      ? props.defaultReactCss
-      : props.minimalReactCss;
-
-  const codeLabel = isHtml ? 'HTML' : 'React';
-
-  return (
-    <TabsRoot variant="expanded" key={`${$framework}-${$skin}`} className={props.className} maxWidth={false}>
-      <TabsList variant="expanded" label={`${codeLabel} implementation`}>
-        <Tab variant="expanded" value="code" initial>
-          {codeLabel}
-        </Tab>
-        {playerSlot && (
-          <Tab variant="expanded" value="player">
-            JS
-          </Tab>
-        )}
-        <Tab variant="expanded" value="css">
-          CSS
-        </Tab>
-      </TabsList>
-      <TabsPanel variant="expanded" value="code" initial className="bg-faded-black dark:bg-soot m-2.5 mt-0">
-        {codeSlot}
-      </TabsPanel>
-      {playerSlot && (
-        <TabsPanel variant="expanded" value="player" className="bg-faded-black dark:bg-soot m-2.5 mt-0">
-          {playerSlot}
-        </TabsPanel>
-      )}
-      <TabsPanel variant="expanded" value="css" className="bg-faded-black dark:bg-soot m-2.5 mt-0">
-        {cssSlot}
-      </TabsPanel>
-    </TabsRoot>
-  );
-}
diff --git a/site/src/components/home/Demo/baseCode.ts b/site/src/components/home/Demo/baseCode.ts
deleted file mode 100644
index 65a67b0369..0000000000
--- a/site/src/components/home/Demo/baseCode.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { VJS10_DEMO_VIDEO, VJS10_CDN_BASE } from '@/consts';
-import type { Skin } from '@/stores/homePageDemos';
-
-export function generateHTMLCode(skin: Skin): string {
-  const skinTag = skin === 'default' ? 'video-skin' : 'video-minimal-skin';
-  const cdnFile = skin === 'default' ? 'video' : 'video-minimal';
-
-  return `<script type="module" src="${VJS10_CDN_BASE}/${cdnFile}.js"></script>
-
-<video-player>
-  <${skinTag}>
-    <video src="${VJS10_DEMO_VIDEO.mp4}" playsinline></video>
-  </${skinTag}>
-</video-player>`;
-}
-
-export function generateReactCode(skin: Skin): string {
-  const skinComponent = skin === 'default' ? 'VideoSkin' : 'MinimalVideoSkin';
-  const skinCss = skin === 'default' ? 'skin' : 'minimal-skin';
-
-  return `import { VideoPlayer, ${skinComponent}, Video } from '@videojs/react/video';
-import '@videojs/react/video/${skinCss}.css';
-
-export function App() {
-  return (
-    <VideoPlayer poster="${VJS10_DEMO_VIDEO.poster}">
-      <${skinComponent}>
-        <Video src="${VJS10_DEMO_VIDEO.mp4}" playsInline />
-      </${skinComponent}>
-    </VideoPlayer>
-  );
-}`;
-}
diff --git a/site/src/components/home/FrameworkControl.tsx b/site/src/components/home/FrameworkControl.tsx
deleted file mode 100644
index 94f7d50cdb..0000000000
--- a/site/src/components/home/FrameworkControl.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { useStore } from '@nanostores/react';
-
-import { framework } from '@/stores/homePageDemos';
-
-import ToggleGroup from '../ToggleGroup';
-
-export default function FrameworkControl({ className }: { className?: string }) {
-  const $framework = useStore(framework);
-
-  return (
-    <ToggleGroup
-      className={className}
-      value={[$framework]}
-      onChange={(values) => {
-        if (values.length > 0) framework.set(values[0]);
-      }}
-      options={[
-        { value: 'react', label: 'React' },
-        { value: 'html', label: 'HTML' },
-      ]}
-      aria-label="Select framework"
-    />
-  );
-}
diff --git a/site/src/components/home/Header.astro b/site/src/components/home/Header.astro
index e4b65c6c0c..6c8c8ac372 100644
--- a/site/src/components/home/Header.astro
+++ b/site/src/components/home/Header.astro
@@ -1,9 +1,7 @@
 ---
 import MuxLogoSmall from '@/assets/logos/mux-small.svg?react';
 import BetaPill from '@/components/BetaPill';
-import FrameworkControl from '@/components/home/FrameworkControl';
 import HeroVideo from '@/components/home/HeroVideo';
-import SkinControl from '@/components/home/SkinControl';
 import { MUX_URL } from '@/consts';
 
 interface Props {
@@ -15,7 +13,7 @@ const { poster } = Astro.props;
 
 <header
   class="relative mx-auto mb-25 grid w-full max-w-305 grid-cols-1 px-5 pt-19 [grid-template-areas:var(--grid-template-areas)] md:py-0 md:[grid-template-areas:var(--md-grid-template-areas)]"
-  style="--grid-template-areas: 'pill' 'title' 'description' 'video' 'mux' 'control'; --md-grid-template-areas: 'video' 'mux' 'description' 'control'"
+  style="--grid-template-areas: 'pill' 'title' 'description' 'video' 'mux'; --md-grid-template-areas: 'video' 'mux' 'description'"
 >
   <BetaPill
     className="mb-7 justify-self-center sm:hidden"
@@ -32,7 +30,7 @@ const { poster } = Astro.props;
   </h1>
   {/* the additional px-5 is intentional */}
   <p
-    class="mx-auto mb-20 w-full max-w-195 px-5 text-center text-p2 text-balance text-warm-gray md:mb-25 lg:text-p1 dark:text-manila-light"
+    class="mx-auto w-full max-w-195 px-5 text-center text-p2 text-balance text-warm-gray lg:text-p1 dark:text-manila-light"
     style="grid-area:description"
   >
     For over 15 years, Video.js has been the world's web video player. Now
@@ -59,11 +57,4 @@ const { poster } = Astro.props;
       <MuxLogoSmall width="100%" />
     </a>
   </p>
-  <div
-    class="grid grid-cols-1 items-center justify-center gap-9 md:grid-cols-2"
-    style="grid-area:control"
-  >
-    <SkinControl client:idle />
-    <FrameworkControl client:idle className="hidden md:grid" />
-  </div>
 </header>
diff --git a/site/src/components/home/HeroVideo.tsx b/site/src/components/home/HeroVideo.tsx
index e0b5c88838..71cbef1973 100644
--- a/site/src/components/home/HeroVideo.tsx
+++ b/site/src/components/home/HeroVideo.tsx
@@ -1,12 +1,9 @@
-import { useStore } from '@nanostores/react';
 import { HlsJsVideo } from '@videojs/react/media/hlsjs-video';
-import { MinimalVideoSkin, VideoPlayer, VideoSkin } from '@videojs/react/video';
+import { VideoPlayer, VideoSkin } from '@videojs/react/video';
 
 import { VJS10_DEMO_VIDEO } from '@/consts';
-import { skin } from '@/stores/homePageDemos';
 
 import '@videojs/react/video/skin.css';
-import '@videojs/react/video/minimal-skin.css';
 
 export default function HeroVideo({
   className,
@@ -17,12 +14,9 @@ export default function HeroVideo({
   style?: React.CSSProperties;
   poster: string;
 }) {
-  const $skin = useStore(skin);
-  const SkinComponent = $skin === 'default' ? VideoSkin : MinimalVideoSkin;
-
   return (
     <VideoPlayer poster={poster}>
-      <SkinComponent
+      <VideoSkin
         className={className}
         style={
           {
@@ -40,7 +34,7 @@ export default function HeroVideo({
             default
           />
         </HlsJsVideo>
-      </SkinComponent>
+      </VideoSkin>
     </VideoPlayer>
   );
 }
diff --git a/site/src/components/home/SkinControl.tsx b/site/src/components/home/SkinControl.tsx
deleted file mode 100644
index ced3d9b4f4..0000000000
--- a/site/src/components/home/SkinControl.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { useStore } from '@nanostores/react';
-
-import { skin } from '@/stores/homePageDemos';
-
-import ToggleGroup from '../ToggleGroup';
-
-export default function SkinControl({ className }: { className?: string }) {
-  const $skin = useStore(skin);
-
-  return (
-    <ToggleGroup
-      className={className}
-      value={[$skin]}
-      onChange={(values) => {
-        if (values.length > 0) skin.set(values[0]);
-      }}
-      options={[
-        { value: 'default', label: 'Default' },
-        { value: 'minimal', label: 'Minimal' },
-      ]}
-      aria-label="Select skin"
-    />
-  );
-}
diff --git a/site/src/components/registry/InstallationRegistryCommand.astro b/site/src/components/registry/InstallationRegistryCommand.astro
new file mode 100644
index 0000000000..2656560dd7
--- /dev/null
+++ b/site/src/components/registry/InstallationRegistryCommand.astro
@@ -0,0 +1,14 @@
+---
+/** The source-install command for whatever skin the installation page's pickers selected. */
+import { isValidFramework } from '@/types/docs';
+
+import InstallationRegistryCommandClient from './InstallationRegistryCommandClient';
+
+const { framework } = Astro.params;
+
+if (!isValidFramework(framework)) {
+  throw new Error(`InstallationRegistryCommand needs a framework route, received ${framework}.`);
+}
+---
+
+<InstallationRegistryCommandClient client:idle framework={framework} />
diff --git a/site/src/components/registry/InstallationRegistryCommandClient.tsx b/site/src/components/registry/InstallationRegistryCommandClient.tsx
new file mode 100644
index 0000000000..646b9f6a00
--- /dev/null
+++ b/site/src/components/registry/InstallationRegistryCommandClient.tsx
@@ -0,0 +1,38 @@
+import { useStore } from '@nanostores/react';
+import clsx from 'clsx';
+
+import { shared } from '@/components/typography/styles';
+import { installMethod, skin, useCase } from '@/stores/installation';
+import { type RegistryFramework, registrySkinItem } from '@/utils/installation/shadcn';
+
+import RegistryCommandClient from './RegistryCommandClient';
+
+interface Props {
+  framework: RegistryFramework;
+}
+
+/** The source-install command for the skin the installation page's pickers chose. */
+export default function InstallationRegistryCommandClient({ framework }: Props) {
+  const $useCase = useStore(useCase);
+  const $skin = useStore(skin);
+  const $installMethod = useStore(installMethod);
+  const item = registrySkinItem({ useCase: $useCase, skin: $skin });
+
+  if (!item) {
+    return (
+      <p className={clsx(shared.p, shared.prose)}>
+        {$useCase === 'background-video'
+          ? 'The background video skin cannot be ejected.'
+          : 'Select the Default or Minimal skin above to copy its source.'}
+      </p>
+    );
+  }
+
+  return (
+    <RegistryCommandClient
+      framework={framework}
+      items={[item]}
+      runner={$installMethod === 'cdn' ? 'npm' : $installMethod}
+    />
+  );
+}
diff --git a/site/src/components/registry/RegistryCatalog.astro b/site/src/components/registry/RegistryCatalog.astro
new file mode 100644
index 0000000000..6156b25bc4
--- /dev/null
+++ b/site/src/components/registry/RegistryCatalog.astro
@@ -0,0 +1,38 @@
+---
+/** Every installable skin, with the name the `add` command takes and where its source lands. */
+import MarkdownCode from '@/components/typography/MarkdownCode.astro';
+import Table from '@/components/typography/Table.astro';
+import Tbody from '@/components/typography/Tbody.astro';
+import Td from '@/components/typography/Td.astro';
+import Th from '@/components/typography/Th.astro';
+import Thead from '@/components/typography/Thead.astro';
+import Tr from '@/components/typography/Tr.astro';
+import { REGISTRY_NAMESPACE, REGISTRY_SKINS } from '@/utils/installation/shadcn';
+---
+
+<Table>
+  <Thead>
+    <Tr>
+      <Th>Skin</Th>
+      <Th>Install name</Th>
+      <Th>Installs to</Th>
+    </Tr>
+  </Thead>
+  <Tbody>
+    {
+      REGISTRY_SKINS.map((skin) => (
+        <Tr>
+          <Td>{skin.label}</Td>
+          <Td>
+            <MarkdownCode>
+              {REGISTRY_NAMESPACE}/{skin.item}
+            </MarkdownCode>
+          </Td>
+          <Td>
+            <MarkdownCode>{skin.directory}</MarkdownCode>
+          </Td>
+        </Tr>
+      ))
+    }
+  </Tbody>
+</Table>
diff --git a/site/src/components/registry/RegistryCommand.astro b/site/src/components/registry/RegistryCommand.astro
new file mode 100644
index 0000000000..84db18f2af
--- /dev/null
+++ b/site/src/components/registry/RegistryCommand.astro
@@ -0,0 +1,23 @@
+---
+/**
+ * The `registry add` and `add` commands for registry items, following the page's styling select box. Without items it
+ * only registers the `@videojs` namespace.
+ */
+import { isValidFramework } from '@/types/docs';
+import type { ShadcnRunner } from '@/utils/installation/shadcn';
+
+import RegistryCommandClient from './RegistryCommandClient';
+
+interface Props {
+  /** Registry item names, without the `@videojs/` namespace. */
+  items?: string[];
+  /** Show one package manager instead of tabs. */
+  runner?: ShadcnRunner;
+}
+
+const { items = [], runner } = Astro.props;
+const { framework } = Astro.params;
+if (!isValidFramework(framework)) throw new Error(`RegistryCommand needs a framework route, received ${framework}.`);
+---
+
+<RegistryCommandClient client:idle framework={framework} items={items} runner={runner} />
diff --git a/site/src/components/registry/RegistryCommandClient.tsx b/site/src/components/registry/RegistryCommandClient.tsx
new file mode 100644
index 0000000000..4d55a053b6
--- /dev/null
+++ b/site/src/components/registry/RegistryCommandClient.tsx
@@ -0,0 +1,49 @@
+import { useStore } from '@nanostores/react';
+
+import ClientCode from '@/components/Code/ClientCode';
+import { Tab, TabsList, TabsPanel, TabsRoot } from '@/components/Tabs';
+import { registryStyling } from '@/stores/registry';
+import {
+  type RegistryFramework,
+  registryInstallCommands,
+  resolveRegistryStyling,
+  SHADCN_RUNNERS,
+  type ShadcnRunner,
+} from '@/utils/installation/shadcn';
+
+interface Props {
+  framework: RegistryFramework;
+  /** Registry item names, without the `@videojs/` namespace. Empty registers the namespace and installs nothing. */
+  items: readonly string[];
+  /** Show one package manager instead of tabs, for pages that already asked. */
+  runner?: ShadcnRunner | undefined;
+}
+
+const RUNNERS = Object.keys(SHADCN_RUNNERS) as ShadcnRunner[];
+
+/**
+ * The Shadcn commands one install needs: `registry add` points the `@videojs` namespace at the styling catalog the
+ * page's select box chose, then `add` installs the items.
+ */
+export default function RegistryCommandClient({ framework, items, runner }: Props) {
+  const $styling = useStore(registryStyling);
+  const styling = resolveRegistryStyling(framework, $styling);
+  const runners = runner ? [runner] : RUNNERS;
+
+  return (
+    <TabsRoot>
+      <TabsList label="Package manager">
+        {runners.map((candidate, index) => (
+          <Tab key={candidate} value={candidate} initial={index === 0}>
+            {candidate}
+          </Tab>
+        ))}
+      </TabsList>
+      {runners.map((candidate, index) => (
+        <TabsPanel key={candidate} value={candidate} initial={index === 0}>
+          <ClientCode code={registryInstallCommands(candidate, framework, styling, items)} lang="bash" />
+        </TabsPanel>
+      ))}
+    </TabsRoot>
+  );
+}
diff --git a/site/src/components/registry/RegistrySkinInstall.astro b/site/src/components/registry/RegistrySkinInstall.astro
new file mode 100644
index 0000000000..ac0a563bf0
--- /dev/null
+++ b/site/src/components/registry/RegistrySkinInstall.astro
@@ -0,0 +1,22 @@
+---
+/** The catalog name and install location for a skin reference page. */
+import DocsLink from '@/components/docs/DocsLink.astro';
+import P from '@/components/typography/P.astro';
+import { REGISTRY_NAMESPACE, REGISTRY_SKINS } from '@/utils/installation/shadcn';
+
+interface Props {
+  /** Registry item name, such as `video` or `video-minimal`. */
+  item: string;
+}
+
+const { item } = Astro.props;
+const skin = REGISTRY_SKINS.find((candidate) => candidate.item === item);
+if (!skin) throw new Error(`Unknown registry skin: ${item}.`);
+---
+
+<P>
+  The <code>{REGISTRY_NAMESPACE}/{skin.item}</code> skin installs under <code>{skin.directory}</code>. The player and
+  media remain package imports. Follow{' '}
+  <DocsLink slug="how-to/customize-skins" anchor="set-up-the-shadcn-cli">Customize skins</DocsLink> to set up
+  the CLI, install the skin, and use the copied files.
+</P>
diff --git a/site/src/components/registry/RegistryStyling.astro b/site/src/components/registry/RegistryStyling.astro
new file mode 100644
index 0000000000..c2fab2e40b
--- /dev/null
+++ b/site/src/components/registry/RegistryStyling.astro
@@ -0,0 +1,24 @@
+---
+/**
+ * The styling select box for the registry commands on the page. React chooses between Tailwind CSS and vanilla CSS;
+ * HTML skins only ship as vanilla CSS, so the HTML docs state that instead of offering a choice.
+ */
+import ContentWidth from '@/components/frames/ContentWidth.astro';
+import P from '@/components/typography/P.astro';
+import { isValidFramework } from '@/types/docs';
+
+import RegistryStylingClient from './RegistryStylingClient';
+
+const { framework } = Astro.params;
+if (!isValidFramework(framework)) throw new Error(`RegistryStyling needs a framework route, received ${framework}.`);
+---
+
+{
+  framework === 'react' ? (
+    <ContentWidth>
+      <RegistryStylingClient client:idle framework={framework} />
+    </ContentWidth>
+  ) : (
+    <P>HTML skins install as vanilla CSS.</P>
+  )
+}
diff --git a/site/src/components/registry/RegistryStylingClient.tsx b/site/src/components/registry/RegistryStylingClient.tsx
new file mode 100644
index 0000000000..e49c0c36c2
--- /dev/null
+++ b/site/src/components/registry/RegistryStylingClient.tsx
@@ -0,0 +1,36 @@
+import { useStore } from '@nanostores/react';
+
+import { Select } from '@/components/Select';
+import { registryStyling } from '@/stores/registry';
+import {
+  REGISTRY_STYLING_LABELS,
+  type RegistryFramework,
+  registryStylings,
+  resolveRegistryStyling,
+} from '@/utils/installation/shadcn';
+
+interface Props {
+  framework: RegistryFramework;
+}
+
+/** Picks the styling catalog every registry command on the page installs from. */
+export default function RegistryStylingClient({ framework }: Props) {
+  const $styling = useStore(registryStyling);
+  const value = resolveRegistryStyling(framework, $styling);
+
+  return (
+    <div className="flex flex-wrap items-center gap-3">
+      <span className="text-p3">Styling</span>
+      <Select
+        value={value}
+        onChange={(next) => registryStyling.set(next)}
+        options={registryStylings(framework).map((styling) => ({
+          value: styling,
+          label: REGISTRY_STYLING_LABELS[styling],
+        }))}
+        aria-label="Select styling"
+        data-testid="registry-styling-select"
+      />
+    </div>
+  );
+}
diff --git a/site/src/components/registry/ShadcnCommand.astro b/site/src/components/registry/ShadcnCommand.astro
new file mode 100644
index 0000000000..778892f075
--- /dev/null
+++ b/site/src/components/registry/ShadcnCommand.astro
@@ -0,0 +1,32 @@
+---
+/** One Shadcn CLI action, such as `init` or `view @videojs/video`, in every package manager's spelling. */
+import ServerCode from '@/components/Code/ServerCode.astro';
+import { Tab, TabsList, TabsPanel, TabsRoot } from '@/components/Tabs.tsx';
+import { SHADCN_RUNNERS, shadcnCommand, type ShadcnRunner } from '@/utils/installation/shadcn';
+
+interface Props {
+  action: string;
+}
+
+const { action } = Astro.props;
+const runners = Object.keys(SHADCN_RUNNERS) as ShadcnRunner[];
+---
+
+<TabsRoot client:idle>
+  <TabsList client:idle label="Package manager">
+    {
+      runners.map((runner, index) => (
+        <Tab client:idle value={runner} initial={index === 0}>
+          {runner}
+        </Tab>
+      ))
+    }
+  </TabsList>
+  {
+    runners.map((runner, index) => (
+      <TabsPanel client:idle value={runner} initial={index === 0}>
+        <ServerCode code={shadcnCommand(runner, action)} lang="bash" />
+      </TabsPanel>
+    ))
+  }
+</TabsRoot>
diff --git a/site/src/content.config.ts b/site/src/content.config.ts
index 5852d3f269..d3ffd26fd2 100644
--- a/site/src/content.config.ts
+++ b/site/src/content.config.ts
@@ -175,20 +175,6 @@ const presetReference = defineCollection({
   schema: PresetReferenceSchema,
 });
 
-const ejectedSkins = defineCollection({
-  loader: file('./src/content/ejected-skins.json'),
-  schema: z.object({
-    id: z.string(),
-    name: z.string(),
-    platform: z.enum(['html', 'react']),
-    style: z.enum(['css', 'tailwind']),
-    html: z.string().optional(),
-    tsx: z.record(z.string(), z.string()).optional(),
-    jsx: z.record(z.string(), z.string()).optional(),
-    css: z.string().optional(),
-  }),
-});
-
 // Media subpaths that ship a CDN build, generated by scripts/build-cdn-manifest.ts.
 // Each entry's id is a media subpath (e.g. `hlsjs-video`). Used by the installation
 // guide to hide the CDN install option for renderers with no CDN bundle.
@@ -209,6 +195,5 @@ export const collections = {
   featureReference,
   mediaReference,
   presetReference,
-  ejectedSkins,
   cdnMedia,
 };
diff --git a/site/src/content/changelog/10.0.0-beta.29.mdx b/site/src/content/changelog/10.0.0-beta.29.mdx
index 6d52034031..45a794fb98 100644
--- a/site/src/content/changelog/10.0.0-beta.29.mdx
+++ b/site/src/content/changelog/10.0.0-beta.29.mdx
@@ -37,7 +37,7 @@ Keyboard and pointer defaults became declarable too ([#2197](https://github.com/
 
 Styling followed the same route. A validated `--media-*` token contract runs across themes, Tailwind, and emitted CSS, and the registry output composes with `cn` and opt-in prop forwarding so it stays editable ([#2202](https://github.com/videojs/v10/pull/2202)). Four near-duplicate settings submenus collapsed behind shared `Submenu` and `RadioItem` wrappers, leaving `QualityMenu`, `AudioTrackMenu`, `PlaybackRateMenu`, and `CaptionsMenu` to supply domain behavior only ([#2203](https://github.com/videojs/v10/pull/2203)). A poster styling gate that kept generated HTML posters transparent while visible is fixed, and the canonical Default skin dropped its seek buttons while `SeekButton` stays published as a standalone registry component ([#2181](https://github.com/videojs/v10/pull/2181)).
 
-None of this changes what you install yet. The packages still ship the hand-authored skins, and the generated output is checked against one reviewed snapshot and driven by the E2E suite while parity work finishes. Start from the skins concept for [HTML](/docs/framework/html/concepts/skins/) and [React](/docs/framework/react/concepts/skins/), or the customization guide for [HTML](/docs/framework/html/how-to/customize-skins/) and [React](/docs/framework/react/how-to/customize-skins/).
+None of this changes what you install yet. The packages still ship the hand-authored skins, and the generated output is checked against one reviewed snapshot and driven by the E2E suite while parity work finishes. Start from the skins concept for [HTML](/docs/framework/html/concepts/skins/) and [React](/docs/framework/react/concepts/skins/), or the skin customization guide for [HTML](/docs/framework/html/how-to/customize-skins/) and [React](/docs/framework/react/how-to/customize-skins/).
 
 ## The compiler behind it
 
diff --git a/site/src/content/docs/concepts/cdn.mdx b/site/src/content/docs/concepts/cdn.mdx
index 3917a7d30b..7c38602eda 100644
--- a/site/src/content/docs/concepts/cdn.mdx
+++ b/site/src/content/docs/concepts/cdn.mdx
@@ -42,7 +42,7 @@ Each installation <DocsLink slug="concepts/presets">preset</DocsLink> ships its
 
 The other presets follow the same pattern. Background video is the exception: one bundle, `background.js`, registers the player, the skin, and the `<background-video>` media element.
 
-A skin bundle registers every UI element its skin is built from. The CDN publishes no per-component bundles, though. If you've <DocsLink slug="how-to/customize-skins">ejected the skin</DocsLink> and need to add new components, install from npm instead of from the CDN.
+A skin bundle registers every UI element its skin is built from. The CDN publishes no per-component bundles, though. If you have <DocsLink slug="how-to/customize-skins" anchor="eject-and-edit-a-skin">ejected a skin</DocsLink> and need to add new components, install from npm instead of from the CDN.
 
 ## Media bundles
 
diff --git a/site/src/content/docs/concepts/overview.mdx b/site/src/content/docs/concepts/overview.mdx
index 6e8dce6e10..6292ae4fb6 100644
--- a/site/src/content/docs/concepts/overview.mdx
+++ b/site/src/content/docs/concepts/overview.mdx
@@ -108,7 +108,7 @@ If you want more control than a packaged skin offers, build your own UI from our
 ```
 </FrameworkCase>
 
-The easiest way to get started is to <DocsLink slug="how-to/customize-skins">eject the closest skin</DocsLink> and use its pre-styled components as a foundation.
+The easiest way to get started is to <DocsLink slug="how-to/customize-skins" anchor="eject-and-edit-a-skin">eject the closest skin</DocsLink> and use its styled components as a foundation.
 
 <DocsLinkCard slug="concepts/ui-components">Learn more about UI components</DocsLinkCard>
 <DocsLinkCard slug="how-to/build-your-own-component">Build your own component</DocsLinkCard>
diff --git a/site/src/content/docs/concepts/presets.mdx b/site/src/content/docs/concepts/presets.mdx
index bd3cbf94f4..b74e0a415b 100644
--- a/site/src/content/docs/concepts/presets.mdx
+++ b/site/src/content/docs/concepts/presets.mdx
@@ -149,7 +149,7 @@ function Hero() {
 
 ### Eject the skin
 
-If a preset's skin is close but not quite right, you can <DocsLink slug="how-to/customize-skins">eject it</DocsLink> — copy its internal components into your project and customize from there.
+If a preset's skin is close but not quite right, <DocsLink slug="how-to/customize-skins" anchor="eject-and-edit-a-skin">eject it</DocsLink> and customize its components and styles.
 
 ### Swap the media element
 
diff --git a/site/src/content/docs/concepts/skins.mdx b/site/src/content/docs/concepts/skins.mdx
index 4408aa9466..177009a242 100644
--- a/site/src/content/docs/concepts/skins.mdx
+++ b/site/src/content/docs/concepts/skins.mdx
@@ -8,7 +8,6 @@ import FrameworkCase from '@/components/docs/FrameworkCase.astro';
 import DocsLink from '@/components/docs/DocsLink.astro';
 import DocsLinkCard from '@/components/docs/DocsLinkCard.astro';
 import Aside from '@/components/Aside.astro';
-import EjectedSkin from '@/components/docs/EjectedSkin.astro';
 
 <Aside type="note" title="New in version 10">
 In prior versions of Video.js, skins were CSS-only themes applied to the same set of default controls. In version 10 the concept of skins has been expanded to include the UI components, so each skin can be completely unique and only include the UI components it needs.
@@ -20,10 +19,10 @@ A skin wraps the media component and provides the player's complete interface. I
 
 When you choose a skin you have two options for how you use it: **packaged** or **ejected**. It's usually easiest to start with a packaged skin and later eject its internal components into your project when you need more customization.
 
-Packaged skins cover common visual changes through documented CSS custom properties. Packaged video skins also let you replace the poster. When you need more than that, eject and change the components and styles directly.
+Packaged skins cover common visual changes through documented CSS custom properties. Packaged video skins also let you replace the poster. When you need more than that, eject the skin and change the components and styles directly.
 
-| Packaged | Ejected |
-|----------|-----------------|
+| Packaged skin | Ejected skin |
+|---------------|--------------|
 | Single component | Many UI components |
 | Documented CSS custom properties | Components and styles you own |
 | Future design updates auto-applied by bumping the version | Future design updates manually applied, or intentionally ignored |
@@ -65,20 +64,19 @@ export function Player() {
 
 Don't depend on elements, class names, or undocumented custom properties inside a packaged skin. They may change between releases.
 
+<DocsLinkCard slug="how-to/customize-skins" anchor="style-a-packaged-skin">Style a packaged skin</DocsLinkCard>
+
 ### Ejected skin
 
-An ejected skin exposes its UI components and styles as app code that you own. You can add, remove, rearrange, or restyle any part of it.
+An ejected skin is the same skin as app code that you own. Its UI components and styles become files in your project, so you can add, remove, rearrange, or restyle any part of it.
 
-<FrameworkCase frameworks={["html"]}>
-  <EjectedSkin id="default-video" />
-</FrameworkCase>
+<DocsLinkCard slug="how-to/customize-skins" anchor="eject-and-edit-a-skin">Eject and edit a skin</DocsLinkCard>
 
-<FrameworkCase frameworks={["react"]}>
-  <EjectedSkin id="default-video-react" />
-</FrameworkCase>
+### Custom interface
+
+You can also build an interface without starting from a skin. In that model, you choose and arrange individual <DocsLink slug="concepts/ui-components">UI components</DocsLink> around the media. This takes more work, but it avoids inheriting a skin's layout and interactions.
 
-<DocsLinkCard slug="how-to/customize-skins">Read more about ejecting skins</DocsLinkCard>
-<DocsLinkCard slug="concepts/ui-components">Read more about UI components</DocsLinkCard>
+<DocsLinkCard slug="how-to/build-your-own-component">Build your own component</DocsLinkCard>
 
 ## Skins, features, and presets
 
@@ -89,37 +87,3 @@ You'll find a preconfigured player, its typed hook, a skin, and the matching fea
 <PresetReference />
 
 <DocsLinkCard slug="concepts/presets">Read about presets</DocsLinkCard>
-
-## Styling
-
-Packaged skins use vanilla CSS. Their documented CSS custom properties cover common visual changes.
-
-<FrameworkCase frameworks={["react"]}>
-
-Import the stylesheet listed for each skin in the [preset table](#skins-features-and-presets).
-
-</FrameworkCase>
-
-<FrameworkCase frameworks={["html"]}>
-
-The skin registration entry point imports its styles automatically.
-
-Either way the styles travel inside the skin's JavaScript and apply when the element upgrades, so there is no stylesheet to add. The CDN publishes them as files as well, which matters when you want the player's box styled before that upgrade — see <DocsLink slug="how-to/self-host-the-player">Self-host the player</DocsLink>.
-
-</FrameworkCase>
-
-To use Tailwind or change the underlying CSS, [eject the skin](../how-to/customize-skins#eject-a-skin) and edit its styles in your app.
-
-### Shared limitations
-
-- Skin spacing and icons use a fixed `16px` base by default. Vanilla CSS font sizes use the same base, while Tailwind font sizes use rem units and assume a 16px root font size.
-- The default font stack includes [`Inter`](https://rsms.me/inter/), but we do not load the webfont for you. If Inter is unavailable, the skin uses system fonts.
-
-### Ejected vanilla CSS
-
-- We use a [BEM](https://en.bem.info/methodology/quick-start/) classname structure and every component classname is scoped with a `media-` prefix.
-
-### Ejected Tailwind
-
-- Ejected skins establish their own spacing scale but otherwise assume the default configuration. A future CLI eject command will support custom class prefixes. For now, edit the ejected skin to use your prefix.
-- Ejected skins currently support Tailwind 4.3.x.
diff --git a/site/src/content/docs/concepts/why-videojs.mdx b/site/src/content/docs/concepts/why-videojs.mdx
index 5d5029c373..bbe4e6c7fb 100644
--- a/site/src/content/docs/concepts/why-videojs.mdx
+++ b/site/src/content/docs/concepts/why-videojs.mdx
@@ -154,9 +154,9 @@ The player feels like the rest of your app.
 
 Most player libraries draw a line between "configurable through props" and "fork the source." Cross the line and you're on your own. Video.js lets you eject any skin and walk away with the source: components in your framework's language that you can read and change. The skin you ship is yours; the rest of the player keeps working underneath it.
 
-We don't want to cram every possible player into one configuration API. Packaged skins cover common visual changes. For everything else, eject early and compose the UI you need. Today that starts with copy and paste. A future CLI eject command will automate the copying.
+We don't want to cram every possible player into one configuration API. Packaged skins cover common visual changes. For everything else, eject early and compose the UI you need.
 
-<DocsLinkCard slug="how-to/customize-skins">Customize skins</DocsLinkCard>
+<DocsLinkCard slug="how-to/customize-skins" anchor="eject-and-edit-a-skin">Customize skins</DocsLinkCard>
 
 ### AI-native DX
 
diff --git a/site/src/content/docs/how-to/add-a-poster-and-loading-placeholder.mdx b/site/src/content/docs/how-to/add-a-poster-and-loading-placeholder.mdx
index 27590eeffd..b33163cbd0 100644
--- a/site/src/content/docs/how-to/add-a-poster-and-loading-placeholder.mdx
+++ b/site/src/content/docs/how-to/add-a-poster-and-loading-placeholder.mdx
@@ -11,7 +11,7 @@ A poster is the image shown before your video plays. There are several places to
 1. **Let the media provide it.** Some media components create a poster from the source, so there is nothing extra to host or keep in sync.
 2. **Set `poster` on the player.** With a packaged skin, that is all a static image needs.
 3. **Take control of the image** when you need a framework image component, a `<picture>` element, or a loading placeholder. The skin renders your image instead of its own.
-4. **Keep it working in an <DocsLink slug="how-to/customize-skins">ejected skin</DocsLink>.** The player's `poster` still reaches the Poster component your skin renders, or you can set the image's source yourself.
+4. **Keep it working in an <DocsLink slug="how-to/customize-skins" anchor="eject-and-edit-a-skin">ejected skin</DocsLink>.** The player's `poster` still reaches the Poster component your skin renders, or you can set the image's source yourself.
 
 ## Let the media provide a poster
 
@@ -343,5 +343,5 @@ Use fewer pixels and stronger compression. The placeholder only needs to suggest
 
 ## Related guides
 
-- <DocsLink slug="how-to/customize-skins">Customize skins</DocsLink>
+- <DocsLink slug="how-to/customize-skins" anchor="style-a-packaged-skin">Customize skins</DocsLink>
 - <DocsLink slug="how-to/build-your-own-component">Build your own UI component</DocsLink>
diff --git a/site/src/content/docs/how-to/build-your-own-component.mdx b/site/src/content/docs/how-to/build-your-own-component.mdx
index 790b621b72..97521e773b 100644
--- a/site/src/content/docs/how-to/build-your-own-component.mdx
+++ b/site/src/content/docs/how-to/build-your-own-component.mdx
@@ -17,12 +17,12 @@ Before building from scratch, check if an existing approach covers your use case
 <FrameworkCase frameworks={["react"]}>
 - **Change what a control renders**: use the `render` prop on any built-in component. See <DocsLink slug="concepts/ui-components">UI components</DocsLink>.
 - **Restyle a control**: use CSS custom properties and data attributes. See <DocsLink slug="concepts/ui-components">UI components</DocsLink>.
-- **Rearrange or remove controls**: eject a skin and modify it. See <DocsLink slug="how-to/customize-skins">Customize skins</DocsLink>.
+- **Rearrange or remove controls**: eject a skin and modify it. See <DocsLink slug="how-to/customize-skins" anchor="eject-and-edit-a-skin">Customize skins</DocsLink>.
 </FrameworkCase>
 
 <FrameworkCase frameworks={["html"]}>
 - **Restyle a control**: use CSS custom properties and data attributes. See <DocsLink slug="concepts/ui-components">UI components</DocsLink>.
-- **Rearrange or remove controls**: eject a skin and modify it. See <DocsLink slug="how-to/customize-skins">Customize skins</DocsLink>.
+- **Rearrange or remove controls**: eject a skin and modify it. See <DocsLink slug="how-to/customize-skins" anchor="eject-and-edit-a-skin">Customize skins</DocsLink>.
 </FrameworkCase>
 
 Build a custom component when you need new behavior, a new state display, or integration with an external system.
@@ -448,7 +448,7 @@ Use CSS custom properties and data attributes. See <DocsLink slug="concepts/ui-c
 
 ### Rearrange or remove controls
 
-Eject a skin and modify it. See <DocsLink slug="how-to/customize-skins">Customize skins</DocsLink>.
+Eject a skin and modify it. See <DocsLink slug="how-to/customize-skins" anchor="eject-and-edit-a-skin">Customize skins</DocsLink>.
 
 ## Troubleshooting
 
diff --git a/site/src/content/docs/how-to/customize-skins.mdx b/site/src/content/docs/how-to/customize-skins.mdx
index 5d17a56a03..16c6ad5338 100644
--- a/site/src/content/docs/how-to/customize-skins.mdx
+++ b/site/src/content/docs/how-to/customize-skins.mdx
@@ -1,17 +1,30 @@
 ---
 title: Customize skins
-description: Learn the public customization surface for packaged Video.js skins and when to eject
+description: Style a packaged Video.js skin or copy its source to change controls, layout, styles, and interactions
 ---
 
+import Aside from '@/components/Aside.astro';
 import FrameworkCase from '@/components/docs/FrameworkCase.astro';
-import EjectedSkin from '@/components/docs/EjectedSkin.astro';
 import DocsLink from '@/components/docs/DocsLink.astro';
+import RegistryCatalog from '@/components/registry/RegistryCatalog.astro';
+import RegistryCommand from '@/components/registry/RegistryCommand.astro';
+import RegistryStyling from '@/components/registry/RegistryStyling.astro';
+import ShadcnCommand from '@/components/registry/ShadcnCommand.astro';
 
-Video.js v10 comes with two pre-built skins: Default and Minimal. Start with their public CSS custom properties. When you need to change controls, layout, or interactions, eject the closest skin by copying its code into your project and making it your own.
+Start with the path that matches the change you want:
 
-## Basic customization
+| If you want to… | Use this path |
+| --------------- | ------------- |
+| Change colors, typography, sizing, or how the poster fills the player | [Style a packaged skin](#style-a-packaged-skin). The skin stays in the Video.js package, and you set its supported CSS properties. |
+| Add, remove, rearrange, or deeply restyle controls; change layout or interactions | [Eject and edit a skin](#eject-and-edit-a-skin). Ejecting copies the skin's source files into your project so you can change them. |
 
-Set these CSS custom properties directly on the skin:
+## Style a packaged skin
+
+Use a packaged skin's public settings to match it to your site without copying its source into your project.
+
+### Set the skin's styles
+
+Packaged skins expose [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) for their supported visual changes. Set them on the skin or any element that contains it:
 
 <FrameworkCase frameworks={["html"]}>
 
@@ -40,18 +53,26 @@ Set these CSS custom properties directly on the skin:
 
 </FrameworkCase>
 
-| Property Name | Description | Type | Example |
-| ------------- | ----------- | ---- | ------- |
-| `--media-accent-color` | The color of slider fills and accented controls | [`<color>`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) | `#f5c518` |
-| `--media-accent-text-color` | The color of text and icons shown on the accent color | [`<color>`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) | `black` |
-| `--media-border-radius` | The border radius of the media player | A valid [border-radius value](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/border-radius#values) | `1rem` |
-| `--media-scale-unit` | The base sizing unit for skin spacing and icons | [`<length>`](https://developer.mozilla.org/en-US/docs/Web/CSS/length) | `1rem` |
+| Property name | What it changes | Value | Example |
+| ------------- | --------------- | ----- | ------- |
+| `--media-accent-color` | Slider fills, highlighted controls and menu items, and primary actions | [`<color>`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) | `#f5c518` |
+| `--media-accent-text-color` | Text and icons shown on the accent color | [`<color>`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) | `black` |
+| `--media-border-color` | The hairline around the player | [`<color>`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) | `transparent` |
+| `--media-border-radius` | The player corner radius | A valid [border-radius value](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/border-radius#values) | `1rem` |
+| `--media-font-family` | The player interface font stack | A valid [font-family value](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-family) | `Roboto, sans-serif` |
+| `--media-object-fit` | How the media and poster fill the player | A valid [object-fit value](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/object-fit) | `cover` |
+| `--media-object-position` | Where the media and poster sit when they do not fill the player | A valid [object-position value](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/object-position) | `top` |
+| `--media-scale-unit` | The base size for skin spacing, icons, and text | [`<length>`](https://developer.mozilla.org/en-US/docs/Web/CSS/length) | `1rem` |
+
+If you omit `--media-accent-text-color`, the skins choose a contrasting text color from `--media-accent-color` using [`contrast-color()`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/contrast-color). Set it only when you want a different result.
 
-If you omit `--media-accent-text-color`, the skins choose a contrasting text color from `--media-accent-color` using [`contrast-color()`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/contrast-color). You only need to set it when you want to override that result.
+The skins use [`Inter`](https://rsms.me/inter/) when your page loads it and fall back to the system UI font. Video.js does not load the webfont for you. Set `--media-font-family` to use another font.
 
-### Set the audio color scheme
+The media element and poster share `--media-object-fit` and `--media-object-position`, so a `cover` poster stays aligned with `cover` video. See <DocsLink slug="how-to/add-a-poster-and-loading-placeholder">Add a poster and loading placeholder</DocsLink>.
 
-The audio skins adapt their main palette for light and dark mode using [`light-dark()`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/light-dark). It uses the inherited [`color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/color-scheme), so set `color-scheme` on the player or an ancestor:
+### Set the color scheme
+
+The audio skins adapt their main palette for light and dark mode using [`light-dark()`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/light-dark). They read the inherited [`color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/color-scheme), so set it on the player or an element that contains it:
 
 ```css
 :root {
@@ -59,11 +80,11 @@ The audio skins adapt their main palette for light and dark mode using [`light-d
 }
 ```
 
-The video skins keep their dark control presentation in both color schemes.
+The video skins keep their dark controls in both color schemes. Only their hairline border follows the scheme, and `--media-border-color` replaces it.
 
-### Scale with the document font size
+### Scale from the document font size
 
-Vanilla CSS and Tailwind skins use `--media-scale-unit` as the base for control spacing and icon sizes. Vanilla CSS skins also use it for font sizes. It defaults to `16px`, so player sizing does not change with the document root font size or the app's Tailwind spacing scale. Set it to `1rem` on the player or an ancestor to make the UI scale with the document root font size:
+The skins derive control spacing, icon sizes, and text from `--media-scale-unit`. It defaults to `16px`, so the player does not change with the document root font size or your app's Tailwind spacing scale. Set it to `1rem` to make the interface scale from the document root font size:
 
 ```css
 .player {
@@ -71,11 +92,13 @@ Vanilla CSS and Tailwind skins use `--media-scale-unit` as the base for control
 }
 ```
 
+In fullscreen, the skins increase the unit up to 1.75 times on displays 1920 pixels and wider. This keeps controls legible from a distance.
+
 You can also add your own class names to the skins.
 
-## Where packaged customization stops
+### Know where packaged styling stops
 
-The four properties above are the public styling controls for packaged skins. Don't depend on the elements, classnames, or other custom properties inside a packaged skin. They may change between releases.
+The properties above are the public styling settings for packaged skins. Do not depend on the elements, class names, or other custom properties inside a packaged skin. They may change between releases.
 
 <FrameworkCase frameworks={["html"]}>
 
@@ -91,106 +114,97 @@ Packaged video skins also let you replace the poster through the `renderPoster`
 
 See <DocsLink slug="reference/poster">Poster</DocsLink>.
 
-For anything deeper, eject instead of reaching into the packaged skin. There are no packaged-skin options for adding, removing, or rearranging controls, or replacing its built-in feedback and interactions. Seek buttons are a common example: the audio skins include 10-second skip-back and skip-forward buttons, but the video skins ship without them. To add rewind and fast-forward controls to a video skin, eject it and place a <DocsLink slug="reference/seek-button">SeekButton</DocsLink> in the control bar.
+Packaged skins do not provide settings for adding, removing, or rearranging controls, or for replacing built-in feedback and interactions. To make those changes, [eject the closest skin](#eject-and-edit-a-skin) and edit its source.
 
-## Eject a skin
+## Eject and edit a skin
 
-Eject as soon as the packaged skin no longer matches the player you need. Once ejected, removing a control is removing a component, and changing an overlay or interaction is editing code you own.
+If a packaged skin is close to the interface you want, eject it and edit the copy in your project. Ejecting turns the skin's controls, layout, styles, and interactions into app code that you own.
 
-An ejected skin is app code, so its markup, class names, and styles are yours to change. If none of the packaged skins is a useful starting point, build a custom UI from the player, container, and individual <DocsLink slug="concepts/ui-components">UI components</DocsLink> instead.
+Video.js publishes the skin source in a catalog of installable files. The [`shadcn` CLI](https://ui.shadcn.com/docs/cli) is the command-line tool that copies those files into your project, whether you use React or HTML.
 
-Soon, we'll have a CLI that ejects skins in your preferred framework and style. For now, we invite you to try these copy-paste-ready implementations.
+<Aside type="note">
+Commit your work before installing or updating source. You can then review every file the CLI adds or replaces.
+</Aside>
 
-To eject a skin:
+### Set up the `shadcn` CLI
 
-1. Choose the closest implementation below.
-2. Copy every file shown for your framework into your project.
-3. Replace the packaged skin with the copied component or player markup, then edit the files you own.
+If your project does not have a `components.json` configuration file, create one:
 
-{/*TODO: Add StyleCase for tailwind variants once tailwind is a supported style (see #840)*/}
+<ShadcnCommand action="init" />
 
-#### Default video skin
+### Choose how the skin is styled
 
 <FrameworkCase frameworks={["react"]}>
-  <EjectedSkin id="default-video-react" />
+Each React skin is available with Tailwind CSS 4 classes or with a plain stylesheet, labeled Vanilla CSS. Choose the form your project uses. Skin names stay the same.
 </FrameworkCase>
 
 <FrameworkCase frameworks={["html"]}>
-  <EjectedSkin id="default-video" />
+HTML skins use plain stylesheets, labeled Vanilla CSS. Each skin includes markup that renders directly in the page, a module that registers its custom elements, and a stylesheet.
 </FrameworkCase>
 
-#### Default audio skin
-
-<FrameworkCase frameworks={["react"]}>
-  <EjectedSkin id="default-audio-react" />
-</FrameworkCase>
+<RegistryStyling />
 
-<FrameworkCase frameworks={["html"]}>
-  <EjectedSkin id="default-audio" />
-</FrameworkCase>
+### Connect the CLI to Video.js
 
-#### Minimal video skin
+Run this command once. It saves `@videojs` as a short prefix in `components.json`, so later commands can use names such as `@videojs/video`:
 
-<FrameworkCase frameworks={["react"]}>
-  <EjectedSkin id="minimal-video-react" />
-</FrameworkCase>
+<RegistryCommand />
 
-<FrameworkCase frameworks={["html"]}>
-  <EjectedSkin id="minimal-video" />
-</FrameworkCase>
+### Install a skin
 
-#### Minimal audio skin
+Install the skin closest to the interface you want. Default skins use the preset name, and Minimal skins add `-minimal`:
 
-<FrameworkCase frameworks={["react"]}>
-  <EjectedSkin id="minimal-audio-react" />
-</FrameworkCase>
+<ShadcnCommand action="add @videojs/video" />
 
-<FrameworkCase frameworks={["html"]}>
-  <EjectedSkin id="minimal-audio" />
-</FrameworkCase>
+<RegistryCatalog />
 
-#### Default live video skin
+The paths in the table start from the component location configured in `components.json`. The background video skin cannot be ejected.
 
-The live skins swap the duration and current-time displays for a Live button. They build on the live presets, so the player reports live-edge state.
+### Use the installed skin
 
 <FrameworkCase frameworks={["react"]}>
-  <EjectedSkin id="default-live-video-react" />
+The skin's files are under `components/videojs/skins/<preset>`. Keep importing the player and media from `@videojs/react`. Import the installed skin component from `skin.tsx`, then render it around your media where you previously rendered the packaged skin.
 </FrameworkCase>
 
 <FrameworkCase frameworks={["html"]}>
-  <EjectedSkin id="default-live-video" />
+The skin's files are under `components/videojs/skins/<preset>`. Keep importing the player and media from `@videojs/html`. Import the installed `skin.ts` once, then paste the markup from `skin.html` inside your player around the media element.
 </FrameworkCase>
 
-#### Default live audio skin
-
-<FrameworkCase frameworks={["react"]}>
-  <EjectedSkin id="default-live-audio-react" />
-</FrameworkCase>
+### Edit the installed files
 
-<FrameworkCase frameworks={["html"]}>
-  <EjectedSkin id="default-live-audio" />
-</FrameworkCase>
+Start with the file that owns the change you want:
 
-#### Minimal live video skin
+| Goal | Where to start |
+| ---- | -------------- |
+| Add, remove, or rearrange controls | `skin.tsx` in React or `skin.html` in HTML |
+| Change colors, surfaces, shadows, sizes, or motion across the skin | `components/videojs/styles/theme.css` |
+| Change one control's appearance | That control's classes or stylesheet |
+| Change one control's interaction | That control's module |
 
 <FrameworkCase frameworks={["react"]}>
-  <EjectedSkin id="minimal-live-video-react" />
+The files for the control bar, gestures, keyboard shortcuts, settings menu, and status indicators are composed from `skin.tsx`. The UI components they use are installed as source too, so you can open and change each button or slider.
+
+- **Tailwind CSS.** Components use utility classes. The install adds the theme keys, utilities, and variants to your main CSS file. The skins require Tailwind CSS 4.3 or later and its default configuration. If your project prefixes Tailwind classes, update the installed components.
+- **Vanilla CSS.** Components use class names that start with `media-`, and the skin's `skin.css` stylesheet styles them.
 </FrameworkCase>
 
 <FrameworkCase frameworks={["html"]}>
-  <EjectedSkin id="minimal-live-video" />
+The `skin.html` file contains the layout. The `skin.ts` module registers the custom elements and loads `skin.css`. Elements use class names that start with `media-`; change a class in `skin.html` or a rule in the stylesheet to change one part of the interface.
 </FrameworkCase>
 
-#### Minimal live audio skin
+### Inspect or update an ejected skin
 
-<FrameworkCase frameworks={["react"]}>
-  <EjectedSkin id="minimal-live-audio-react" />
-</FrameworkCase>
+Use the CLI's `search` command to find source and `view` to inspect it before installation:
 
-<FrameworkCase frameworks={["html"]}>
-  <EjectedSkin id="minimal-live-audio" />
-</FrameworkCase>
+```bash
+npx shadcn@latest search @videojs --query volume
+npx shadcn@latest view @videojs/video
+```
 
-## Related guides
+Installed files belong to your project, so an update replaces your local copy. Commit your changes, reinstall with `--overwrite`, and review the resulting version-control diff before keeping it:
+
+```bash
+npx shadcn@latest add @videojs/video --overwrite
+```
 
-- <DocsLink slug="how-to/build-your-own-component">Build your own UI component</DocsLink>
+To understand how skins fit into Video.js, read <DocsLink slug="concepts/skins">Skins</DocsLink>. To create a control instead of editing one, follow <DocsLink slug="how-to/build-your-own-component">Build your own component</DocsLink>.
diff --git a/site/src/content/docs/how-to/installation.mdx b/site/src/content/docs/how-to/installation.mdx
index 57b3a58b67..d24dfb9236 100644
--- a/site/src/content/docs/how-to/installation.mdx
+++ b/site/src/content/docs/how-to/installation.mdx
@@ -13,6 +13,8 @@ import HTMLUsageCodeBlock from '@/components/installation/HTMLUsageCodeBlock';
 import ReactCreateCodeBlock from '@/components/installation/ReactCreateCodeBlock';
 import ReactInstallTabs from '@/components/installation/ReactInstallTabs';
 import ReactUsageCodeBlock from '@/components/installation/ReactUsageCodeBlock';
+import InstallationRegistryCommand from '@/components/registry/InstallationRegistryCommand.astro';
+import RegistryStyling from '@/components/registry/RegistryStyling.astro';
 import ContentWidth from '@/components/frames/ContentWidth.astro';
 import Aside from '@/components/Aside.astro';
 import DocsLink from '@/components/docs/DocsLink.astro';
@@ -63,10 +65,10 @@ If you're an agent, interview your user and offer to run the CLI for them, or of
 </div>
 
 <FrameworkCase frameworks={["react"]}>
-If your user's requirements can't be met by a preset/skin, [eject](/docs/framework/react/how-to/customize-skins) and customize an existing preset/skin for your needs. As you develop with Video.js, rely heavily on [llms.txt](/docs/framework/react/llms.txt) to make sure you always have the latest information.
+If a preset and skin do not meet your user's requirements, follow [Customize skins](/docs/framework/react/how-to/customize-skins#eject-and-edit-a-skin) to eject the closest skin. As you develop with Video.js, rely heavily on [llms.txt](/docs/framework/react/llms.txt) to make sure you always have the latest information.
 </FrameworkCase>
 <FrameworkCase frameworks={["html"]}>
-If your user's requirements can't be met by a preset/skin, [eject](/docs/framework/html/how-to/customize-skins) and customize an existing preset/skin for your needs. As you develop with Video.js, rely heavily on [llms.txt](/docs/framework/html/llms.txt) to make sure you always have the latest information.
+If a preset and skin do not meet your user's requirements, follow [Customize skins](/docs/framework/html/how-to/customize-skins#eject-and-edit-a-skin) to eject the closest skin. As you develop with Video.js, rely heavily on [llms.txt](/docs/framework/html/llms.txt) to make sure you always have the latest information.
 </FrameworkCase>
 </LLMCase>
 
@@ -168,9 +170,19 @@ Add it to your components folder in a new file.
 
 That's it! You now have a working Video.js player.
 
+## Change the skin's controls or layout
+
+To add, remove, or rearrange the skin you selected, eject it into your project. If your project does not have a `components.json` file, <DocsLink slug="how-to/customize-skins" anchor="set-up-the-shadcn-cli">set up the CLI first</DocsLink>. Then choose how you want the skin's styles written and run the command below to copy its files:
+
+<RegistryStyling />
+
+<InstallationRegistryCommand />
+
+<DocsLinkCard slug="how-to/customize-skins" anchor="eject-and-edit-a-skin" description="Learn which files to edit and how to update your copy later">Customize skins</DocsLinkCard>
+
 ## Choose what to do next
 
-<DocsLinkCard slug="how-to/customize-skins" description="Customize a packaged skin or eject it for full control">Customize skins</DocsLinkCard>
+<DocsLinkCard slug="how-to/customize-skins" anchor="style-a-packaged-skin" description="Change colors, typography, sizing, and poster presentation">Customize skins</DocsLinkCard>
 
 <DocsLinkCard slug="concepts/overview" anchor="ui-components" description="Explore the building blocks used by skins and custom controls">UI components</DocsLinkCard>
 
diff --git a/site/src/content/docs/how-to/migrate-from-media-chrome.mdx b/site/src/content/docs/how-to/migrate-from-media-chrome.mdx
index b688c9ae17..23e6b6303e 100644
--- a/site/src/content/docs/how-to/migrate-from-media-chrome.mdx
+++ b/site/src/content/docs/how-to/migrate-from-media-chrome.mdx
@@ -284,7 +284,7 @@ The packaged Video.js skins expose `--media-accent-color`, `--media-accent-text-
 
 ## Themes become skins
 
-Media Chrome's `<template>`-based themes (`media-theme`) become Video.js <DocsLink slug="concepts/skins">skins</DocsLink> and <DocsLink slug="concepts/presets">presets</DocsLink>. Start from a preset, then eject and customize with <DocsLink slug="how-to/customize-skins">Customize skins</DocsLink>, rather than authoring a template.
+Media Chrome's `<template>`-based themes (`media-theme`) become Video.js <DocsLink slug="concepts/skins">skins</DocsLink> and <DocsLink slug="concepts/presets">presets</DocsLink>. Start from a preset, then <DocsLink slug="how-to/customize-skins" anchor="eject-and-edit-a-skin">eject its skin</DocsLink>, rather than authoring a template.
 
 <FrameworkCase frameworks={["html"]}>
 Ready-made HTML skins keep their controls inside Shadow DOM. Code outside the skin sees a click as coming from the skin, not the button inside it. Some control events also stay inside the skin. Do not use an outside listener to identify which built-in button was clicked.
@@ -295,7 +295,7 @@ Keep the skin when its CSS variables and content slots cover your changes. Build
 </FrameworkCase>
 
 <FrameworkCase frameworks={["react"]}>
-React skins do not use Shadow DOM. Use `render` props when you build individual controls. Eject a ready-made skin when you need to change its control set or layout.
+React skins do not use Shadow DOM. Use `render` props when you build individual controls. Install a ready-made skin's source when you need to change its control set or layout.
 </FrameworkCase>
 
 ## Control the player imperatively
@@ -350,7 +350,7 @@ Chapters themselves do work. Add a default `<track kind="chapters">` and the pac
 
 ### Disable autohide (`autohide="-1"`)
 
-Packaged skins don't expose an autohide switch. Eject the closest skin and remove its hidden-control styles. That's safer than overriding internal selectors in a skin you don't own.
+Packaged skins don't expose an autohide switch. Install the closest skin's source and remove its hidden-control styles. That's safer than overriding internal selectors in a skin you don't own.
 
 ### Breakpoints
 
diff --git a/site/src/content/docs/how-to/migrate-from-mux-player.mdx b/site/src/content/docs/how-to/migrate-from-mux-player.mdx
index d6e7109a9a..e6e6f236e7 100644
--- a/site/src/content/docs/how-to/migrate-from-mux-player.mdx
+++ b/site/src/content/docs/how-to/migrate-from-mux-player.mdx
@@ -464,13 +464,13 @@ Give the skin a class you own:
 ```
 </FrameworkCase>
 
-`--media-accent-color` reaches the sliders, the active buttons, and the accent surfaces. Video.js derives a readable text color to sit on top of it; override that with `--media-accent-text-color` if you'd rather choose. `--media-border-radius` rounds the player, and `--media-scale-unit` scales the whole control bar at once. <DocsLink slug="how-to/customize-skins">Customize skins</DocsLink> has the full list.
+`--media-accent-color` reaches the sliders, the active buttons, and the accent surfaces. Video.js derives a readable text color to sit on top of it; override that with `--media-accent-text-color` if you'd rather choose. `--media-border-radius` rounds the player, and `--media-scale-unit` scales the whole control bar at once. <DocsLink slug="how-to/customize-skins" anchor="style-a-packaged-skin">Customize skins</DocsLink> has the full list.
 
 The skins use a different visual design, so you may not need to replace Mux Player's `primaryColor` and `secondaryColor` directly. Start with `--media-accent-color`. Restyle individual surfaces, or eject the skin, only when you need a closer palette match.
 
 ### Level 3: eject
 
-**Ejecting** means copying the skin's source into your project and editing it, the way you would a shadcn component. The packaged skin isn't compiled magic; it's a tree of components, so ejecting starts as copy and paste. <DocsLink slug="how-to/customize-skins">Customize skins</DocsLink> has copy-paste-ready implementations for every packaged skin.
+For changes to controls, layout, or interactions, eject the skin into your project. Its components and styles become files you own. <DocsLink slug="how-to/customize-skins" anchor="eject-and-edit-a-skin">Customize skins</DocsLink> covers the setup and available skins.
 
 This is the level that per-control tweaks need, and it's a genuine step up in effort from a Mux Player attribute. `forward-seek-offset="30"` was one character. In Video.js, the skins bake their seek step into their keyboard shortcuts and gestures, so changing it means editing those lines:
 
@@ -795,7 +795,7 @@ Program Date Time has no convenience surface: no `getStartDate()`, no `currentPd
 
 Ordered roughly by how many migrations they'll touch.
 
-- Two skins, against Mux Player's five themes, and no runtime theme switch. That's a deliberate trade, fewer looks each of which you can eject, but it's a real difference if you shipped `theme="classic"`.
+- Two skins, against Mux Player's five themes, and no runtime theme switch. That's a deliberate trade, fewer looks you can eject, but it's a real difference if you shipped `theme="classic"`.
 - Lazy loading (`loading="viewport|page"`) has no equivalent.
 - The controls auto-hide delay isn't configurable, and there's no disabled state for the controls ([#1728](https://github.com/videojs/v10/issues/1728)).
 - Nothing persists between sessions: volume, captions language, speed, quality. That's out of scope for GA ([#944](https://github.com/videojs/v10/issues/944)). Default subtitle language is tracked at [#1423](https://github.com/videojs/v10/issues/1423), though Mux users can set `source.playback.defaultSubtitlesLang` and let the HLS playlist decide.
diff --git a/site/src/content/docs/how-to/migrate-from-plyr.mdx b/site/src/content/docs/how-to/migrate-from-plyr.mdx
index 0be361d8b8..f6676094ba 100644
--- a/site/src/content/docs/how-to/migrate-from-plyr.mdx
+++ b/site/src/content/docs/how-to/migrate-from-plyr.mdx
@@ -490,11 +490,11 @@ video-player {
 ```
 </FrameworkCase>
 
-`--media-accent-color` reaches the sliders, active buttons, and accent surfaces, so it's the closest match for Plyr's `--plyr-color-main`. Video.js picks a readable text color to sit on top of it; set `--media-accent-text-color` to choose that yourself. `--media-border-radius` and `--media-scale-unit` cover rounding and control sizing. See <DocsLink slug="how-to/customize-skins">Customize skins</DocsLink> for the full list.
+`--media-accent-color` reaches the sliders, active buttons, and accent surfaces, so it's the closest match for Plyr's `--plyr-color-main`. Video.js picks a readable text color to sit on top of it; set `--media-accent-text-color` to choose that yourself. `--media-border-radius` and `--media-scale-unit` cover rounding and control sizing. See <DocsLink slug="how-to/customize-skins" anchor="style-a-packaged-skin">Customize skins</DocsLink> for the full list.
 
 ## Eject a skin
 
-If you need extra customization of layout, styles, or icons, you can "eject" the skin into your application, much like a shadcn installation. Copy the skin and its CSS into your project, then modify the components and styles directly. <DocsLink slug="how-to/customize-skins">Customize skins</DocsLink> has copy-paste-ready implementations for every packaged skin.
+For changes to controls, layout, or icons, eject the skin into your project. Its components and styles become files you own. <DocsLink slug="how-to/customize-skins" anchor="eject-and-edit-a-skin">Customize skins</DocsLink> covers the setup and available skins.
 
 ## Known gaps
 
diff --git a/site/src/content/docs/how-to/migrate-from-video-js-8.mdx b/site/src/content/docs/how-to/migrate-from-video-js-8.mdx
index 9886e008f7..10b9398dc4 100644
--- a/site/src/content/docs/how-to/migrate-from-video-js-8.mdx
+++ b/site/src/content/docs/how-to/migrate-from-video-js-8.mdx
@@ -363,11 +363,11 @@ video-player {
 }
 ```
 
-`--media-accent-color` reaches the sliders, the active buttons, and the accent surfaces at once. Video.js derives a readable text color to sit on top of it; override that with `--media-accent-text-color` if you'd rather choose. `--media-border-radius` rounds the player, and `--media-scale-unit` scales the whole control bar, which is the closest thing to v8's `font-size` trick for sizing controls. <DocsLink slug="how-to/customize-skins">Customize skins</DocsLink> has the full list.
+`--media-accent-color` reaches the sliders, the active buttons, and the accent surfaces at once. Video.js derives a readable text color to sit on top of it; override that with `--media-accent-text-color` if you'd rather choose. `--media-border-radius` rounds the player, and `--media-scale-unit` scales the whole control bar, which is the closest thing to v8's `font-size` trick for sizing controls. <DocsLink slug="how-to/customize-skins" anchor="style-a-packaged-skin">Customize skins</DocsLink> has the full list.
 
 ### Level 3: eject
 
-**Ejecting** means copying the skin's source into your project and editing it, the way you would a shadcn component. The packaged skin isn't compiled magic; it's a tree of components, so ejecting starts as copy and paste. <DocsLink slug="how-to/customize-skins">Customize skins</DocsLink> has copy-paste-ready implementations for every packaged skin.
+For changes to controls, layout, or interactions, eject the skin into your project. Its components and styles become files you own. <DocsLink slug="how-to/customize-skins" anchor="eject-and-edit-a-skin">Customize skins</DocsLink> covers the setup and available skins.
 
 This is where v8's `controlBar` config and `addChild` calls end up, and honestly it's the better trade. Instead of `controlBar: { pictureInPictureToggle: false }`, you delete a line. Instead of subclassing a component to change its behavior, you edit the markup.
 
@@ -461,7 +461,7 @@ export function MyPlayer() {
 
 Those hotkey and gesture declarations are where `userActions` went. v8's `userActions.hotkeys` was a function you wrote; here each shortcut is a component with a key and an action, and `userActions.click` and `doubleClick` become gestures with a region. The packaged skins already include a sensible set of both, which is why you don't see them in the earlier examples.
 
-Ejecting is also where you take on the skin's CSS. The packaged skins ship styles for everything above; a bare layout renders unstyled until you bring those along, which is why <DocsLink slug="how-to/customize-skins">Customize skins</DocsLink> hands you the CSS next to the markup.
+Ejecting is also where you take on the skin's CSS. The packaged skins ship styles for everything above; a bare layout renders unstyled until you bring those along, so the copied source includes the skin's stylesheet next to its markup.
 
 ## Plugins
 
diff --git a/site/src/content/docs/how-to/play-live-streams.mdx b/site/src/content/docs/how-to/play-live-streams.mdx
index 406fd09c9b..6cb55326ad 100644
--- a/site/src/content/docs/how-to/play-live-streams.mdx
+++ b/site/src/content/docs/how-to/play-live-streams.mdx
@@ -120,7 +120,7 @@ LiveButton reads this state: it renders as an active "go to live" control while
 
 ### DVR: let users scrub back
 
-For streams with a DVR window, give users a <DocsLink slug="reference/time-slider">TimeSlider</DocsLink>. The live preset skins don't include one, so add it to your own UI or <DocsLink slug="how-to/customize-skins">eject the skin</DocsLink>. The slider tracks the sliding window automatically because `duration` follows the live edge.
+For streams with a DVR window, give users a <DocsLink slug="reference/time-slider">TimeSlider</DocsLink>. The live preset skins don't include one, so add it to your own UI or <DocsLink slug="how-to/customize-skins" anchor="eject-and-edit-a-skin">eject the skin</DocsLink>. The slider tracks the sliding window automatically because `duration` follows the live edge.
 
 ### Switch UI by stream type
 
diff --git a/site/src/content/docs/how-to/use-videojs-with-svelte.mdx b/site/src/content/docs/how-to/use-videojs-with-svelte.mdx
index 6865737c0d..d37f1a0c43 100644
--- a/site/src/content/docs/how-to/use-videojs-with-svelte.mdx
+++ b/site/src/content/docs/how-to/use-videojs-with-svelte.mdx
@@ -61,7 +61,7 @@ If a style depends on a Video.js `data-*` state, Svelte may remove its selector
 </style>
 ```
 
-`:defined` applies the state style only after the browser loads the element. These selectors matter when you eject a skin or compose controls yourself. Styles cannot reach controls inside a packaged skin; use its CSS custom properties, or <DocsLink slug="how-to/customize-skins">eject the skin</DocsLink> to own its markup and CSS.
+`:defined` applies the state style only after the browser loads the element. These selectors matter when you eject a skin or compose controls yourself. Styles cannot reach controls inside a packaged skin; use its CSS custom properties, or <DocsLink slug="how-to/customize-skins" anchor="eject-and-edit-a-skin">eject the skin</DocsLink> to change its markup and CSS.
 
 ## Pass objects as properties
 
diff --git a/site/src/content/docs/how-to/use-videojs-with-vue.mdx b/site/src/content/docs/how-to/use-videojs-with-vue.mdx
index 978f3a4985..04ca3cdb21 100644
--- a/site/src/content/docs/how-to/use-videojs-with-vue.mdx
+++ b/site/src/content/docs/how-to/use-videojs-with-vue.mdx
@@ -106,7 +106,7 @@ video-skin:not(:defined) {
 </style>
 ```
 
-Scoped styles cannot reach controls inside a packaged skin. Use its CSS custom properties, or <DocsLink slug="how-to/customize-skins">eject the skin</DocsLink> to own its markup and CSS.
+Scoped styles cannot reach controls inside a packaged skin. Use its CSS custom properties, or <DocsLink slug="how-to/customize-skins" anchor="eject-and-edit-a-skin">eject the skin</DocsLink> to change its markup and CSS.
 
 ## Pass objects as properties
 
diff --git a/site/src/content/docs/how-to/write-guides.mdx b/site/src/content/docs/how-to/write-guides.mdx
index cfed582c4d..365f36712e 100644
--- a/site/src/content/docs/how-to/write-guides.mdx
+++ b/site/src/content/docs/how-to/write-guides.mdx
@@ -76,7 +76,7 @@ Most how-to guides use the same sections, in this order:
 6. **Troubleshooting** — symptom, likely cause, fix.
 7. **Related components**, **Related API**, **Related guides** — three link groups.
 
-A guide may skip a section that doesn't apply. Established guides may keep a topic-specific structure when it tells the story more clearly — especially broad customization workflows such as Customize skins and Build your own UI component. Do not reorganize a useful page only to satisfy the template.
+A guide may skip a section that doesn't apply. Established guides may keep a topic-specific structure when it tells the story more clearly — especially broad customization workflows such as Build your own UI component. Do not reorganize a useful page only to satisfy the template.
 
 One goal per page. Titles are goal-oriented and in the reader's words: each completes the sentence "How to…" without the literal prefix ("Play live streams", "Show captions and subtitles" — not "Live Playback" or "Text Tracks"). Think about what someone who only knows YouTube — or their coding agent — would search for. One page should fully answer one question.
 
diff --git a/site/src/content/docs/reference/audio-minimal-skin.mdx b/site/src/content/docs/reference/audio-minimal-skin.mdx
index 9ccc5a2bb7..41da03b44f 100644
--- a/site/src/content/docs/reference/audio-minimal-skin.mdx
+++ b/site/src/content/docs/reference/audio-minimal-skin.mdx
@@ -8,6 +8,7 @@ description: The audio preset's visually lighter skin, closer to a classic contr
 import DocsLink from '@/components/docs/DocsLink.astro';
 import FrameworkCase from '@/components/docs/FrameworkCase.astro';
 import SkinImports from '@/components/docs/api-reference/SkinImports.astro';
+import RegistrySkinInstall from '@/components/registry/RegistrySkinInstall.astro';
 
 The minimal skin of the audio preset: the same player and the same controls in a visually lighter design, closer to a classic control bar. <DocsLink slug="reference/audio-skin">AudioSkin</DocsLink> is the same preset's other variant. See <DocsLink slug="concepts/skins">Skins</DocsLink> for how packaged skins work and <DocsLink slug="concepts/presets">Presets</DocsLink> for what the audio preset ships.
 
@@ -41,4 +42,8 @@ The skin goes between the player and the media element. It renders its controls
 
 ## Styling
 
-Packaged skins style themselves and expose a small set of public CSS custom properties. Everything else inside the skin is private and may change between releases. <DocsLink slug="how-to/customize-skins">Customize skins</DocsLink> documents the properties and the ejection path when you need deeper changes.
+Packaged skins style themselves and expose a small set of public CSS custom properties. Everything else inside the skin is private and may change between releases. <DocsLink slug="how-to/customize-skins" anchor="style-a-packaged-skin">Customize skins</DocsLink> documents the properties. When you need deeper changes, eject the skin.
+
+## Eject the skin
+
+<RegistrySkinInstall item="audio-minimal" />
diff --git a/site/src/content/docs/reference/audio-skin.mdx b/site/src/content/docs/reference/audio-skin.mdx
index 0fe91ff222..d23872a68f 100644
--- a/site/src/content/docs/reference/audio-skin.mdx
+++ b/site/src/content/docs/reference/audio-skin.mdx
@@ -8,6 +8,7 @@ description: The audio preset's default skin with the modern, frosted look
 import DocsLink from '@/components/docs/DocsLink.astro';
 import FrameworkCase from '@/components/docs/FrameworkCase.astro';
 import SkinImports from '@/components/docs/api-reference/SkinImports.astro';
+import RegistrySkinInstall from '@/components/registry/RegistrySkinInstall.astro';
 
 The default skin of the audio preset: the control layout for on-demand audio with the modern, frosted look. <DocsLink slug="reference/audio-minimal-skin">MinimalAudioSkin</DocsLink> is the same preset's other variant. See <DocsLink slug="concepts/skins">Skins</DocsLink> for how packaged skins work and <DocsLink slug="concepts/presets">Presets</DocsLink> for what the audio preset ships.
 
@@ -41,4 +42,8 @@ The skin goes between the player and the media element. It renders its controls
 
 ## Styling
 
-Packaged skins style themselves and expose a small set of public CSS custom properties. Everything else inside the skin is private and may change between releases. <DocsLink slug="how-to/customize-skins">Customize skins</DocsLink> documents the properties and the ejection path when you need deeper changes.
+Packaged skins style themselves and expose a small set of public CSS custom properties. Everything else inside the skin is private and may change between releases. <DocsLink slug="how-to/customize-skins" anchor="style-a-packaged-skin">Customize skins</DocsLink> documents the properties. When you need deeper changes, eject the skin.
+
+## Eject the skin
+
+<RegistrySkinInstall item="audio" />
diff --git a/site/src/content/docs/reference/background-video-skin.mdx b/site/src/content/docs/reference/background-video-skin.mdx
index 882442fa11..e51835b4aa 100644
--- a/site/src/content/docs/reference/background-video-skin.mdx
+++ b/site/src/content/docs/reference/background-video-skin.mdx
@@ -41,4 +41,4 @@ The skin goes between the player and the media element. It sizes the ambient vid
 
 ## Styling
 
-Packaged skins style themselves and expose a small set of public CSS custom properties. Everything else inside the skin is private and may change between releases. <DocsLink slug="how-to/customize-skins">Customize skins</DocsLink> documents the properties and the ejection path when you need deeper changes.
+Packaged skins style themselves and expose a small set of public CSS custom properties. Everything else inside the skin is private and may change between releases. <DocsLink slug="how-to/customize-skins" anchor="style-a-packaged-skin">Customize skins</DocsLink> documents the properties. The background video skin cannot be ejected.
diff --git a/site/src/content/docs/reference/live-audio-minimal-skin.mdx b/site/src/content/docs/reference/live-audio-minimal-skin.mdx
index f035c155e2..a063aecad1 100644
--- a/site/src/content/docs/reference/live-audio-minimal-skin.mdx
+++ b/site/src/content/docs/reference/live-audio-minimal-skin.mdx
@@ -8,6 +8,7 @@ description: The live audio preset's visually lighter skin, closer to a classic
 import DocsLink from '@/components/docs/DocsLink.astro';
 import FrameworkCase from '@/components/docs/FrameworkCase.astro';
 import SkinImports from '@/components/docs/api-reference/SkinImports.astro';
+import RegistrySkinInstall from '@/components/registry/RegistrySkinInstall.astro';
 
 The minimal skin of the live audio preset: the same player and the same controls in a visually lighter design, closer to a classic control bar. Like the default skin, it shows a Live button in place of time controls. <DocsLink slug="reference/live-audio-skin">LiveAudioSkin</DocsLink> is the same preset's other variant. See <DocsLink slug="concepts/skins">Skins</DocsLink> for how packaged skins work and <DocsLink slug="concepts/presets">Presets</DocsLink> for what the live audio preset ships.
 
@@ -43,4 +44,8 @@ The examples use the <DocsLink slug="reference/mux-audio">Mux audio element</Doc
 
 ## Styling
 
-Packaged skins style themselves and expose a small set of public CSS custom properties. Everything else inside the skin is private and may change between releases. <DocsLink slug="how-to/customize-skins">Customize skins</DocsLink> documents the properties and the ejection path when you need deeper changes.
+Packaged skins style themselves and expose a small set of public CSS custom properties. Everything else inside the skin is private and may change between releases. <DocsLink slug="how-to/customize-skins" anchor="style-a-packaged-skin">Customize skins</DocsLink> documents the properties. When you need deeper changes, eject the skin.
+
+## Eject the skin
+
+<RegistrySkinInstall item="live-audio-minimal" />
diff --git a/site/src/content/docs/reference/live-audio-skin.mdx b/site/src/content/docs/reference/live-audio-skin.mdx
index 3761abdb18..94fb3aa61a 100644
--- a/site/src/content/docs/reference/live-audio-skin.mdx
+++ b/site/src/content/docs/reference/live-audio-skin.mdx
@@ -8,6 +8,7 @@ description: The live audio preset's default skin, which swaps time controls for
 import DocsLink from '@/components/docs/DocsLink.astro';
 import FrameworkCase from '@/components/docs/FrameworkCase.astro';
 import SkinImports from '@/components/docs/api-reference/SkinImports.astro';
+import RegistrySkinInstall from '@/components/registry/RegistrySkinInstall.astro';
 
 The default skin of the live audio preset: the audio layout with the time slider and time displays swapped for a Live button. <DocsLink slug="reference/live-audio-minimal-skin">MinimalLiveAudioSkin</DocsLink> is the same preset's other variant. See <DocsLink slug="concepts/skins">Skins</DocsLink> for how packaged skins work and <DocsLink slug="concepts/presets">Presets</DocsLink> for what the live audio preset ships.
 
@@ -43,4 +44,8 @@ The examples use the <DocsLink slug="reference/mux-audio">Mux audio element</Doc
 
 ## Styling
 
-Packaged skins style themselves and expose a small set of public CSS custom properties. Everything else inside the skin is private and may change between releases. <DocsLink slug="how-to/customize-skins">Customize skins</DocsLink> documents the properties and the ejection path when you need deeper changes.
+Packaged skins style themselves and expose a small set of public CSS custom properties. Everything else inside the skin is private and may change between releases. <DocsLink slug="how-to/customize-skins" anchor="style-a-packaged-skin">Customize skins</DocsLink> documents the properties. When you need deeper changes, eject the skin.
+
+## Eject the skin
+
+<RegistrySkinInstall item="live-audio" />
diff --git a/site/src/content/docs/reference/live-video-minimal-skin.mdx b/site/src/content/docs/reference/live-video-minimal-skin.mdx
index 0546f4b382..bb4c96dc16 100644
--- a/site/src/content/docs/reference/live-video-minimal-skin.mdx
+++ b/site/src/content/docs/reference/live-video-minimal-skin.mdx
@@ -8,6 +8,7 @@ description: The live video preset's visually lighter skin, closer to a classic
 import DocsLink from '@/components/docs/DocsLink.astro';
 import FrameworkCase from '@/components/docs/FrameworkCase.astro';
 import SkinImports from '@/components/docs/api-reference/SkinImports.astro';
+import RegistrySkinInstall from '@/components/registry/RegistrySkinInstall.astro';
 
 The minimal skin of the live video preset: the same player and the same controls in a visually lighter design, closer to a classic control bar. Like the default skin, it shows a Live button in place of time controls. <DocsLink slug="reference/live-video-skin">LiveVideoSkin</DocsLink> is the same preset's other variant. See <DocsLink slug="concepts/skins">Skins</DocsLink> for how packaged skins work and <DocsLink slug="concepts/presets">Presets</DocsLink> for what the live video preset ships.
 
@@ -55,4 +56,8 @@ See <DocsLink slug="how-to/add-a-poster-and-loading-placeholder">Add a poster an
 
 ## Styling
 
-Packaged skins style themselves and expose a small set of public CSS custom properties. Everything else inside the skin is private and may change between releases. <DocsLink slug="how-to/customize-skins">Customize skins</DocsLink> documents the properties and the ejection path when you need deeper changes.
+Packaged skins style themselves and expose a small set of public CSS custom properties. Everything else inside the skin is private and may change between releases. <DocsLink slug="how-to/customize-skins" anchor="style-a-packaged-skin">Customize skins</DocsLink> documents the properties. When you need deeper changes, eject the skin.
+
+## Eject the skin
+
+<RegistrySkinInstall item="live-video-minimal" />
diff --git a/site/src/content/docs/reference/live-video-skin.mdx b/site/src/content/docs/reference/live-video-skin.mdx
index b8427ecc0a..595d20d3a8 100644
--- a/site/src/content/docs/reference/live-video-skin.mdx
+++ b/site/src/content/docs/reference/live-video-skin.mdx
@@ -8,6 +8,7 @@ description: The live video preset's default skin, which swaps time controls for
 import DocsLink from '@/components/docs/DocsLink.astro';
 import FrameworkCase from '@/components/docs/FrameworkCase.astro';
 import SkinImports from '@/components/docs/api-reference/SkinImports.astro';
+import RegistrySkinInstall from '@/components/registry/RegistrySkinInstall.astro';
 
 The default skin of the live video preset: the video layout with the time slider and time displays swapped for a Live button. <DocsLink slug="reference/live-video-minimal-skin">MinimalLiveVideoSkin</DocsLink> is the same preset's other variant. See <DocsLink slug="concepts/skins">Skins</DocsLink> for how packaged skins work and <DocsLink slug="concepts/presets">Presets</DocsLink> for what the live video preset ships.
 
@@ -55,4 +56,8 @@ See <DocsLink slug="how-to/add-a-poster-and-loading-placeholder">Add a poster an
 
 ## Styling
 
-Packaged skins style themselves and expose a small set of public CSS custom properties. Everything else inside the skin is private and may change between releases. <DocsLink slug="how-to/customize-skins">Customize skins</DocsLink> documents the properties and the ejection path when you need deeper changes.
+Packaged skins style themselves and expose a small set of public CSS custom properties. Everything else inside the skin is private and may change between releases. <DocsLink slug="how-to/customize-skins" anchor="style-a-packaged-skin">Customize skins</DocsLink> documents the properties. When you need deeper changes, eject the skin.
+
+## Eject the skin
+
+<RegistrySkinInstall item="live-video" />
diff --git a/site/src/content/docs/reference/video-minimal-skin.mdx b/site/src/content/docs/reference/video-minimal-skin.mdx
index 64923478d5..9827bdc926 100644
--- a/site/src/content/docs/reference/video-minimal-skin.mdx
+++ b/site/src/content/docs/reference/video-minimal-skin.mdx
@@ -8,6 +8,7 @@ description: The video preset's visually lighter skin, closer to a classic contr
 import DocsLink from '@/components/docs/DocsLink.astro';
 import FrameworkCase from '@/components/docs/FrameworkCase.astro';
 import SkinImports from '@/components/docs/api-reference/SkinImports.astro';
+import RegistrySkinInstall from '@/components/registry/RegistrySkinInstall.astro';
 
 The minimal skin of the video preset: the same player and the same controls in a visually lighter design, closer to a classic control bar. <DocsLink slug="reference/video-skin">VideoSkin</DocsLink> is the same preset's other variant. See <DocsLink slug="concepts/skins">Skins</DocsLink> for how packaged skins work and <DocsLink slug="concepts/presets">Presets</DocsLink> for what the video preset ships.
 
@@ -53,4 +54,8 @@ See <DocsLink slug="how-to/add-a-poster-and-loading-placeholder">Add a poster an
 
 ## Styling
 
-Packaged skins style themselves and expose a small set of public CSS custom properties. Everything else inside the skin is private and may change between releases. <DocsLink slug="how-to/customize-skins">Customize skins</DocsLink> documents the properties and the ejection path when you need deeper changes.
+Packaged skins style themselves and expose a small set of public CSS custom properties. Everything else inside the skin is private and may change between releases. <DocsLink slug="how-to/customize-skins" anchor="style-a-packaged-skin">Customize skins</DocsLink> documents the properties. When you need deeper changes, eject the skin.
+
+## Eject the skin
+
+<RegistrySkinInstall item="video-minimal" />
diff --git a/site/src/content/docs/reference/video-skin.mdx b/site/src/content/docs/reference/video-skin.mdx
index 0d80b8496f..97850010fd 100644
--- a/site/src/content/docs/reference/video-skin.mdx
+++ b/site/src/content/docs/reference/video-skin.mdx
@@ -8,6 +8,7 @@ description: The video preset's default skin with the modern, frosted look
 import DocsLink from '@/components/docs/DocsLink.astro';
 import FrameworkCase from '@/components/docs/FrameworkCase.astro';
 import SkinImports from '@/components/docs/api-reference/SkinImports.astro';
+import RegistrySkinInstall from '@/components/registry/RegistrySkinInstall.astro';
 
 The default skin of the video preset: the control layout for on-demand video with the modern, frosted look. <DocsLink slug="reference/video-minimal-skin">MinimalVideoSkin</DocsLink> is the same preset's other variant. See <DocsLink slug="concepts/skins">Skins</DocsLink> for how packaged skins work and <DocsLink slug="concepts/presets">Presets</DocsLink> for what the video preset ships.
 
@@ -53,4 +54,8 @@ See <DocsLink slug="how-to/add-a-poster-and-loading-placeholder">Add a poster an
 
 ## Styling
 
-Packaged skins style themselves and expose a small set of public CSS custom properties. Everything else inside the skin is private and may change between releases. <DocsLink slug="how-to/customize-skins">Customize skins</DocsLink> documents the properties and the ejection path when you need deeper changes.
+Packaged skins style themselves and expose a small set of public CSS custom properties. Everything else inside the skin is private and may change between releases. <DocsLink slug="how-to/customize-skins" anchor="style-a-packaged-skin">Customize skins</DocsLink> documents the properties. When you need deeper changes, eject the skin.
+
+## Eject the skin
+
+<RegistrySkinInstall item="video" />
diff --git a/site/src/docs.config.ts b/site/src/docs.config.ts
index b2af0e6d32..2c6f4dc788 100644
--- a/site/src/docs.config.ts
+++ b/site/src/docs.config.ts
@@ -18,16 +18,18 @@ export const sidebar: Sidebar = [
     ],
   },
   {
-    sidebarLabel: 'Getting started',
-    // May change when we revisit this section's boundary with Concepts (#1105)
-    llmsDescription: 'Installation, project setup, and introductory guides.',
+    sidebarLabel: 'Start here',
+    llmsDescription: 'Install Video.js, understand its main pieces, or move an existing player to Video.js 10.',
     contents: [
       { slug: 'how-to/installation' },
+      { slug: 'concepts/overview' },
+      { slug: 'concepts/why-videojs' },
+      { slug: 'concepts/v10-roadmap', sidebarLabel: 'Roadmap' },
       {
         sidebarLabel: 'Migrate to Video.js 10',
+        defaultOpen: false,
         llmsDescription:
           'Guides for moving an existing player integration to Video.js v10, one per player you might be coming from.',
-        defaultOpen: false,
         contents: [
           { slug: 'how-to/migrate-from-video-js-8', sidebarLabel: 'From Video.js 8' },
           { slug: 'how-to/migrate-from-mux-player', sidebarLabel: 'From Mux Player' },
@@ -35,11 +37,14 @@ export const sidebar: Sidebar = [
           { slug: 'how-to/migrate-from-media-chrome', sidebarLabel: 'From Media Chrome' },
         ],
       },
-      { slug: 'concepts/why-videojs' },
-      { slug: 'concepts/overview' },
+    ],
+  },
+  {
+    sidebarLabel: 'Tooling',
+    defaultOpen: false,
+    llmsDescription: 'Guidance for AI tools, browser support, TypeScript, bundlers, and loading Video.js from a CDN.',
+    contents: [
       { slug: 'how-to/build-with-ai' },
-      { slug: 'concepts/v10-roadmap', sidebarLabel: 'Roadmap' },
-      { href: '/changelog', sidebarLabel: 'Changelog' },
       { slug: 'concepts/browser-support' },
       { slug: 'concepts/typescript' },
       { slug: 'concepts/bundlers' },
@@ -48,6 +53,7 @@ export const sidebar: Sidebar = [
   },
   {
     sidebarLabel: 'Concepts',
+    defaultOpen: false,
     llmsDescription:
       'Understanding-oriented pages that explain how and why things work. Read these to build a mental model of the library.',
     contents: [
@@ -64,6 +70,7 @@ export const sidebar: Sidebar = [
   },
   {
     sidebarLabel: 'How to',
+    defaultOpen: false,
     llmsDescription:
       "Task-oriented guides that each answer one goal in the reader's words. Some cover custom player UI; others configure a preset, skin, media component, or extension. Guides lead with the recommended path, then the constraints and variations needed to apply it.",
     contents: [
@@ -73,6 +80,7 @@ export const sidebar: Sidebar = [
       {
         sidebarLabel: 'Integrate with a framework',
         defaultOpen: false,
+        llmsDescription: 'Guides for using the HTML version of Video.js with Vue, Nuxt, Svelte, or SvelteKit.',
         contents: [
           { slug: 'how-to/use-videojs-with-vue', sidebarLabel: 'Vue and Nuxt', frameworks: ['html'] },
           { slug: 'how-to/use-videojs-with-svelte', sidebarLabel: 'Svelte and SvelteKit', frameworks: ['html'] },
@@ -97,9 +105,9 @@ export const sidebar: Sidebar = [
     ],
   },
   {
-    sidebarLabel: 'API Reference',
-    llmsDescription:
-      'Reference for every public export, grouped by what it is: skins, UI components, media components, extensions, player features, and utilities.',
+    sidebarLabel: 'Components',
+    defaultOpen: false,
+    llmsDescription: 'API reference for skins, interface components, media components, and service integrations.',
     contents: [
       {
         sidebarLabel: 'Skins',
@@ -118,9 +126,9 @@ export const sidebar: Sidebar = [
         ],
       },
       {
-        sidebarLabel: 'UI Components',
+        sidebarLabel: 'UI',
         defaultOpen: false,
-        llmsDescription: 'API Reference for UI components for building media player interfaces.',
+        llmsDescription: 'API reference for components used to build a media player interface.',
         contents: [
           { slug: 'reference/player' },
           { slug: 'reference/player-container' },
@@ -165,9 +173,9 @@ export const sidebar: Sidebar = [
         ],
       },
       {
-        sidebarLabel: 'Media Components',
+        sidebarLabel: 'Media',
         defaultOpen: false,
-        llmsDescription: 'API Reference for media components that handle streaming protocols and media playback.',
+        llmsDescription: 'API reference for media components that handle streaming protocols and playback.',
         contents: [
           { slug: 'reference/audio' },
           { slug: 'reference/background-video' },
@@ -197,6 +205,13 @@ export const sidebar: Sidebar = [
         llmsDescription: 'API reference for extensions that connect external services to the player.',
         contents: [{ slug: 'reference/google-cast' }, { slug: 'reference/mux-data' }],
       },
+    ],
+  },
+  {
+    sidebarLabel: 'Helpers',
+    defaultOpen: false,
+    llmsDescription: 'Reference for player features and lower-level tools used to build or extend a player.',
+    contents: [
       {
         sidebarLabel: 'Player Features',
         defaultOpen: false,
@@ -245,6 +260,7 @@ export const sidebar: Sidebar = [
           {
             sidebarLabel: 'Advanced',
             defaultOpen: false,
+            llmsDescription: 'Lower-level translation, player context, lifecycle, attachment, and state tools.',
             contents: [
               { slug: 'reference/translation-phrases', sidebarLabel: 'Translation keys' },
               { slug: 'reference/register-i18n', sidebarLabel: 'registerI18n' },
diff --git a/site/src/pages/index.astro b/site/src/pages/index.astro
index b8c6307ccf..c25f21416c 100644
--- a/site/src/pages/index.astro
+++ b/site/src/pages/index.astro
@@ -2,7 +2,6 @@
 import Footer from '@/components/Footer.astro';
 import FooterEasterEgg from '@/components/FooterEasterEgg.astro';
 import Built from '@/components/home/Built/BuiltSection.astro';
-import Demo from '@/components/home/Demo/Demo.astro';
 import GetStartedBanner from '@/components/home/GetStartedBanner.astro';
 import Header from '@/components/home/Header.astro';
 import RoadMap from '@/components/home/Roadmap.astro';
@@ -28,7 +27,6 @@ const poster = `${VJS10_DEMO_VIDEO.poster}?time=${posterTime}`;
   <NavBar />
   <main id="main-content">
     <Header poster={poster} />
-    <Demo />
     <GetStartedBanner />
     <Built />
     <RoadMap />
diff --git a/site/src/stores/homePageDemos.ts b/site/src/stores/homePageDemos.ts
deleted file mode 100644
index 3a487534df..0000000000
--- a/site/src/stores/homePageDemos.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { atom } from 'nanostores';
-
-export type Framework = 'html' | 'react';
-export type Skin = 'default' | 'minimal';
-
-export const framework = atom<Framework>('react');
-export const skin = atom<Skin>('default');
diff --git a/site/src/stores/registry.ts b/site/src/stores/registry.ts
new file mode 100644
index 0000000000..7bfb9dfc09
--- /dev/null
+++ b/site/src/stores/registry.ts
@@ -0,0 +1,9 @@
+import { atom } from 'nanostores';
+
+import type { RegistryStyling } from '@/utils/installation/shadcn';
+
+/**
+ * The styling catalog the registry commands point at. `null` means the framework's default: Tailwind for React, vanilla
+ * CSS for HTML. Shared across islands so one select box drives every command on the page.
+ */
+export const registryStyling = atom<RegistryStyling | null>(null);
diff --git a/site/src/utils/installation/__tests__/shadcn.test.ts b/site/src/utils/installation/__tests__/shadcn.test.ts
new file mode 100644
index 0000000000..93ac2db7ef
--- /dev/null
+++ b/site/src/utils/installation/__tests__/shadcn.test.ts
@@ -0,0 +1,106 @@
+import { describe, expect, it } from 'vitest';
+
+import {
+  defaultRegistryStyling,
+  REGISTRY_SKINS,
+  registryInstallCommands,
+  registryNamespaceUrl,
+  registrySkinItem,
+  registryStylings,
+  resolveRegistryStyling,
+  shadcnAddCommand,
+  shadcnCommand,
+  shadcnRegistryAddCommand,
+} from '../shadcn';
+
+describe('registryNamespaceUrl', () => {
+  it('selects the catalog through the URL, not the item name', () => {
+    expect(registryNamespaceUrl('react', 'tailwind')).toBe('https://shadcn.videojs.org/r/react/{name}.json');
+    expect(registryNamespaceUrl('react', 'css')).toBe('https://shadcn.videojs.org/r/react/css/{name}.json');
+    expect(registryNamespaceUrl('html', 'css')).toBe('https://shadcn.videojs.org/r/html/{name}.json');
+  });
+});
+
+describe('registryStylings', () => {
+  it('defaults React to Tailwind and HTML to CSS', () => {
+    expect(registryStylings('react')).toEqual(['tailwind', 'css']);
+    expect(registryStylings('html')).toEqual(['css']);
+    expect(defaultRegistryStyling('react')).toBe('tailwind');
+    expect(defaultRegistryStyling('html')).toBe('css');
+  });
+
+  it('falls back when a choice does not exist for the framework', () => {
+    expect(resolveRegistryStyling('html', 'tailwind')).toBe('css');
+    expect(resolveRegistryStyling('react', 'css')).toBe('css');
+    expect(resolveRegistryStyling('react', null)).toBe('tailwind');
+  });
+});
+
+describe('shadcnAddCommand', () => {
+  it('namespaces every item and follows the package manager', () => {
+    expect(shadcnAddCommand('npm', ['video'])).toBe('npx shadcn@latest add @videojs/video');
+    expect(shadcnAddCommand('pnpm', ['video', 'play-button'])).toBe(
+      'pnpm dlx shadcn@latest add @videojs/video @videojs/play-button'
+    );
+    expect(shadcnCommand('bun', 'init')).toBe('bunx --bun shadcn@latest init');
+  });
+});
+
+describe('shadcnRegistryAddCommand', () => {
+  it('registers the namespace against the chosen catalog', () => {
+    expect(shadcnRegistryAddCommand('npm', 'react', 'tailwind')).toBe(
+      'npx shadcn@latest registry add @videojs=https://shadcn.videojs.org/r/react/{name}.json'
+    );
+    expect(shadcnRegistryAddCommand('yarn', 'html', 'css')).toBe(
+      'yarn dlx shadcn@latest registry add @videojs=https://shadcn.videojs.org/r/html/{name}.json'
+    );
+  });
+});
+
+describe('registryInstallCommands', () => {
+  it('registers the namespace before adding the items', () => {
+    expect(registryInstallCommands('pnpm', 'react', 'css', ['video-minimal'])).toBe(
+      [
+        'pnpm dlx shadcn@latest registry add @videojs=https://shadcn.videojs.org/r/react/css/{name}.json',
+        'pnpm dlx shadcn@latest add @videojs/video-minimal',
+      ].join('\n')
+    );
+  });
+
+  it('only registers the namespace when there is nothing to add', () => {
+    expect(registryInstallCommands('npm', 'html', 'css', [])).toBe(
+      'npx shadcn@latest registry add @videojs=https://shadcn.videojs.org/r/html/{name}.json'
+    );
+  });
+});
+
+describe('registrySkinItem', () => {
+  it('maps the installation selection onto a skin name', () => {
+    expect(registrySkinItem({ useCase: 'default-video', skin: 'video' })).toBe('video');
+    expect(registrySkinItem({ useCase: 'default-video', skin: 'minimal-video' })).toBe('video-minimal');
+    expect(registrySkinItem({ useCase: 'live-audio', skin: 'minimal-audio' })).toBe('live-audio-minimal');
+  });
+
+  it('leaves package-only selections alone', () => {
+    expect(registrySkinItem({ useCase: 'background-video', skin: 'video' })).toBeNull();
+    expect(registrySkinItem({ useCase: 'default-video', skin: 'none' })).toBeNull();
+  });
+});
+
+describe('REGISTRY_SKINS', () => {
+  it('names every published skin', () => {
+    expect(REGISTRY_SKINS.map((skin) => skin.item)).toEqual([
+      'video',
+      'video-minimal',
+      'audio',
+      'audio-minimal',
+      'live-video',
+      'live-video-minimal',
+      'live-audio',
+      'live-audio-minimal',
+    ]);
+    expect(REGISTRY_SKINS.find((skin) => skin.item === 'video-minimal')?.directory).toBe(
+      'components/videojs/skins/video/minimal'
+    );
+  });
+});
diff --git a/site/src/utils/installation/shadcn.ts b/site/src/utils/installation/shadcn.ts
new file mode 100644
index 0000000000..0c2c263b37
--- /dev/null
+++ b/site/src/utils/installation/shadcn.ts
@@ -0,0 +1,122 @@
+import { getInstallationPreset, type Skin, type UseCase } from './types';
+
+export type RegistryFramework = 'html' | 'react';
+export type RegistryStyling = 'css' | 'tailwind';
+export type ShadcnRunner = 'npm' | 'pnpm' | 'yarn' | 'bun';
+
+/** Where `packages/skins` publishes its hosted registry; see its `netlify.toml`. */
+export const REGISTRY_ORIGIN = 'https://shadcn.videojs.org';
+export const REGISTRY_NAMESPACE = '@videojs';
+/** Where the CLI places installed source, relative to the project's components alias. */
+export const REGISTRY_INSTALL_DIRECTORY = 'components/videojs';
+
+export const SHADCN_RUNNERS: Record<ShadcnRunner, string> = {
+  npm: 'npx shadcn@latest',
+  pnpm: 'pnpm dlx shadcn@latest',
+  yarn: 'yarn dlx shadcn@latest',
+  bun: 'bunx --bun shadcn@latest',
+};
+
+export const REGISTRY_STYLING_LABELS: Record<RegistryStyling, string> = {
+  tailwind: 'Tailwind CSS',
+  css: 'Vanilla CSS',
+};
+
+export interface RegistrySkin {
+  /** Registry item name, such as `video` or `video-minimal`. */
+  readonly item: string;
+  readonly label: string;
+  readonly preset: 'audio' | 'live-audio' | 'live-video' | 'video';
+  readonly theme: 'default' | 'minimal';
+  /** Where the skin installs, relative to the components alias. */
+  readonly directory: string;
+}
+
+/**
+ * The skins the registry publishes, in the order of the skin reference pages. Background video stays a package skin.
+ * Mirrors `skinCatalog` in `packages/skins/build/catalog.ts`.
+ */
+export const REGISTRY_SKINS: readonly RegistrySkin[] = (
+  [
+    ['video', 'Video'],
+    ['audio', 'Audio'],
+    ['live-video', 'Live Video'],
+    ['live-audio', 'Live Audio'],
+  ] as const
+).flatMap(([preset, label]) => [
+  {
+    item: preset,
+    label: `Default ${label}`,
+    preset,
+    theme: 'default',
+    directory: `${REGISTRY_INSTALL_DIRECTORY}/skins/${preset}`,
+  },
+  {
+    item: `${preset}-minimal`,
+    label: `Minimal ${label}`,
+    preset,
+    theme: 'minimal',
+    directory: `${REGISTRY_INSTALL_DIRECTORY}/skins/${preset}/minimal`,
+  },
+]);
+
+/** The stylings a framework's registry catalog publishes. HTML skins are vanilla CSS only. */
+export function registryStylings(framework: RegistryFramework): readonly RegistryStyling[] {
+  return framework === 'react' ? ['tailwind', 'css'] : ['css'];
+}
+
+export function defaultRegistryStyling(framework: RegistryFramework): RegistryStyling {
+  return registryStylings(framework)[0]!;
+}
+
+/** Keep a styling choice made for one framework valid for another. */
+export function resolveRegistryStyling(framework: RegistryFramework, styling: RegistryStyling | null): RegistryStyling {
+  return styling && registryStylings(framework).includes(styling) ? styling : defaultRegistryStyling(framework);
+}
+
+/** The `{name}` template Shadcn stores in `components.json` for one catalog. */
+export function registryNamespaceUrl(framework: RegistryFramework, styling: RegistryStyling): string {
+  const catalog = framework === 'react' && styling === 'css' ? 'react/css' : framework;
+
+  return `${REGISTRY_ORIGIN}/r/${catalog}/{name}.json`;
+}
+
+export function shadcnCommand(runner: ShadcnRunner, action: string): string {
+  return `${SHADCN_RUNNERS[runner]} ${action}`;
+}
+
+/** Points the `@videojs` namespace at one catalog; Shadcn writes it into `components.json`. */
+export function shadcnRegistryAddCommand(
+  runner: ShadcnRunner,
+  framework: RegistryFramework,
+  styling: RegistryStyling
+): string {
+  return shadcnCommand(runner, `registry add ${REGISTRY_NAMESPACE}=${registryNamespaceUrl(framework, styling)}`);
+}
+
+export function shadcnAddCommand(runner: ShadcnRunner, items: readonly string[]): string {
+  return shadcnCommand(runner, `add ${items.map((item) => `${REGISTRY_NAMESPACE}/${item}`).join(' ')}`);
+}
+
+/** Every command one install needs, in order: register the namespace, then add the items, if any. */
+export function registryInstallCommands(
+  runner: ShadcnRunner,
+  framework: RegistryFramework,
+  styling: RegistryStyling,
+  items: readonly string[]
+): string {
+  const commands = [shadcnRegistryAddCommand(runner, framework, styling)];
+
+  if (items.length > 0) commands.push(shadcnAddCommand(runner, items));
+
+  return commands.join('\n');
+}
+
+/** The catalog name for an installation selection, or `null` when that selection cannot be ejected. */
+export function registrySkinItem({ useCase, skin }: { useCase: UseCase; skin: Skin }): string | null {
+  if (useCase === 'background-video' || skin === 'none') return null;
+
+  const preset = getInstallationPreset(useCase).flag;
+
+  return skin.startsWith('minimal-') ? `${preset}-minimal` : preset;
+}
diff --git a/site/vite.config.ts b/site/vite.config.ts
index 25fc99abf4..6c033a934b 100644
--- a/site/vite.config.ts
+++ b/site/vite.config.ts
@@ -59,12 +59,6 @@ const config: ViteUserConfig = {
           'src/content/generated-preset-reference/**',
         ],
       },
-      'ejected-skins': {
-        command: 'tsx scripts/build-ejected-skins.ts',
-        dependsOn: workspaceTaskDependencies(),
-        input: cachedTaskInputs,
-        output: ['src/content/ejected-skins.json'],
-      },
       'cdn-manifest': {
         command: 'tsx scripts/build-cdn-manifest.ts',
         dependsOn: workspaceTaskDependencies('build:cdn'),
@@ -77,7 +71,7 @@ const config: ViteUserConfig = {
         // them for cross-task cache reuse.
         command:
           "SHLVL=0 XPC_SERVICE_NAME=0 npm_lifecycle_event=vite-plus npm_lifecycle_script='astro build' astro build",
-        dependsOn: ['api-docs:generate', 'ejected-skins', 'cdn-manifest'],
+        dependsOn: ['api-docs:generate', 'cdn-manifest'],
         // Astro regenerates and consumes collection schemas during one build.
         // They are tool-managed state rather than stable inputs or outputs.
         input: [...cachedTaskInputs, '!.astro/**', '!.netlify/**'],
@@ -95,7 +89,7 @@ const config: ViteUserConfig = {
       dev: {
         command: 'NETLIFY_DEV=1 astro dev',
         cache: false,
-        dependsOn: ['api-docs:generate', 'ejected-skins', 'cdn-manifest'],
+        dependsOn: ['api-docs:generate', 'cdn-manifest'],
       },
       'test:ci': {
         command: 'pnpm test',
diff --git a/vite.config.ts b/vite.config.ts
index c3547377ab..1f238c75a3 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -158,13 +158,7 @@ export default defineConfig({
       'prepare:dev': {
         command: 'node -e ""',
         cache: false,
-        dependsOn: [
-          'site#api-docs:generate',
-          'site#ejected-skins',
-          'site#cdn-manifest',
-          '@videojs/sandbox#setup',
-          '@videojs/skins#generate',
-        ],
+        dependsOn: ['site#api-docs:generate', 'site#cdn-manifest', '@videojs/sandbox#setup', '@videojs/skins#generate'],
       },
       'typecheck:workspace': {
         command: 'tsgo --build',