Agent skill

Make Slide

by Kuneosu in Kuneosu/make-slide

Generates a single-file HTML presentation with speaker notes from a topic, source material or a speech script, choosing from 10 themes.

MITAuto-check passedDocuments & Office

Install Make Slide

skills CLI
$ npx skills add Kuneosu/make-slide --skill make-slide -a claude-code

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

GitHub CLI
$ gh skill install Kuneosu/make-slide make-slide --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/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-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
make-slide
GitHub stars
132
Token cost
~3.8k tokens
SKILL.md length
1,812 words
Files
7 (incl. references)
Skills in repo
1
Repo updated
First seen
Licence
MIT

At a glance

Generates a single-file HTML presentation with speaker notes from a topic, source material or a speech script, choosing from 10 themes.

  • Works in 10 steps: Analyze Input → Choose a Theme → 5: Choose a Layout → …
  • Turning a topic or outline into a slide deck with speaker notes
  • SKILL.md covers Overview, When to Use, Input Modes and Workflow, plus 3 more sections
  • Calls npm; reaches images.unsplash.com

What it does

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.

When your agent uses it

  • 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

Example prompts

  • “Make a 15 minute talk about AI trends as an HTML slide deck.”
  • “Turn these meeting notes into a short presentation with speaker notes.”
  • “Create slides to go with this speech script.”

Workflow steps

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

  1. Analyze Input
  2. Choose a Theme
  3. 5: Choose a Layout
  4. Image Options
  5. Generate Outline
  6. Fetch Theme Reference
  7. Generate HTML
  8. Generate Speaker Notes
  9. Generate Script (Mode A and B only)
  10. Save and Deliver

What it can do on your machine

Read from SKILL.md and the folder at commit 3b58beb. 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

    Shell commands in SKILL.md call:

    • npm

    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:

    • images.unsplash.com

    Also links to:

    • make-slide.vercel.app

    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

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.

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

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 Kuneosu/make-slide at commit 3b58beb, republished under its MIT licence (© Kuneosu). 1,812 words, ~3,815 tokens.

Download SKILL.mdSave it as .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.
name
make-slide
description
Generate single-file HTML presentations with 10 professional themes and speaker notes. Use this skill whenever the user mentions presentations, slides, deck, talk, keynote, pitch, slideshow, or wants to turn any content into a visual presentation — even if they don't explicitly say 'slide'. Also triggers for requests like 'make a talk about', 'create a pitch for', 'turn this into slides', or any request to visualize content for an audience.

make-slide — AI Presentation Skill

Overview

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


When to Use

Activate this skill when the user's request matches any of these patterns:

  • "Make a presentation about..."
  • "Create slides for..."
  • "Build a slide deck..."
  • "Turn this into a presentation"
  • "Make a talk about..."
  • "Create a pitch deck for..."
  • "Generate presentation slides..."
  • Any request involving: presentation, slides, deck, talk, keynote, pitch, slideshow
  • Any request to visualize or structure content for an audience, even without explicit "slide" mention

Input Modes

Determine which mode applies based on the user's input:

Mode A: Topic Only

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.

Mode B: Content/Material Provided

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.

Mode C: Script Provided

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.


Workflow

Follow these steps in order:

Step 1: Analyze Input
  • Determine the input mode (A, B, or C)

  • Estimate the appropriate number of slides:

    • 5-min talk → 8–12 slides
    • 10-min talk → 12–18 slides
    • 15-min talk → 18–25 slides
    • 20-min talk → 25–30 slides
    • 30-min talk → 30–40 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
    • If the user already mentioned "PowerPoint", "pptx", "PPT", ".pptx", "Google Slides", or "Keynote" in their request → skip the question and use PPTX mode
    • Otherwise, always ask explicitly before proceeding
Step 2: Choose a Theme

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:

  • Tech/developer talk → minimal-dark or neon-terminal
  • Business/corporate → corporate or minimal-light
  • Startup pitch → gradient-pop or keynote-apple
  • Data/analytics → data-focus
  • Education/workshop → paper or playful
  • Design/creative → magazine
  • Product launch → keynote-apple
  • Casual/team event → playful
Step 2.5: Choose a Layout

Ask 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).

