Agent skill

HTML Presentation

by Mathews-Tom in Mathews-Tom/armory

Converts documents, outlines, or notes into self-contained HTML slide decks with horizontal (Reveal.js) or vertical scroll navigation and multiple themes.

MITAuto-check passedDocuments & Office

Install HTML Presentation

skills CLI
$ npx skills add Mathews-Tom/armory --skill html-presentation -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install Mathews-Tom/armory html-presentation --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/Mathews-Tom/armory.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/html-presentation .claude/skills/html-presentation && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
html-presentation
GitHub stars
328
Token cost
~2.9k tokens
SKILL.md length
964 words
Files
5 (incl. references)
Skills in repo
80
Repo updated
First seen
Licence
MIT

At a glance

Converts documents, outlines, or notes into self-contained HTML slide decks with horizontal (Reveal.js) or vertical scroll navigation and multiple themes.

  • Works in 5 steps: Gather Requirements → Analyze the Source Document → Select Slide Layouts → …
  • : create a presentation
  • SKILL.md covers When This Skill Triggers, Step 0: Gather Requirements, Step 1: Analyze the Source… and Step 2: Select Slide Layouts, plus 4 more sections
  • Reaches cdn.jsdelivr.net and unpkg.com

What it does

HTML Presentation is an agent skill from Mathews-Tom/armory. Converts documents, outlines, or notes into self-contained HTML slide decks with horizontal (Reveal.js) or vertical scroll navigation and multiple themes. Triggers on: "create a presentation", "slide deck", "pitch deck", "HTML presentation", "web-based slides", "reveal.js deck", "convert document into slides".

Its SKILL.md is about 2.9k tokens, which your agent loads only when the skill is triggered. The skill folder holds 6 other files, including reference files (for example `evals/cases.yaml`, `references/NAVIGATION.md` and `references/TEMPLATES.md`).

It sits in Documents & Office, covering Slides and decks. The repository describes itself as: Curated, production-grade skills for AI coding agents. Battle-tested workflows for developers who use AI seriously. The licence is MIT.

When your agent uses it

  • : create a presentation
  • HTML presentation
  • Web-based slides
  • Convert document into slides

Example prompts

  • “create a presentation”
  • “slide deck”
  • “pitch deck”
  • “/html-presentation”

Workflow steps

5 steps, taken from the step headings in SKILL.md.

  1. Gather Requirements
  2. Analyze the Source Document
  3. Select Slide Layouts
  4. Generate the HTML
  5. Write to Output

What it can do on your machine

Read from SKILL.md and the folder at commit 4594fb7. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are html and javascript).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • cdn.jsdelivr.net
    • unpkg.com

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

HTML Presentation loads about 2.9k tokens when it runs, and up to ~14k if it reads all its reference files. Until then it costs about 82 tokens; SKILL.md has 964 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~82
When it runs · the whole SKILL.md, loaded when a task matches
~2.9k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~14k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from Mathews-Tom/armory at commit 4594fb7, republished under its MIT licence (© Mathews-Tom). 964 words, ~2,939 tokens.

