What You'll Build

GitHub Copilot can do more than autocomplete code — with the html-slides skill, it becomes a full presentation generator. Describe what you want in plain English, and Copilot produces a polished, interactive HTML presentation right inside your editor or terminal.

The output is a single .html file. No build tools, no dependencies, no PowerPoint required. Open it in any browser and start presenting.

Install the Skill

Copilot uses project-level skills stored in .github/skills/. Once installed, Copilot picks up the skill automatically in your repository.

Option 1 — Quick install:

Bash 
curl -sSL https://raw.githubusercontent.com/bluedusk/html-slides/main/remote-install.sh | bash

Option 2 — Manual setup:

Bash 
# Copilot reads from .github/skills/
ln -s /path/to/html-slides .github/skills/html-slides

This makes the skill available in the current repository. Copilot detects it on the next chat session — no restart required.

Generate Slides

Open Copilot Chat (in VS Code or the CLI) and describe your presentation. The skill handles layout, styling, and interactivity. Here are three examples to get you started:

Sprint retrospective:

Prompt 
@html-slides Create a sprint retro presentation. What went well: shipped auth v2, reduced load time by 40%. What to improve: test coverage, deployment pipeline. Action items: add integration tests, set up staging environment.

Technical RFC:

Prompt 
@html-slides Turn this RFC into a presentation for the architecture review meeting. Use architecture flow diagrams and a comparison table for the three proposed approaches. Read from rfc-012-caching.md.

Onboarding deck:

Prompt 
@html-slides Create a new hire onboarding deck. Cover: team structure, dev environment setup, PR workflow, and key services. Use expandable cards for the setup steps.

Working in VS Code

The Copilot + html-slides workflow fits naturally into VS Code:

  1. Open the Copilot Chat panel — click the chat icon in the sidebar or press Ctrl+Shift+I
  2. Reference project files directly — Copilot can read your codebase, so point it at docs, READMEs, or data files for context
  3. The generated .html file appears in your project directory — you'll see it in the file explorer immediately
  4. Preview it instantly — use VS Code's built-in Simple Browser (Ctrl+Shift+P → "Simple Browser") or open the file externally

Choose a Theme

HTMLSlides ships with two main modes. Dark Interactive is the default — structured layouts with interactive components like flip cards, charts, and architecture diagrams. Excalidraw is the advanced mode, giving slides a hand-drawn whiteboard aesthetic.

For creative, AI-driven themes, say "create a simple presentation" in your prompt. The skill will offer style previews before generating the full deck.

Tips for Copilot Users

  1. Use @html-slides in Copilot Chat — this invokes the skill explicitly, so Copilot knows to generate a presentation rather than code
  2. Reference files by name — Copilot can read your codebase for context. Say "read from meeting-notes.md" or "use the data in metrics.json" to pull in real content
  3. Works in both Copilot Chat and Copilot CLI — same skill, same prompts, whether you're in VS Code or the terminal
  4. Commit your slides to git — generated files land in your project root. Track them in version control just like any other artifact

Open and Present

Double-click the generated .html file to open it in your browser for a quick review. Arrow keys, Space, and swipe gestures navigate between slides.

For the full presenter experience, open the file in the HTMLSlides desktop app. You get dual-display mode — a presenter dashboard with speaker notes, next-slide preview, and a timer on your laptop, while the audience sees a clean full-screen view. Share that browser tab on Zoom, Teams, or Meet.

Check the documentation for the complete setup and usage guide.