What You'll Build
Gemini CLI is Google's command-line AI agent — a powerful way to interact with Gemini models directly from your terminal. With the html-slides skill installed, you can generate polished 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. No dependencies, no build steps, no design skills required.
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. Advanced mode (the default) uses structured interactive components with built-in themes like Dark Interactive and Excalidraw. Simple mode lets the AI create a unique visual design tailored to your content.
To use simple mode, just say "simple" or describe the aesthetic you're after:
/html-slides Create a simple presentation about sustainable design. I want it to feel calm and modern.
In simple 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
- 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.
- Use user-level installation — Install the skill in
~/.gemini/skills/so it's available across every project without repeating setup. - 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.
- 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.