Step 3: Image Options

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.

  • Option A → Use CSS placeholders matching the theme (emoji, SVG icons, CSS shapes)
  • Option B → Mark image positions in the outline, ask user for URLs, use <img src> with loading="lazy" and descriptive alt text
  • Option C → Automatically search and place images, but be selective:
    1. NOT every slide needs an image. Only add images to slides where a visual genuinely enhances understanding (e.g., concept slides, example slides, section dividers). Skip images for quote slides, code slides, data/chart slides, comparison slides, and agenda slides.
    2. Aim for roughly 30-40% of slides having images — not all of them.
    3. Determine a relevant English search keyword based on the slide content.
    4. Use Unsplash direct photo URLs: https://images.unsplash.com/photo-{PHOTO_ID}?w=800&h=600&fit=crop
      • To find valid photo IDs, search the web for site:unsplash.com {keyword} and extract the photo ID from the URL.
      • NEVER guess or fabricate Unsplash photo IDs — every URL must come from an actual search result.
    5. After collecting image URLs, verify each one actually returns an image (HTTP 200) before inserting. Replace any 404 URLs with CSS placeholders.
    6. Insert as <img src="URL" alt="description" loading="lazy">
    7. Inform the user that images are from Unsplash (Unsplash License, free for commercial use).
Step 4: Generate Outline

Create a slide-by-slide outline with:

  • Slide number
  • Slide type (from slide types reference)
  • Title
  • Key points / content summary
  • Image placement (if applicable)

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.

Step 5: Fetch Theme Reference

Fetch the chosen theme's reference files from GitHub:

  1. reference.html — The complete example presentation with all slide types, styles, navigation, and interactive features. This is the primary template.
  2. README.md — Design guidelines including color palette, typography, spacing rules, and design philosophy.

Use the raw GitHub URLs listed in references/themes.md.

Step 6: Generate HTML

Using the theme's reference.html and the layout's reference.html as templates:

  • Use the theme's reference.html for visual styling (colors, fonts, design elements)
  • Use the layout's reference.html for content structure and positioning
  • Replace the demo content with the user's actual content
  • Keep all interactive features (navigation, fullscreen, speaker notes, etc.)
  • Match the theme's typography, colors, spacing, and animations
  • Ensure all slide types used match the patterns in the reference

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.

Step 7: Generate Speaker Notes

Add speaker notes as data-notes attributes on each slide's <div>:

html
<div class="slide" data-notes="Welcome everyone. Today I'll be talking about...">
  • Notes should be conversational and natural
  • Include timing cues where helpful (e.g., "[PAUSE]", "[2 min]")
  • Expand on the slide text — don't just repeat it
  • Include transitions between slides (e.g., "Now let's move on to...")

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.

Show full SKILL.md (718 more words)Show less
Step 8: Generate Script (Mode A and B only)

For Mode A and B, also generate a separate script.md file containing:

  • Full speaking script organized by slide
  • Timing estimates per section
  • Audience interaction cues
  • Key points to emphasize

For Mode C, the user already has a script — skip this step.

Step 9: Save and Deliver
  • Save the presentation as index.html (or user-specified filename)
  • Save the script as script.md (if generated)
  • Tell the user they can open index.html directly in their browser to view the presentation — no server needed
  • The file is fully self-contained (all CSS/JS inlined), so it works by simply double-clicking the file or dragging it into a browser

PPTX Output Mode

When the user selects PPTX output, follow this modified workflow:

PPTX Step 1: Generate HTML Slides (PPTX-Compatible)

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.

PPTX Step 2: Convert HTML to PPTX

Use the screenshot-based conversion pipeline with Puppeteer + PptxGenJS:

  1. Install dependencies if not present: npm install pptxgenjs puppeteer
  2. Write a conversion script that:
    • Opens the HTML file in a headless browser with viewport 1280×720 (16:9)
    • For EACH slide: a. Navigate to that slide (set it as active, remove active class from others) b. Disable animations and force visibility — inject CSS to disable all animations/transitions AND force .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
    • Insert each screenshot into PPTX as a full-slide image covering the entire slide area (x:0, y:0, w:'100%', h:'100%')
    • Do NOT add margins or padding around the image — it should fill the entire slide
  3. Save as .pptx

Critical: Preventing ghost slides and small content

javascript
// 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' });
PPTX Step 3: Validate and Deliver
  • Verify the PPTX opens correctly and content fills each slide without excess margins
  • Save as presentation.pptx (or user-specified filename)
  • Offer to also generate the HTML version for preview

Output Rules

  1. Always output a single .html file with all CSS and JS inlined
  2. Only allowed external dependencies: Font CDNs (Pretendard, JetBrains Mono) + Prism.js CDN (conditional)
  3. Speaker notes embedded as data-notes attributes on each slide <div>
  4. Optionally output script.md for full speaking script (Mode A and B)
  5. Generate content in the user's language — detect from the conversation context
  6. Filename: index.html by default, or as specified by the user
  7. Vanilla JS only — no JavaScript frameworks
  8. Vanilla CSS only — no CSS frameworks

