create-slides

---

name: create-slides description: 수직 스크롤 + scroll-snap 기반 단일 HTML 파일 발표자료를 생성한다. 슬라이드 라이브러리 없이 순수 HTML+CSS로 구현하며 다크/라이트 테마, frontend-design 스킬 연동, highlight.js·Mermaid·KaTeX·Chart.js·Iconify CDN을 지원한다. 트리거: "make a presentation", "create slides", "build a deck", "발표자료", "프레젠테이션", "슬라이드", "제안서", "발표 만들어", "ppt", "keynote", "pitch deck", "tech talk", "발표 만들어줘".

Scrollytelling Presentation Generator

Philosophy

이 skill은 reveal.js 같은 슬라이드 라이브러리를 사용하지 않는다. 대신 수직 스크롤 기반의 스토리텔링 접근법을 사용한다.

핵심 원칙:

• 단일 HTML 파일: 모든 CSS는 <style> 인라인, JS는 최소한만 허용
• 100vh 섹션: 각 섹션이 전체 화면을 차지하며 스크롤로 자연스럽게 이동
• 콘텐츠 중심: 화려한 애니메이션 대신 타이포그래피와 여백으로 깔끔함 달성
• 디자인 시스템 기반: 일관된 컴포넌트와 컬러 팔레트 사용

품질 기준: 한국 디자인 에이전시가 만든 랜딩페이지 수준의 완성도.

---

Workflow

Step 0: 콘텐츠 이해

사용자 입력을 먼저 분석한다. 입력 형태는 다양할 수 있다:

• 구체적인 아웃라인/본문 → 바로 구조화
• 주제만 ("AI 에이전트에 대한 발표") → 적절한 수의 섹션 아웃라인을 제안하고 확인받기
• 기존 문서/노트 → 핵심 메시지를 추출하여 슬라이드 구조로 변환

Step 1: 사용자 컨펌 (필수)

콘텐츠를 분석한 뒤, 반드시 AskUserQuestion으로 아래 항목을 한 번에 제안하고 사용자 확인을 받는다. 이 절차는 생략할 수 없다. AI가 추론한 결과를 제시하되, 최종 결정은 사용자가 한다. 단, 사용자가 요청에서 모든 항목을 이미 명시한 경우에만(예: "다크 + frontend-design + 8장으로") 질문을 생략할 수 있다.

제안 항목:

1. 테마: Dark 또는 Light (콘텐츠 성격 기반 추천 이유 포함)
2. 디자인 스타일: frontend-design / 자체 심플 / 직접 제공
3. 슬라이드 구성: 각 슬라이드의 제목과 타입을 번호 목록으로 제안
4. 악센트 컬러: 콘텐츠에 어울리는 2~3색 조합 제안 (hex 코드 포함)

제안 예시:

발표 내용을 분석했습니다. 아래 구성으로 진행할까요?

■ 테마: Dark (권장) — 기술 주제라 어두운 배경이 적합합니다
■ 디자인: /frontend-design (기본값) — 화려한 비주얼
■ 악센트 컬러: #00d2ff (cyan) + #7b2ff7 (purple) + #ff6b6b (coral)

■ 슬라이드 구성 (5장):
  1. [title] Kotlin 소개
  2. [content] Kotlin이란?
  3. [card-grid] 주요 특징 4가지
  4. [code] 코드 예시 — data class, coroutine
  5. [closing] 마무리

수정하고 싶은 부분이 있으면 알려주세요.
엔터만 누르면 위 구성으로 진행합니다.

테마 권장 기준:

• Dark 권장: 기술 발표, 개발 이야기, 해커톤, 라이브 코딩, 아키텍처 설명
• Light 권장: 기획 제안, 비즈니스 전략, 제품 소개, 교육 자료

Step 2: 디자인 소스 로드

사용자가 컨펌한 디자인 스타일에 따라 로드한다:

선택	디자인 소스	특징
frontend-design (기본값)	frontend-design skill	화려하고 창의적인 비주얼 (glassmorphism, glow 등)
자체 심플	references/design-system.md (자체 디자인시스템)	일관되고 절제된 미니멀 스타일
직접 제공	사용자 제공 가이드	사용자 지정 스타일

