mcpField
H
html-slide-presenter

html-slide-presenter

github.com/lensetekOther013 installsUpdated 1d ago
Repository

About html-slide-presenter

html-slide-presenter is a skill for creating browser-based presentations, suited to classroom and projected displays. It produces a standalone HTML file that works offline and supports navigation, QR codes, and PDF export.

Key features

  1. 01Creates 16:9 HTML slides
  2. 02Runs offline as one file
  3. 03Keyboard and touch navigation
  4. 04Renders interactive QR codes
  5. 05Prints slides to PDF

Use cases

  1. 01Presenting lessons in a classroom
  2. 02Showing slides without presentation software
  3. 03Linking quizzes through QR codes
  4. 04Exporting slides as a PDF

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/lensetek/course-agent-skills --skill html-slide-presenter

After installing, type/html-slide-presenterin Claude Code to confirm it loaded.

Details

From the project README

HTML Slide Presenter 📽️

html-slide-presenter menghasilkan slide presentasi visual berstandar profesional yang berjalan langsung di browser tanpa perlu menginstal aplikasi presentasi proprietary.

🌟 Fitur Utama Presentasi

  1. Rasio Tampilan 16:9 Presisi:
    • Didesain proporsional untuk layar proyektor, Smart TV, monitor kelas, atau Interactive Flat Panel (IFP).
  2. 100% Berkas Tunggal Mandiri (Self-Contained & Offline-Ready):
    • Seluruh styling CSS dan interaktivitas JS tertanam langsung dalam satu berkas index.html. Tidak membutuhkan server lokal atau koneksi internet eksternal.
  3. Kontras Tinggi & Tipografi Bersih (Default Light Theme):
    • Menggunakan warna teks tajam (Slate #0f172a dan #1e293b) di atas latar bersih putih/off-white (#ffffff / #f8fafc), memastikan tulisan terbaca jelas bahkan dari kursi belakang kelas di bawah cahaya terang.
  4. Navigasi Keyboard & Touch:
    • Panah Kanan / Space / Klik: Slide berikutnya.
    • Panah Kiri / Backspace: Slide sebelumnya.
    • Tombol F: Toggle Fullscreen (Layar Penuh).
    • Indikator nomor slide dan progres bar di bagian bawah.
  5. QR Code Interaktif Bawaan (Student Engagement):
    • Di slide kuis atau slide akhir, slide otomatis merender QR Code berbasis SVG/Canvas lokal yang dapat di-scan oleh smartphone siswa untuk membuka kuis interaktif atau materi tugas.
  6. Ekspor Instan ke PDF (@media print):
    • Memiliki tombol "Cetak ke PDF" (atau cukup tekan Ctrl+P). Aturan cetak CSS memaksa pemisahan halaman (page-break-after: always) dan margin nol, sehingga setiap slide menjadi tepat 1 halaman PDF beresolusi tajam dalam orientasi Landscape.

📐 Template Struktur Kode Slide HTML

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sesi 01: Pengantar Materi</title>
  <style>
    @page { size: 16in 9in; margin: 0; }
    body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #f1f5f9; color: #0f172a; }
    .slide-deck { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
    .slide { width: 1280px; height: 720px; aspect-ratio: 16/9; background: #ffffff; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); padding: 50px 70px; box-sizing: border-box; display: none; flex-direction: column; justify-content: space-between; }
    .slide.active { display: flex; }
    h1 { font-size: 2.8rem; color: #0f172a; margin-bottom: 0.5rem; }
    p { font-size: 1.35rem; color: #334155; line-height: 1.6; }
    @media print {
      body { background: white; }
      .slide-deck { display: block; }
      .slide { display: flex !important; width: 100vw; height: 100vh; page-break-after: always; box-shadow: none; border-radius: 0; }
    }
  </style>
</head>
<body>
  <!-- Slides content & navigation controls -->
</body>
</html>

Comments

Markdown supported