← ClaudeAtlas

frontend-slideslisted

Load when a task needs a browser-based HTML presentation, talk or pitch deck, existing-deck enhancement, or PPT/PPTX-to-web conversion; do not load for reports, product UI, or interactive courses.
JasonxzWen/harness-hub · ★ 72 · Web & Frontend · score 72
Install: claude install-skill JasonxzWen/harness-hub
# Frontend Slides Create a polished, self-contained HTML presentation on a fixed 1920×1080 stage that scales uniformly to the browser viewport. ## Boundaries Use this Skill for a presentation artifact: - a new talk, pitch, workshop, or internal deck; - conversion of an existing `.ppt` or `.pptx` to HTML; - visual, motion, or layout improvement of an existing HTML deck. Do not use it for product UI, report pages, public articles, or a codebase-derived interactive course. Route those to `frontend-design`, `effective-interact`, `source-post`, or `codebase-to-course`. The core deliverable is local. Do not install dependencies, authenticate services, deploy, upload, or publish merely because a deck was generated. Export or remote sharing is a separate user-authorized action and must reuse tools that are already available. ## Fixed-Stage Contract - Author every slide at exactly 1920×1080 inside one `.deck-stage`. - Scale the stage as a whole and allow letterboxing or pillarboxing; never reflow slide content by device. - Copy the complete `viewport-base.css` into the final HTML. - Control slide visibility with `.active` and `.visible`; do not switch slides with `display: none` and `display: block`. - Keep every slide clipped to its stage. Split content instead of shrinking text into unreadability. - Keep controls outside the stage and support keyboard, wheel, and touch navigation. - Respect `prefers-reduced-motion`. Read `viewport-base.css` before implementation. Read `STYL