| name | ccel_slide_skill |
| description | CCEL 연구과제 발표자료 스타일로 슬라이드 덱을 생성. 어떤 주제/기존 PPT든 받아서 네이비-골드-오렌지 + 나눔스퀘어 + 탭칩 패널 스타일의 HTML과 PPTX를 동일하게 만들고 fade 애니메이션을 양쪽에 똑같이 주입. Triggers - /ccel_slide_skill, ccel 슬라이드, ccel 스타일, CCEL slide, 과제 스타일 슬라이드, 과제 발표자료 ppt, 그 네이비골드 과제 스타일. |
ccel_slide_skill — CCEL 과제 스타일 슬라이드 생성
어떤 주제·어떤 원본 PPT가 와도 항상 동일한 CCEL 과제 스타일로 HTML 덱과 PPTX를
둘 다, 같은 모습으로 생성한다. 스타일 수치는 원본에서 실측한 값으로
references/style-spec.md(SSOT)에 고정되어 있다. 임의 변경 절대 금지.
철칙 (무슨 일이 있어도)
- HTML과 PPTX는 같은 레이아웃·같은 색·같은 텍스트로 나와야 한다. 한쪽만 만들지 말 것 (사용자가 명시적으로 한쪽만 요청한 경우 제외).
- fade 애니메이션 필수: 슬라이드 전환 fade 700ms + 콘텐츠 블록 fade-in 500ms/300ms stagger (자동 시작). 양쪽 동일.
- 겹침(layering)은 시그니처: 탭 칩은 컨테이너 상단 모서리에 반드시 겹치게, 텍스트는 도형 위에 올린다. z순서: 그림자 스트립 → 컨테이너 → 칩 → 텍스트.
- alpha·라운딩 실측값 고수: 그림자 스트립 #324A88@10% / #DCDAB2@31%, 라운딩 adj 6386(컨테이너)·12808(카드)·23741(요약밴드)·39062(칩)·50000(알약) 등. 전부 spec 참조.
- 폰트는 나눔스퀘어 ExtraBold(제목/강조) + 나눔스퀘어 Bold(본문) 고정.
워크플로
0. 준비
references/style-spec.md를 반드시 먼저 Read (토큰·수치 SSOT).- 입력이 기존 PPT/문서면 내용(텍스트·구조)만 추출하고 스타일은 전부 버린다.
1. 콘텐츠 플랜
- 슬라이드 구성: 타이틀 → 콘텐츠 N장 → (선택) 클로징.
- 각 콘텐츠 슬라이드를 패널 단위로 설계: 1패널(전폭) / 2패널(좌우 대비: 기존=gray·gold vs 제안=navy) / 패널+요약밴드 / 푸터밴드.
- 강조 런 계획: 본문 속 핵심 단어만 오렌지(#FA901E) 또는 네이비(#0F0F70) ExtraBold.
2. HTML 생성
templates/deck.html을 베이스로 콘텐츠 슬라이드 작성 (컴포넌트 클래스: .header .panel .tab-chip .card .grad-card .chip .pill .summary-band .navy-footer .divider-v .em-o/.em-n/.em-g).- 등장 순서대로 콘텐츠 블록을
.fade-block으로 감싼다 (헤더는 fade-block 아님).
- 마지막에 에셋 인라인:
conda run -n base python ~/.claude/skills/ccel_slide_skill/scripts/inline_assets.py <out.html>
3. PPTX 생성
- 빌드 스크립트를 작성해
scripts/ccel_pptx.py를 import (sys.path에 scripts 추가).
- HTML과 같은 좌표 체계: px ÷ 37.795 = cm. HTML에서 잡은 레이아웃을 cm로 환산해 그대로 배치.
- 각 슬라이드 끝에
deck.add_fade_animation(slide, [도형들 등장순서]) 호출 — HTML의 .fade-block 순서와 동일하게.
deck.save()가 fade 전환을 전 슬라이드에 자동 주입.- 실행:
conda run -n base python <build.py>
4. 검증 (필수 — verification-before-completion)
- PPTX 무결성:
soffice --headless --convert-to pdf 성공 + pdftoppm으로 PNG 렌더.
- HTML 스크린샷과 PPTX 렌더를 나란히 비교 — 색/레이아웃/겹침 불일치 시 수정.
- 글자 겹침/overflow 검사: 큰 덱이면
slide-audit 스킬 활용.
- 애니메이션 XML 확인: 생성된 pptx에서
grep -c 'animEffect' ppt/slides/slide*.xml ≥ 1 per content slide.
컴포넌트 치트시트 (상세는 style-spec.md)
| 컴포넌트 | PPTX (ccel_pptx) | HTML 클래스 |
|---|
| 헤더 밴드 | add_content_slide(title, subtitle, page=(n,total)) | .header + .title + .pagenum |
| 메인 패널+탭칩 | panel(s,x,y,w,h,color,tab=...) | .shadow-strip + .panel + .tab-chip |
| 내부 카드 | card(...) | .card |
| 그라데이션 카드 | grad_card(...) | .grad-card |
| 칩/알약 | chip(...) / pill(...) | .chip / .pill |
| 요약 밴드 | summary_band(s,y,runs) | .summary-band |
| 네이비 푸터 | navy_footer(s,runs) | .navy-footer |
| 세로 구분선 | divider_v(...) | .divider-v |
| 타이틀 슬라이드 | add_title_slide(...) | .slide.dark + .title-* |
| 클로징 | add_closing_slide(...) | .closing-msg |
섹션색 사용 규칙: navy=제안/핵심, gold=성과/파급효과, gray=기존/한계, orange=포인트 강조.
파일
references/style-spec.md — 실측 스타일 SSOT (필독)scripts/ccel_pptx.py — PPTX 빌더 (fade 타이밍 XML 포함)scripts/inline_assets.py — HTML 에셋 base64 인라인templates/deck.html — HTML 덱 템플릿 (전 컴포넌트 데모)assets/header_band.png — 헤더 웨이브 스트립 (원본 크롭)assets/wave_bg.jpg — 타이틀/클로징 풀블리드 배경
