# Bento Slide Decks

Creates and edits single-file Bento presentations with charts and transitions.

- Repository: https://github.com/nyblnet/bento (5597 stars)
- Category: Documents
- License: MIT
- Last updated: 2026-10-27
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add nyblnet/bento --skill bento-slides -g -a claude-code -y`
Codex: `npx skills add nyblnet/bento --skill bento-slides -g -a codex -y`
Cursor: `npx skills add nyblnet/bento --skill bento-slides -g -a cursor -y`
Gemini CLI: `npx skills add nyblnet/bento --skill bento-slides -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add nyblnet/bento`

## Description

Create and edit Bento presentations, single-file .bento.html decks whose document is plain JSON in a "#bento-doc" script block. Use whenever the user wants a slide deck or presentation: starting from NOTHING (it downloads the latest Bento app from bento.page automatically), from source material, or by improving an existing .bento.html. Maps content to the right feature (charts, morph transitions, state slides, ken-burns, motion paths) instead of static text slides, then writes the document JSON in place. Full schema + recipes at https://bento.page/agents.md.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Authoring Bento decks

A Bento deck is one self-contained `.bento.html` file. The document is plain
JSON in a single block:

```html
<script type="application/bento+json" id="bento-doc"> { "format":"bento/slides", ... } </script>
```

You edit **that block only**, in place. Escape every `<` in the JSON as
`\u003c` so it can never contain a literal `</script>`. Leave the rest of the
file (the compressed runtime) untouched. In a chat context instead, the user
copies the JSON out (*Save ▾ → Copy document JSON*) and pastes your
replacement back (*Save ▾ → Replace from JSON…*); `window.bento.loadDoc(json)`
does it from the console.

## Starting from nothing

The user does NOT need Bento installed, the app ships inside every deck.
When there is no `.bento.html` to edit, fetch the latest signed release
yourself and author into it:

```bash
# name the file after the deck's topic, e.g. Q4_Review.bento.html
curl -fsSL https://bento.page/releases/slides/Bento_Slides.bento.html -o "<Topic>.bento.html"
```

(Windows without curl: `iwr https://bento.page/releases/slides/Bento_Slides.bento.html -OutFile <Topic>.bento.html`.)

Then verify the download contains `id="bento-doc"`, and write your document
into that block. **The block is empty in the downloaded file**, a browser
mints a showcase deck on first open, but on disk there is nothing to discard
and nothing to copy from, so do not go looking for it.
Rules for a fresh document:

- **Fetch https://bento.page/agents.md BEFORE authoring** and start from its
  "Minimal valid document" skeleton. `size` and `theme` (including
  `theme.fontFamily`) are **required**, the app will not boot without them.
- **Fully specify element fields** as the skeleton shows (shapes need
  `stroke`/`strokeWidth`; text needs `fontFamily`/`align`/`valign`), missing
  fields render wrong or not at all.
- **Omit `docId` and `collab` entirely**: the app mints a fresh identity and
  dormant collaboration credentials on first open.

The rest: https://github.com/nyblnet/bento/blob/HEAD/plugins/bento-slides/skills/bento-slides/SKILL.md