How this skill is triggered — by the user, by Claude, or both
Slash command
/host-html:hosthtml-pdfThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
When the user runs `/host-pdf`, follow these steps:
When the user runs /host-pdf, follow these steps:
Look for the HTML file to export. Check in this order:
/host-pdf presentation.html), use that file.html file in the current project, use thatThe HTML file must contain slide elements with the class .slide — this is the standard format produced by host-html slide decks.
Check that Puppeteer and its Chrome browser are installed:
npm ls puppeteer 2>/dev/null || npm install puppeteer
npx puppeteer browsers install chrome 2>/dev/null
These commands are safe to run even if already installed.
The export script is bundled with this skill. Run it:
node "${CLAUDE_PLUGIN_ROOT}/skills/hosthtml-pdf/export-pdf.mjs" "<INPUT_HTML>" "<OUTPUT_PDF>"
${CLAUDE_PLUGIN_ROOT} is the root directory where the plugin is installed (e.g., ~/.claude/plugins/cache/host-html)<INPUT_HTML> is the absolute path to the HTML file from Step 1<OUTPUT_PDF> (optional) defaults to the same name/location as the input but with a .pdf extensionOptional flags:
--slides N — override the auto-detected slide count (useful if slides don't use the .slide class)Example:
node "${CLAUDE_PLUGIN_ROOT}/skills/hosthtml-pdf/export-pdf.mjs" ./deck.html ./deck.pdf
Once the script finishes, show the user:
Format the output clearly:
PDF exported!
File: /path/to/deck.pdf
Slides: 8
Size: 2.4 MB
.slide class divs. Ask the user how many slides to capture and retry with --slides Nnpx puppeteer browsers install chrome to install the browser/host-html to also publish the live versionProvides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
npx claudepluginhub phanosh/host-html --plugin host-html