Download SKILL.mdSave it as .claude/skills/html-presentation/SKILL.md (or your agent's skills folder). This skill also uses 4 other files; get the full folder from GitHub.
name
html-presentation
description
Converts documents, outlines, or notes into self-contained HTML slide decks with horizontal (Reveal.js) or vertical scroll navigation and multiple themes. Triggers on: "create a presentation", "slide deck", "pitch deck", "HTML presentation", "web-based slides", "reveal.js deck", "convert document into slides".
metadata.version
1.1.1
metadata.category
visualization
metadata.tags
slides, presentation, reveal-js, html
metadata.difficulty
intermediate

HTML Presentation Skill

Convert documents, outlines, or freeform content into polished, self-contained HTML slide presentations with keyboard and scroll navigation.

When This Skill Triggers

  • User provides a document and asks for a "presentation", "slides", or "deck" as HTML
  • User asks to convert notes/outline/content into browser-presentable slides
  • User wants a Reveal.js or scroll-based HTML presentation
  • User references wanting to present from a browser rather than PowerPoint

Step 0: Gather Requirements

Before generating anything, check whether the user has specified the following. If any are missing, ask for clarification in a single concise message. Do NOT ask more than once — use sensible defaults for anything the user declines to specify.

Required context (ask if missing):

ParameterWhat to askDefault if not specified
Navigation mode"Should slides go left-to-right (horizontal) or top-to-bottom (vertical scroll)?"horizontal
Theme"Which visual style? Options: dark-editorial (dark bg, serif headlines, editorial feel), light-minimal (clean white, sans-serif), corporate (navy/white, professional), hacker (terminal green-on-black, monospace)"dark-editorial
Audience & tone"Who is this for? (e.g., investors, engineers, conference talk, internal team)"Infer from content
Slide count preference"Roughly how many slides?"Auto-determine from content density
Branding"Any logo text, tagline, or accent color to use in the header?"None
CTA / closing"Any call-to-action, links, or contact info for the final slide?"None

If the user provides a document and says something like "make this a presentation", ask all missing parameters in one shot. If they say "just make it look good", use defaults and proceed.

Step 1: Analyze the Source Document

Read the uploaded document or provided content. Identify:

  1. Logical sections — these become slides or slide groups
  2. Key data points — numbers, metrics, percentages → use metric/stat slide layouts
  3. Lists and comparisons — feature lists, pros/cons → use card grids or comparison tables
  4. Quotes or testimonials — use quote-block layouts
  5. Sequential processes — workflows, timelines → use workflow/timeline slide layouts
  6. Title and conclusion — first and last slides get special treatment

Create a mental outline mapping content sections to slide types before writing any HTML.

Step 2: Select Slide Layouts

Each slide should use one of these layout patterns. Mix them for visual variety — never use the same layout for more than 2 consecutive slides.

LayoutWhen to UseCSS Class
TitleOpening slide, section dividersslide--section slide--center
SplitText + supporting content side-by-sidesplit or split--60-40
Grid Cards3-6 related items (features, risks, components)grid-2, grid-3, grid-4
MetricsKey numbers/stats to emphasizemetrics with metric items
QuoteExpert quotes, testimonials, key statementsquote-block
WorkflowSequential process, pipeline, architectureworkflow with arrow connectors
Comparison TableFeature comparison, before/aftercomparison-table
TimelineChronological events, roadmap phasestimeline
ListOrdered or unordered key pointslist, list--check, list--numbered
CTA / ClosingFinal slide with links and contactslide--section slide--center + contact-grid

Step 3: Generate the HTML

Read the appropriate theme and template files from this skill's references directory before writing code:

  1. Always read references/THEMES.md to get the CSS variables and styles for the selected theme
  2. Always read references/TEMPLATES.md to get the HTML patterns for each slide layout
  3. Always read references/NAVIGATION.md to get the correct JS initialization for the selected navigation mode

Then assemble the presentation as a single self-contained HTML file:

File Structure
html
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Meta, fonts, Reveal.js CDN (horizontal) or custom CSS (vertical) -->
    <!-- All styles inline in <style> block -->
  </head>
  <body>
    <!-- Slides markup -->
    <!-- Scripts: Reveal.js init (horizontal) or custom scroll handler (vertical) -->
  </body>
</html>
Show full SKILL.md (438 more words)Show less
Key Rules
  1. Single file — everything inline. No external CSS/JS files except CDN resources (Google Fonts, Reveal.js, Lucide icons).
  2. CDN dependencies (horizontal mode):
    • https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/dist/reveal.css
    • https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/dist/reveal.js
    • https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/plugin/highlight/highlight.js (if code blocks present)
    • https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/plugin/highlight/monokai.css (if code blocks present)
    • https://unpkg.com/lucide@latest (for icons)
  3. Vertical scroll mode — zero CDN dependencies for Reveal.js. Uses custom CSS scroll-snap and vanilla JS for keyboard/scroll navigation.
  4. Google Fonts — load fonts matching the theme. Always use <link rel="preconnect"> for performance.
  5. Responsive — include media queries for 1400px, 1024px, and 768px breakpoints.
  6. Fragment animations — use class="fragment" for progressive reveal in horizontal mode. For vertical mode, use intersection observer fade-in animations.
  7. Slide numbers — always show current slide number.
  8. Kicker text — each content slide gets a numbered kicker like 01 // Section Name for editorial feel.
  9. Header bar — each content slide (not title/section slides) gets a header with an icon and section label.
Horizontal Mode: Reveal.js Config
javascript
Reveal.initialize({
  hash: true,
  slideNumber: true,
  controls: true,
  controlsLayout: "bottom-right",
  progress: true,
  center: false,
  transition: "slide",
  width: "100%",
  height: "100%",
  margin: 0.04,
  navigationMode: "linear",
  autoAnimate: true,
  autoAnimateDuration: 0.7,
  plugins: [RevealHighlight], // only if code blocks present
});
Vertical Scroll Mode: Navigation Behavior
  • Each slide is a full-viewport section with scroll-snap-align: start
  • Arrow keys (Up/Down/Left/Right) all navigate between slides
  • Mouse wheel scrolls between slides (debounced)
  • Page Up/Down, Home/End supported
  • Progress bar at bottom shows position
  • Smooth scroll transitions between slides
  • Touch swipe support for mobile

Step 4: Write to Output

  1. Create the HTML file at an appropriate output path (e.g., ./presentation.html or a user-specified location)
  2. Present the file to the user

If the content is large (>15 slides), build iteratively — write the skeleton first, then append slide content in chunks.

Error Handling

ProblemCauseFix
CDN fails to load (Reveal.js, Lucide, Google Fonts)Network unavailable or CDN outageSwitch to inline styles/scripts: embed Reveal.js core inline, replace Lucide icons with inline SVG paths, use system font stack (system-ui, -apple-system, sans-serif)
Content overflows slide viewportToo much text or too many elements per slideSplit the slide into two: move supporting detail to a follow-up slide or convert prose to a bullet list
Fonts render incorrectly or fail to loadGoogle Fonts CDN blocked or slowAdd system font fallback in the font-family stack: 'Font Name', system-ui, Georgia, serif
Reveal.js fails to initializeScript load order issue or missing pluginVerify CDN script tags appear before Reveal.initialize(); check browser console for 404s

Quality Checklist

Before delivering, verify:

  • All slides render without overflow (content fits viewport)
  • Navigation works with arrow keys AND mouse scroll
  • Slide numbers are visible
  • Fragment animations work (horizontal) or fade-in works (vertical)
  • Links are clickable (pointer-events: auto in Reveal.js)
  • Code blocks have syntax highlighting (if present)
  • Responsive at all three breakpoints
  • No broken icon references (Lucide icons initialized)
  • Consistent kicker numbering across all slides
  • Title slide and closing slide have distinct visual treatment

© Mathews-Tom, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 4 other files (references) in skills/html-presentation of Mathews-Tom/armory.

  • SKILL.md
  • evals/cases.yaml
  • references/NAVIGATION.md
  • references/TEMPLATES.md
  • references/THEMES.md

Open the folder on GitHubat commit 4594fb7

Compare with similar skills

HTML Presentation next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

HTML Presentation compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
HTML Presentation this skillMathews-Tom/armory328—~2.9kAutomated safety check: PassMIT
Image To Editable Pptningzimu/image-to-editable-ppt-skill2.8k—~4.3kAutomated safety check: PassMIT
Codex Slidesnexu-io/codex-slides9241 repos~3kAutomated safety check: PassMIT
Slidesfcakyon/claude-codex-settings1.2k1 repos~1.1kAutomated safety check: PassMIT
Ppt Image FirstNyxTides/ppt-image-first1.2k—~1.6kAutomated safety check: PassApache-2.0
Vibe to Agentic Engineering Frameworkshanraisshan/claude-code-best-practice67k—~3.3kAutomated safety check: PassMIT

Similar skills

  • Image To Editable Ppt

    ningzimu/image-to-editable-ppt-skill

    Rebuild slide images, scanned or image-based PPT/PPTX files, and PDF decks into object-level editable PowerPoint (.pptx), preserving speaker notes when supplied.

    2.8k GitHub stars~4.3k tokensUpdated 22 days ago
    Documents & OfficeAuto-check passed
  • Codex Slides

    nexu-io/codex-slides

    Create, research, revise, restyle, present, inspect, and export Codex Slides slide decks from Codex, including scenario workflows, project Design Files, and always-on brand design systems.

    924 GitHub starsUsed in 1 repo~3k tokens
    Documents & OfficeAuto-check passed
  • Slides

    fcakyon/claude-codex-settings

    Create and edit presentation slide decks (.pptx) with PptxGenJS, bundled layout helpers, and render/validation utilities.

    1.2k GitHub starsUsed in 1 repo~1.1k tokens
    Documents & OfficeAuto-check passed
  • Ppt Image First

    NyxTides/ppt-image-first

    Build presentation plans for PPT / slides / decks through a conversation-first workflow, then propose multiple visual directions with preview images before writing deck specs.

    1.2k GitHub stars~1.6k tokensUpdated 5 mo ago
    Documents & OfficeAuto-check passed
  • Vibe to Agentic Engineering Framework

    shanraisshan/claude-code-best-practice

    Explains the conceptual model behind a presentation on moving from unstructured vibe coding to fully configured agentic engineering, including its 4-level scoring system and slide conventions.

    67k GitHub stars~3.3k tokensUpdated today
    Documents & OfficeAuto-check passed
  • Gpt Image2 Ppt

    JuneYaooo/gpt-image2-ppt-skills

    Generate visually striking PPT slides via OpenAI's gpt-image-2 -- use any style in styles/<collection/STYLEID.md or mimic a user-supplied .pptx template; outputs high-res slide PNGs and a 16:9 .pptx.

    1.3k GitHub stars~8.9k tokensUpdated 1 mo ago
    Documents & OfficeAuto-check: notes

More from Mathews-Tom/armory

All 80 skills in this repo
  • Architecture Reviewer

    Mathews-Tom/armory

    Architecture reviews across 7 dimensions (structural, scalability, enterprise readiness, performance, security, ops, data) with scored reports.

    328 GitHub stars~4.6k tokensUpdated 2 days ago
    Auto-check passed
  • Concept To Image

    Mathews-Tom/armory

    Turn concepts into static HTML visuals exported as PNG or SVG files via HTML/CSS/SVG.

    328 GitHub stars~2.6k tokensUpdated 2 days ago
    Auto-check passed
  • Watch

    Mathews-Tom/armory

    A skill your agent uses when analyzing an existing video URL or local recording: "watch this video", "analyze youtube video", "summarize this video", "youtube transcript", "find this moment", "what…

    328 GitHub stars~2.8k tokensUpdated 2 days ago
    Auto-check passed
  • Code Refiner

    Mathews-Tom/armory

    Deep code simplification and refactoring preserving behavior across Python, Go, TypeScript, Rust.

    328 GitHub stars~3.1k tokensUpdated 2 days ago
    Auto-check passed
  • Concept To Video

    Mathews-Tom/armory

    Turn concepts into animated explainer videos using Manim (Python) with MP4/GIF output, audio overlay, multi-scene composition.

    328 GitHub stars~4.9k tokensUpdated 2 days ago
    Auto-check passed
  • Decision Map

    Mathews-Tom/armory

    Maps the unresolved architecture, policy, and scope decisions that must be answered before planning can start: one durable decision ticket per question on the issue tracker, typed and blocker-linked…

    328 GitHub stars~2.7k tokensUpdated 2 days ago
    Auto-check passed

Questions about HTML Presentation

What does HTML Presentation do?

Converts documents, outlines, or notes into self-contained HTML slide decks with horizontal (Reveal.js) or vertical scroll navigation and multiple themes. HTML Presentation is an agent skill from Mathews-Tom/armory.js) or vertical scroll navigation and multiple themes.

