frontend-slides

--- name: frontend-slides description: "Create animation-rich, zero-dependency HTML presentations on a fixed 1920×1080 stage that scales to any viewport. Distinctive typography, committed palettes, choreographed reveals — no generic AI-slop aesthetics." triggers: - "html slides" - "animation slides" - "interactive deck" - "web ppt" - "frontend slides" - "presentation" od: mode: deck surface: web category: slides upstream: "https://github.com/zarazhangrui/frontend-slides" preview: type: html entry: example.html example_prompt: "Use Frontend Slides to turn my content into an animation-rich single-file HTML deck on a fixed 1920×1080 stage: distinctive typography, a committed palette, staggered reveals, keyboard navigation, and hash routing. Start from example.html and replace the content — keep the design system." example_prompt_i18n: zh-CN: "用 Frontend Slides 把我的内容做成一套动画丰富的单文件 HTML 幻灯片：固定 1920×1080 舞台等比缩放、个性化字体排印、克制而坚定的配色、错峰入场动画、键盘导航和 hash 路由。从 example.html 出发只替换内容，保留设计系统。" --- # Frontend Slides Zero-dependency, animation-rich HTML presentations that run entirely in the browser. Curated from the MIT-licensed [zarazhangrui/frontend-slides](https://github.com/zarazhangrui/frontend-slides). **Start from `example.html` in this plugin folder. It is the proven seed: copy its stage CSS, slide shell, and the entire `SlidePresentation` controller script verbatim, then replace slide content. Do not rewrite the stage system, the navigation script, or the design tokens architecture from scratch.** ## Hard spec (locked — every deck must satisfy all of these) ### Fixed 16:9 stage — NON-NEGOTIABLE - Every deck is authored on a fixed **1920×1080** canvas: `.deck-viewport` (fills the window) wraps `.deck-stage` (1920×1080, `transform-origin: 0 0`). - JavaScript scales the whole stage uniformly: `factor = min(innerWidth/1920, innerHeight/1080)`, then `translate(x, y) scale(factor)` to center with letterbox/pillarbox. Re-run on `resize`. - Never reflow slide content per device. No responsive breakpoints inside slides. All slide measurements are fixed px at the 1920×1080 design size. - Include the FULL contents of `references/viewport-base.css` in the `