skills.rest
hamsurang
hamsurangOFFICIAL
Explore all skills by this author →
WebsiteGitHub

hamsurang-slide

Generate single-file 1280×720 HTML presentations with inlined CSS and JS.

19|Updated Feb 21, 2026
Search Tags:#html#mermaid#presentation#slides#speaker-notes#hamsurang#inline-assets
One-click install
npx skills add https://github.com/hamsurang/kit --skill hamsurang-slide
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hamsurang-slide
Source: https://github.com/hamsurang/kit/tree/main/plugins/hamsurang-slide/skills/hamsurang-slide
Command: npx skills add https://github.com/hamsurang/kit --skill hamsurang-slide

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

Quickly produce polished, browser-ready slide decks in a single HTML file that adhere to the Hamsurang Soft Modern design system, removing the friction of manual slide layout, CSS management, asset inlining, and speaker notes authoring.

Core Features & Use Cases

  • Generates a single 1280×720 HTML file with all CSS and JS inlined so the presentation opens directly in a browser.
  • Supports light/dark themes, 14 slide types (title, agenda, code, architecture, timeline, etc.), speaker notes via data-notes, and conditional inclusion of highlight.js and mermaid.js when needed.
  • Maintains a CSS Single Source of Truth and responsive rules from provided references, and includes a Node.js helper to inline SVG assets for distribution.
  • Use case: prepare a 10–20 minute Hamsurang meetup talk in Korean with title, agenda, section dividers, code examples, and an architecture diagram, then export a single index.html to share.

Quick Start

Generate a 10-minute Hamsurang presentation in Korean about "project X" with an outline, light theme, 12–16 slides, and speaker notes, then run the inline assets script to embed SVGs.

Frequently Asked Questions about hamsurang-slide

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a single-file HTML presentation with inlined CSS and JavaScript?▼

To create a single-file HTML presentation, this Skill generates a 1280×720 HTML file with all CSS and JS inlined, allowing the slides to open directly in a browser without external dependencies.

Can I include architecture diagrams and code snippets in my HTML slides?▼

Yes, you can include architecture diagrams and code snippets in your HTML slides by utilizing conditional mermaid.js and highlight.js inclusion, which are automatically added to the single HTML file when needed.

Does this single-file HTML slide generator support Korean language presentations?▼

Yes, this single-file HTML slide generator supports Korean language presentations by using the Pretendard CDN, making it suitable for presenters creating short to medium-length talks in Korean.

What is the best way to embed SVG assets into a browser-ready slide deck?▼

The best way to embed SVG assets into a browser-ready slide deck is using the included Node.js inline-assets helper script, which embeds SVG assets directly into the single HTML file for easy distribution.

What slide types are available for a 1280×720 HTML presentation?▼

Available slide types for a 1280×720 HTML presentation include 14 variations such as title, agenda, code, architecture, and timeline, all adhering to a Soft Modern design system.

Do I need Node.js to generate HTML slides with inlined speaker notes?▼

You do not need Node.js to generate HTML slides with inlined speaker notes, as the core HTML generation works independently; Node.js is only required optionally to run the inline-assets script for embedding SVGs.

Related Skills

Explore More Design & Creative Skills→
gatelynchgatelynch
44

html-slides

Convert spoken presentation descriptions into styled HTML slide files.

Community
Advanced
Mohamed-ElkahefMohamed-Elkahef

artifacts-builder

Bundle React, Tailwind CSS, and shadcn/ui projects into single HTML artifacts.

Community
Intermediate
musingfoxmusingfox
2

doc-render

Render Markdown documents as formatted HTML pages with syntax highlighting, diagrams, and math.

Community
Advanced
wizardofwozzzwizardofwozzz
1

bac-presentation-generator

Convert markdown slide content into BAC brand-compliant HTML presentations.

Community
Advanced