자체 심플 — 파일 없을 때: references/design-system.md가 없으면 본 skill의 CSS 규칙과 폰트 fallback만으로 진행하고 사용자에게 알린다.

frontend-design 로드 방법:

1. 시스템에 /frontend-design skill이 설치되어 있으면 해당 skill을 호출한다.
2. 설치되어 있지 않으면 아래 URL에서 SKILL.md를 WebFetch로 가져와 지침으로 사용한다: https://raw.githubusercontent.com/anthropics/skills/refs/heads/main/skills/frontend-design/SKILL.md

frontend-design 사용 시 경계 규칙: frontend-design skill의 컬러, 그라디언트, 글래스모피즘, 텍스처 스타일만 차용한다. 레이아웃 구조(100vh 섹션, scroll-snap), 폰트(@font-face 나눔스퀘어 네오), JS 제한은 본 스킬의 규칙을 우선한다.

어떤 선택이든 유지되는 공통 규칙:

• 단일 HTML 파일 출력
• scroll-snap-type: y mandatory + height: 100vh 페이지 단위 스크롤
• 나눔스퀘어 네오 폰트 (@font-face)
• highlight.js CDN (코드 블럭 포함 시)

사용자 제공 가이드 사용 시:

• 사용자가 URL, 파일, 또는 텍스트로 디자인 가이드를 제공하면 해당 지침을 우선 적용한다.
• 위의 공통 규칙은 동일하게 유지한다.

Step 3: 슬라이드 아웃라인 플래닝

Step 1에서 사용자가 컨펌한 슬라이드 구성을 바탕으로, 구체적인 슬라이드 아웃라인을 먼저 작성한다. 이 단계에서 각 슬라이드의 실제 콘텐츠 요소를 상세히 설계하여, 이후 HTML 작성 시 일관성과 품질을 확보한다.

아웃라인 저장 방식 (분량에 따라 자율 판단):

• 10장 이하: 인메모리(대화 컨텍스트 내)에서 관리
• 11장 이상: 임시 마크다운 파일({title-slug}-outline.md)로 작성하여 참조. HTML 완성 후 삭제

아웃라인 포맷 — 각 슬라이드마다 아래 항목을 명시한다:

## Slide {N}: {제목} [{type}]

- **Label**: {섹션 카테고리 텍스트}
- **Heading**: {핵심 메시지}
- **Content**: {본문 요약 또는 항목 목록}
- **Visual**: {사용할 컴포넌트 — stat-box 3개, card 4개, code block 등}
    - 다이어그램 타입 선택 기준:

      | 조건 | 사용 타입 |
      |------|---------|
      | sequence / 시퀀스 / 요청-응답 흐름 | Mermaid (`sequenceDiagram`) |
      | flowchart / 분기 / if-else / 순서도 | Mermaid (`flowchart LR`) |
      | ER / 테이블 관계 / DB 스키마 | Mermaid (`erDiagram`) |
      | gantt / 일정 / 로드맵 | Mermaid (`gantt`) |
      | 노드 4개 이상 아키텍처 | Mermaid (`flowchart`) |
      | 단순 컴포넌트 관계, **노드 ≤3개**, 슬라이드 테마 색 필요 | Inline SVG (`diagram` 타입) |

    - `diagram` 타입 (Inline SVG): `viewBox="0 0 600 {높이}"` — 노드 3개 이하 전용. 노드(`<g class="diag-node">`), 엣지(`<line class="diag-edge">`), `<defs>` 마커. fill/stroke는 CSS 변수 참조. **마커 id는 슬라이드마다 고유값** (예: `id="diag-arrow-s5"`) — Mermaid/다중 diagram 슬라이드 공존 시 id 중복 방지.
    - `flow` 5-step 변형: `.workflow-grid` grid + `.wf-step::after` 화살표. `.flow-arrow` div 불필요.
    - `title` 히어로 배지: `.hero-badge-row` + `.hero-badge`. Iconify 없이 dot + 텍스트로 키포인트 3-4개 표시.
