How this skill is triggered — by the user, by Claude, or both
Slash command
/onda-slides:onda-slidesThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
HTML 단일 파일로 슬라이드를 만들고, Puppeteer 스크린샷 방식으로 PDF를 생성한다.
HTML 단일 파일로 슬라이드를 만들고, Puppeteer 스크린샷 방식으로 PDF를 생성한다.
$ARGUMENTS
사용자가 슬라이드 데이터(제목, 내용, 차트, 표 등)를 자연어로 제공한다.
출력 경로를 별도로 지정하지 않으면 현재 작업 디렉토리($PWD)에 저장한다.
파일명은 제목에서 자동 생성 (공백 → _, 특수문자 제거).
$PWD/{파일명}.html$PWD/{파일명}.pdf인수가 충분하지 않으면 아래를 확인한다:
$PWD.사용자가 이미 충분한 정보를 제공했으면 바로 Phase 2로 진행한다.
아래 CSS/HTML 규칙을 반드시 따른다.
@page { size: A4 landscape; margin: 0; }
.slide {
width: 297mm;
height: 210mm;
position: relative;
overflow: hidden;
page-break-after: always;
background: #fff;
}
/* 헤더 바 */
.hbar {
height: 70px;
background: #2a3f5f;
display: flex;
align-items: center;
padding-left: 44px;
}
.hbar h2 {
font-size: 20px;
font-weight: 700;
color: #fff;
}
/* 본문 — 헤더와 충분한 여백 */
.body {
padding: 36px 44px 16px;
}
/* 슬라이드 번호 */
.snum {
position: absolute;
bottom: 6px; right: 14px;
font-size: 10px;
color: #aaa;
}
/* 커버 */
.cover-content {
width: 100%; height: 210mm;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.cover-content h1 {
font-size: 36px;
font-weight: 700;
color: #1a2a44;
}
.cover-content .sub { font-size: 15px; color: #666; margin-top: 10px; }
.cover-content .date { font-size: 14px; color: #999; margin-top: 28px; }
.cover-content .logos { margin-top: 32px; display: flex; align-items: center; gap: 16px; }
.cover-content .logos .onda-logo { height: 32px; width: auto; }
/* 섹션 타이틀 */
.stitle {
font-size: 15px;
font-weight: 700;
color: #1a2a44;
margin-bottom: 10px;
margin-top: 18px;
}
/* 불렛 */
ul.bl li {
font-size: 14px;
line-height: 1.7;
margin-bottom: 10px;
}
/* 표 */
table.dt th { padding: 10px 14px; }
table.dt td { padding: 10px 14px; }
/* 그리드 */
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.g2w { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 24px; }
.g3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
<!-- 표지 -->
<div class="slide active" id="s0">
<div class="cover-content">
<h1>제목</h1>
<div class="sub">부제목</div>
<div class="date">2026.04</div>
<div class="logos">
<img class="onda-logo" src="..." alt="ONDA">
</div>
</div>
</div>
<!-- 일반 슬라이드 -->
<div class="slide" id="s1">
<div class="hbar"><h2>슬라이드 제목</h2></div>
<div class="body">
<ul class="bl"><li>불렛 항목</li></ul>
<div class="g2">
<div>좌측</div>
<div>우측</div>
</div>
</div>
<div class="snum">2 / 8</div>
</div>
Noto Sans KR (wght 300;400;500;600;700)https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.jsChart.defaults.font.family = "'Noto Sans KR', sans-serif";
Chart.defaults.font.size = 11;
Chart.defaults.plugins.legend.display = false;
Chart.defaults.animation.duration = 0; // 필수 — PDF 캡처 시 빈 차트 방지
// 수평 바 차트 — 라벨 잘림 방지
options: {
indexAxis: 'y',
responsive: true,
maintainAspectRatio: false,
scales: {
y: { ticks: { autoSkip: false } } // 필수
}
}
로고 이미지가 제공되면:
gh api repos/{owner}/{repo}/contents/{path} --jq '.content' | base64 -d로 다운로드height: 32px; width: auto; 제어로고가 없으면 텍스트 span으로 대체:
<span style="font-size:24px;font-weight:700;color:#1a2a44;letter-spacing:0.06em">조직명</span>
HTML 작성이 완료되면 PDF를 생성한다.
npm ls puppeteer pdf-lib 2>/dev/null || npm install puppeteer pdf-lib
node "${CLAUDE_SKILL_DIR}/gen_pdf.mjs" <html-path> [pdf-path]
html-path: 생성한 HTML 파일의 절대 경로pdf-path: (선택) PDF 출력 경로. 생략하면 HTML과 같은 경로에 .pdf 확장자page.pdf() 방식 사용 금지 — flex/grid 레이아웃이 깨짐deviceScaleFactor: 2로 선명한 PDF 출력| 항목 | 설명 |
|---|---|
Chart.js autoSkip: false | 수평 바 y축 라벨 자동 생략 방지 |
Chart.js animation.duration: 0 | 스크린샷 시 빈 차트 방지 |
maintainAspectRatio: false | 차트가 컨테이너 높이를 채우도록 |
| 차트 컨테이너 높이 명시 | height: 360px 등. flex:1은 print에서 무시됨 |
| 헤더 높이 70px | 너무 낮으면 상단 쏠림 |
| body padding-top 36px | 헤더-본문 여백 |
| 불렛 margin-bottom 10px | 줄 간격 |
.stitle margin-top 18px | 섹션 간 여백 |
| screen 모드 CSS 분리 | @media screen {} 안에 프레젠테이션 전용 스타일 |
생성 완료 후 보고:
file:// URLnpm install puppeteer pdf-lib 실행animation.duration: 0 확인, 대기 시간 증가gh auth status 확인 안내Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.
npx claudepluginhub tportio/skills --plugin onda-slides