Agent skill

HTML Slides with Reveal

Builds offline, single-file HTML presentations on Reveal with themes, layouts, animations and visual effects, then checks the result with an automated QA pass.

Custom licenceAuto-check passedDocuments & Office

Install HTML Slides with Reveal

skills CLI

$ npx skills add SourceWeft/SourceWeft --skill html-slides -a claude-code

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

GitHub CLI

$ gh skill install SourceWeft/SourceWeft html-slides --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/SourceWeft/SourceWeft.git skills-src && mkdir -p .claude/skills && cp -r skills-src/packages/builtin-skill-html-slides .claude/skills/html-slides && 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/

Paste into Claude Code

Install the "html-slides" agent skill from https://github.com/SourceWeft/SourceWeft/tree/main/packages/builtin-skill-html-slides into .claude/skills/html-slides/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "html-slides", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/SourceWeft/SourceWeft/tree/main/packages/builtin-skill-html-slides

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add SourceWeft/SourceWeft --skill html-slides -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install SourceWeft/SourceWeft html-slides --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/SourceWeft/SourceWeft.git skills-src && mkdir -p .agents/skills && cp -r skills-src/packages/builtin-skill-html-slides .agents/skills/html-slides && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "html-slides" agent skill from https://github.com/SourceWeft/SourceWeft/tree/main/packages/builtin-skill-html-slides into .agents/skills/html-slides/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "html-slides", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add SourceWeft/SourceWeft --skill html-slides -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install SourceWeft/SourceWeft html-slides --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/SourceWeft/SourceWeft.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/packages/builtin-skill-html-slides .cursor/skills/html-slides && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "html-slides" agent skill from https://github.com/SourceWeft/SourceWeft/tree/main/packages/builtin-skill-html-slides into .cursor/skills/html-slides/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "html-slides", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/SourceWeft/SourceWeft.git --path packages/builtin-skill-html-slides

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add SourceWeft/SourceWeft --skill html-slides -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install SourceWeft/SourceWeft html-slides --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/SourceWeft/SourceWeft.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/packages/builtin-skill-html-slides .gemini/skills/html-slides && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "html-slides" agent skill from https://github.com/SourceWeft/SourceWeft/tree/main/packages/builtin-skill-html-slides into .gemini/skills/html-slides/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "html-slides", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install SourceWeft/SourceWeft html-slides

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add SourceWeft/SourceWeft --skill html-slides -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/SourceWeft/SourceWeft.git skills-src && mkdir -p .github/skills && cp -r skills-src/packages/builtin-skill-html-slides .github/skills/html-slides && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "html-slides" agent skill from https://github.com/SourceWeft/SourceWeft/tree/main/packages/builtin-skill-html-slides into .github/skills/html-slides/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "html-slides", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add SourceWeft/SourceWeft --skill html-slides -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install SourceWeft/SourceWeft html-slides --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/SourceWeft/SourceWeft.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/packages/builtin-skill-html-slides .opencode/skills/html-slides && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "html-slides" agent skill from https://github.com/SourceWeft/SourceWeft/tree/main/packages/builtin-skill-html-slides into .opencode/skills/html-slides/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "html-slides", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: html-slides
GitHub stars: 158
Token cost: ~1.1k tokens
SKILL.md length: 538 words
Files: 118 (incl. scripts, references)
Skills in repo: 7
Repo updated: Oct 2, 2026
First seen: Oct 7, 2026
Licence: Custom licence

At a glance

Builds offline, single-file HTML presentations on Reveal with themes, layouts, animations and visual effects, then checks the result with an automated QA pass.

Works in 8 steps: Plan the story and page roles. Default… → Read references/design.md and the… → Prepare files in the provider sandbox… → …
Creating a shareable interactive presentation that opens offline in any browser
Runs JavaScript scripts from its folder; calls node
Revising themes, layouts or animations in an existing HTML deck

What it does

The output is one self-contained index.html that carries its player, assets, scripts and embedded fonts. The agent plans the story and page roles, defaulting to a 16:9 canvas of 1280 by 720 (4:3 on request), up to 40 pages and body text of at least 24px, and picks only from the entries in runtime/catalog.json: 36 themes, 31 layouts, 27 animations and 20 effects.

A build script, build.cjs, can create a starter and then bundles a draft into the final file with a chosen theme and ratio, and a QA script, qa.cjs, checks offline loading, glyph coverage, page layout and deterministic captures. A visual review tool then inspects every captured image in batches, and major issues block delivery. A missing runtime is treated as a deployment error rather than patched with a CDN or other fonts. PowerPoint files are left to the ppt-deck skill.

When your agent uses it

