html-presentations
HTML Presentations
Create self-contained HTML slide presentations. No frameworks, no CDN, no build step — one .html file you can open in any browser.
Usage
Use this skill when the user asks for a presentation, slide deck, or slides and wants a single HTML file with vanilla HTML, CSS, and JavaScript. Not for reveal.js or framework-based presentations. Before generating slides, ask about goals, audience, and delivery mode (Step 0); use the answers to shape length, emphasis, and content density.
Requirements
None. Output is a single .html file. Works in any modern browser (Chrome, Firefox, Safari, Edge).
What It Does
- Single file — All CSS, JS, SVG diagrams, and content in one
.htmlfile - Themed — Three color presets: terminal.css (default), catppuccin, nord
- Keyboard navigation — Space/Right/k forward, Shift+Space/Left/j backward; Escape opens a visual grid of all slides to jump to any slide
- URL hash persistence — The current slide index is stored in the URL hash (e.g.
#5). Refreshing the page keeps you on the same slide; sharing a link with a hash opens that slide directly - SVG diagrams — Flowcharts, architecture diagrams, pipelines, comparisons — all themed via CSS custom properties
More from ericmjl/skills
agents-md-improver
Proposes updates to AGENTS.md so repo-local coding-agent instructions stay accurate, non-contradictory, and consolidated. Use when the user corrects the agent (e.g. do not do X, always do Y, from now on, remember this), asks to edit or sync AGENTS.md, CLAUDE.md, .claude/CLAUDE.md, or GEMINI.md, wants one canonical instruction file or to deduplicate agent docs, or flags conflicting or outdated repository agent rules.
22scientific-eda
Defensive exploratory data analysis for scientific data (CSV, FASTA, etc.). Context-first, human-guided; one plot at a time, ask why before executing, append-only journal per session, scripts with PEP723 and uv run, WebP plots. Use when opening data files for EDA or when the user wants guided scientific data exploration.
20skill-creator
Guide for authoring Agent Skills with strong YAML `description` triggers, progressive disclosure, and bundled resources. Use when creating or updating a skill, running init_skill.py or package_skill.py, or improving a bland skill description so agents load the skill on the right user tasks.
18ml-experimentation
Conduct machine learning experiments from planning through evaluation and report writing. Use when running ML experiments, testing hypotheses, training models, or writing up results. Covers single-hypothesis scoping, fast iteration loops, targeted logging, JOURNAL.md protocol, data-backed diagnostic plots, and scientific report writing.
16gh-cli
Use GitHub CLI (gh) for common operations like creating PRs, viewing GitHub Actions logs, managing issues, reviewing PRs, and more. Use this when you need to interact with GitHub repositories directly from the command line.
14gh-activity-summary
Generate a plain-language activity report of your GitHub work for a given date range, including commits, pull requests, reviews, issues, and comments. Use this when you need to summarize what you've accomplished on GitHub for status updates, retrospectives, or tracking your work.
14