html-effectiveness-slides

06-slides — keyboard-controlled slides

"A handful of <section> tags and twenty lines of JS is a slide deck. Point the agent at a Slack thread or a design doc and get something you can arrow-key through in a meeting — no Keynote, no export step."

When to use

User says	Should it go here?
"Make a few slides to talk to the team"	✓
"Present this RFC, slide format"	✓
"Share 5 pages on stage"	✓
"Make a slide deck with keyboard paging"	✓
"Make a formal deck for the board / investors"	✗ Use a professional tool (Keynote); an HTML deck is too plain
"Make a PDF"	✗ Not the scope of this skill

---

Standard structure (6 slides max is best)

#	Type	What it does
1	Title	One-line title + one-line subtitle (what it's about, what decision needs to be made)
2	"Three things shipped"	3 equal-width columns, presented in parallel
3	In progress	Workflow + completion percentage
4	Metrics	Big numbers + delta (2-4)
5	Decision needed	The question to decide + two options
6	Next & closer	Next week's plan + "Questions →"

3-7 slides is the sweet spot. ≤ 2 slides go with markdown, ≥ 8 slides put the audience to sleep.

---

Keyboard interaction (essential)

Key	Behavior
→ Space PageDown	Next slide
← PageUp	Previous slide
. Home	Back to the first slide
f	Toggle fullscreen

Show at the bottom right n / total page number, and show the keyboard hint at the bottom left.

---

Key JS (reuse directly)

const slides = document.querySelectorAll('.slide');
const pager = document.querySelector('.pager');
let i = 0;

function show(n) {
  i = Math.max(0, Math.min(slides.length - 1, n));
  slides.forEach((s, k) => s.classList.toggle('active', k === i));
  pager.textContent = (i + 1) + ' / ' + slides.length;
}

window.addEventListener('keydown', e => {
  if (e.key === 'ArrowRight' || e.key === ' ' || e.key === 'PageDown') {
    e.preventDefault(); show(i + 1);
  }
  if (e.key === 'ArrowLeft' || e.key === 'PageUp') {
    e.preventDefault(); show(i - 1);
  }
  if (e.key === '.' || e.key === 'Home') show(0);
  if (e.key === 'f') {
    if (!document.fullscreenElement) document.documentElement.requestFullscreen();
    else document.exitFullscreen();
  }
});
show(0);

---

Key CSS

.deck { width: 100vw; height: 100vh; overflow: hidden; }
.slide { display: none; min-height: 100vh; padding: 80px 100px;
         flex-direction: column; gap: 24px; }
.slide.active { display: flex; }

.slide h1 { font-size: 56px; font-weight: 500; line-height: 1.1;
            letter-spacing: -0.015em; max-width: 14ch; }
.slide h2 { font-size: 36px; font-weight: 500; line-height: 1.2; }
.slide p  { font-size: 22px; line-height: 1.55; color: var(--gray-700);
            max-width: 60ch; }

.pager { position: fixed; bottom: 24px; right: 32px;
         color: var(--gray-500); font-family: var(--font-mono);
         font-size: 14px; user-select: none; }
.help { position: fixed; bottom: 24px; left: 32px;
        color: var(--gray-500); font-size: 13px; }

---

Ready-to-use template

../../templates/slides.html — 6 complete templates, including:

• Title slide
• "Three things shipped" three columns side by side
• "Carrying into next week" progress card
• Metrics big numbers
• Decision needed + two option cards
• Next & closer

How to modify: open the template directly, replace the [占位] text with real content, and keep the number of slides ≤ 6.

---

Shared principles

• Each slide covers only one thing——crowded slides are the most common mistake LLMs make when writing decks
• Font size at least 22px——when presenting, you're far from the screen, and small text is hard to read
• Numbers should be big——KPI card font-size: 72px is not exaggerated
• Always show the page number——the audience needs to know how many pages are left
• f toggles fullscreen——press it before going on stage to remove the browser chrome