SkillsAdd

nogataka/slidekit · Archived

slidekit-templ

Convert PDF presentations to HTML slide templates using a visual reproduction approach.

First seen Feb 13, 2026

Installation

$ npx skills add nogataka/slidekit --skill slidekit-templ
View on skills.sh ↗ GitHub repository ↗

Summary

  • 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'.

Stronger alternatives

This repository is archived — consider an actively maintained alternative.

slidekit-create Same source
nogataka/slidekit

Generate HTML slide presentations (1 slide = 1 HTML file, 1280x720px) using Tailwind CSS, Font …

67 installs
pptx Same source
nogataka/slidekit

Use this skill any time a .pptx file is involved in any way — as input, output, or both. This i…

46 installs
imgen Same source
nogataka/slidekit

Azure OpenAI画像生成CLIツール (gpt-image-1.5 / gpt-5.1)。テキストから画像生成、画像のAI編集、画…

35 installs

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

azure-ai Same topic
microsoft/azure-skills

Use for Azure AI: Search, Speech, OpenAI, Document Intelligence. Helps with search, vector/hybr…

568.2K installs
azure-rbac Same topic
microsoft/azure-skills 489K installs
pptx Same topic
anthropics/skills

Use this skill any time a .pptx or .potx file is involved in any way — as input, output, or bot…

216.8K installs
pdf Same topic
anthropics/skills

Use this skill whenever the user wants to do anything with PDF files. This includes reading or …

192.4K installs
docx Same topic
anthropics/skills

Use this skill whenever the user wants to create, read, edit, or manipulate Word documents (.do…

184.5K installs
xlsx Same topic
anthropics/skills

Use this skill any time a spreadsheet file is the primary input or output. This means any task …

165K installs

Also in this package

Other skills from nogataka/slidekit.

npx skills add nogataka/slidekit
slidekit-create 67 pptx 46 imgen 35

Browse all from nogataka/slidekit

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Repository health

Stars 28
License MIT
Default branch main
Open issues 0
Status Archived

Skill metadata

Parsed from SKILL.md frontmatter.

Declared agents claude-code

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 5,496 B
  • docs SUMMARY.md 455 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 68 installs

SKILL.md

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

brew install poppler

Workflow

Phase 1: Generate Slide Images

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: <body> → single wrapper <div>
  • Text in <p> / <h*> (not <div>)
  • 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

  1. Save as {output_dir}/{NNN}.html (zero-padded: 001.html, 002.html, ...)

HTML Boilerplate

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <title>{Slide Title}</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css2?family={PrimaryFont}:wght@300;400;500;700;900&family={AccentFont}:wght@400;600;700&display=swap" rel="stylesheet" />
    <style>
        body { margin: 0; padding: 0; font-family: '{PrimaryFont}', sans-serif; overflow: hidden; }
        .font-accent { font-family: '{AccentFont}', sans-serif; }
        .slide { width: 1280px; height: 720px; position: relative; overflow: hidden; }
        /* Custom color classes: .bg-brand-dark, .bg-brand-accent, .bg-brand-sub, etc. */
    </style>
</head>
<body>
    <div class="slide">
        <!-- Content -->
    </div>
</body>
</html>

Phase 5: Generate print.html

After all slides are written, generate {output_dir}/print.html:

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>View for Print</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { background: #FFFFFF; }
        .slide-frame {
            width: 1280px; height: 720px;
            margin: 20px auto;
            box-shadow: 0 2px 10px rgba(0,0,0,0.15);
            border: 1px solid #e2e8f0;
            overflow: hidden;
        }
        .slide-frame iframe { width: 1280px; height: 720px; border: none; }
        @media print {
            body { background: #FFFFFF; }
            .slide-frame {
                page-break-after: always; box-shadow: none; border: none;
                margin: 0 auto;
                transform: scale(0.85); transform-origin: top center;
            }
        }
    </style>
</head>
<body>
    <!-- One iframe per slide -->
    <div class="slide-frame"><iframe src="001.html"></iframe></div>
    ...
</body>
</html>

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

  1. Fix any issues found
  2. Re-verify after fixes

Do not declare success until at least one full comparison pass reveals no issues.