Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →nexu-io/frontend-slides
Generate animation-rich HTML presentations with visual style previews. Useful for online keynotes, embedded talks, and interactive briefs.
Passed 5 of 22 test cases with the skill, and 4 of 22 without it.
2 fixed3 passed either way16 still failing1 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 2 test cases the skill fixed. Same model, same prompt, with and without the skill.
Please create a web-based presentation deck for our Q3 product roadmap review. Generate it as a single HTML file containing all necessary styles and scripts internally so I can open it directly in Google Chrome. Include slides for the agenda, key feature metrics, customer quotes, and a final summary card. Make sure the slides automatically scale to fill the screen while preserving a standard widescreen presentation format, with keyboard navigation enabled.
| Checked | Without skill | With skill |
|---|---|---|
| Applies transform-origin top left (0 0) to the scaled 1920x1080 stage element. | Missed | Passed |
| Does not set the primary accent color to indigo #6366f1. | Missed | Passed |
| Imports display web fonts from Google Fonts or Fontshare in the CSS head. | Passed | Passed |
The instructions your model reads when the skill loads.
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.
.deck-viewport (fills the window) wraps .deck-stage (1920×1080, transform-origin: 0 0).factor = min(innerWidth/1920, innerHeight/1080), then translate(x, y) scale(factor) to center with letterbox/pillarbox. Re-run on resize.references/viewport-base.css in the <style> block (the seed already embeds it).<section class="slide"> directly inside .deck-stage. Around 10 slides for a standard deck; split content into more slides rather than shrinking type..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).←/→, ↑/↓, Space, PageUp/PageDown, Home/End.#/<index>; deep links and hashchange restore the slide..deck-controls, fixed-positioned outside the scaled stage.:root CSS custom properties; retheme by editing tokens only.#6366f1 indigo and purple-gradient-on-white clichés.references/STYLE_PRESETS.md (12 curated presets: Bold Signal, Electric Studio, Creative Voltage, Dark Botanical, Notebook Tabs, Pastel Geometry, Split Pastel, Vintage Editorial, Neon Cyber, Terminal Green, Swiss Modern, Paper & Ink) or design a custom system with the same discipline. The seed ships Bold Signal.title-card (colored focal card), agenda (numbered editorial list), section divider (giant outlined number), bullets (icon + heading + support line, max 4-6), big-stat (oversized number + side note), quote, two-column comparison, principle grid (2×2 cards), CSS bar chart (scaleY-animated bars), closing. Keep the slide-number top-left, breadcrumb nav top-right, and baseline rule bottom — that chrome is the deck's signature.
test cases passed, vs 4 / 22 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.