frontend-slideslisted
Install: claude install-skill pekral/cursor-rules
## Constraints
- Self-contained: one HTML file with inline CSS and JS. No build step, no framework, no external tooling.
- Vanilla HTML/CSS/JS only — no React, no bundler, no Node scripts, no Python.
- Body limits: this skill stays well under 500 lines and 5000 tokens; the deck you produce has no hard size limit but every slide must fit one viewport.
- Viewport fit is a hard gate: every slide fits one viewport with no internal scrolling.
- Accessibility is required: semantic headings, readable contrast, `prefers-reduced-motion` support.
## Use when
- Building a talk deck, pitch deck, workshop deck, or internal presentation.
- Improving an existing HTML deck's layout, motion, or typography.
- You need a deck that runs from a local file and exports to PDF without installing anything.
## Deck structure
One HTML file. One `<section class="slide">` per slide inside a `<main>`. Theme values live in CSS custom properties so they are trivial to change.
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Deck</title>
<style>
:root {
--bg: #0f172a; --fg: #f8fafc; --accent: #38bdf8;
--font: system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; background: var(--bg); color: var(--fg); font-family: var(--font); }
/* One slide = one viewport. Active slide shown, others hidden. */
.slide {
position: fixed; inset: 0;
height: 100vh; height: 100dvh;