docs(site): add "No Skin" option to installation skin picker (#1525)

packages/cli/src/commands/docs.ts

@@ -106,7 +106,7 @@ const DOCS_HELP = `Usage: @videojs/cli docs <slug> [--framework <html|react>]
 
 Installation flags (for docs how-to/installation):
   --preset <video|audio|background-video>
-  --skin <default|minimal>
+  --skin <default|minimal|none>
   --source-url <url>
   --media <html5-video|html5-audio|hls|background-video>
   --install-method <cdn|npm|pnpm|yarn|bun>`;

packages/cli/src/commands/tests/docs.test.ts

@@ -241,6 +241,14 @@ describe('handleDocs', () => {
         expect(output()).toContain('minimal');
       });
 
+      it('generates headless (no skin) variant with skin none', async () => {
+        await handleDocs(htmlFlags({ skin: 'none' }), ['how-to/installation']);
+        const out = output();
+        expect(out).toContain('<video-player>');
+        expect(out).not.toContain('<video-skin>');
+        expect(out).not.toContain("'@videojs/html/video/skin'");
+      });
+
       it('includes custom source URL in generated code', async () => {
         await handleDocs(htmlFlags({ 'source-url': 'https://example.com/my-video.mp4' }), ['how-to/installation']);
         expect(output()).toContain('https://example.com/my-video.mp4');

packages/cli/src/site-modules.d.ts

@@ -8,7 +8,7 @@
 
 declare module '@/utils/installation/types' {
   export type Renderer = 'background-video' | 'hls' | 'html5-audio' | 'html5-video';
-  export type Skin = 'video' | 'audio' | 'minimal-video' | 'minimal-audio';
+  export type Skin = 'video' | 'audio' | 'minimal-video' | 'minimal-audio' | 'none';
   export type UseCase = 'default-video' | 'default-audio' | 'background-video';
   export type InstallMethod = 'cdn' | 'npm' | 'pnpm' | 'yarn' | 'bun';
   export const VALID_RENDERERS: Record<UseCase, Renderer[]>;

packages/cli/src/utils/prompts.ts

@@ -46,6 +46,7 @@ function skinOptionsForUseCase(useCase: UseCase): Array<{ value: Skin; label: st
   return [
     { value: isAudio ? 'audio' : 'video', label: 'Default' },
     { value: isAudio ? 'minimal-audio' : 'minimal-video', label: 'Minimal' },
+    { value: 'none', label: 'None (headless)' },
   ];
 }
 
@@ -76,10 +77,11 @@ export function mapRawSkin(skinFlag: string, useCase: UseCase): Skin {
   const map: Record<string, Skin> = {
     default: isAudio ? 'audio' : 'video',
     minimal: isAudio ? 'minimal-audio' : 'minimal-video',
+    none: 'none',
   };
   const result = map[skinFlag];
   if (!result) {
-    console.error(`Invalid skin: "${skinFlag}". Must be "default" or "minimal".`);
+    console.error(`Invalid skin: "${skinFlag}". Must be "default", "minimal", or "none".`);
     process.exit(1);
   }
   return result;

packages/cli/src/utils/tests/format.test.ts

@@ -51,4 +51,11 @@ describe('formatInstallationCode', () => {
     const result = formatInstallationCode({ ...baseReact, installMethod: 'pnpm' });
     expect(result).toContain('pnpm add @videojs/react');
   });
+
+  it('formats HTML with skin none — omits skin tag and skin import', () => {
+    const result = formatInstallationCode({ ...baseHTML, skin: 'none' });
+    expect(result).toContain('<video-player>');
+    expect(result).not.toContain('<video-skin>');
+    expect(result).not.toContain("'@videojs/html/video/skin'");
+  });
 });