{Slide Title}

# Slidekit Templ > Convert PDF presentations to HTML slide templates using a visual reproduction approach. Pipeline: PDF → slide screenshots → Claude writes HTML matching each screenshot. Use when the user wants to convert a PDF to HTML slide templates, reproduce a presentation as HTML, or create reusable templates from existing decks. Triggers: 'pdf to html', 'convert pdf to template', 'reproduce this deck as html', 'create template from pdf'. - Skill: `nogataka/slidekit-templ` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add nogataka/slidekit-templ` - Raw SKILL.md: https://api.skillmd.com/api/skills/nogataka/slidekit-templ/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: nogataka (https://skillmd.com/u/nogataka) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/nogataka/slidekit-templ --- # PDF to HTML Slide Converter Convert PDF presentations to high-fidelity HTML slides by visually reproducing each slide from screenshots. ## Pipeline ``` PDF → (pdftoppm) → Slide images ↓ Claude reads each image + writes HTML ↓ 001.html, 002.html, ... + print.html ``` ## Dependencies ```bash brew install poppler ``` ## Workflow ### Phase 1: Generate Slide Images ```bash python ~/.claude/skills/pdf-to-html/scripts/pdf_to_images.py input.pdf output_dir ``` This produces `output_dir/slide-01.jpg`, `slide-02.jpg`, etc. ### Phase 2: Analyze the Deck Before writing any HTML: 1. Read ALL slide images to understand the full deck 2. Identify the **color palette** (3-4 colors: primary dark, accent, secondary) 3. Identify the **font style** (serif/sans-serif, weight patterns) 4. Note the **header/footer pattern** used across content slides 5. Note the **overall style** (creative, elegant, modern, professional, minimalist) ### Phase 3: Load Design System Read these files to load the HTML design system rules: 1. `~/.claude/skills/slidekit-create/SKILL.md` — Mandatory constraints, PPTX conversion rules, anti-patterns, design guidelines, HTML boilerplate, pre-delivery checklist 2. `~/.claude/skills/slidekit-create/references/patterns.md` — 15 layout patterns with DOM trees, component snippets **All rules in slidekit-create apply.** Key constraints: - Slide size: 1280x720px - Tailwind CSS 2.2.19 + Font Awesome 6.4.0 + Google Fonts via CDN - No JavaScript - Root DOM: `` → single wrapper `

` - Text in `

` / `` (not `

`) - No text in `::before` / `::after` ### Phase 4: Write HTML Slides For each slide image, one at a time: 1. **Read the slide image** carefully 2. **Pick the closest layout pattern** from slidekit-create's 15 patterns 3. **Write the HTML** that visually reproduces the slide: - Match colors precisely (use hex values observed in the image) - Match text content exactly (all text, numbers, labels) - Match spatial layout (element positions, proportions) - Use the consistent header/footer across content slides - Use Font Awesome icons where the original has icons or bullets 4. **Save as** `{output_dir}/{NNN}.html` (zero-padded: 001.html, 002.html, ...) #### HTML Boilerplate ```html {Slide Title}

``` ### Phase 5: Generate print.html After all slides are written, generate `{output_dir}/print.html`: ```html View for Print

... ``` ### Phase 6: Visual QA **Compare each generated HTML against the original screenshot.** For each slide: 1. Read the original slide image (`slide-NN.jpg`) 2. Read the generated HTML file 3. Check for: - Missing or incorrect text - Wrong colors or color contrast issues - Layout misalignment (elements shifted, wrong proportions) - Missing decorative elements (bars, shapes, badges) - Overflow or clipping issues 4. Fix any issues found 5. Re-verify after fixes Do not declare success until at least one full comparison pass reveals no issues.