Tips for Best Results

Content
  • Keep slides concise: max 6–8 bullet points per slide
  • One core idea per slide
  • Use short phrases, not full sentences, on slides
  • Save detailed explanations for speaker notes
Design
  • Use the theme's accent color for emphasis and key terms
  • Match typography hierarchy exactly from the reference.html
  • Maintain consistent spacing and padding throughout
  • Work within the theme's design system — don't override its core design
Speaker Notes
  • Write notes in a conversational tone
  • Expand, explain, give examples — don't just repeat slide text
  • Include timing hints: "[This section: ~3 minutes]"
  • Add transition phrases: "Now let's look at...", "Building on that..."
  • Mark audience interaction points: "[ASK AUDIENCE]", "[DEMO]", "[PAUSE]"
Data Visualization
  • Use CSS-only charts when possible (bar charts, progress bars, donut charts)
  • Keep numbers round and memorable (say "nearly 50%" not "49.7%")
  • Highlight the most important metric with size or color
Performance
  • Keep total HTML file size under 200KB ideally
  • Use loading="lazy" on images
  • Minimize complex CSS animations on slides with heavy content
Accessibility
  • Maintain sufficient color contrast ratios
  • Include alt text on all images
  • Ensure keyboard navigation works for all interactive elements
  • Use semantic HTML where appropriate

Quick Start Example

If the user says: "Make a 10-minute presentation about Python best practices"

  1. Mode: A (Topic only)
  2. Slides: ~15 slides
  3. Theme recommendation: minimal-dark or neon-terminal (developer topic)
  4. Ask: Theme preference + image needs
  5. Generate outline → Get confirmation
  6. Fetch: minimal-dark/reference.html + minimal-dark/README.md
  7. Generate: index.html + script.md
  8. Offer: Local server preview

Skill 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

Files

SKILL.md and 6 other files (references) in .claude/skills/make-slide of Kuneosu/make-slide.

  • SKILL.md
  • references/core-features.md
  • references/html-spec.md
  • references/layouts.md
  • references/pptx-spec.md
  • references/slide-types.md
  • references/themes.md

Open the folder on GitHubat commit 3b58beb

Compare with similar skills

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.

Make Slide compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Make Slide this skillKuneosu/make-slide132—~3.8kAutomated safety check: PassMIT
Offline HTML Talk Deckslijigang/ljg-skills7.5k—~506Automated safety check: PassMIT
Conference Talk Slides from PapersOrchestra-Research/AI-Research-SKILLs13k—~2.5kAutomated safety check: PassMIT
Conference Talk BuilderMicrock/ordinary-claude-skills403—~975Automated safety check: PassCustom licence
Conference Talk Buildernicknisi/claude-plugins114—~2.7kAutomated safety check: PassMIT
Memstack Marketing Webinar Scriptcwinvestments/memstack423—~3kAutomated safety check: PassProprietary

Similar skills

  • 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.

    7.5k GitHub stars~506 tokensUpdated 2 days ago
    Documents & OfficeAuto-check passed
  • Conference Talk Slides from Papers

    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.

    13k GitHub stars~2.5k tokensUpdated 3 mo ago
    Documents & OfficeAuto-check passed
  • Conference Talk Builder

    Microck/ordinary-claude-skills

    Create conference talk outlines and iA Presenter markdown slides using the Story Circle narrative framework.

    403 GitHub stars~975 tokensUpdated 1 mo ago
    Documents & OfficeAuto-check passed
  • Conference Talk Builder

    nicknisi/claude-plugins

    Create conference talk outlines and slide-by-slide content plans using narrative frameworks.

    114 GitHub stars~2.7k tokensUpdated 1 mo ago
    Writing & ContentAuto-check passed
  • Memstack Marketing Webinar Script

    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…

    423 GitHub stars~3k tokensUpdated 11 days ago
    Marketing & SEOAuto-check passed
  • 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

Questions about Make Slide

What does Make Slide do?

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.

When should I use Make Slide?

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.

How do I install Make Slide in Claude Code?

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.

How do I install Make Slide in Codex?

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.

Can I use Make Slide 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 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.

What does Make Slide need to run?

Going by SKILL.md and its folder, Make Slide needs the command-line tools its instructions call (npm).

Does Make Slide access the network?

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.

Is Make Slide 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 Make Slide use?

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.

How many tokens does Make Slide use?

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.

What are the alternatives to Make Slide?

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.

Who maintains Make Slide?

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.