Agent skill · design visual · nexu-io
frontend-slides
OpenDesign as a worked AI-workflow example: how local agents read your files and design on your desktop — concretely. Built as a decision-grade AI literacy deck for teams new to AI, leadership.
Why this skill is useful
Provides a structured template and specific design guidelines for creating AI literacy presentations that the AI wouldn't generate on its own.
What it needs
About 4k tokens when loaded. Last updated 2026-08-07. 84,236 stars on the source repository.
What this skill does
Frontend Slides Zero-dependency, animation-rich HTML presentations that run entirely in the browser. Curated from the MIT-licensed 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 <style> block (the seed already embeds it). Slide structure Each page is one <section class="slide"> directly inside .deck-stage. Around 10 slides for a standard deck; split content into more slides rather than shrinking type. Slide switching uses .active / .visible classes toggling visibility, opacity, pointer-events — never display: none/block (layout classes like display: flex on children would override it and show every slide at once). No scrolling, no overflow, no overlapping panels, no text below comfortable reading size at 1920×1080. Navigation runtime (keep the seed's script) Keyboard: ←/→, ↑/↓, Space, PageUp/PageDown, Home/End. Hash routing: current slide mirrored to #/<index>; deep links and hashchange restore the slide. Mouse wheel (debounced ~650ms) and touch swipe (≥40px threshold). Page counter chrome lives in .deck-controls, fixed-positioned outside the scaled stage. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills nexu-io/frontend-slides