← ClaudeAtlas

pdf-flipbooklisted

Turn a PDF (or a flipbook viewer link like heyzine) into a polished static website that flips like a real book — page-curl animation, RTL by default (Hebrew), zoom, fullscreen, thumbnails, keyboard nav, PDF download — then deploy it to a shareable link on Vercel. Trigger phrases — "תבנה אתר לדפדף ב-PDF", "תהפוך את ה-PDF לספר", "אתר flipbook", "ספר דיגיטלי לדפדוף", "flipbook from this PDF", "make this PDF flippable", "turn this PDF into a book", "דפדוף כמו ספר", or when the user has a PDF / flipbook link and wants an interactive page-turning site. NOT for editing the PDF itself, NOT for video (use hyperframes).
hiyabh/claude-skills · ★ 0 · Data & Documents · score 72
Install: claude install-skill hiyabh/claude-skills
# PDF Flipbook Builder `<SKILL_DIR>` = the folder that contains this SKILL.md (normally `~/.claude/skills/pdf-flipbook`). Resolve it once to an absolute path before running commands - PowerShell/cmd do not expand `~` inside quotes. Builds a self-contained static site that lets users flip through a PDF like a real book, and deploys it to a shareable URL. Pages are pre-rendered to high-DPI WebP (sharp, fast, lazy-loaded). Flip engine is [StPageFlip](https://github.com/Nodlik/StPageFlip), bundled locally. ## When to use User has a **PDF** (local file or a flipbook viewer link such as heyzine) and wants an interactive page-turning website — typically to **share a link**. ## Key design facts (learned, don't re-derive) - **RTL is the default** (Hebrew books): cover on the right, pages turn right-to-left. - **RTL is done with a double-mirror on an OUTER wrapper** (`#flip-mirror`), NOT on the StPageFlip block — StPageFlip resets the transform on its own element. Each page `<img>` is un-mirrored so content stays readable, and the inner block is forced `dir="ltr"` so the library's own RTL positioning doesn't fight the mirror. This makes both the page order AND the flip animation correct. - **Use HTML render (`loadFromHtml` with real `<img>`), NOT `loadFromImages` (canvas).** Canvas blurs on zoom and breaks the mirror mid-animation. - **Render at 300 DPI** (source images are usually ~1024×1536). 150 DPI looks blurry, especially when zoomed. - **Single large page** (`usePortrait: tru