Ahmed Alkatheeri
@aakatheeri
Skill 공개 소식프레젠테이션 제작·디자인 수정
게시물 요약 · 영어
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.
소스 정보
- 저장소
- aakatheeri/narrative-deck
- 최근 소스 활동
- 2026년 10월 24일 23:04
- 감지된 SKILL.md 언어
- 영어
- 스타
- 2
- 포크
- 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.
설치 방법
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
소스 파일 검토
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
파일 탐색기
22 개 파일SKILL.md 표시 중
SKILL.md
소스 지침 · 읽기 전용 미리보기- 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.
GitHub에서 보기