- **Notes**: {특이사항 — min-height 필요 여부, CDN 라이브러리, overflow 전환 등}

구조 가이드라인:

• 콘텐츠가 5개 이하면 5~7개 섹션도 충분하다. 무리하게 늘리지 않는다.
• 15장을 초과하면 목차 섹션을 추가하고 PART 디바이더로 챕터를 나눈다.
• 구조 패턴: title → context/problem → solution → details(2-4장) → evidence → next-steps → closing

Step 4: HTML Skeleton 작성

아웃라인이 확정되면, HTML의 뼈대(Head + CSS)만 먼저 Write한다. 이 단계에서는 <body> 안에 슬라이드 콘텐츠를 넣지 않는다.

Write로 생성하는 Skeleton 구조:

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{발표 제목}</title>
    {highlight.js CSS CDN link — 코드 블럭이 있을 때만}
    {기타 필요한 CDN CSS — KaTeX 등}
    <style>
      {나눔스퀘어 네오 @font-face 블럭 전체}
      {CSS 변수 — :root 테마 정의}
      {전체 레이아웃 CSS — scroll-snap, .slide 공통, 페이지 번호 counter}
      {모든 슬라이드 타입별 CSS — slide--title, slide--content, slide--card-grid 등}
      {반응형 @media 쿼리}
    </style>
  </head>
  <body>

  {CDN scripts — highlight.js, Mermaid 등 필요한 것만}
  <script>
    hljs.highlightAll();
  </script>
  </body>
</html>

핵심: CSS는 아웃라인에 명시된 모든 슬라이드 타입의 스타일을 한 번에 포함한다. 이후 슬라이드 append 시 CSS를 추가로 수정할 필요가 없도록 설계한다.

Step 5: 슬라이드 Append

Skeleton이 준비되면, Edit 도구로 </body> 직전에 슬라이드를 순차 append한다. 한 번에 전체를 쓰지 않고, 적절한 단위로 나누어 추가한다.

Append 단위 (자율 판단):

• 기본: 1~3개 슬라이드를 한 번의 Edit으로 추가
• 단순한 슬라이드 (title, closing, quote 등): 2~3개씩 묶어도 됨
• 복잡한 슬라이드 (code 30줄+, card-grid 4개+, timeline 5단계+): 1개씩 단독 추가
• 전체 10장 이하의 간단한 발표: 한 번에 모두 추가해도 무방

Append 방법:

각 Edit에서 </body> 태그 또는 CDN <script> 블럭 직전의 빈 줄을 old_string으로 잡고, 해당 위치에 <section> 블럭을 삽입한다.

Edit:
  old_string: "{이전 슬라이드의 closing </section> 태그 또는 body 내 마지막 콘텐츠}"
  new_string: "{이전 콘텐츠}\n\n    {새 <section> 블럭들}"

진행 시 사용자에게 간단한 진척 상황을 알린다:

• "슬라이드 1-3/8 추가 중..." 식의 짧은 상태 업데이트

Step 6: 마무리 및 파일 확인

모든 슬라이드 append가 완료되면:

1. 최종 HTML 파일의 슬라이드 수가 아웃라인과 일치하는지 확인한다
2. 페이지 번호 카운터의 총 수(/ {N})가 실제 슬라이드 수와 맞는지 검증한다
3. 임시 아웃라인 파일이 있으면 삭제한다

Step 7: Gemini 디자인 리뷰 (선택적)

slides-review 스킬을 호출하여 HTML 디자인을 보완한다. gemini CLI 미설치 시 자동으로 quiet pass되므로 별도 분기 처리가 필요 없다.

호출 방법:

slides-review 스킬에 아래 컨텍스트를 전달한다:

• HTML 파일 경로: 방금 생성한 HTML 파일의 절대 경로
• 보호 규칙: scroll-snap 보호, 폰트 보호: NanumSquareNeo, 레이아웃 보호: 100vh

