deck-html

Solid

Build autonomous HTML slides (16:9) from a presentation JSON spec produced by deck-outline: pick a theme + palette, then build_html.py copies templates/slides.html, injects the palette into :root CSS variables and replaces the layout blocks. Mandatory verification gate: verify_slides.py in real Chromium (Playwright) — overflow/text-clipping/layout/NAV checks, exit 0/1 — plus a visual pass and the product-designer review checklist. Triggers: 'сделай слайды', 'слайды html', 'презентация html', 'html slides', '16:9 слайды', 'собрать слайды', 'build slides', 'сверстать презе��тацию'.

AI & Automation 5 stars 0 forks Updated yesterday MIT

Install

View on GitHub

Quality Score: 83/100

Stars 20%
26
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
80
License 10%
100
Description 5%
100

Skill Content

# Deck HTML — slides.html from a JSON spec Use this skill to **build self-contained HTML slides (16:9)** from the JSON spec that `deck-outline` produces. Autonomous output: all CSS inlined, zero external links, opens in any browser, arrow/keyboard/touch navigation. ## When to use - User asks for "слайды", "html slides", "16:9", "сверстать презентацию". - The outline/spec exists and a browser-deliverable is needed. ## Do NOT use - To build slide STRUCTURE — that is `deck-outline`. - To build the .pptx — that is `deck-pptx`. ## Step 3 — Theme and palette Themes (each = a layout set + type system). Pick one; `general`/`modern` when unspecified: | Theme | Character | |---|---| | `general` | minimal, clean, airy | | `modern` | flat cards, large radii | | `executive` | strict, business, dark | | `momentum` | dynamic, accented | | `swift` | Apple-style, airy, teal | | `standard` | basic, universal | Extract the palette (`ThemeData` keys) and write it into the spec so html and pptx use the SAME palette: ``` primary / background / card / stroke / background_text / primary_text / graph_0..graph_4 (up to 5 series) ``` Light theme recommendation: `background: #FFFFFF`, `primary: #007AFF` (or the theme's accent), dark text `primary_text: #1C1C1E`. Dark theme: `background: #1C1C1E`, light text. ## Build ```bash python3 scripts/build_html.py deck.json slides.html ``` The builder copies `templates/slides.html`, replaces the slides with the real content, fills the `:root` CSS v...

Details

Author
bestdeejay-design
Repository
bestdeejay-design/agent-skills
Created
1 weeks ago
Last Updated
yesterday
Language
Python
License
MIT

Integrates with

Similar Skills

Semantically similar based on skill content — not just same category

Data & Documents Listed

html-deck

Generate self-contained, single-file HTML presentation decks — no framework, no build step, no dependencies beyond Google Fonts. Use this skill whenever the user wants to create slides, a slide deck, a talk, a presentation, or a "deck" that should be an HTML file (not PowerPoint/PPTX, not Google Slides, not a terminal/Markdown tool like presenterm). Especially use it for technical talks, conference/meetup presentations, video-series intros, or any time the user wants code-authored, version-controllable slides with a dark, editorial design. Also trigger when the user references this house style, asks for "a deck like Tonbi's", or wants to convert an outline/notes into presentable slides. Default to this skill for HTML decks even if the user doesn't say "HTML" explicitly, as long as they don't ask for PPTX or a WYSIWYG tool.

1 Updated 3 days ago
alycda
Data & Documents Listed

write-deck

Write a self-contained, dual-mode HTML presentation (one file, no build, no network — present mode + reference mode, inline SVG diagrams), and optionally export it to PowerPoint. Use when the user asks for "a deck", "a presentation", "slides", "a talk", or wants an existing deck updated or converted to .pptx.

0 Updated 2 days ago
dsivov
Web & Frontend Listed

presentation-deck

Create and maintain a 16:9 HTML slide deck (index.html + slides.md source) with a deterministic fit/sync verification harness. Use when asked to build a presentation deck, scaffold a new talk, sync slides.md with index.html, add/edit/reorder slides, enforce 4K/1080p slide fit, bundle a deck to a single zip, or swap the deck color theme.

0 Updated 1 months ago
zerobell-lee