html-slideslisted
Install: claude install-skill Mixard/fable-pack
# HTML Slides
Zero-dependency decks: one HTML file, inline CSS/JS, keyboard/wheel/touch navigation, `prefers-reduced-motion` support. Fonts may come from Google Fonts or Fontshare.
## Viewport Fit
Each slide occupies exactly one viewport height; content that does not fit gets split into more slides, never scrolled or shrunk below readable sizes.
Density limits per slide type:
| Slide type | Maximum content |
|------------|-----------------|
| Title | 1 heading + 1 subtitle + optional tagline |
| Content | 1 heading + 4-6 bullets or 2 paragraphs |
| Feature grid | 6 cards |
| Code | 8-10 lines |
| Quote | 1 quote + attribution |
| Image | 1 image, ideally under 60vh |
## Base CSS
Copy this block into every deck, then theme on top of it. All type and spacing scale with `clamp()`; short-height breakpoints keep landscape phones and small windows usable.
```css
html, body {
height: 100%;
overflow-x: hidden;
}
html {
scroll-snap-type: y mandatory;
scroll-behavior: smooth;
}
.slide {
width: 100vw;
height: 100vh;
height: 100dvh;
overflow: hidden;
scroll-snap-align: start;
display: flex;
flex-direction: column;
position: relative;
}
.slide-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
max-height: 100%;
overflow: hidden;
padding: var(--slide-padding);
}
:root {
--title-size: clamp(1.5rem, 5vw, 4rem);
--h2-size: clamp(1.25rem, 3.5vw, 2.5rem);
--h3-size