Design: CLI for LLM-friendly Video.js installation#1205
Design: CLI for LLM-friendly Video.js installation#1205
Conversation
Draft design for @videojs/cli package that solves interactive documentation degrading poorly for LLM consumers (issue #1185). Covers code generation extraction, HumanCase/LLMCase components, and CLI interface design. https://claude.ai/code/session_012GnierNzbMa91BrtdeXBqC
✅ Deploy Preview for vjs10-site ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📦 Bundle Size Report🎨 @videojs/html — no changesPresets (7)
Media (7)
Players (3)
Skins (17)
UI Components (22)
Sizes are marginal over the root entry point. ⚛️ @videojs/react — no changesPresets (7)
Media (6)
Skins (14)
UI Components (19)
Sizes are marginal over the root entry point. 🧩 @videojs/core — no changesEntries (8)
🏷️ @videojs/element — no changesEntries (2)
📦 @videojs/store — no changesEntries (3)
🔧 @videojs/utils — no changesEntries (10)
📦 @videojs/spf — no changesEntries (3)
ℹ️ How to interpretAll sizes are standalone totals (minified + brotli).
Run |
Cut implementation details (generator functions, HumanCase/LLMCase mechanics, MDX examples). Trimmed alternatives from six to three. Sharpened prose per writing style guide. https://claude.ai/code/session_012GnierNzbMa91BrtdeXBqC
|
|
||
| Flags: | ||
| --framework <html|react> (required) | ||
| --use-case <video|audio|background-video> (default: video) |
There was a problem hiding this comment.
Great suggestion.
There was a problem hiding this comment.
I might even go one step further and suggest that we should ditch "use case" on the installation page and teach folks the word "preset" even earlier.
| --framework <html|react> (required) | ||
| --use-case <video|audio|background-video> (default: video) | ||
| --skin <default|minimal> (default: default) | ||
| --renderer <html5-video|html5-audio|hls|background-video> (default: per use case) |
| npx @videojs/cli create [flags] | ||
|
|
||
| Flags: | ||
| --framework <html|react> (required) |
There was a problem hiding this comment.
-
Should framework refer to
htmlorreact, or specifically application framework like next, vite, start, react-router, astro, nuxt, etc. Thinking the latter because it'll determine how we scaffold. IF we're letting LLM ultimately decide what to do with the player code then we can ignore this for now, but for users not using an LLM it'll come back up in the future. Want to be careful what--frameworkmeans. Also, if "frameworks" is broader then we might still need a option to determine html/react if you're targeting something agnostic like astro. -
Think we're missingI saw our installation page doesn't have ejected option or expose any styling so I guess css option doesn't make sense yet.--cssoption for vanilla or tailwind
References:
There was a problem hiding this comment.
Interesting idea. One that could be extended to our installation page, too. Kind of like what you do in vidstack. Where folks select "sveltekit" but they're still given the html custom element options.
I remember Heff being opposed to this but I don't remember why (it was in the pre-beta rush) so I'm going to treat this as out-of-scope and make a note to revisit it.
|
|
||
| ## Open questions for now | ||
|
|
||
| - **Prompt library** — `@inquirer/prompts` vs `@clack/prompts` vs something else? |
There was a problem hiding this comment.
I like clack! there's tons of options so whatever your heart desires
There was a problem hiding this comment.
I don't know the first thing about these options. I'll just use clack since you like it, and we can throw it out if we decide on something else later!
Rename --use-case to --preset, --renderer to --media. Promote --source-url from open question to API section. Add broader --framework scope as open question for later. Note clack preference. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
3 participants
Summary
Design doc for
@videojs/cli create— a CLI that generates Video.js installation code, solving the problem of docs/installation.md being bad for LLM consumers (#1185). MVP scope; the same package will later support skin ejection.An incremental step towards #247. Mostly concerned with closing #1215 and #1185 though.
Implementation: #1215