What You’ll Build

Gemini CLI is Google’s command-line AI agent. With the html-slides skill installed, you can generate HTML presentations by describing what you want in plain English. The output is a single self-contained HTML file with all CSS and JS inline — open it in any browser.

Install the Skill

Option 1 — Quick install (recommended):

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

This detects your installed AI agents and sets up the skill automatically. Gemini CLI will be configured out of the box.

Option 2 — Manual setup:

# User-level (all projects)
ln -s /path/to/html-slides ~/.gemini/skills/html-slides

# Project-level (this project only)
ln -s /path/to/html-slides .gemini/skills/html-slides

User-level installation means the skill is available across every project you open with Gemini CLI. Project-level keeps it scoped to a single repo.

Generate Slides

Open your terminal, launch Gemini CLI, and invoke the skill with a prompt. Here are three practical examples:

Example 1 — Product launch

/html-slides Create a product launch presentation for our mobile app. Highlight: 3 key features with flip cards, download stats with animated counters, and a roadmap timeline for the next 6 months.

Example 2 — Workshop material

/html-slides Build a 12-slide workshop on GraphQL. Start with "Why GraphQL" as a comparison table (REST vs GraphQL), show a code block with a basic query, an architecture flow for the request lifecycle, and end with expandable cards for common patterns.

Example 3 — From meeting notes

/html-slides I have meeting notes in standup-notes.md. Turn them into a clean 5-slide summary for the leadership team. Use stats cards for the key metrics mentioned.

Each prompt generates a complete, ready-to-present HTML file. The skill picks the right interactive components — flip cards, charts, timelines, stats cards — based on your description.

Choose a Theme

HTMLSlides supports two modes. Pro mode (the default) uses structured interactive components with built-in themes like Obsidian, Excalidraw Light, Excalidraw Dark, Editorial Light, and Binary Architect. Vibe mode lets the AI create a unique visual design tailored to your content.

To use vibe mode, just say “vibe” or describe the aesthetic you’re after:

/html-slides Create a vibe presentation about sustainable design. I want it to feel calm and modern.

In vibe mode, the skill generates 3 style previews so you can pick the look that fits before the full deck is built.

Tips for Gemini CLI

  1. Point it at existing files — Gemini CLI can read files in your current directory. Reference your docs, READMEs, CSV data, or Markdown notes directly in your prompt and the skill will extract content from them.
  2. Use user-level installation — Install the skill in ~/.gemini/skills/ so it’s available across every project without repeating setup.
  3. Chain requests to refine — Generate a deck, review it, then follow up: “add a chart showing monthly growth to slide 4” or “swap the timeline on slide 6 for a Kanban board.” Gemini CLI keeps context across turns.
  4. Universal skills path — The skill also supports the ~/.agents/skills/ directory from the Agent Skills standard, so it works with any compatible coding agent.

Open and Present

Double-click the generated .html file to open it in any browser — it works offline, no server needed. Use arrow keys, Space, Home, and End to navigate.

For the full presenter experience, open the file in the HTMLSlides desktop app. You get dual-display mode (presenter dashboard on your laptop, clean audience view on the projector), speaker notes, a countdown timer, and a real-time laser pointer. Check the documentation for setup details.