frontend-slides

Solid

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.

Web & Frontend 84 stars 0 forks Updated 5 days ago

Install

View on GitHub

Quality Score: 78/100

Stars 20%
64
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
80
License 10%
0
Description 5%
100

Skill Content

# 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...

Details

Author
JasonxzWen
Repository
JasonxzWen/harness-hub
Created
4 months ago
Last Updated
5 days ago
Language
JavaScript
License
None

Similar Skills

Semantically similar based on skill content — not just same category