metis-strategy/metis-html-slides

Generate interactive HTML presentations with sidebar navigation, scrollable sections, and 40+ typography-driven components. Supports Metis branding with auto-embedded logo and client brand extraction from PPTX templates. Output is a self-contained HTML file viewable in any browser.

Quality

85%

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Passed

No known issues

name:: metis-html-slides
description:: Generate HTML presentations as self-contained single files with persistent sidebar navigation, scrollable sections, and interactive components. Use this skill when the user wants a polished visual presentation viewable in a browser. Ideal for internal decks, workshop materials, strategy frameworks, and any deliverable that should feel like a premium consulting product — not a generic AI output. Supports Metis branding (default) and client brand extraction from PPTX templates. Triggers on "html slides," "html presentation," "browser deck," or when the user explicitly asks for HTML output instead of PPTX.

HTML Presentation Skill — Metis Strategy

Name: metis-strategy/metis-html-slides
Rating: 85 (1 reviews)
Author: metis-strategy

0. When to Use This Skill vs metis-pptx

Scenario	Use this skill	Use metis-pptx
Client needs to edit the deck in PowerPoint	No	Yes
Internal Metis review or workshop	Yes	Optional
Polished visual deliverable, no editing needed	Yes	Optional
Client explicitly asks for PPTX	No	Yes
Rapid prototyping / draft visualization	Yes	No
User says "html," "browser," or "web presentation"	Yes	No
Information-dense, scrollable content needed	Yes	No
Interactive elements (tabs, accordions, reveal)	Yes	No

If unsure, ask: "Would you like this as an HTML presentation (viewable in any browser) or as a PowerPoint file?"

1. Brand Mode

Before building, determine the brand:

Condition	Theme to use
Metis-branded deck (no client template)	`templates/metis-theme.css` (default)
Client-branded deck (client provides a .pptx template)	Extract theme with `scripts/extract_theme.py`

Extracting a Client Theme

PYTHON="C:/Users/$USER/AppData/Local/Programs/Python/Python312/python.exe"
"$PYTHON" "$SKILL_DIR/scripts/extract_theme.py" client_deck.pptx --output client-theme.css

This generates a CSS file with the client's colors, fonts, and spacing as CSS custom properties. Pass it to the build script with --theme client-theme.css.

2. Python Environment

Python is installed but NOT on the git bash PATH. Use the full path:
PYTHON="C:/Users/$USER/AppData/Local/Programs/Python/Python312/python.exe"
Do NOT loop trying to install Python or add it to PATH.

Locate the skill directory:

SKILL_DIRS=(
    "$HOME/.metis/skills/.agents/skills/tessl__metis-html-slides"
    "$HOME/.metis/skills/.tessl/tiles/metis-strategy/metis-html-slides"
    ".tessl/tiles/metis-strategy/metis-html-slides"
)
for d in "${SKILL_DIRS[@]}"; do
    if [ -d "$d/templates" ]; then SKILL_DIR="$d"; break; fi
done

3. Architecture: Sections & Slides

The Section Model

Every presentation is organized into sections. Each section appears as a numbered item in the persistent left sidebar. A section can contain one or more slides.

Sidebar                          Content Area
┌──────────────┐  ┌──────────────────────────────────────┐
│ METIS LOGO   │  │ § 1 · Executive Summary    ‹ 2/12 › │
│              │  │──────────────────────────────────────│
│ 01 ● Cover   │  │                                      │
│ 02 ○ Exec    │  │  Scrollable slide content here       │
│    Summary   │  │                                      │
│ 03 ○ Current │  │  Can extend beyond viewport          │
│    State     │  │                                      │
│   · Market   │  │                                      │
│   · Compete  │  │                                      │
│ 04 ○ Strategy│  │                                      │
│              │  │                                      │
│ ▓▓▓░░  2/12 │  │                                      │
└──────────────┘  └──────────────────────────────────────┘

Key Concepts

Sections are sidebar entries. Each gets a number (01, 02, ...) and a label.
Slides belong to sections. One section can have multiple slides grouped under it.
Sub-labels appear indented under the parent section when multiple slides share a section.
Scrollable content. Slides can be longer than the viewport — the user scrolls within the section.
The build script auto-generates the sidebar from data-section-* attributes on slide divs.

Slide HTML Structure

Every slide div must include these data attributes:

