bento-slides

Files (1)

• SKILL.md

SKILL.md (first lines)

A Bento deck is one `.bento.html` file that is the document, the editor and the
player at once. Making slides means editing JSON inside that file. You are not
writing HTML, CSS or JavaScript.

## Before anything else

**The base file must already be in the workspace.** You cannot download it: the
command runner has no network client on its allowlist. Check first:

```
glob_files("**/*.bento.html")
```

If there is no such file, stop and say so plainly. Do not hand-write an HTML
file and call it a Bento deck; the player is the other 99% of that file.

**The app file arrives with an empty deck**, which is what you want:

```html
<script type="application/bento+json" id="bento-doc"></script>
```

Your job is to fill that in, not to perform surgery on an existing document.

**Copy the base file first. Do not create a new one.**

```
copy_code_file(source="Bento_Slides.bento.html", destination="attention.bento.html")
```

`create_file` cannot do this: it refuses to overwrite the base, and it could not
reproduce 690 KB it has not read anyway. The command runner cannot do it either:
`python -c` is refused as an unbounded shell, and there is no copy program on the
allowlist. `copy_code_file` is the one route, and the copy is editable
immediately because nothing was read into the model to begin with.

Then edit the copy. Gallery templates are also valid decks but they embed images
as data URIs, over a megabyte of base64 on one line: never use one as a base.

**Never read the whole file.** It is around 690 KB, almost all of it the embedded
player and fonts. Find the block and read only around it:

```
grep_code("bento-doc")          -> the line number (94 in the current release)
read_code(path, start, end)     -> a small window
```

## Where the deck lives

```html
<script type="application/bento+json" id="bento-doc">
{ "format": "bento/slides", "version": 1, "title": "...", "size": {...},
  "theme": {...}, "slides": [ ... ] }
</script>
```

Top level: `format` must be `"bento/slides"`, `version` is `1`, and `title`,
`size` and `theme` are required. `slides` is the array you will mostly edit.
`assets`, `fonts`, `layouts` and `meta` are optional.

**If `docId` is present, it is an identity, not a value: never regenerate it.**
A fresh app file and the gallery templates both ship without one, so its absence
is normal and not something to fix.

`size` is an object, `{"width": 1280, "height": 720}` in the current release.
Read it rather than assuming it.

## The escaping rule that destroys files

**Every `<` inside the JSON must be written `<`.**

This is not theoretical. The shipped `signal` template contains zero literal `<`
and twelve escaped `\u003c`, because a literal `<` anywhere in the JSON closes
the surrounding `<script>` tag early.
The browser then parses the rest of your deck as HTML, and the file is silently
ruined: it still opens, and it is empty. This bites hardest in `text` elements,
whose `html` field is the place you are most likely to type a tag.

## A slide

```
id          unique
elements    the array of things on the slide
transition  "none" or "morph"
background  hex colour
notes       speaker notes
stateOf     parent slide id, making this a hidden drill-down variant
hidden      skipped during presentation
```

## An element

Every element has `id, x, y, w, h, rotation, opacity`. Then by type:

| type | the fields that matter |
| --- | --- |
| `text` | `html`, `fontSize`, `fontFamily`, `fontWeight`, `color`, `align`, `valign`, `lineHeight` |
| `shape` | `shape` (rect, ellipse, triangle, arrow, line, path), `fill`, `stroke`, `strokeWidth`, `radius` |
| `image` | `src` (a data URI or `"asset:key"`), `fit`, `radius` |
| `chart` | `preset` (bar, line, pie, scatter), `option` (ECharts-shaped) |
| `table` | `columns`, `rows`, `header`, `style` |
| `media` | `kind` (video or audio), `src`, `controls`, `autoplay`, `loop`, `muted` |
| `svg` | `asset` or `markup` |

Chart data for bar and line must be plain numbers, not objects.

## Morph is the whole reason to use this

Set `transition: "morph"` on the **later** slide. Any element whose `id` matches
one on the previous slide tweens: position, size, colour, gradients. Elements
with no partner fade in.

So a title that shrinks and moves to the corner is one element with the same id
on both slides, at different `x`, `y` and `fontSize`. It is not two elements and
not an animation you write.

Use `morphId` when you want two elements to morph into each other but need their
`id` values to stay distinct.

## Layout

From theschoolofai/S17Code, MIT.

More from theschoolofai/S17Code