스킬이 지침을 적용하면 결과를 사용자에게 요약 보고하고, 스킵되면 아무 메시지 없이 다음 단계로 진행한다.

Step 8: 최종 안내

저장 경로를 사용자에게 알려준다: 현재 디렉토리에 {제목-slug}.html로 저장했습니다.

---

Slide Type Catalog

각 섹션은 아래 타입 중 하나를 사용한다. 한 발표에서 같은 타입을 반복해도 된다. 매칭 힌트를 참고하여 콘텐츠에 적합한 타입을 선택한다.

Type	용도	핵심 요소	매칭 힌트
title	표지 슬라이드	gradient 텍스트 제목, badge/eyebrow, subtitle	첫 슬라이드, 파트 디바이더
content	일반 내용	label + heading + desc 본문	설명/서술이 중심인 슬라이드
stat-grid	숫자 강조	2-4개의 stat-box (큰 숫자 + 라벨)	수치, KPI, 성과가 2개 이상 등장할 때
card-grid	항목 나열	2-4개의 카드 (아이콘 + 제목 + 설명)	병렬적 항목, 기능 목록, 장점 나열
code	코드 설명	heading + highlight.js 코드 블럭 + 설명	코드 예시, CLI 명령, 설정 파일
timeline	단계/일정	세로 타임라인 (dot + title + desc)	시간순/단계별 순서가 명확할 때
flow	프로세스	가로 플로우 다이어그램 (step + arrow)	파이프라인, 워크플로우, 데이터 흐름
quote	인용/강조	quote-box (좌측 보더 + 텍스트 + 출처)	핵심 메시지 강조, 사용자 후기, 인용
comparison	비교	2열 비교 (before/after, A/B)	"기존 vs 신규", "A vs B" 대비 구조
naming	이름/공식	naming-box (chip + 결과 + 설명)	브랜딩, 합성어 설명, 공식/수식
code-comparison	코드 비교	2열 코드 블럭 (언어/버전/전후 비교)	"JS vs TS", "before/after", 문법 비교
closing	마무리	CTA 버튼, 감사 메시지, 연락처	마지막 슬라이드, Q&A
diagram	SVG 아키텍처 다이어그램	Inline SVG (<rect> + <path> + <marker> + CSS 변수 참조)	컴포넌트 관계, 데이터 흐름 — JS 없이 테마 연동 다이어그램이 필요할 때

flow 5-step 변형: step이 정확히 5개이면 .workflow-grid + ::after 화살표 사용 권장. .flow-arrow div 불필요. design-system.md 섹션 5 참조.

---

HTML Structure Rules

1. 단일 파일: 외부 CSS 파일 없음. 모든 스타일은 <style> 태그 안에

2. CSS 변수: :root에 테마 변수 정의, 컴포넌트에서 참조

3. 섹션 구조: 테마와 무관하게 <section class="slide slide--{type}"> 통일. 테마 차이는 CSS 변수와 body 클래스로만 처리

4. 페이지 단위 스크롤: html { scroll-snap-type: y mandatory; } + 각 섹션에 scroll-snap-align: start;

5. 섹션 높이: 기본 height: 100vh + overflow: hidden. 단, 콘텐츠가 많은 섹션(카드 5개 이상, 코드 30줄 이상, 타임라인 5단계 이상)은 min-height: 100vh + overflow: visible로 전환. scroll-snap-align은 유지

6. 콘텐츠 폭: 기본 텍스트 max-width: 720px. 카드 그리드, 비교, 플로우 등 다열 레이아웃은 max-width: 960px까지 허용

7. 나눔스퀘어 네오 폰트: @font-face 블럭으로 직접 선언. 폰트 URL 로드에 실패하면 'Noto Sans KR', -apple-system, sans-serif를 fallback으로 사용한다. 8. 반응형: @media (max-width: 768px) 브레이크포인트 포함 9. 페이지 번호: CSS counter로 자동 페이지 번호 표시. 반드시 position: absolute 사용 (position: fixed 금지 — fixed 사용 시 모든 슬라이드의 번호가 겹쳐 마지막 번호만 보이는 버그 발생). 폰트 선언·페이지 번호 CSS 구현은 반드시 references/code-snippets.md를 열어 복사한다 (직접 작성 금지).