<!-- Single slide in a section (most common) -->
<div class="slide" data-section-num="1" data-section-title="Executive Summary">
  <div class="slide-content">
    <h1 class="slide-title">Executive Summary</h1>
    <p class="slide-subtitle">Key findings and recommendations</p>
    <!-- content here -->
  </div>
  <div class="slide-footer">
    <span>Proprietary &amp; Confidential — Metis Strategy LLC 2026</span>
    <span></span>
  </div>
</div>

<!-- Multiple slides grouped under one section -->
<div class="slide" data-section-num="2" data-section-title="Current State" data-sub-label="Market Analysis">
  <div class="slide-content">
    <h1 class="slide-title">Market Analysis</h1>
    <!-- content -->
  </div>
  <div class="slide-footer">
    <span>Proprietary &amp; Confidential — Metis Strategy LLC 2026</span>
    <span></span>
  </div>
</div>

<div class="slide" data-section-num="2" data-section-title="Current State" data-sub-label="Competitive Landscape">
  <div class="slide-content">
    <h1 class="slide-title">Competitive Landscape</h1>
    <!-- content -->
  </div>
  <div class="slide-footer">
    <span>Proprietary &amp; Confidential — Metis Strategy LLC 2026</span>
    <span></span>
  </div>
</div>

Special Slide Types

Cover slide — Always the first slide. Uses dark navy background with the trajectory device.

<div class="slide cover" data-section-num="0" data-section-title="Cover">
  <div class="slide-content">
    <div class="cover-brandline">Driving change. Elevating leaders.</div>
    <h1 class="slide-title"><strong>Digital Transformation</strong> Strategy</h1>
    <p class="slide-subtitle">Prepared for Acme Corporation</p>
    <p class="cover-detail">April 2026 | Confidential</p>
  </div>
  <div class="slide-footer">
    <span>Metis Strategy</span>
    <span></span>
  </div>
</div>

Section divider — Dark navy slide marking a new major section.

<div class="slide divider" data-section-num="3" data-section-title="Strategic Recommendations">
  <div class="slide-content">
    <div class="section-number">Section 03</div>
    <h1 class="slide-title">Strategic Recommendations</h1>
    <p class="slide-subtitle">Three pathways to accelerate growth</p>
    <div class="divider-accent"></div>
  </div>
</div>

Content slide — The standard slide type.

<div class="slide" data-section-num="3" data-section-title="Strategic Recommendations" data-sub-label="Vision & Objectives">
  <div class="slide-content">
    <h1 class="slide-title">Vision & Objectives</h1>
    <p class="slide-subtitle">A three-year digital transformation roadmap</p>
    <div class="grid-two-column animate-in">
      <!-- Components go here -->
    </div>
  </div>
  <div class="slide-footer">
    <span>Proprietary &amp; Confidential — Metis Strategy LLC 2026</span>
    <span></span>
  </div>
</div>

4. Build Workflow

Phase 1: Plan the Deck

Create a slide-by-slide outline. For each slide, decide:

Section number and title — which sidebar section does this belong to?
Sub-label (if grouped) — what sub-item label appears in the sidebar?
Slide type: cover, divider, or content
Layout grid: which of the 6 grids (see Component Reference below)
Components: which patterns to use
Content: write the actual text, not placeholders

Important planning guidance:

Aim for 6–12 sections in the sidebar. Too many makes navigation cluttered.
Use section grouping (multiple slides per section) for deep-dive areas.
Section divider slides are optional but recommended at major transitions.
Every content slide should have a footer with the confidentiality notice.
Use the scrollable nature of slides — a single "section" can hold substantial content if organized well.

Phase 2: Write the Slides HTML

Create a Python script that writes an HTML file containing slide <div> elements. Every slide must include data-section-num and data-section-title attributes.

Critical rules:

Every <div class="slide"> is one slide
Content goes inside <div class="slide-content">
Use layout grid classes on a container div inside slide-content
Compose components inside the grid
Write real content — no placeholders
Never use emojis or decorative icons — they are unprofessional and an AI telltale sign. Use typography, color accents, and whitespace for visual hierarchy instead.
Apply Metis brand identity: confident, clean, forward-moving tone
Use Open Sans Light for titles (CSS handles this), semibold for emphasis
Lead with insight, not labels — slide titles should be declarative

Phase 3: Build the Presentation

"$PYTHON" "$SKILL_DIR/scripts/build_deck.py" slides.html output.html \
    --title "Deck Title" \
    --subtitle "Prepared for Client | April 2026"

# With client theme:
"$PYTHON" "$SKILL_DIR/scripts/build_deck.py" slides.html output.html \
    --theme client-theme.css \
    --title "Client Deck" \
    --subtitle "Client Name"

