frontend-slides
nexu-io/open-design
Generate animation-rich HTML presentations with visual style previews.
What is frontend-slides?
Create interactive, animation-rich HTML slide decks suitable for online keynotes, embedded talks, and interactive briefs. Use this skill when you need to build web-based presentations with visual styling and smooth animations.
- Generate HTML-based slide presentations
- Add animations and transitions to slides
- Include visual style previews in decks
- Create interactive, embeddable presentations
- Support online keynotes and talks
How to install frontend-slides
npx skills add https://github.com/nexu-io/open-design --skill frontend-slides- Typography skill installed
How to use frontend-slides
- 1.Install the upstream bundle from https://github.com/zarazhangrui/frontend-slides into your agent's skills directory
- 2.Ask the agent to invoke the skill by name (frontend-slides) or use trigger phrases like 'html slides', 'animation slides', 'interactive deck', 'web ppt', or 'reveal slides'
- 3.Provide your presentation content and styling preferences
- 4.The skill will generate an animation-rich HTML presentation ready to use
Use cases
- Building animated keynote presentations for conferences
- Creating interactive product briefs with visual demos
- Embedding animated slide decks in websites
- Designing presentation decks with custom styling
- Developing interactive training or educational slides
- Presenters and speakers
- Product managers creating briefs
- Educators and trainers
- Web developers building custom presentations
- Teams needing interactive slide decks
frontend-slides FAQ
It generates HTML-based slide presentations that can be viewed in a web browser and embedded in websites.
Yes, the skill includes visual style previews and supports custom styling for your presentations.
The skill generates animation-rich presentations with transitions and effects suitable for interactive decks.
Yes, it's curated from the upstream zarazhangrui/frontend-slides project and uses reveal.js-style slide technology.
Full instructions (SKILL.md)
Source of truth, from nexu-io/open-design.
name: frontend-slides description: | Generate animation-rich HTML presentations with visual style previews. Useful for online keynotes, embedded talks, and interactive briefs. triggers:
- "html slides"
- "animation slides"
- "interactive deck"
- "web ppt"
- "reveal slides"
od:
mode: deck
category: slides
upstream: "https://github.com/zarazhangrui/frontend-slides"
craft:
requires:
- typography
frontend-slides
Curated from @zarazhangrui.
What it does
Generate animation-rich HTML presentations with visual style previews. Useful for online keynotes, embedded talks, and interactive briefs.
Source
- Upstream: https://github.com/zarazhangrui/frontend-slides
- Category:
slides
How to use
This catalogue entry advertises the skill in OpenDesign so the agent discovers it during planning. To run the full upstream workflow with its original assets, scripts, and references, install the upstream bundle into your active agent's skills directory:
# Inspect the upstream README for exact paths
open https://github.com/zarazhangrui/frontend-slides
Then ask the agent to invoke this skill by name (frontend-slides) or with
one of the trigger phrases listed in this skill's frontmatter.
Related skills
More from nexu-io/open-design and the wider catalog.
full-output-enforcement
Enforce complete, unabridged code generation without placeholders or truncation.
full-page-screenshot
Capture full-page screenshots of web pages via Chrome DevTools Protocol with zero dependencies.
gif-sticker-maker
Convert photos into animated GIF stickers in Funko Pop / Pop Mart style via MiniMax API.
gpt-taste
Elite UX/UI design engineer with GSAP motion, editorial typography, and gapless bento grids for award-winning landing pages.
gsap-core
Official GSAP core animation library for JavaScript tweens, easing, and responsive motion.
gsap-frameworks
GSAP animation for Vue, Nuxt, Svelte, and SvelteKit with proper lifecycle and cleanup.