Creating a shareable interactive presentation that opens offline in any browser
Revising themes, layouts or animations in an existing HTML deck
Verifying an HTML deck for layout and font coverage problems

Example prompts

“Build a short HTML deck on our product roadmap with the minimal-white theme.”
“Add fragment animations to slides three and four of my Reveal deck.”
“Run the QA script on index.html and fix whatever it flags.”

Requirements

Node.js and the pinned SourceWeft HTML runtime and fonts
A browser tool for the QA captures

Workflow steps

8 steps, taken from the first numbered list in SKILL.md.

Plan the story and page roles. Default to 1280×720 / 16:9, support 4:3 on request, 1–40 pages. Body text must be at least 24px in the…
Read references/design.md and the relevant files from runtime/layouts/ and runtime/themes/. runtime/catalog.json enumerates all 36 themes…
Prepare files in the provider sandbox using existing tools. Confirm SOURCEWEFT_HTML_RUNTIME, SOURCEWEFT_HTML_FONTS and the pinned…
Create a starter when helpful: node /skills/html-slides/scripts/build.cjs /workspace/draft.html --layout=two-column --starter. Edit its…
Build: node /skills/html-slides/scripts/build.cjs /workspace/draft.html /workspace/index.html --theme=minimal-white --ratio=16:9. This…
Run final-file QA: node /skills/html-slides/scripts/qa.cjs /workspace/index.html /workspace/qa. It checks offline loading, actual glyph…
Use review_html_visuals on every image listed in /workspace/qa/qa.json, in batches of at most 24. Criteria must include readability…
Publish the exact final file using publish_artifact with artifactType=html, the final expectedContentDigest, and every public image…

What it can do on your machine

Read from SKILL.md and the folder at commit 8facc65. 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
Ships 1 file in scripts/ (JavaScript, from the files we listed), which the agent can run.
Shell commands in SKILL.md call:
- node
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
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 Slides with Reveal loads about 1.1k tokens when it runs, and up to ~1.7k if it reads all its reference files. Until then it costs about 67 tokens; SKILL.md has 538 words of instructions outside code blocks.

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

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); the scripts in this folder are not scanned.

SKILL.md

Its licence (Custom licence) doesn't allow us to republish the file, so here is its outline and opening line. It has 538 words (~1,067 tokens).

“Produce one complete, offline index.html through the existing artifact workflow. The file contains its player, assets, scripts and embedded fonts. Use the selected skill normally; do not introduce a studio, new command or product mode selector.”

— opening of SKILL.md by SourceWeft, Custom licence

name: html-slides

Read the full SKILL.md on GitHub

Files

SKILL.md and 117 other files (scripts, references) in packages/builtin-skill-html-slides of SourceWeft/SourceWeft.

SKILL.md
.tests/catalog.test.cjs
licenses/chart.js.txt
licenses/highlight.js.txt
licenses/html-ppt-skill.txt
licenses/reveal.txt
package.json
references/design.md
references/effects.md
runtime/animations.css
runtime/base.css
runtime/catalog.json
runtime/chart-source.json
runtime/chart.js
runtime/fx/_util.js
runtime/fx/chain-react.js
… and 102 more

Open the folder on GitHubat commit 8facc65

Compare with similar skills

HTML Slides with Reveal 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 Slides with Reveal compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
HTML Slides with Reveal this skillSourceWeft/SourceWeft	158	—	~1.1k	Automated safety check: Pass	Custom licence	5 days ago
Frontend Slideszarazhangrui/frontend-slides	30k	16 repos	~7k	Automated safety check: Pass	MIT	3 mo ago
HTML PPT Studiolewislulu/html-ppt-skill	8.6k	4 repos	~4.7k	Automated safety check: Pass	MIT	23 days ago
Single-File HTML Slide Decksop7418/guizang-ppt-skill	27k	1 repos	~6.3k	Automated safety check: Pass	AGPL-3.0	2 mo ago
HTML Presentation Structure Guideshanraisshan/claude-code-best-practice	67k	—	~882	Automated safety check: Pass	MIT	today
Openkb Deck EditorialVectifyAI/OpenKB	4.7k	1 repos	~2.1k	Automated safety check: Pass	Apache-2.0	2 mo ago

Similar skills