When should I use HTML Presentation?

HTML Presentation fits situations like: : create a presentation; HTML presentation; web-based slides; convert document into slides.

How do I install HTML Presentation in Claude Code?

Run `npx skills add Mathews-Tom/armory --skill html-presentation -a claude-code`. Or copy the skill folder (skills/html-presentation in Mathews-Tom/armory) into .claude/skills/html-presentation in your project. Claude Code loads it when a task matches its description.

How do I install HTML Presentation in Codex?

Run `npx skills add Mathews-Tom/armory --skill html-presentation -a codex`. Or copy the skill folder (skills/html-presentation in Mathews-Tom/armory) into .agents/skills/html-presentation in your project. Codex loads it when a task matches its description.

Can I use HTML Presentation in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add Mathews-Tom/armory --skill html-presentation -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/html-presentation, .gemini/skills/html-presentation, .github/skills/html-presentation and .opencode/skills/html-presentation in your project.

What does HTML Presentation need to run?

SKILL.md names no scripts, command-line tools or credentials: HTML Presentation is instructions for the agent only.

Does HTML Presentation access the network?

SKILL.md names 2 domains. In commands or code: cdn.jsdelivr.net and unpkg.com; the agent is likely to contact these when it follows the instructions. This is read from the text; nothing was executed.

Is HTML Presentation safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does HTML Presentation use?

HTML Presentation is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does HTML Presentation use?

About 2.9k tokens (SKILL.md is roughly 12k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 12k tokens, read only when the agent opens those files.

What are the alternatives to HTML Presentation?

Skills that share tags, products or a category with HTML Presentation: Image To Editable Ppt (ningzimu/image-to-editable-ppt-skill, 2.8k stars), Codex Slides (nexu-io/codex-slides, 924 stars), Slides (fcakyon/claude-codex-settings, 1.2k stars) and Ppt Image First (NyxTides/ppt-image-first, 1.2k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains HTML Presentation?

Mathews-Tom (a GitHub user) maintains it in Mathews-Tom/armory, which has 328 GitHub stars. The repository holds 80 skills in this directory. The repository was last updated on October 6, 2026.

Source: Mathews-Tom/armory on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.