html-slides은(는) 무엇을 하나요?
개요
claude-office-skills/html-slides는 Claude AI가 마크다운 콘텐츠를 전문적인 HTML 프레젠테이션 슬라이드로 변환할 수 있게 해주는 스킬입니다. 이 스킬은 인기 있는 HTML 프레젠테이션 프레임워크를 활용하여 마크다운에서 바로 반응형, 접근성, 시각적으로 매력적인 슬라이드쇼를 생성합니다.
주요 기능
- 마크다운에서 HTML 슬라이드로: 간단한 마크다운 구문을 완전한 기능의 HTML 슬라이드쇼로 변환합니다.
- 프레임워크 지원: Reveal.js, remark.js, impress.js 등 다양한 프레임워크와 호환됩니다.
- 사용자 정의 가능한 테마: 다양한 테마와 스타일 옵션을 지원합니다.
- 고급 기능: 코드 하이라이팅, 발표자 노트, 슬라이드 전환 효과, 임베디드 미디어 등을 지원합니다.
- 단일 파일 내보내기: 쉬운 배포와 공유를 위해 모든 것을 하나의 HTML 파일로 내보냅니다.
사용 방법
- 마크다운 콘텐츠 준비: 표준 마크다운을 사용하여 슬라이드 콘텐츠를 작성합니다.
- 슬라이드 구분: 줄에
---를 사용하여 슬라이드를 구분합니다. - AI에게 변환 요청: Claude에게 생성된 마크다운을 HTML 슬라이드쇼로 변환해 달라고 요청합니다.
- 결과물 받기: Claude가 완전한 HTML 파일을 생성하여 제공합니다.
예제
입력 마크다운
# 내 프레젠테이션
## 소개
이것은 첫 번째 슬라이드입니다.
---
# 주요 주제
- 포인트 1
- 포인트 2
- 포인트 3
---
# 결론
요약 내용입니다.
HTML 출력
위 마크다운은 내비게이션, 전환 효과, 반응형 디자인을 갖춘 완전한 HTML 슬라이드쇼로 변환됩니다.
지원 플랫폼
- Claude Code
- Cursor
- 기타 AI 어시스턴트 도구
환경 변수
SLIDE_THEME: 사용자 정의 테마 선택 (기본값:black)SLIDE_TRANSITION: 전환 효과 스타일 설정 (기본값:slide)
참고 사항
- 최상의 호환성을 위해 Reveal.js v4 이상을 사용하는 것이 좋습니다.
- 로컬에서 슬라이드를 테스트하려면 웹 서버가 필요할 수 있습니다.
- 모든 마크다운 기능이 지원되지는 않으며, 표준 구문에 가장 최적화되어 있습니다.