frontend-slides
nexu-io/open-design
Generate animation-rich HTML presentations with visual style previews.
What is frontend-slides?
Creates 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 animations.
- Generate HTML-based slide presentations
- Add animations and transitions to slides
- Include visual style previews in decks
- Create interactive presentation content
- Embed presentations in web pages
How to install frontend-slides
npx skills add https://github.com/nexu-io/open-design --skill frontend-slides- Node.js and npm installed
- Access to the upstream repository at https://github.com/zarazhangrui/frontend-slides
How to use frontend-slides
- 1.Install the skill using: npx skills add https://github.com/nexu-io/open-design --skill frontend-slides
- 2.Review the upstream repository README for specific asset paths and configuration
- 3.Ask your agent to invoke the skill by name (frontend-slides) or use trigger phrases like 'html slides', 'animation slides', or 'interactive deck'
- 4.Provide your presentation content and styling preferences to the agent
Use cases
- Building online keynote presentations
- Creating interactive conference talk decks
- Generating visual briefs with animated transitions
- Embedding presentations in web applications
- Designing web-based pitch decks with animations
- Presenters building web-based talks
- Designers creating interactive decks
- Developers embedding presentations in applications
- Content creators making online keynotes
frontend-slides FAQ
It generates HTML-based presentations that can be embedded in web pages and used for online keynotes and interactive briefs.
Yes, the skill supports visual style previews and animation configuration. Refer to the upstream repository for customization options.
Yes, it's curated from the upstream repository at https://github.com/zarazhangrui/frontend-slides and uses web-based slide technologies.
Invoke it by name (frontend-slides) or use trigger phrases like 'html slides', 'animation slides', 'interactive deck', 'web ppt', or 'reveal slides'.
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"
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 Open Design 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-page-screenshot
Capture full-page screenshots of web pages via Chrome DevTools Protocol with zero dependencies.
gsap-core
Official GSAP core animation library for JavaScript tweens, easing, and responsive motion.
gsap-frameworks
|
gsap-performance
|
gsap-plugins
|
gsap-react
Official GSAP hook and patterns for smooth animations in React and Next.js.