Offline HTML Talk Decks
lijigang/ljg-skills
Builds single-file offline HTML talk decks from Org or Markdown outlines, with faithful layout or editorial condensing and keyboard navigation.
Generates a single-file HTML presentation with speaker notes from a topic, source material or a speech script, choosing from 10 themes.
$ npx skills add Kuneosu/make-slide --skill make-slide -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install Kuneosu/make-slide make-slide --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/Kuneosu/make-slide.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/make-slide .claude/skills/make-slide && rm -rf skills-srcUse ~/.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/
Install the "make-slide" agent skill from https://github.com/Kuneosu/make-slide/tree/main/.claude/skills/make-slide into .claude/skills/make-slide/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "make-slide", 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 install https://github.com/Kuneosu/make-slide/tree/main/.claude/skills/make-slideType 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.
$ npx skills add Kuneosu/make-slide --skill make-slide -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install Kuneosu/make-slide make-slide --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Kuneosu/make-slide.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.claude/skills/make-slide .agents/skills/make-slide && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "make-slide" agent skill from https://github.com/Kuneosu/make-slide/tree/main/.claude/skills/make-slide into .agents/skills/make-slide/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "make-slide", 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.
$ npx skills add Kuneosu/make-slide --skill make-slide -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install Kuneosu/make-slide make-slide --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Kuneosu/make-slide.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.claude/skills/make-slide .cursor/skills/make-slide && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "make-slide" agent skill from https://github.com/Kuneosu/make-slide/tree/main/.claude/skills/make-slide into .cursor/skills/make-slide/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "make-slide", 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 https://github.com/Kuneosu/make-slide.git --path .claude/skills/make-slide--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add Kuneosu/make-slide --skill make-slide -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install Kuneosu/make-slide make-slide --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Kuneosu/make-slide.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.claude/skills/make-slide .gemini/skills/make-slide && rm -rf skills-srcUse ~/.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/
Install the "make-slide" agent skill from https://github.com/Kuneosu/make-slide/tree/main/.claude/skills/make-slide into .gemini/skills/make-slide/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "make-slide", 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.
$ gh skill install Kuneosu/make-slide make-slideInstalls 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).
$ npx skills add Kuneosu/make-slide --skill make-slide -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/Kuneosu/make-slide.git skills-src && mkdir -p .github/skills && cp -r skills-src/.claude/skills/make-slide .github/skills/make-slide && rm -rf skills-srcUse ~/.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/
Install the "make-slide" agent skill from https://github.com/Kuneosu/make-slide/tree/main/.claude/skills/make-slide into .github/skills/make-slide/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "make-slide", 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.
$ npx skills add Kuneosu/make-slide --skill make-slide -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install Kuneosu/make-slide make-slide --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Kuneosu/make-slide.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.claude/skills/make-slide .opencode/skills/make-slide && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "make-slide" agent skill from https://github.com/Kuneosu/make-slide/tree/main/.claude/skills/make-slide into .opencode/skills/make-slide/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "make-slide", 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.
make-slideGenerates a single-file HTML presentation with speaker notes from a topic, source material or a speech script, choosing from 10 themes.
The output is always one standalone `.html` file with its CSS and JavaScript inlined, so there is no build step and no dependency beyond font CDNs. The skill handles three kinds of input: a topic alone, source material such as documents or meeting notes to condense, or a finished speech script that becomes the speaker notes while matching visuals are built around it.
In the first step the agent identifies the input type, sizes the deck to the talk length (a 15-minute talk gets roughly 18 to 25 slides, a 30-minute talk 30 to 40), picks audience and tone, writes in the language you use and always asks which output format you want. Reference files cover core features, the HTML spec, layouts, slide types, themes and a PowerPoint spec. A theme gallery is linked from the repository.
10 steps, taken from the step headings in SKILL.md.
Read from SKILL.md and the folder at commit 3b58beb. It shows what the files ask for, not the result of running them.
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.
Shell commands in SKILL.md call:
npmFrom the folder's file list and the shell code blocks in SKILL.md.
Hosts in commands or code, which the agent is likely to contact:
images.unsplash.comAlso links to:
make-slide.vercel.appFrom URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Make Slide loads about 3.8k tokens when it runs, and up to ~11k if it reads all its reference files. Until then it costs about 114 tokens; SKILL.md has 1,812 words of instructions outside code blocks.
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.
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.
The full file from Kuneosu/make-slide at commit 3b58beb, republished under its MIT licence (© Kuneosu). 1,812 words, ~3,815 tokens.
.claude/skills/make-slide/SKILL.md (or your agent's skills folder). This skill also uses 6 other files; get the full folder from GitHub.Generate single-file HTML presentations with speaker notes. The output is always a standalone .html file with all CSS and JS inlined — no build step, no framework, no dependencies beyond font CDNs.
Repository: github.com/kuneosu/make-slide Theme Gallery: make-slide.vercel.app
Activate this skill when the user's request matches any of these patterns:
Determine which mode applies based on the user's input:
The user provides a topic and optionally a duration or audience.
"Make a 15-min talk about AI trends"
"Create a presentation on microservices architecture"→ Design the structure, content, and speaker notes from scratch.
The user provides source material (documents, notes, data, articles).
"Turn this document into a presentation"
"Create slides based on these meeting notes"→ Organize and distill the material into slides + speaker notes.
The user provides a written speech or speaking script.
"Create slides for this speech script"
"Make a visual deck that accompanies this talk"→ Analyze the script's structure and create matching visual slides. The script becomes the speaker notes.
Follow these steps in order:
Determine the input mode (A, B, or C)
Estimate the appropriate number of slides:
Identify the target audience and tone (technical, business, casual, academic)
Detect the user's language from the conversation — generate content in that language
Ask the user about the desired output format (always ask, do not skip):
Which output format would you like?
- HTML — Interactive single-file presentation you can open in a browser (navigation, animations, speaker notes built-in)
- PPTX — PowerPoint file for Office, Google Slides, or Keynote
Present the user with the theme gallery link for browsing:
Browse themes here: https://make-slide.vercel.app
Read references/themes.md for the full theme list with GitHub raw URLs and recommendations by context.
If the user doesn't choose a theme, recommend one based on context:
minimal-dark or neon-terminalcorporate or minimal-lightgradient-pop or keynote-appledata-focuspaper or playfulmagazinekeynote-appleplayfulAsk the user which layout style they prefer:
Which layout style would you like? Browse layouts here: https://make-slide.vercel.app (Layouts section)
- Centered (default) — Classic centered content, clean and balanced
- Wide — Full-width content, great for data-heavy slides
- Split — Two-column with text + visuals side by side
- Editorial — Magazine-style asymmetric, dramatic typography
If the user doesn't choose, default to centered.
Read references/layouts.md for layout descriptions and layouts/{name}/reference.html for the layout reference code.
When generating HTML, combine the chosen theme (colors, fonts, design) with the chosen layout (content positioning, spacing, structure).
Ask the user which image approach they prefer:
How would you like to handle images in your slides?
A) No images — Use styled CSS placeholders (emoji, icons, shapes) that match the theme. Clean and lightweight.
B) I'll provide URLs — I'll mark image positions in the outline, and you provide the image URLs.
C) Auto-search — I'll search the web for relevant, high-quality images and place them automatically.
<img src> with loading="lazy" and descriptive alt texthttps://images.unsplash.com/photo-{PHOTO_ID}?w=800&h=600&fit=cropsite:unsplash.com {keyword} and extract the photo ID from the URL.<img src="URL" alt="description" loading="lazy">Create a slide-by-slide outline with:
Read references/slide-types.md for the 12 available slide type patterns.
Present the outline to the user for confirmation. Wait for approval or modifications before proceeding.
Fetch the chosen theme's reference files from GitHub:
Use the raw GitHub URLs listed in references/themes.md.
Using the theme's reference.html and the layout's reference.html as templates:
Read references/core-features.md and use the exact JavaScript code provided for navigation, fullscreen, speaker notes popup, progress bar, and slide counter. Do not rewrite these features — copy the code directly. This ensures consistent behavior across all AI models.
Read references/html-spec.md for the full HTML requirements including navigation, fullscreen, PDF export, CDN dependencies, image handling, and code blocks.
Add speaker notes as data-notes attributes on each slide's <div>:
<div class="slide" data-notes="Welcome everyone. Today I'll be talking about...">Speaker Notes Panel must be a separate popup window using window.open(). Do NOT render notes inline at the bottom of the slide — this breaks the slide layout. The S key should toggle a popup window that shows the current slide's notes and auto-updates on slide change. See references/html-spec.md for the implementation pattern.
For Mode A and B, also generate a separate script.md file containing:
For Mode C, the user already has a script — skip this step.
index.html (or user-specified filename)script.md (if generated)index.html directly in their browser to view the presentation — no server neededWhen the user selects PPTX output, follow this modified workflow:
Follow the standard HTML generation workflow (Steps 1-7) but with these constraints from the PPTX spec. Read references/pptx-spec.md for the complete PPTX conversion rules before generating HTML.
Use the screenshot-based conversion pipeline with Puppeteer + PptxGenJS:
npm install pptxgenjs puppeteer.a elements visible: * { animation: none !important; transition: none !important; } .slide.active .a, .a { opacity: 1 !important; transform: none !important; }. Also wait for font loading with document.fonts.ready.
c. Hide all other slides completely — ensure only the current slide is visible (opacity:1, display:flex) and all others are hidden (opacity:0, display:none). This prevents ghost/residue from previous slides.
d. Take a full-page screenshot of the viewport at 2x resolution (deviceScaleFactor: 2) for crisp text.pptxCritical: Preventing ghost slides and small content
// Before each screenshot, inject CSS to disable animations AND force animated elements visible
await page.addStyleTag({ content: '*, *::before, *::after { animation: none !important; transition: none !important; animation-delay: 0s !important; } .slide.active .a, .a { opacity: 1 !important; transform: none !important; }' });
// Wait for fonts to load
await page.evaluateHandle('document.fonts.ready');
// Hide all slides, then show only current
await page.evaluate((idx) => {
document.querySelectorAll('.slide').forEach((s, i) => {
s.style.display = i === idx ? 'flex' : 'none';
s.style.opacity = i === idx ? '1' : '0';
s.classList.toggle('active', i === idx);
});
}, slideIndex);
// Wait for layout to settle
await new Promise(r => setTimeout(r, 500));
// Screenshot at 2x for crisp text
await page.screenshot({ path: outputPath, type: 'png' });presentation.pptx (or user-specified filename).html file with all CSS and JS inlineddata-notes attributes on each slide <div>script.md for full speaking script (Mode A and B)index.html by default, or as specified by the userloading="lazy" on imagesalt text on all imagesIf the user says: "Make a 10-minute presentation about Python best practices"
minimal-dark or neon-terminal (developer topic)minimal-dark/reference.html + minimal-dark/README.mdindex.html + script.mdSkill version: 2.0 | Repository: kuneosu/make-slide | Gallery: make-slide.vercel.app
© Kuneosu, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
SKILL.md and 6 other files (references) in .claude/skills/make-slide of Kuneosu/make-slide.
Open the folder on GitHubat commit 3b58beb
Make Slide 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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Make Slide this skillKuneosu/make-slide | 132 | — | ~3.8k | Automated safety check: Pass | MIT | |
| Offline HTML Talk Deckslijigang/ljg-skills | 7.5k | — | ~506 | Automated safety check: Pass | MIT | |
| Conference Talk Slides from PapersOrchestra-Research/AI-Research-SKILLs | 13k | — | ~2.5k | Automated safety check: Pass | MIT | |
| Conference Talk BuilderMicrock/ordinary-claude-skills | 403 | — | ~975 | Automated safety check: Pass | Custom licence | |
| Conference Talk Buildernicknisi/claude-plugins | 114 | — | ~2.7k | Automated safety check: Pass | MIT | |
| Memstack Marketing Webinar Scriptcwinvestments/memstack | 423 | — | ~3k | Automated safety check: Pass | Proprietary |
lijigang/ljg-skills
Builds single-file offline HTML talk decks from Org or Markdown outlines, with faithful layout or editorial condensing and keyboard navigation.
Orchestra-Research/AI-Research-SKILLs
Generates Beamer LaTeX PDF and editable PPTX slides from a compiled paper, with speaker notes and an optional talk script, sized to four talk lengths.
Microck/ordinary-claude-skills
Create conference talk outlines and iA Presenter markdown slides using the Story Circle narrative framework.
nicknisi/claude-plugins
Create conference talk outlines and slide-by-slide content plans using narrative frameworks.
cwinvestments/memstack
A skill your agent uses when the user says 'webinar script', 'webinar', 'live presentation', 'teach-to-sell', or needs a timestamped presentation script with slide notes, presenter cues, and replay…
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.
Categories
Generates a single-file HTML presentation with speaker notes from a topic, source material or a speech script, choosing from 10 themes. html` file with its CSS and JavaScript inlined, so there is no build step and no dependency beyond font CDNs. The skill handles three kinds of input: a topic alone, source material such as documents or meeting notes to condense, or a finished speech script that becomes the speaker notes while matching visuals are built around it.
Make Slide fits situations like: turning a topic or outline into a slide deck with speaker notes; condensing a document or meeting notes into a presentation; building visual slides to accompany a written speech; creating a pitch deck as a single HTML file you can open anywhere.
Run `npx skills add Kuneosu/make-slide --skill make-slide -a claude-code`. Or copy the skill folder (.claude/skills/make-slide in Kuneosu/make-slide) into .claude/skills/make-slide in your project. Claude Code loads it when a task matches its description.
Run `npx skills add Kuneosu/make-slide --skill make-slide -a codex`. Or copy the skill folder (.claude/skills/make-slide in Kuneosu/make-slide) into .agents/skills/make-slide in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add Kuneosu/make-slide --skill make-slide -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/make-slide, .gemini/skills/make-slide, .github/skills/make-slide and .opencode/skills/make-slide in your project.
Going by SKILL.md and its folder, Make Slide needs the command-line tools its instructions call (npm).
SKILL.md names 2 domains. In commands or code: images.unsplash.com; the agent is likely to contact it when it follows the instructions. As links in the text: make-slide.vercel.app. This is read from the text; nothing was executed.
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.
Make Slide is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
About 3.8k tokens (SKILL.md is roughly 15k 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 7.1k tokens, read only when the agent opens those files.
Skills that share tags, products or a category with Make Slide: Offline HTML Talk Decks (lijigang/ljg-skills, 7.5k stars), Conference Talk Slides from Papers (Orchestra-Research/AI-Research-SKILLs, 13k stars), Conference Talk Builder (Microck/ordinary-claude-skills, 403 stars) and Conference Talk Builder (nicknisi/claude-plugins, 114 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Kuneosu (a GitHub user) maintains it in Kuneosu/make-slide, which has 132 GitHub stars. The repository was last updated on April 10, 2026.
Source: Kuneosu/make-slide on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.