Frontend Slides
zarazhangrui/frontend-slides
Builds animated HTML slide decks that run in the browser with no dependencies, or converts PowerPoint files to the web, starting from visual style previews.
30k GitHub starsUsed in 16 repos~7k tokens
Documents & OfficeAuto-check passed
HTML PPT Studio
lewislulu/html-ppt-skill
Authors static HTML presentations from a library of themes, layouts and animations, with keyboard navigation, for talks, pitch decks and reports.
8.6k GitHub starsUsed in 4 repos~4.7k tokens
Documents & OfficeAuto-check passed
Single-File HTML Slide Decks
op7418/guizang-ppt-skill
Generates single-file HTML slide decks with horizontal paging, WebGL backgrounds and a presenter view, in an editorial-magazine style or a Swiss-style layout.
27k GitHub starsUsed in 1 repo~6.3k tokens
Documents & OfficeAuto-check passed
HTML Presentation Structure Guide
shanraisshan/claude-code-best-practice
Documents how a single-file HTML slide deck is built: slide markup, the four-level journey bar, navigation and the renumbering rules after edits.
67k GitHub stars~882 tokensUpdated today
Documents & OfficeAuto-check passed
Openkb Deck Editorial
VectifyAI/OpenKB
A skill your agent uses when the user asks the openkb chat to make a deck / slide presentation / PPT / slides / 演示稿 / 幻灯片 from their compiled KB content.
4.7k GitHub starsUsed in 1 repo~2.1k tokens
Documents & OfficeAuto-check passed
Presentation Styling Reference
shanraisshan/claude-code-best-practice
Reference for the CSS classes, HTML slide patterns and code-block highlighting spans used in a project's presentation/index.html slide deck.
67k GitHub stars~780 tokensUpdated today
Documents & OfficeAuto-check passed

Questions about HTML Slides with Reveal

What does HTML Slides with Reveal do?

Builds offline, single-file HTML presentations on Reveal with themes, layouts, animations and visual effects, then checks the result with an automated QA pass. html that carries its player, assets, scripts and embedded fonts.json: 36 themes, 31 layouts, 27 animations and 20 effects.

When should I use HTML Slides with Reveal?

HTML Slides with Reveal fits situations like: creating a shareable interactive presentation that opens offline in any browser; revising themes, layouts or animations in an existing HTML deck; verifying an HTML deck for layout and font coverage problems.

How do I install HTML Slides with Reveal in Claude Code?

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

How do I install HTML Slides with Reveal in Codex?

Run `npx skills add SourceWeft/SourceWeft --skill html-slides -a codex`. Or copy the skill folder (packages/builtin-skill-html-slides in SourceWeft/SourceWeft) into .agents/skills/html-slides in your project. Codex loads it when a task matches its description.

Can I use HTML Slides with Reveal 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 SourceWeft/SourceWeft --skill html-slides -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-slides, .gemini/skills/html-slides, .github/skills/html-slides and .opencode/skills/html-slides in your project.

What does HTML Slides with Reveal need to run?

Going by SKILL.md and its folder, HTML Slides with Reveal needs JavaScript for the scripts in its folder and the command-line tools its instructions call (node). Our summary lists: Node.js and the pinned SourceWeft HTML runtime and fonts; A browser tool for the QA captures.

Does HTML Slides with Reveal access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is HTML Slides with Reveal 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. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does HTML Slides with Reveal use?

HTML Slides with Reveal has a licence file (the repository's licence) that doesn't match a standard licence. Read it on GitHub before reusing the skill.

How many tokens does HTML Slides with Reveal use?

About 1.1k tokens (SKILL.md is roughly 4.3k 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 599 tokens, read only when the agent opens those files.

What are the alternatives to HTML Slides with Reveal?

Skills that share tags, products or a category with HTML Slides with Reveal: Frontend Slides (zarazhangrui/frontend-slides, 30k stars), HTML PPT Studio (lewislulu/html-ppt-skill, 8.6k stars), Single-File HTML Slide Decks (op7418/guizang-ppt-skill, 27k stars) and HTML Presentation Structure Guide (shanraisshan/claude-code-best-practice, 67k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains HTML Slides with Reveal?

SourceWeft (a GitHub organization) maintains it in SourceWeft/SourceWeft, which has 158 GitHub stars. The repository holds 7 skills in this directory. The repository was last updated on October 2, 2026.

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

HTML Slides with Reveal

Install HTML Slides with Reveal

Facts

At a glance

What it does

When your agent uses it

Example prompts

Requirements

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Files

Compare with similar skills

Similar skills

Frontend Slides

HTML PPT Studio

Single-File HTML Slide Decks

HTML Presentation Structure Guide

Openkb Deck Editorial

Presentation Styling Reference

More from SourceWeft/SourceWeft

PowerPoint Deck Generator

Self-Contained HTML Pages

Feynman

Video Presentation Studio

Image Generate

Meeting Summary

Questions about HTML Slides with Reveal

Install HTML Slides with Reveal

Facts

At a glance

What it does

When your agent uses it

Example prompts

Requirements

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Files

Compare with similar skills

Similar skills

More from SourceWeft/SourceWeft

Related

Questions about HTML Slides with Reveal