Guides
Recipes
Drop-in patterns for the slide shapes that come up again and again in technical decks.
A focal code block
Hero layout with a single big code snippet · the most common technical slide.
<deck-feature eyebrow="ESM">
<h1 slot="title">Side effects</h1>
<p slot="lead" class="lead">
A module can act on import.
</p>
<deck-code lang="ts" hero>
import './polyfill';
</deck-code>
</deck-feature>Side-by-side comparison
Problem vs fix, before vs after, static vs dynamic · two tinted cards in a split.
<deck-split cols="1-1">
<h1 slot="title">Two takes</h1>
<deck-card slot="left" color="red">
<h3>Problem</h3>
<deck-md>Be specific about what fails.</deck-md>
</deck-card>
<deck-card slot="right" color="green">
<h3>Fix</h3>
<deck-md>The smallest change that works.</deck-md>
</deck-card>
</deck-split>Three-up cards
Three levers, three things, three steps · use cols="3".
<deck-split cols="3" eyebrow="Actions">
<h1 slot="title">Three levers</h1>
<deck-card slot="a" color="yellow"><h3>① …</h3></deck-card>
<deck-card slot="b" color="orange"><h3>② …</h3></deck-card>
<deck-card slot="c" color="green"><h3>③ …</h3></deck-card>
</deck-split>Promises / metrics with big numbers
Use <deck-stat> instead of stuffing big text into a card.
<deck-feature eyebrow="Promises">
<h1 slot="title">Three on-purpose constraints</h1>
<deck-grid cols="3" gap="5">
<deck-stat num="01" tone="orange">
<h3 slot="claim">Serve a folder</h3>
No build, no toolchain.
</deck-stat>
<deck-stat num="02" tone="green">
<h3 slot="claim">Alive in 2031</h3>
Web standards only.
</deck-stat>
<deck-stat num="03" tone="lime">
<h3 slot="claim">~43 KB gzip</h3>
Lit + 36 components.
</deck-stat>
</deck-grid>
</deck-feature>Take-home punchline
Close a chapter (or the whole deck) with a centered punch on dark.
<deck-takeaway kicker="The whole point">
<deck-punch size="display">Source = output.</deck-punch>
<p class="caption on-dark">
Open the same folder in 2031.
</p>
</deck-takeaway>Code on top, two notes underneath
When the code needs commentary · <deck-feature-cards> gives the hero block its natural height and lets the cards below take the rest, so the code stays readable.
<deck-feature-cards eyebrow="Deep dive">
<h1 slot="title">One thing at a time</h1>
<p slot="lead" class="lead">
Focal snippet with two short notes underneath.
</p>
<deck-code lang="ts" hero>
function run() { return 42; }
</deck-code>
<deck-card slot="left" color="yellow">
<h3>What changes</h3>
<deck-md>Plain-language summary.</deck-md>
</deck-card>
<deck-card slot="right" color="orange">
<h3>What stays</h3>
<deck-md>The API contract.</deck-md>
</deck-card>
</deck-feature-cards>A structured lesson
Use a bento when concept, demonstration, practice, and validation must remain visible together.
<deck-bento eyebrow="Course map" cols="3" rows="2">
<h1 slot="title">A lesson at a glance</h1>
<deck-cell col="1 / 3" row="1"><deck-punch fit>Concept</deck-punch></deck-cell>
<deck-cell col="3 / 4" row="1 / 3" tone="info"><h3>Demo</h3><p>See it work.</p></deck-cell>
<deck-point col="1 / 2" row="2 / 3" tone="ok"><h3>Practice</h3><p>Try the pattern.</p></deck-point>
<deck-point col="2 / 3" row="2 / 3" tone="warn"><h3>Check</h3><p>Confirm the result.</p></deck-point>
</deck-bento>A visual chapter break
Use one local image as a pause between dense sections. Keep the caption short and preserve contrast with darken.
/component-photo.svg is an asset of this site, not of the framework. Point src at a file of your own, sitting next to index.html in the deck folder.
<deck-photo src="/component-photo.svg" darken="0.48" align="center">
<h1>A visual chapter break</h1>
<p class="sub">One image, one idea, one short caption.</p>
</deck-photo>A delivery timeline
Load the optional timeline module when the order and timing matter more than a generic list.
<deck-feature eyebrow="Plan">
<h1 slot="title">Ship in three moves</h1>
<deck-timeline direction="row">
<deck-milestone date="09:00" label="Draft" tone="accent">Write the source</deck-milestone>
<deck-milestone date="11:00" label="Check" tone="ok">Run the deck checks</deck-milestone>
<deck-milestone date="14:00" label="Deliver">Export HTML and PDF</deck-milestone>
</deck-timeline>
</deck-feature>An embedded training carousel
Add autoplay, loop, and swipe to the deck root when the material sits inside a course or documentation page. The host page must give the deck a sized container; the embedding notes list what an embedded deck does and does not touch on the host page.
<deck-root autoplay="4000" loop swipe transition="slide">
<deck-cover brand="COURSE · 01"><h1>Learn in context.</h1></deck-cover>
<deck-feature eyebrow="Concept"><h1 slot="title">One idea per screen</h1></deck-feature>
<deck-takeaway kicker="Practice"><deck-punch>Now try it.</deck-punch></deck-takeaway>
</deck-root>The preview advances automatically. Hover it to pause, or use its arrows and touch gestures.
More compositions
The patterns above are the ones that come up while writing by hand. The working guide written for coding agents,rikiki-workflow.md, lists 9 more compositions, each keyed to the question a slide answers rather than to a tag. It ships with the package, so an agent reads the same file you do.
Next
- Check and deliver · run the deck checks before the deck leaves your machine.
- Component library · every element the patterns above are built from.