0dot77/lecture-slides

/lecture-slides — 강의 슬라이드 생성기

역할: 대학 강의용 슬라이드 디자이너 트리거: /lecture-slides 또는 슬라이드/발표자료 작성 요청 출력: 단일 HTML 프레젠테이션 파일 의존: frontend-slides 스킬 (필수)

Purpose

교안이나 수업 주제를 기반으로 강의용 HTML 슬라이드를 생성한다. frontend-slides 스킬의 디자인 시스템을 활용하되, 교육 목적에 최적화된 레이아웃과 구성을 적용한다.

Prerequisites

이 스킬은 frontend-slides 스킬에 의존한다.

확인 방법:

ls ~/.claude/skills/frontend-slides/SKILL.md

설치 안내 (frontend-slides가 없는 경우):

frontend-slides 스킬이 필요합니다. 다음 명령으로 설치하세요:

claude skill install frontend-slides

또는 https://github.com/anthropics/claude-code-skills 에서 수동으로 설치할 수 있습니다.

Behavior

Phase 0: 의존성 확인

실행 시 frontend-slides 스킬이 설치되어 있는지 확인한다.

• 있으면 → Phase 1 진행
• 없으면 → 설치 안내 메시지 출력 후 중단

Phase 1: 입력 확인

소스 판별:

| 입력 유형 | 설명 | 예시 | |----------|------|------| | 교안 파일 | 기존 마크다운 교안을 슬라이드로 변환 | /lesson-plan으로 생성한 .md 파일 | | 주제 직접 입력 | 주제를 받아 슬라이드 구성 | "제너레이티브 아트 소개" | | 기존 슬라이드 수정 | 이미 만든 HTML 슬라이드 수정/보강 | 경로 지정 |

교안 파일이 있으면 읽고 내용을 파악한다.

출력 경로 질문 (필수):

"슬라이드 파일을 어디에 저장할까요?"

예: ./slides/, /Users/.../lectures/week03/, 현재 디렉토리

사용자가 경로를 지정하면 해당 위치에 폴더를 만들고 그 안에 HTML 파일을 생성한다. 자동으로 경로를 결정하지 않는다.

스타일 질문 (선택):

"슬라이드에 특별히 원하는 스타일이나 분위기가 있나요?"

없으면 교육용 기본 스타일을 적용합니다.

Phase 2: 슬라이드 설계

교안 내용을 슬라이드 단위로 분할한다.

강의 슬라이드 구성 원칙:

1. 제목 슬라이드 — 수업 제목, 과목명, 날짜
2. 목차 슬라이드 — 오늘 다룰 내용 개요
3. 내용 슬라이드 — 개념별 1-3장
4. 레퍼런스 슬라이드 — 이미지/영상 중심
5. 실습 안내 슬라이드 — 실습이 있는 경우
6. 요약 슬라이드 — 핵심 정리
7. 다음 수업 예고 — 마지막 슬라이드

슬라이드당 내용 밀도:

• 텍스트: 핵심 키워드와 짧은 문장 위주 (교안의 상세 설명을 요약)
• 이미지: 가능한 크게, 슬라이드 면적의 50% 이상 활용
• 한 슬라이드에 하나의 개념만

Phase 3: 미디어 임베딩 규칙

강의 슬라이드에서 가장 중요한 부분. 이미지와 영상이 올바르게 표시되어야 한다.

이미지 임베딩:

<!-- 외부 이미지 -->
<img src="https://example.com/image.jpg"
     alt="작품 설명"
     style="max-height: min(60vh, 500px); width: auto; object-fit: contain;"
     loading="lazy"
     onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
<div style="display:none; align-items:center; justify-content:center;
            height: min(60vh, 500px); background: rgba(255,255,255,0.05);
            border-radius: 8px; color: rgba(255,255,255,0.5); font-size: 0.9rem;">
  이미지를 불러올 수 없습니다
</div>

영상 임베딩 (YouTube):

<div style="max-width: min(90%, 900px); aspect-ratio: 16/9; margin: 0 auto;">
  <iframe src="https://www.youtube.com/embed/VIDEO_ID"
          style="width: 100%; height: 100%; border: none; border-radius: 8px;"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope"
          allowfullscreen></iframe>
</div>

영상 임베딩 (Vimeo):

<div style="max-width: min(90%, 900px); aspect-ratio: 16/9; margin: 0 auto;">
  <iframe src="https://player.vimeo.com/video/VIDEO_ID"
          style="width: 100%; height: 100%; border: none; border-radius: 8px;"
          allow="autoplay; fullscreen; picture-in-picture"
          allowfullscreen></iframe>
</div>

미디어 관련 주의사항:

• 외부 이미지는 반드시 onerror 핸들러를 포함하여 로드 실패 시 fallback 표시
• 영상은 embed URL을 사용한다 (youtube.com/watch?v= → youtube.com/embed/)
• viewport 규칙을 준수한다: 이미지 max-height: min(60vh, 500px), 영상 max-height: min(60vh, 500px)
• loading="lazy"로 초기 로딩 성능 확보

Phase 4: 슬라이드 생성

frontend-slides 스킬의 워크플로우를 따른다:

1. 지원 파일 읽기 — frontend-slides 스킬의 다음 파일을 읽는다:

   • html-template.md — HTML 구조 및 JS 기능
   • viewport-base.css — 필수 CSS (전체 포함)
   • animation-patterns.md — 애니메이션 레퍼런스

2. HTML 생성 — 단일 HTML 파일로 생성

   • viewport-base.css 전체를 <style> 태그에 포함
   • 키보드 네비게이션 (좌우 화살표, 스페이스바)
   • 슬라이드 번호 표시
   • 전체화면 지원

3. 교육용 추가 기능:

   • 발표자 노트 토글 (N키) — <div class="speaker-note"> 요소를 각 슬라이드에 포함 가능
   • 슬라이드 개요 오버레이 (O키) — 전체 슬라이드 썸네일 보기

Phase 5: 전달

• HTML 파일을 저장한다
• 브라우저에서 자동으로 연다 (open 명령)
• 사용법을 안내한다:

  • ← → 화살표: 슬라이드 이동
  • N: 발표자 노트 토글
  • O: 슬라이드 개요
  • F: 전체화면

• 수정 사항이 있는지 확인한다
• PDF로 내보내려면 /lecture-export를 사용하라고 안내한다

Style Guidelines for Lectures

교육용 슬라이드에 적합한 스타일:

• 가독성 우선: 본문 폰트 최소 clamp(1rem, 2.5vw, 1.5rem)
• 대비: 배경과 텍스트의 명확한 대비 (WCAG AA 이상)
• 여백: 슬라이드 가장자리에 충분한 패딩 (5vw 이상)
• 색상 절제: 주 색상 2-3개, 강조 색상 1개
• 코드 블록: 프로그래밍 수업의 경우 구문 강조 포함
• 다크 테마 권장: 강의실 프로젝터에서 눈의 피로도가 낮음

Notes

• 이 스킬은 frontend-slides 스킬의 디자인 시스템 위에서 동작한다
• 교안이 없어도 주제만으로 슬라이드를 생성할 수 있다
• 교안에서 슬라이드를 만들 때 내용을 요약하여 키워드 중심으로 변환한다
• PDF 익스포트는 /lecture-export 스킬을 사용한다