The build script:

Reads the base HTML template
Inlines the theme CSS + component CSS
Parses section metadata from slide data attributes
Auto-generates the sidebar navigation with sections and sub-items
Embeds the Metis logo (base64-encoded from brand assets)
Base64-encodes any local images
Outputs a single self-contained HTML file

Phase 4: QA

Open the output HTML in a browser and verify:

Sidebar navigation works (clicking sections and sub-items)
Progress bar updates as you navigate
Section breadcrumb updates correctly
Content scrolls properly for long sections
Keyboard navigation works (arrows, Home/End, F for fullscreen)
All interactive elements work (tabs, accordions, click-to-reveal)
Metis branding is correct (colors, fonts, logo)
No text overflow or layout issues

5. Component Reference

Read references/patterns.md for the full pattern guide. Below is how each pattern maps to HTML/CSS classes.

Layout Grids

Grid	CSS Class	HTML Structure
Full Width	`grid-full-width`	Single content area
Two Column	`grid-two-column`	Two `<div>` children
Sidebar + Main	`grid-sidebar-main`	Two `<div>` children (1/3 + 2/3)
Main + Sidebar	`grid-main-sidebar`	Two `<div>` children (2/3 + 1/3)
Three Column	`grid-three-column`	Three `<div>` children
Four Column	`grid-four-column`	Four `<div>` children
Title + Visual	`grid-title-visual`	Description + `.visual-area`

New: Badges / Tags

Small uppercase pills for status labels, tech badges, or category markers.

<div class="tag-row">
  <span class="tag tag-accent">Strategy</span>
  <span class="tag tag-secondary">Technology</span>
  <span class="tag tag-primary">Priority</span>
  <span class="tag tag-muted">In Progress</span>
</div>

Variants: tag-primary, tag-accent, tag-secondary, tag-success, tag-orange, tag-red, tag-purple, tag-muted

New: Feature Cards

Clean typography-driven cards for highlighting capabilities, benefits, or key points. Do not use emojis or icons — let the typography and color accents carry the visual weight.

<div class="feature-card hover-lift">
  <h3>Real-Time Analytics</h3>
  <p>Stream processing with sub-second latency for operational dashboards.</p>
</div>

<!-- Bordered variant with colored accent -->
<div class="feature-card bordered blue">
  <h3>Enterprise Security</h3>
  <p>SOC 2 Type II certified with end-to-end encryption.</p>
</div>

New: Status Indicator

Animated status badge, useful on cover slides or dashboards.

<div class="status-indicator">
  <div class="status-dot"></div>
  Project Active · On Track
</div>

New: Code Badge

Monospace text in a colored pill. Use for model names, API endpoints, version numbers.

<span class="code-badge primary">v2.4.1</span>
<span class="code-badge accent">api/v3/transform</span>
<span class="code-badge blue">claude-sonnet-4-6</span>
<span class="code-badge orange">openai/gpt-5.4</span>

New: Section Labels

Small caps category headers placed above content blocks.

<div class="section-label orange">Build Agent</div>
<div class="section-label primary">Primary Model</div>
<div class="section-label">Default</div>

New: Architecture / Flow Diagrams

Vertical or horizontal flow diagrams with connected nodes. Use typography and structure to convey hierarchy — no icons or emojis.

<div class="flow-diagram">
  <div class="flow-node emphasized">
    <h3>API Gateway</h3>
    <p>Request routing · Auth · Rate limiting</p>
    <div class="tag-row" style="margin-top:0.6rem;justify-content:center;">
      <span class="tag tag-accent">REST</span>
      <span class="tag tag-accent">GraphQL</span>
    </div>
  </div>

  <div class="flow-arrow down"></div>

  <div class="flow-node-group">
    <div class="flow-node">
      <h3>ML Service</h3>
      <p>Inference pipeline</p>
    </div>
    <div class="flow-node">
      <h3>Data Store</h3>
      <p>Persistent state</p>
    </div>
    <div class="flow-node">
      <h3>Analytics</h3>
      <p>Event processing</p>
    </div>
  </div>
</div>

New: Capability Grid

Dense grid of small cards for listing tools, capabilities, or features.

<div class="capability-grid">
  <div class="capability-card">
    <h4>read</h4>
    <p>Read file contents</p>
  </div>
  <div class="capability-card">
    <h4>write</h4>
    <p>Create or overwrite files</p>
    <div class="cap-badge">Core</div>
  </div>
  <div class="capability-card">
    <h4>exec</h4>
    <p>Shell commands</p>
    <div class="cap-badge">Windows</div>
  </div>
