--- name: decision-deck description: Write one decision as eight to ten browser slides from a sheet of sourced facts. Use when the user wants a decision record as slides. --- Write one decision deck. The deck is one HTML file. Beside it, write an SVG still of the question slide at 1200 by 675 pixels. The user supplies a sheet. Copy that sheet onto the slides. When a field below is missing, over its limit, or inconsistent, ask for that field and wait. Write `{stem}.html` and `{stem}.svg`. The user chooses the stem. When they do not, use `decision-deck`. Write both files in the directory the user names. When they name no directory, ask for the directory and wait. The worked example uses the stem `preview`. Leave `preview.html` and `preview.svg` as they are. The sheet for that example is at the end of this skill. ## Limits The question is one sentence of at most 64 characters, and it ends with `?`. Wrap it on spaces into lines of at most 32 characters. Fill a line until the next word would pass 32, then start the next line with that word. When a word is longer than 32 characters, or the question needs more than 2 lines, ask for a shorter question and wait. A mark is optional. It is at most 24 characters. Context is 1 to 3 sentences. Each sentence is at most 90 characters. Evidence is 3 to 5 items. Each item has a statement of at most 90 characters and a source of at most 48 characters. Number the items from 1 in the order written. Options are 2, 3, or 4. Each option has a name of at most 22 characters and one sentence of at most 90 characters. Names are unique. The recommendation is the name of one option, plus 2 or 3 evidence numbers. Each number matches an evidence item, and each number appears once. Risks are 1 to 3 sentences. Each sentence is at most 90 characters. Open questions are 1 to 3 sentences. Each sentence is at most 90 characters and ends with `?`. The deck has 6 slides plus one slide per option. Two options make 8 slides, three make 9, and four make 10. ## Write the HTML The file starts with ``. The root element is `html` with `lang="en"`. The head contains, in order, a charset meta of `utf-8`, a viewport meta of `width=device-width, initial-scale=1`, a `title` whose text is the question, a description meta whose content is the question, and one `style` element. The style element is the block below, unchanged. The body contains one `main` with `class="deck"`. That main contains the slides, in order. In text, write `&` as `&`, `<` as `<`, and `>` as `>`. In attributes, also write `"` as `"`. Each slide is a `section` with `class="slide"` and `id="sN"`, where N starts at 1. The first element is a `p` with `class="top"`. When the sheet has a mark, that paragraph starts with `` and the mark in uppercase letters. It ends with `` and the slide position: two digits, a space, a slash, a space, and the two-digit slide count, as in `01 / 09`. On a Context, Evidence, Risks, or Open questions slide, the kicker is an `h2` with `class="kicker"`. On the Question, Option, and Recommendation slides, the kicker is a `p` with `class="kicker"`. The kicker text is `Question`, `Context`, `Evidence`, `Option`, `Recommendation`, `Risks`, or `Open questions`. The foot is a `div` with `class="foot"`. Inside it, an `hr` with `class="rule"`. On every slide except the last, the foot also contains ``, where M is the next slide's number. The last slide's foot contains the rule. Question. The kicker is `Question`. Then an `h1` with one `span` per wrapped line, in order. The span text is that line. Context. The kicker is `Context`. Then a `div` with `class="sentences"` and one `p` per context sentence, in order. Evidence. The kicker is `Evidence`. Then an `ol` with `class="items"`. Each item is an `li` containing a `p` and the source. The `p` is ``, the item number, ``, a space, and the statement. When the source starts with `https://`, the source is an `a` with `class="src"` and `href` equal to the source, and the link text is the source. Otherwise the source is a `span` with `class="src"`. Option. One slide per option, in sheet order. The kicker is `Option`. Then an `h2` whose text is the option name. Then a `p` with `class="one"` and the option sentence. Recommendation. The kicker is `Recommendation`. Then an `h2` whose text is the recommended name. Then an `ol` with `class="items"`. For each cited number, in the order the sheet lists the numbers, add an `li` with a `p`. The `p` text is that evidence statement, a space, and the number in parentheses. Risks. The kicker is `Risks`. Then a `div` with `class="sentences"` and one `p` per risk, in order. Open questions. The kicker is `Open questions`. Then a `div` with `class="sentences"` and one `p` per open question, in order. This is the last slide. Done when the slide count is 6 plus the number of options, every sentence and source equals the sheet, every reason equals its evidence statement plus the number in parentheses, the style element equals the block below, and the file has no script element. ```css :root { color-scheme: light; --paper: #f3efe4; --ink: #1c1915; --muted: #4e483f; --stamp: #6f2a24; --serif: "Iowan Old Style", Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif; --sans: "Avenir Next", "Segoe UI", sans-serif; --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } @media (prefers-color-scheme: dark) { :root { color-scheme: dark; --paper: #161410; --ink: #f3efe4; --muted: #cfc6b6; --stamp: #e3b2a8; } } * { box-sizing: border-box; } html, body { margin: 0; background: var(--paper); color: var(--ink); } .deck { height: 100vh; overflow-y: auto; scroll-snap-type: y mandatory; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { .deck { scroll-behavior: auto; } } .slide { min-height: 100vh; scroll-snap-align: start; display: flex; flex-direction: column; gap: 1.15rem; padding: 4.2rem 8vw 3.2rem; } .top, .n, .next { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; } .top { display: flex; margin: 0; color: var(--stamp); } .index { margin-left: auto; } h1, h2 { margin: 0; font-family: var(--serif); font-weight: 500; letter-spacing: -0.03em; line-height: 1.02; } h1 { max-width: 18em; font-size: clamp(2.6rem, 6vw, 4.4rem); } h1 span { display: block; } h2 { max-width: 16em; font-size: clamp(2.4rem, 5vw, 4rem); } .kicker, h2.kicker { margin: 0; max-width: none; color: var(--stamp); font-family: var(--mono); font-size: 0.8rem; font-weight: 400; letter-spacing: 0.14em; line-height: 1.2; text-transform: uppercase; } .sentences, .items { margin: 0; padding: 0; list-style: none; max-width: 40rem; } .sentences p, .one, .items p { margin: 0.85rem 0 0; font-family: var(--sans); font-size: 1.28rem; line-height: 1.4; } .sentences p:first-child, .items li:first-child p { margin-top: 0; } .items li { margin-top: 1.05rem; } .items li:first-child { margin-top: 0; } .n { color: var(--stamp); margin-right: 0.65rem; } .src { display: block; margin-top: 0.3rem; color: var(--muted); font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.02em; text-decoration: none; } .foot { margin-top: auto; } .rule { width: 8.5rem; margin: 0 0 0.85rem; border: 0; border-top: 3px solid var(--stamp); } .next { color: var(--ink); } a { color: inherit; } :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } ``` ## Write the SVG The file starts with ``. The root element is `svg` with `xmlns="http://www.w3.org/2000/svg"`, `width="1200"`, `height="675"`, and `viewBox="0 0 1200 675"`. The `title` text is the question. The `desc` text is `Question slide.` In text, write `&` as `&`, `<` as `<`, and `>` as `>`. Use the light colours in `:root` in the style block. Paper is the background. Stamp is the mark, the kicker, the index, and the rule. Ink is the question. The dark palette stays in the HTML. The mark, the kicker, and the index use `font-family="IBM Plex Mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"`. The question uses `font-family="Iowan Old Style, Palatino, Palatino Linotype, Book Antiqua, Georgia, serif"`. Paint a rectangle at `x="0"` `y="0"` `width="1200"` `height="675"` filled with paper. When the sheet has a mark, write it in uppercase at `x="72"` `y="96"`, `font-size="18"`, `letter-spacing="0.14em"`, filled with stamp. Write `QUESTION` at `x="72"` `y="150"`, `font-size="14"`, `letter-spacing="0.14em"`, filled with stamp. Write the index at `x="1128"` `y="150"` with `text-anchor="end"`, `font-size="14"`, `letter-spacing="0.14em"`, filled with stamp. The index text is `01 /` and the two-digit slide count. Write each question line at `x="72"`, `font-size="56"`, `font-weight="500"`, `letter-spacing="-0.03em"`, filled with ink. The first baseline is `y="292"`. Each further line adds 74. Draw one line from `72,588` to `280,588` with the stamp stroke and `stroke-width="3"`. The still contains the mark when the sheet has one, the word `QUESTION`, the index, the question lines, and that rule. Done when the SVG is 1200 by 675, its question lines match the HTML `h1`, and every fill and stroke is paper, ink, or stamp from `:root`. ## Worked example The example records where a new skills.love skill goes. The mark is `skills.love`. The question is `Where should skills.love publish a new original skill?`. Context: - Popular skills, recorded so an agent can use them. - This page is the same shelf for people. Evidence: 1. The catalog is /skills/index.json. Source: `https://skills.love/` 2. autopilot has origin first-party and grill-me has origin third-party. Source: `https://skills.love/skills/index.json` 3. Mirrored skills include LICENSE and ATTRIBUTION.md. Source: `https://skills.love/install.sh` 4. Link-only skills are not copied; the installer prints their upstream URL. Source: `https://skills.love/install.sh` Options: - Same catalog. Add the skill to this catalog and publish its files on the shelf. - Link only. List the skill in the catalog and leave its files uncopied. - Second catalog. Publish original skills in a separate catalog from this shelf. The recommendation is Same catalog, on evidence 1, 2, and 3. Risks: - Original skills and third-party skills remain one list. - A reader finds a new skill by scanning that one list. Open questions: - When should the single shelf gain a second heading? - Which originals, if any, should stay link-only? The context sentences and evidence 1 are sentences on the homepage. Evidence 3 and evidence 4 are sentences in the installer usage text. Evidence 2 is the `origin` of autopilot and of grill-me in the catalog. The deck is `preview.html`. The still is `preview.svg`.