Skip to main content
skillsmp

Menü

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.

Zur Installation springenDateien prüfen

Quellinformationen

Repository
aakatheeri/narrative-deck
Letzte Quellaktivität
24. Oktober 2026 um 23:04
Erkannte Sprache von SKILL.md
Englisch
Sterne
1
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.

Sources

Installationsoptionen

Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.

Quelldateien prüfen

Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.

Datei-Explorer
22 Dateien

SKILL.md wird angezeigt

SKILL.md
Quellanweisungen · Schreibgeschützte Vorschau
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.
Auf GitHub ansehen
Zurück zur SucheZurück zur Installation