Ahmed Alkatheeri
@aakatheeri
Annonce d’un SkillCréer et mettre en forme des présentations
Résumé de la publication · anglais
Structures scroll-driven HTML decks with a nine-beat story frame and up to three editorial effects, without frameworks.
narrative-deck
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.
Informations de source
- Dépôt
- aakatheeri/narrative-deck
- Dernière activité de la source
- 24 octobre 2026 à 23:04
- Langue détectée de SKILL.md
- anglais
- Étoiles
- 2
- Forks
- 0
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.
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.
Options d'installation
Le prompt qui vérifie d'abord la source est sélectionné par défaut. Vous pouvez passer à une commande directe ou télécharger une copie locale.
Vérifiez les fichiers source
Lisez SKILL.md et les fichiers associés affichés par SkillsMP avant de décider de l'installer.
Explorateur de fichiers
22 fichiersAffichage de SKILL.md
SKILL.md
Instructions source · Aperçu en lecture seule- 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.
Voir sur GitHub