lewislulu/html-ppt-skill

해결하는 문제

빌드 단계 없이 전문적이고 고품질의 HTML 프레젠테이션을 생성하기 위한 포괄적인 시스템을 제공합니다. 시각적으로 매력적이며 휴대 가능한(정적 HTML/CSS/JS) 슬라이드를 만들 수 있을 뿐만 아니라, 발표자 모드, 다양한 테마, 영화 같은 애니메이션 등 무거운 프레젠테이션 소프트웨어에서나 볼 수 있는 고급 기능을 제공합니다.

작동 방식

이 프로젝트는 "AgentSkill"로 설계되어 AI 에이전트 런타임(Claude Code, Cursor, Windsurf 등)에 통합하여 에이전트가 자동으로 프레젠테이션을 작성할 수 있도록 합니다. 테마와 레이아웃을 CSS 변수로 관리하는 토큰 기반 디자인 시스템을 사용합니다.

주요 기술적 특징:

• 발표자 모드 (Presenter Mode): BroadcastChannel과 iframes를 사용하는 전용 창을 통해 청중 뷰와 발표자용 스크립트, 타이머, 미리보기를 새로고침 없이 동기화합니다.
• 정적 아키텍처 (Static Architecture): 데크는 순수 HTML/CSS/JS로 구성되어 배포가 쉽고 오프라인에서도 실행 가능합니다(Google Fonts 폴백 포함).
• 템플릿 시스템 (Template System): 36개의 테마, 36개의 페이지 레이아웃, 15개의 전체 데크 템플릿 라이브러리가 포함되어 있으며, 간단한 HTML 속성이나 CSS 링크로 교체할 수 있습니다.

대상 사용자

• AI 에이전트: 구조화된 전문 슬라이드 데크를 생성할 수 있는 에이전트를 구축하는 개발자.
• 발표자: PowerPoint나 Keynote를 대체할 가볍고 코드 기반의 발표자 모드 내장 도구를 찾는 개인.
• 개발자: 정적 파일과 디자인 시스템 접근 방식을 선호하는 프레젠테이션 제작자.

주요 특징

• 방대한 라이브러리: 36개의 테마, 36개의 레이아웃, 15개의 전체 데크 템플릿 포함.
• 영화 같은 애니메이션: 총 47개의 애니메이션(27개의 CSS 기반 효과와 20개의 고성능 Canvas FX: 입자 폭발, 매트릭스 비 효과 등).
• 진정한 발표자 모드: 현재/다음 슬라이드용 마그네틱 카드, 발표자 스크립트, 타이머 기능 제공.
• 빌드 단계 없음: 정적 파일로 즉시 작동하며 컴파일이나 번들링이 필요 없습니다.
• AI 에이전트 준비 완료: npx skills add를 통해 쉽게 설치할 수 있으며 다양한 AI 코딩 에이전트와 호환됩니다.