| name | simple-deck |
| description | Single-file horizontal-swipe HTML deck. Built by copying the seed
`assets/template.html` (which carries the proven 5-rule iframe nav script)
and pasting slide layouts from `references/layouts.md`. Pitch decks,
product overviews, study material โ when you don't need the magazine
aesthetic of `magazine-web-ppt`.
|
| triggers | ["deck","slides","ppt","presentation","ๅนป็ฏ","ppt ๆจกๆฟ"] |
| od | {"mode":"deck","scenario":"product","preview":{"type":"html","entry":"index.html"},"design_system":{"requires":true,"sections":["color","typography","layout","components"]}} |
Simple Deck Skill
Produce a single-file horizontal-swipe HTML deck using the seed and layout library.
Resource map
simple-deck/
โโโ SKILL.md โ you're reading this
โโโ assets/
โ โโโ template.html โ seed: tokens + slide primitives + proven nav script (READ FIRST)
โโโ references/
โโโ layouts.md โ 8 paste-ready slide layouts + theme-rhythm rules
โโโ checklist.md โ P0/P1/P2 self-review (rhythm spot-check at bottom)
Workflow
Step 0 โ Pre-flight
- Read
assets/template.html end-to-end through the <style> block AND the <script> block. The script solves five iframe-specific bugs (real scroller detection, dual capture-phase listeners, auto-focus, no scrollIntoView, position persistence) โ do not rewrite it.
- Read
references/layouts.md so you know the 8 layouts. Pay special attention to the "Theme rhythm" section โ it's the rule that prevents the deck from feeling sleepy.
- Read the active DESIGN.md โ map its tokens to the six
:root variables in the seed.
Step 1 โ Copy the seed
Copy assets/template.html to the project root as index.html. Replace the six :root variables with the active design system's tokens. Replace the page <title>.
Step 2 โ Decide slide count + theme rhythm BEFORE writing any slide
Default: 6 slides unless the brief says otherwise.
| Audience / format | Slides |
|---|
| Product overview / lightning talk (5โ10 min) | 6 |
| Pitch deck (15 min) | 8โ10 |
| Investor update / longer talk (20โ30 min) | 12โ18 |
Then write out the rhythm before any HTML โ for example, 8 slides:
01 hero light center Cover
02 light Problem
03 hero dark center Big stat
04 light Three points
05 dark Pipeline
06 hero light center Quote
07 light Before / after
08 hero dark center Ask
A healthy sequence has:
- No 3+ same theme in a row
- โฅ 1
hero dark AND โฅ 1 hero light (for 8+ slides)
- Alternating breath every 3โ4 slides
Show this rhythm sketch to the user before writing slide HTML โ they can redirect cheaply.
Step 3 โ Paste and fill
For each planned slide, copy the matching <section> from layouts.md into the body. Replace bracketed text with real, specific copy. No filler / no lorem. If a slide feels empty, the layout is wrong โ pick a different one.
Tag each slide with data-screen-label="01 Cover", "02 Problem", etc., in the order you wrote them. (The seed's first three slides already do this โ extend the pattern.)
Step 4 โ Self-check
Run through references/checklist.md. The "Theme rhythm spot-check" at the end is non-negotiable:
grep 'class="slide' index.html
Read the resulting class list. If you see light ร 4 in a row, swap one to dark. If no hero dark exists in an 8+ slide deck, promote one big-stat or closing slide.
Step 5 โ Emit the artifact
<artifact identifier="deck-slug" type="text/html" title="Deck Title">
<!doctype html>
<html>...</html>
</artifact>
One sentence before the artifact. Stop after </artifact>.
Hard rules
- Theme class on every slide (
light | dark | hero light | hero dark). Bare class="slide" = regression.
- No 3+ same theme in a row.
- Display = serif via
var(--font-display). .h-hero / .h-xl / .h-md already enforce.
- One accent per slide, used at most twice.
- Don't rewrite the nav script. It's proven.
- No
scrollIntoView(). Breaks iframe.
data-screen-label on every slide.
