skills.rest
Lynricsy
LynricsyCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

html-deck

Creates browser-presented HTML slide decks with render-time geometry verification and PDF export.

22|Updated Sep 10, 2026
Search Tags:#presentation#playwright#slide deck#pdf export#speaker notes#layout verification#html slides
One-click install
npx skills add https://github.com/Lynricsy/HyperSkills --skill html-deck-lynricsy
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: html-deck
Source: https://github.com/Lynricsy/HyperSkills/tree/main/skills/html-deck
Command: npx skills add https://github.com/Lynricsy/HyperSkills --skill html-deck-lynricsy

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve? Building slide decks as HTML often produces files that overflow the slide, render unreadably small text, export to PDF with missing backgrounds, or break when double-clicked from disk. This Skill provides a fixed-canvas authoring model, a deterministic render-time QA gate, and export procedures so a deck is verified against what the browser actually renders rather than what the markup claims. ## Core Features & Use Cases - Fixed-canvas deck authoring: Build single-file decks on a 1920x1080 stage with a type floor, layout families, visibility-based slide switching, and speaker notes that never reach the audience surface. - Render-time QA gate: Run scripts/deck_qa.mjs to measure per-slide overflow, clipping, and sub-floor type, capture per-slide PNGs, and exit non-zero on failure before any export. - PDF and PNG export: Export with correct background color (printBackground plus print-color-adjust: exact), deck-controlled paper size via @page and preferCSSPageSize, and page-count verification. - Presenter mode and framework escape hatches: Implement two-window presenter transports matched to delivery method, or move to Marp, Slidev, or reveal.js when requirements demand it. - Use Case: Turn a quarterly brief into a 12-slide self-contained HTML deck, verify every slide renders within the frame, export a PDF whose page count and background pixels are confirmed, and hand it over with notes on what was and was not verified. ## Quick Start Ask the AI to turn your outline or brief into a self-contained HTML slide deck, then have it run the deck QA script and export a verified PDF.

Frequently Asked Questions about html-deck

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create an HTML slide deck that exports cleanly to PDF?▼

Author slides on a fixed 1920x1080 canvas scaled by a single transform, then export with Playwright using printBackground: true and preferCSSPageSize: true. The deck CSS must also set print-color-adjust: exact and an @page size rule, or the PDF can come out white or rescaled to Letter.

How do I check whether HTML slides overflow or clip content?▼

Run node scripts/deck_qa.mjs on the deck file. It renders each slide in headless Chromium, checks element rects against the slide frame for overflow, compares scrollHeight to clientHeight for real clipping, flags text under 24px, and exits non-zero on any error.

Why does my exported PDF have a white background?▼

Background loss has two independent causes: Playwright's printBackground defaults to false, and the print pipeline optimizes colors unless the deck sets print-color-adjust: exact. Both halves must be fixed, and the result should be confirmed by sampling pixels from the exported PDF.

Can an HTML deck replace an editable PowerPoint file?▼

No. An HTML deck is for browser presentation and PDF export; converting it to .pptx yields one bitmap per slide with non-editable text. Editable PowerPoint output requires pptxgenjs or python-pptx, which this Skill explicitly excludes.

When should I use Marp, Slidev, or reveal.js instead of a hand-written deck?▼

Switch only when a structural requirement demands it: Marp for one-command PDF from Markdown, Slidev for magic-move, Monaco, recording, or hosting, and reveal.js for a mature runtime with fragments and speaker view. Styling difficulty alone is not a reason to escape.

Why does a double-clicked HTML deck fail to load its content?▼

Chromium rejects fetch() of file: URLs, so a deck that loads content at runtime cannot be opened by double-clicking. Keep everything inline in one self-contained file, or serve the deck over a local HTTP server.

Related Skills

Explore More Design & Creative Skills→
ArogyaReddyArogyaReddy
1

talk-stage1-extract

Convert raw source material into a structured talk summary with narrative arc, themes, metrics, and gaps.

Community
Intermediate
decocmsdecocms
396

slides

Generate editable HTML slide decks from JSON data with live preview.

Official
Advanced
MomoDavilukeMomoDaviluke
2

imagegen-frontend-web

Generate per-section frontend image frames with cohesive palettes, typography, and spacing.

Community
Advanced
openheronopenheron
10

pptx

Create and edit PowerPoint presentations using python-pptx and pptxgenjs.

Official
Advanced