</div>

Multi-Color Accent Bars

Six color variants for accent bars to distinguish categories:

<div class="accent-bar">Default mint accent</div>
<div class="accent-bar blue">Blue accent</div>
<div class="accent-bar orange">Orange accent</div>
<div class="accent-bar red">Red accent</div>
<div class="accent-bar purple">Purple accent</div>
<div class="accent-bar green">Green accent</div>

A. Structural Elements

1. Header Bar

<div class="header-bar">Section Label</div>
<div class="header-bar secondary">Blue variant</div>
<div class="header-bar accent">Accent variant</div>

2. Accent Left Bar

<div class="accent-bar">
  <p>Content with a mint left border</p>
</div>

3. Content Card

<div class="content-card">
  <p>Content in a clean bordered card</p>
</div>

4. Divider Line

<hr class="divider-line">
<hr class="divider-line subtle">

5. Illustrative Tag

<span class="illustrative-tag">ILLUSTRATIVE</span>

B. Content Presentation

7. Numbered Callout

<div class="numbered-callout">
  <div class="number">01</div>
  <div class="callout-content">
    <h3>Title</h3>
    <p>Description text</p>
  </div>
</div>

8. Icon Circle + Text

<div class="icon-circle-text">
  <div class="icon-circle">1</div>
  <div class="icon-content">
    <h3>Title</h3>
    <p>Description</p>
  </div>
</div>

9. Card with Header

<div class="card-with-header hover-lift">
  <div class="card-header">Header Text</div>
  <div class="card-body">Body content</div>
</div>

11. Category Grid

<div class="category-grid grid-three-column">
  <div class="category">
    <div class="cat-header">Category A</div>
    <div class="cat-item">Item 1</div>
    <div class="cat-item">Item 2</div>
  </div>
</div>

D. Comparison

20. Before/After

<div class="before-after">
  <div>
    <div class="state-header">Before</div>
    <ul><li>Pain point 1</li><li>Pain point 2</li></ul>
  </div>
  <div class="arrow">→</div>
  <div>
    <div class="state-header">After</div>
    <ul><li>Improvement 1</li><li>Improvement 2</li></ul>
  </div>
</div>

E. Process & Flow

22. Connected Process

<div class="connected-process">
  <div class="step">
    <div class="step-circle">1</div>
    <div class="step-title">Step Name</div>
    <div class="step-desc">Description</div>
  </div>
  <div class="step-connector"></div>
  <div class="step">
    <div class="step-circle">2</div>
    <div class="step-title">Step Name</div>
    <div class="step-desc">Description</div>
  </div>
</div>

24. Chevron Flow

<div class="chevron-flow">
  <div class="chevron bg-primary">Step 1</div>
  <div class="chevron bg-secondary">Step 2</div>
  <div class="chevron bg-accent">Step 3</div>
</div>

F. Timeline

28. 30/60/90 Backlog

<div class="backlog-30-60-90">
  <div></div>
  <div class="period-header">30 Days</div>
  <div class="period-header">60 Days</div>
  <div class="period-header">90 Days</div>
  <div class="row-label">Milestone</div>
  <div class="backlog-cell">...</div>
  <div class="backlog-cell">...</div>
  <div class="backlog-cell">...</div>
</div>

G. Framework

31. Framework Stack

<div class="framework-stack">
  <div class="layer" style="background: var(--color-primary)">
    <div class="layer-info"><h3>Layer Name</h3><p>Description</p></div>
    <div class="layer-subs">
      <div class="layer-sub" style="background: rgba(255,255,255,0.2)">Sub-component</div>
    </div>
  </div>
</div>

H. Narrative

36. Pull Quote

<div class="pull-quote">
  <div class="quote-mark">"</div>
  <div class="quote-content">
    <blockquote>The quote text goes here.</blockquote>
    <cite>— Attribution, Title</cite>
  </div>
</div>

6. Interactivity Tier

HTML presentations should feel interactive and engaging. Use these features liberally — they are a key advantage over PPTX.

Entrance Animations

Add .animate-in to any grid container to stagger-animate children when the slide appears:

<div class="grid-three-column animate-in">
  <div class="feature-card">...</div>
  <div class="feature-card">...</div>
  <div class="feature-card">...</div>
</div>

Use .animate-fade for subtler fade-in without vertical movement.

Hover Effects

<div class="content-card hover-lift">Elevates on hover</div>
<div class="content-card hover-glow">Glows with accent border on hover</div>

