Ahmed Alkatheeri
@aakatheeri
Skill release postCreate and restyle presentations
Post summary
Structures scroll-driven HTML decks with a nine-beat story frame and up to three editorial effects, without frameworks.
narrative-deck: Nine-beat HTML decks, no deps
Structures pitch decks, explainers and scrollytelling in vanilla HTML/CSS/JS with a nine-beat story frame and at most three edit effects; no build step.
Source facts
- Repository
- aakatheeri/narrative-deck
- Last source activity
- October 24, 2026 at 23:04
- Detected SKILL.md language
- English
- Stars
- 1
- Forks
- 0
Uses
Use when you need a narrative interactive web presentation, pitch deck, explainer, report or scrollytelling page that stays dependency-free and responsive.
Prerequisites
Content and brand/tone tokens (ask if missing). Start from the skill’s templates; lift working effect code from docs/index.html.
How to use
Clarify purpose, audience and tone → shape the story and map nine beats → choose at most three effects → confirm → implement from templates → run the checklist (reduced motion, IntersectionObserver, keyboard nav, 360px responsive).
Limitations
Does not write the content or export PDF/PPTX. Hard caps: three effects max, no climax spectacle effects, parallax ≤ six layers, kinetic type on headlines only, no dependencies.
Install options
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Review the source files
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
File Explorer
22 filesShowing SKILL.md
SKILL.md
Source instructions · Read-only preview- name
- narrative-deck
- description
- AI-agent skill for narrative interactive web presentations, pitch decks, explainers, reports, and scrollytelling pages in vanilla HTML/CSS/JS. Uses a nine-beat story frame and editorial effects to help assistants structure content, choose interactions, and produce responsive, dependency-free decks.
- license
- MIT
# Narrative Deck
Nine-beat frame, fifteen effects, three templates. Placement beats spectacle.
## Scope
**Does:** structure HTML decks; implement scroll/canvas effects.
**Does not:** write content; export PDF/PPTX.
## Workflow
1. Ask purpose/audience/tone; infer when clear.
2. Shape story — read `references/story-design.md`.
3. Map beats — read `references/structure.md`.
4. Choose **at most three** effects — read `references/placement.md`.
5. Confirm beats/effects.
6. Start from `../templates/`.
7. Implement chosen references.
8. Run `references/checklist.md`.
## The Nine Beats
Hook → Setup → Inciting → Pinch 1 → Midpoint → Pinch 2 → PP2 → Climax → Resolution. See `references/structure.md`.
## Effects
| # | Effect | Serves | Reference |
|---|---|---|---|
| 01 | Scroll reveal | Setup | `references/01-reveal.md` |
| 02 | Sticky scrollytelling | Pinch 1 | `references/02-scrolly.md` |
| 03 | Hover disclosure | Inciting | `references/03-hover.md` |
| 04 | You Draw It | Midpoint | `references/04-draw.md` |
| 05 | Physics field | Ambient | `references/05-orbs.md` |
| 06 | Forensic annotation | Pinch 1 / PP2 | `references/06-forensic.md` |
| 07 | Kinetic type | Hook / Climax | `references/07-type.md` |
| 08 | Parallax depth | Hook | `references/08-parallax.md` |
| 09 | Colour threading | Throughout | `references/09-thread.md` |
| 10 | Binary quiz | Midpoint | `references/10-quiz.md` |
| 11 | Turn-by-turn | Pinch 2 | `references/11-proc.md` |
| 12 | Spatial viewer | Midpoint | `references/12-ar.md` |
| 13 | Before/after | Inciting / Climax | `references/13-ba.md` |
| 14 | Audio waveform | Pinch 2 | `references/14-wave.md` |
| 15 | Paywall simulator | Resolution | `references/15-pw.md` |
Read only used effect references.
## Architecture — Non-Negotiable
1. Read `prefers-reduced-motion` once; animations jump to end.
2. Use `IntersectionObserver`; scroll math uses rAF + `ticking` + `{passive:true}`.
3. Gate canvas loops; max three active.
4. Replay uses WAAPI with `fill:'both'` and `cancel()`.
5. Tokens follow brand/tone; ask if missing. See `references/tokens.md`.
6. Hover reveals work on `:focus-visible`; use `<button>`, never `<div>`.
7. Canvas scales by `devicePixelRatio`.
8. Arrows/space advance slides; responsive from 360px.
## Hard Limits
- **Three effects max.** Four reads as showreel.
- **No climax effects.** Spectacle competes with resolution.
- **Parallax: six layers maximum.**
- **Kinetic type: headlines only.** Never body copy.
- **No dependencies.** No build step, no framework, no package.json.
## Templates
| File | Shape |
|---|---|
| `../templates/pitch.html` | problem → solution → ask |
| `../templates/explainer.html` | question → mechanism |
| `../templates/report.html` | finding → recommendation |
## Live Reference
`../docs/index.html` runs all effects with replay controls. Lift working code from there.
View on GitHub