🧩 Starter components: API, internals, contratos

10 features built-in (citação literal)

"Para decks de slides, não implemente isso manualmente — chame copy_starter_component com kind: 'deck_stage.js' e coloque cada slide como filho direto <section> do elemento <deck-stage>. O componente cuida da escala, navegação por teclado/toque, overlay de contagem de slides, persistência em localStorage, impressão para PDF (uma página por slide) e dos contratos externos dos quais o host depende: ele rotula automaticamente cada slide com data-screen-label e data-om-validate, e envia {slideIndexChanged: N} ao pai para manter as notas do apresentador sincronizadas."

1. Auto-scale 1920×1080 via transform: scale()
2. Letterbox preto nas bordas para qualquer aspect ratio do viewport
3. Navegação teclado — setas, espaço, page up/down
4. Navegação touch — swipe esquerda/direita
5. Overlay de contagem "03/12" no canto inferior
6. Persistência localStorage — reload volta ao slide atual
7. Print to PDF — uma página por slide (preserva quebras)
8. Auto-rotula data-screen-label — "01", "02", "03"... automaticamente
9. Auto-rotula data-om-validate — para o verificador silencioso checar
10. postMessage({slideIndexChanged: N}) — para sync com speaker notes externas

data-screen-label — convenção 1-indexed

"Slide numbers are 1-indexed. Use labels like '01 Title', '02 Agenda' — matching the slide counter ({idx + 1}/{total}) the user sees. Quando um usuário diz 'slide 5' ou 'index 5', ele quer dizer o 5º slide (label '05'), nunca a posição do array [4] — humanos não falam em índice começando do zero. Se você numerar a partir de 0, toda referência de slide ficará deslocada em um."

Se você criar manualmente, use "01", "02"... Se usar deck_stage.js, é automático.

Cheat sheet API

Exemplo composto

<Stage duration={3000}>
  {/* Hero entra fade+slide nos primeiros 800ms */}
  <Sprite start={0} end={800}>
    {(() => {
      const p = useSprite();
      return (
        <h1 style={{
          opacity: p,
          transform: `translateY(${(1-p) * 40}px)`
        }}>Welcome</h1>
      );
    })()}
  </Sprite>

  {/* 3 cards stagger de 600 a 1800ms */}
  <Sprite start={600} end={1800}>
    {(() => {
      const p = useSprite();
      const y = interpolate(Easing.easeOut(p), [0,1], [40, 0]);
      return <CardGrid translateY={y} opacity={p} />;
    })()}
  </Sprite>

  {/* CTA pulse 2200-3000ms */}
  <Sprite start={2200} end={3000}>
    {(() => {
      const p = useSprite();
      const scale = 1 + Easing.easeOut(p) * 0.1;
      return <Button style={{transform: `scale(${scale})`}} />;
    })()}
  </Sprite>
</Stage>

Esboços .napkin (citação literal)

"Quando um arquivo .napkin for anexado, leia sua miniatura em scraps/.{filename}.thumbnail.png — o JSON é só dado bruto de desenho, não é útil diretamente."

Se você usa Napkin (ferramenta de sketch), o anexo fica visível para Claude via thumbnail PNG, não o JSON cru.