Click-to-Reveal (Progressive Disclosure)

<div class="clickable-reveal">
  <div class="reveal-trigger">
    <h3>Predictive Maintenance</h3>
  </div>
  <div class="reveal-content">
    <p>Detailed description that appears when clicked...</p>
  </div>
</div>

Tabs

<div class="tab-group">
  <div class="tab-headers">
    <button class="tab-btn active">Phase 1</button>
    <button class="tab-btn">Phase 2</button>
    <button class="tab-btn">Phase 3</button>
  </div>
  <div class="tab-panel active">Phase 1 content...</div>
  <div class="tab-panel">Phase 2 content...</div>
  <div class="tab-panel">Phase 3 content...</div>
</div>

Accordion

<div class="accordion">
  <div class="accordion-item">
    <button class="accordion-trigger">Supply Chain</button>
    <div class="accordion-body">Detailed analysis...</div>
  </div>
  <div class="accordion-item">
    <button class="accordion-trigger">Engineering</button>
    <div class="accordion-body">Detailed analysis...</div>
  </div>
</div>

Animated Counters

<div class="large-label count-up">$4.2M</div>
<div class="large-label count-up">87%</div>

Tooltips

<div class="content-card" data-tooltip="Click to expand details">
  Summary content
</div>

Slide Transitions

<div class="slide" data-transition="fade">...</div>
<div class="slide" data-transition="slide">...</div>
<div class="slide" data-transition="zoom">...</div>

Combining Features

A single slide can combine multiple interactive features:

<div class="grid-three-column animate-in">
  <div class="feature-card bordered hover-lift">
    <div class="clickable-reveal">
      <div class="reveal-trigger"><h3>Predictive Maintenance</h3></div>
      <div class="reveal-content">
        <p>Full description with ROI and timeline...</p>
      </div>
    </div>
  </div>
</div>

7. Keyboard Navigation

The output HTML supports:

Arrow keys / Space — next/previous slide
F — toggle fullscreen
N — toggle speaker notes
Home / End — first/last slide
Click — right 70% = next, left 30% = previous (in content area)
Swipe — touch device support
Sidebar click — jump to any section or sub-item

8. Speaker Notes

Add notes inside any slide (hidden by default, toggled with N key):

<aside class="notes" style="display:none; padding: 1rem; background: #ffe; font-size: 0.8rem;">
  Talking points for this slide go here.
</aside>

9. Brand Assets

The Metis logo is automatically embedded by the build script from: G:\Shared drives\Knowledge Management\New Brand Assets\Metis Strategy Logo\Metis Strategy Black-Mint RGB Logo.png

If the G: drive is not available, the build script falls back to a text-based logo.

For cover slides, you can reference the trajectory device graphic: G:\Shared drives\Knowledge Management\New Brand Assets\Graphic Devices\Metis Trajectory Device RGB.png

Include it as an <img> inside the cover slide — the build script will base64-encode it:

<img class="cover-device"
     src="G:/Shared drives/Knowledge Management/New Brand Assets/Graphic Devices/Metis Trajectory Device RGB.png"
     alt="">

10. Component Selection Guide

Content type	Component class	Grid
3-5 key points	`.feature-card` or `.numbered-callout`	`grid-full-width` or `grid-two-column`
Capabilities / deliverables	`.card-with-header` or `.capability-grid`	`grid-three-column`
Status labels / categories	`.tag-row` with `.tag` elements	Any grid
System architecture	`.flow-diagram` with `.flow-node`	`grid-full-width`
Tech identifiers	`.code-badge`	Inline
Category headers	`.section-label`	Above content blocks
Phased approach	`.phased-approach` or `.tab-group`	`grid-full-width`
Process / steps	`.connected-process` or `.chevron-flow`	`grid-full-width`
Timeline	`.backlog-30-60-90` or `.swimlane-roadmap`	`grid-full-width`
Pricing / tiers	`.tiered-table`	`grid-full-width`
Before vs after	`.before-after`	`grid-full-width`
Model options	`.three-option`	`grid-full-width`
Operating model	`.radial-diagram`	`grid-full-width`
Framework	`.framework-stack`	`grid-full-width`
Maturity	`.maturity-journey`	`grid-full-width`
Key quote	`.pull-quote`	`grid-full-width`
Benefits list	`.benefits-blocks` or `.feature-card`	`grid-full-width` or `grid-two-column`
Dense feature list	`.capability-grid`	`grid-full-width`

references

scripts

SKILL.md

tile.json