skills.rest
HalseyYang
HalseyYangCOMMUNITY
Explore all skills by this author →
GitHub

branded-16-9-html-deck

Generate brand-compliant 16:9 HTML presentation decks from documents with SVG diagrams and embedded logos.

1|Updated Jul 13, 2026
Search Tags:#branding#html#presentation#svg#docx#slide deck#16:9
One-click install
npx skills add https://github.com/HalseyYang/Skills-HY --skill branded-16-9-html-deck-halseyyang
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: branded-16-9-html-deck
Source: https://github.com/HalseyYang/Skills-HY/tree/main/branded-16-9-html-deck
Command: npx skills add https://github.com/HalseyYang/Skills-HY --skill branded-16-9-html-deck-halseyyang

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires python-docx.

What problem does it solve? Converting documents or outlines into polished, on-brand 16:9 HTML slide decks is tedious and error-prone, especially when handling brand colors, logo embedding, SVG diagram layout, and cross-browser compatibility issues like CSS class collisions and SVG overflow. ## Core Features & Use Cases - Document-to-Deck Conversion: Extracts content from docx or raw text, plans per-slide composition, and generates a single self-contained 1920×1080 HTML file via a reusable Python script. - Programmatic SVG Diagrams: Builds cycle, funnel, swimlane, flowchart, pyramid, gantt, hub-and-spoke, and stairs diagrams with math-computed coordinates to avoid overlap and overflow. - Brand & Navigation Support: Embeds transparent PNG logos via base64 CSS, applies brand color tokens and typography rules, and includes keyboard, touch, wheel navigation plus reveal animations and print styles. - Use Case: Turn a company report docx into a branded 21-page 16:9 HTML presentation with company colors, logo in the corner, and eight SVG diagrams, ready to present in any browser. ## Quick Start Turn this docx document into a branded 16:9 HTML presentation deck with our company colors and logo.

Frequently Asked Questions about branded-16-9-html-deck

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

FAQPage Schema
How do I convert a docx document into an HTML presentation?▼

Extract the docx content using Python zipfile and xml.etree or python-docx, map the section structure to slides, then generate a self-contained HTML file with a Python script. The deck uses a fixed 1920×1080 stage scaled to the window.

How to embed a logo in a single-file HTML slide deck?▼

Convert a transparent horizontal PNG to base64 and inject it once as a CSS background-image on a brand class with background-size: contain. Avoid per-slide img tags, which bloat the file and cause compatibility issues.

What diagram types can HTML slides include without JavaScript libraries?▼

Inline SVG supports cycle, funnel, swimlane, flowchart with decision diamonds, pyramid, gantt, hub-and-spoke, and stairs diagrams. Compute node coordinates programmatically with math functions like cos and sin to prevent overlap.

Why do SVG labels overflow or overlap in generated slides?▼

Overflow happens when labels are placed at radius multiples beyond the viewBox or long sentences are wrapped around circles. Keep content within a bounded viewBox with margins, and use fixed columns, grids, or lists for long text.

Why do CSS class name conflicts break HTML slide layouts?▼

Reusing the same class name for different purposes in one file causes cascade merging that distorts elements. Assign distinct class names per purpose, such as separate classes for title underlines and list item rules.

Related Skills

Explore More Design & Creative Skills→
flowKKoflowKKo
2

slides-gen

Generate structured slides.md files from narrative scripts and source documents.

Community
Advanced
stahurastahura
19

html-deck

Convert source content into HTML slide decks and PDF exports.

Community
Advanced
MiniMax-AIMiniMax-AI
13.3k

color-font-skill

Generate brand-safe color palettes and font pairings for PPT designs.

Official
Intermediate
TeiNamTeiNam
12

pptx-generation

Generate editable PowerPoint .pptx files with python-pptx or pptxgenjs.

Community
Intermediate