8. 접근성: <html lang="ko|en"> 설정. WCAG AA 이상의 색상 대비 유지. heading 레벨을 h1 → h2 → h3 순서로 사용

9. Flex 컨테이너 내 인라인 요소: .hero-badge-row, badge, tag, pill 등 인라인 요소가 flex column 컨테이너의 직접 자식일 때 반드시 align-self: center; width: fit-content;을 추가한다. 누락 시 전체 너비로 늘어나는 버그 발생

---

Typography & Color

공통 베이스라인 스케일

아래 값은 모든 디자인 경로(자체 심플, frontend-design, 직접 제공)에 적용되는 최소 베이스라인이다. AI는 이 값을 하한선으로 사용하되, 콘텐츠 밀도와 슬라이드 구성에 따라 더 크게 조정할 수 있다. 단, 이 값보다 작게 설정하지 않는다.

베이스라인 스케일 수치는 references/code-snippets.md에서 확인한다 (기억으로 작성 금지 — 수치 변동 가능).

3단 위계 — 모든 섹션에 일관되게 적용:

1. Label: 12px, uppercase, letter-spacing, accent color — 섹션 카테고리
2. Heading: clamp() 반응형, bold/black weight — 핵심 메시지
3. Description: 16px, muted color, line-height 1.8 — 상세 설명

강조 패턴:

• gradient text (-webkit-background-clip: text) — 타이틀 슬라이드 제목
• <span class="em"> — 헤딩 내 키워드 강조
• tag/chip — 인라인 태그 표시

컬러 제한: 악센트 최대 3색. 테마별 권장 팔레트는 design-system.md 참조.

폰트:

• 기본 본문 폰트: 나눔스퀘어 네오 (NanumSquareNeo) — @font-face 블럭은 HTML Structure Rules 7번 참조
• 영어 전용 발표가 필요한 경우: Plus Jakarta Sans, Outfit, 또는 Geist (Google Fonts CDN)

---

JavaScript Policy

• 외부 라이브러리 추가 금지. highlight.js CDN만 허용.
• Fullscreen 토글은 기본 포함: .fs-btn 버튼과 requestFullscreen 기반 토글 스크립트는 모든 생성 결과물(dark/light)에 기본 포함한다. 사용자가 명시적으로 제외를 요청한 경우에만 생략한다. 상세 구현은 design-system.md의 "6. Fullscreen Toggle" 참조.
• 그 외 발표 보조용 바닐라 JS는 허용: 키보드 방향키(←→) 네비게이션, 현재 페이지 인디케이터 등 30줄 이내의 바닐라 JS는 사용자가 요청한 경우에만 추가한다.
• 기본 생성 시에는 hljs.highlightAll()과 Fullscreen 토글 스크립트만 포함한다.

---

Anti-Patterns

• 슬라이드 라이브러리 금지: reveal.js, impress.js, Marp 등을 사용하지 않는다
• 일반 폰트 금지: Arial, Inter, Roboto, system-ui를 메인 폰트로 쓰지 않는다
• CSS 프레임워크 금지: Bootstrap, Tailwind 등을 사용하지 않는다
• 과한 애니메이션 금지: 스크롤 연동 애니메이션, 페이드인, 슬라이드인 등 사용하지 않는다 (scroll-hint bounce, hover 트랜지션은 예외)
• 보라+흰 클리셰 금지: 무조건 보라색 그라디언트를 쓰지 않는다. 콘텐츠에 맞는 악센트 선택
• base64 이미지 금지: 인코딩된 이미지를 넣지 않는다
• 데이터 날조 금지: 사용자가 제공하지 않은 수치, 연도별 추이, 발표 제목, 프로젝트명, 직무 설명 등을 추측하여 작성하지 않는다. 원본 데이터에 없는 정보는 placeholder([TODO: 데이터 필요])로 남기고 사용자에게 확인을 요청한다

