bento-slides

Generate and edit self-contained Bento presentation files with JSON structures.

12|3|Updated Apr 6, 2026
One-click install
npx skills add https://github.com/tsukhani/jclaw --skill bento-slides
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: bento-slides
Source: https://github.com/tsukhani/jclaw/tree/main/skills/bento-slides
Command: npx skills add https://github.com/tsukhani/jclaw --skill bento-slides

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the problem of creating static, unengaging slide decks by enabling the generation of dynamic, self-contained Bento presentations that utilize advanced motion and data visualization.

Core Features & Use Cases

  • Dynamic Presentations: Create single-file .bento.html decks that include charts, morph transitions, and motion paths.
  • Data-Driven Design: Map raw content directly to visual elements like charts, tables, and state-based slides instead of relying on static text.
  • Use Case: Transform a dry quarterly report into an interactive presentation by using morph transitions to show data trends and ken-burns effects for visual impact.

Quick Start

Use the bento-slides skill to create a new presentation deck about the Q4 project review based on the provided source material.

Frequently Asked Questions about bento-slides

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create motion-rich presentations with charts from raw data?

To create motion-rich presentations, this skill generates self-contained .bento.html files using JSON-based document structures. It maps raw content directly to visual elements like charts and interactive slides, embedding motion paths and morph transitions within a single HTML file.

What are morph transitions and how do they work in HTML presentation files?

Morph transitions in HTML presentation files are motion-based effects that smoothly animate between slide states. This skill embeds these transitions within a single .bento.html file by manipulating the bento-doc script block and fetching the Bento runtime.

Can I use this to turn a quarterly report into an interactive slide deck?

Yes, you can transform dry reports into interactive slide decks. This skill converts quarterly report content into data-driven visual elements, utilizing ken-burns effects and morph transitions to highlight data trends for professional communication.

What's the best way to build single-file HTML slides with data visualization?

The best way to build single-file HTML slides is by generating self-contained Bento presentations. This approach uses a JSON-based document structure to facilitate interactive slide decks featuring charts, morph transitions, and motion-based elements without external file dependencies.

Do I need to install dependencies to generate self-contained Bento presentations?

No dependencies are required to generate the presentations. However, the resulting .bento.html files require web-based fetching of the Bento runtime at runtime to render the interactive charts and motion-based elements properly.

Why does my bento presentation file require web access to display motion elements?

Bento presentation files require web access because they rely on web-based fetching of the Bento runtime. This external runtime is necessary to process the JSON-based document structure and render the interactive charts and motion-based elements correctly.