🎨 HTML Slides Creator — VS Code Agent Plugin

A VS Code Copilot agent plugin that creates extremely professional, visually stunning HTML slide decks using Reveal.js. Produces conference-quality presentations with infographic-rich visuals, multi-model quality reviews, and browser verification.

What's Included

Type	Name	Description
Agent	HTML Slides Creator	Full slide deck creation workflow with quality reviews
Skill	frontend-design	Distinctive visual design, anti-AI-slop aesthetics
Skill	theme-factory	Professional themes with curated color palettes
Skill	canvas-design	Design philosophy, museum-quality craftsmanship
Skill	web-design-guidelines	Vercel-based web interface & accessibility guidelines
Prompt	Push HTML to GitHub Pages	Deploy generated slides to GitHub Pages

The agent also dynamically fetches the Impeccable skill (18.3K stars) at runtime for unified /polish, /animate, /audit, and anti-AI-slop rules.

Installation

Option 1: Install from Source (Recommended)

Open VS Code Command Palette (Cmd+Shift+P / Ctrl+Shift+P) and run:

Chat: Install Plugin From Source

Then enter this repository URL:

https://github.com/sukumarp2022/slide-creator-plugin

Option 2: Local Installation

Clone the repo and register it via VS Code settings:

# Clone the plugin
git clone https://github.com/sukumarp2022/slide-creator-plugin.git ~/slide-creator-plugin

# Add to VS Code settings.json

Then add this to your VS Code settings.json:

{
  "chat.plugins.enabled": true,
  "chat.pluginLocations": {
    "~/slide-creator-plugin": true
  }
}

Option 3: Workspace Plugin Recommendation

Add this to your project's .vscode/settings.json so team members get prompted to install:

{
  "chat.plugins.enabled": true,
  "chat.pluginLocations": {
    "/path/to/slide-creator-plugin": true
  }
}

Usage

Quick Start

1. Open GitHub Copilot Chat in VS Code
2. Select the HTML Slides Creator agent (or type @html-slides-creator)
3. Provide a topic, URL, or agenda:

Create slides from https://learn.microsoft.com/en-us/training/modules/github-introduction-products/

The Agent Will:

1. Ask preliminary questions — topic, deep research, audience, slide count, theme
2. Load design skills — impeccable (fetched dynamically), frontend-design, theme-factory, canvas-design, web-design-guidelines
3. Research content — fetch URLs, optionally deep-research official docs
4. Plan architecture — structure slides with visual component variety
5. Build HTML — single self-contained Reveal.js file with infographic-rich slides
6. Visual verification — open in browser, screenshot multiple slides
7. Multi-model quality review — 4 parallel reviewers (layout, content, code, UX)
8. Fix & finalize — address all review issues, re-verify

Output

A single .html file with:

• Reveal.js 5.2.1 with 960×540 virtual canvas (scales to any screen)
• Font Awesome 6.7.2 icons
• GitHub dark theme with CSS variables
• Distinctive typography (Figtree + JetBrains Mono — avoids overused fonts like Inter/Roboto)
• Card grids, flow diagrams, comparison tables, capability grids
• Animated gradient titles, hover effects, smooth transitions
• prefers-reduced-motion support
• WCAG AA contrast compliance
• Keyboard navigation with focus-visible outlines
• rel="noopener noreferrer" on all external links

Directory Structure

slide-creator-plugin/
├── plugin.json                              # Plugin metadata
├── README.md                                # This file
├── LICENSE                                  # MIT license
├── agents/
│   └── html-slides-creator.agent.md         # Main agent definition
├── prompts/
│   └── Push HTML to GitHub Pages.prompt.md  # Deploy slides prompt
└── skills/
    ├── frontend-design/
    │   └── SKILL.md                         # Visual design principles
    ├── theme-factory/
    │   └── SKILL.md                         # Theme & color systems
    ├── canvas-design/
    │   └── SKILL.md                         # Design philosophy & craftsmanship
    └── web-design-guidelines/
        └── SKILL.md                         # Accessibility & web standards

What Was Used to Build This

This plugin packages the exact tools and skills used in a production slide-creation session:

Skills & Sources

Skill	Source	Type
impeccable	pbakaus/impeccable (18.3K ★)	Fetched dynamically at runtime
frontend-design	anthropics/skills (114K ★)	Bundled + fallback URL
theme-factory	Custom (based on anthropics themes)	Bundled
canvas-design	Custom (based on anthropics canvas-design)	Bundled
web-design-guidelines	vercel-labs/web-interface-guidelines (609 ★)	Bundled + fallback URL

Key Design Decisions Baked In

• 960×540 virtual resolution — NOT 1920×1080 (which makes text microscopic in Reveal.js)
• Figtree font — avoids Inter/Roboto (banned by Impeccable's reflex_fonts_to_reject list)
• Reveal.js 5.2.1 + Font Awesome 6.7.2 — latest stable CDN versions
• No fragment fade-up on content — prevents blank slides
• Emoji icon sizing — min-width >= font-size to prevent overlap
• 4-reviewer quality review — catches layout, content, code, and UX issues
• Browser screenshot verification — code reviews alone miss rendering bugs
• Dynamic skill fetching — if a skill isn't installed locally, the agent fetches it from GitHub

Prerequisites

• VS Code (or VS Code Insiders) with GitHub Copilot
• chat.plugins.enabled set to true in settings
• GitHub Copilot Chat extension installed

Complementary Tools (Optional)

These tools were also used in the session but are NOT part of this plugin:

Tool	Purpose	Install
RTK	Token-optimized CLI proxy (saves 60-90% tokens)	rtk CLI
Graphify	Codebase knowledge graph generator	Via agent skills marketplace

License

MIT