이미지/비주얼 대안:

• 아이콘이 필요한 경우 emoji를 기본으로 활용한다. 더 정교한 아이콘이 필요하면 Iconify CDN을 사용한다 (아래 허용 라이브러리 참조)
• 간단한 다이어그램은 CSS+HTML로 직접 그린다. 복잡한 플로우/시퀀스/ER 다이어그램은 Mermaid를 사용한다
• 실제 이미지(사진, 스크린샷)가 필요한 위치에는 비율과 의도를 명시한 placeholder를 넣고, 주석으로 권장 이미지 설명을 남긴다
• 영상/오디오 등 멀티미디어는 지원하지 않으며, 스크린샷 placeholder + 링크로 대안을 제안한다

---

Allowed CDN Libraries

화이트리스트 방식: 아래 목록의 라이브러리만 사용할 수 있다. 이 목록에 없는 라이브러리를 임의로 추가하지 않는다. 모든 라이브러리는 "필요할 때만 포함" 원칙을 따른다. 해당 콘텐츠가 없으면 CDN을 포함하지 않는다.

CDN URL 규칙: 아래 명시된 URL과 버전을 그대로 사용한다. 버전을 임의로 올리거나 다른 CDN 호스트로 변경하지 않는다. (cdnjs는 최신 버전 누락이 잦아 jsdelivr 또는 검증된 cdnjs URL만 사용)

각 라이브러리의 CDN URL·마크업 패턴은 반드시 references/cdn-libraries.md를 열어 확인한다 (URL을 기억에서 작성하거나 임의 변경 금지).

요약 테이블

라이브러리	포함 조건	슬라이드 타입 연관
highlight.js	코드 블럭이 있을 때	code
Chart.js	수치를 차트로 시각화할 때	stat-grid 보완
Mermaid	복잡한 다이어그램이 필요할 때	flow, timeline 상위 대안
KaTeX	수학 수식이 등장할 때	content (학술)
Iconify	정교한 아이콘이 필요할 때	card-grid, flow

---

Reference Files

이 스킬이 참조하는 파일 목록. 워크플로우 내 인라인 포인터가 있지만, 필요 시점을 놓쳤을 경우 이 인덱스에서 확인한다.

파일	역할	언제 열어야 하는가
references/design-system.md	자체 디자인시스템 — 컴포넌트 CSS, 팔레트, Fullscreen 토글 구현, flow 5-step 변형 등	"자체 심플" 디자인 경로 선택 시; Fullscreen·flow 변형 등 상세 구현이 필요할 때
references/code-snippets.md	@font-face 폰트 선언, 페이지 번호 CSS counter, 타이포 베이스라인 스케일 수치	Step 4 HTML skeleton 작성 전 반드시 — 폰트·페이지 번호·스케일 수치를 기억으로 작성하지 않는다
references/cdn-libraries.md	허용 라이브러리별 CDN URL 및 마크업 패턴 (highlight.js / Chart.js / Mermaid / KaTeX / Iconify)	해당 라이브러리를 실제로 사용할 때 반드시 — URL을 기억으로 작성하거나 임의 변경하지 않는다
assets/example-dark.html	다크 테마 4슬라이드 예시 (기술 발표) — 목표 품질 수준의 적용 예시	첫 출력 전 스타일·컴포넌트 배치 캘리브레이션 시 (템플릿 그대로 복사 금지, 슬라이드 구성/장수에 갇히지 말고 아웃라인에 맞게 자유롭게 변형)
assets/example-light.html	라이트 테마 4슬라이드 예시 (비즈니스 전략) — 목표 품질 수준의 적용 예시	첫 출력 전 스타일·컴포넌트 배치 캘리브레이션 시 (템플릿 그대로 복사 금지, 슬라이드 구성/장수에 갇히지 말고 아웃라인에 맞게 자유롭게 변형)
slides-review skill	Gemini 디자인 리뷰 — 생성된 HTML에 시각 보완 피드백 적용	Step 7 (선택적 디자인 리뷰); gemini CLI 미설치 시 quiet pass