메뉴
How to build presentation slide decks as HTML pages. Covers the slide format, canvas dimensions, and recommended libraries.
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/Fergana-Labs/stash --skill slides명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
SKILL.md 표시 중
SOC 직업 분류 기준
| name | slides |
| description | How to build presentation slide decks as HTML pages. Covers the slide format, canvas dimensions, and recommended libraries. |
| when_to_use | When the user asks for slides, a slide deck, a presentation, a pitch, or a deck. |
| version | 1 |
A slide deck is a single HTML page with html_layout: "fixed-aspect" whose
<body> contains one <section class="slide"> per slide.
Every slide is a fixed 1920 × 1080 px canvas with overflow:hidden.
Stay inside a 64 px safe-area margin (working area 1792 × 952 px).
Nothing should scroll inside a slide; the viewer scales the canvas to fit
the viewport, and the exporter renders at native 1920×1080.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Deck title</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/css/all.min.css" rel="stylesheet">
<style>
/* Belt-and-suspenders — the viewer enforces these too. */
section.slide {
width: 1920px; height: 1080px;
overflow: hidden; position: relative;
box-sizing: border-box;
padding: 64px;
}
</style>
</head>
<body>
<section class="slide" data-type="cover">…</section>
<section class="slide" data-type="content">…</section>
<section class="slide" data-type="content">…</section>
<section class="slide" data-type="final">…</section>
</body>
</html>
data-type, optional but recommended)cover — title slide.toc — table of contents.chapter — section divider.content — regular content slide.final — thanks / Q&A / contact slide.These let presenter view and future templates target slides by role.
@font-face — it adds latency in export.| Need | Use |
|---|---|
| Charts | Chart.js for 1–2 charts per slide; ECharts for dashboards; D3 only when custom |
| Tables | Plain <table> + Tailwind classes. No DataTables. |
| Icons | Font Awesome 6 (CDN) or Lucide |
| Code | Shiki (preferred, vector-clean) or highlight.js |
| Math | KaTeX with auto-render (never MathJax inside iframe) |
| Diagrams | Mermaid via CDN, render once on load |
Render charts at load time (inline <script> in the slide) so screenshot
exporters capture them. Don't rely on interactivity in PPTX/PDF.
vh / vw units — use px. The canvas is fixed-pixel.max-width: 100% (they'll overflow).position: fixed).@font-face from arbitrary URLs.<section class="slide"> nested inside each other.Users can touch up text inline with the Edit button on the page.
Keep markup semantic — use <h1>, <h2>, <p>, <ul> rather than a
sea of <div>s — so the WYSIWYG editor's text selection and the
exporter's text-overlay extraction both work cleanly.
The PDF export is vector text. The PPTX and Google Slides exports embed each slide as a high-DPI image plus an invisible text overlay so users can select, copy, and search the text in PowerPoint / Keynote / Slides. Don't ship interactive controls — they won't survive the export.