메뉴
Author slide decks in Marp Markdown and render to HTML. Use when turning class beats into 4-7 slides per class, applying Marp frontmatter/layout rules, preventing overflow, or rendering via the marp CLI. Triggered by the slide-author agent.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | slide-authoring |
| description | Author slide decks in Marp Markdown and render to HTML. Use when turning class beats into 4-7 slides per class, applying Marp frontmatter/layout rules, preventing overflow, or rendering via the marp CLI. Triggered by the slide-author agent. |
slide는 Marp Markdown으로 작성한 뒤 marp CLI로 HTML 렌더한다. AI가 raw HTML을 직접 쓰면 레이아웃이 깨지기 쉬우므로 반드시 Marp MD 경유.
---
marp: true
theme: default
paginate: true
footer: "LO-X.Y"
style: |
section { font-size: 28px; }
h1 { font-size: 42px; }
code { font-size: 22px; }
---
paginate: true — 우하단 페이지 번호footer는 class의 주 LO id. 슬라이드마다 다른 LO면 슬라이드 안에 <!-- _footer: "LO-X.Z" --> 오버라이드beats 개수 + 1 (제목 슬라이드) + (마무리/recap 1)각 슬라이드는 다음 3가지 중 정확히 하나만 담는다:
## 서버 컴포넌트란
- 서버에서 렌더링되는 React 컴포넌트
- 클라이언트 번들에 포함되지 않음
- DB/파일시스템 직접 접근 가능
- Suspense 경계로 스트리밍됨
## RSC 예시
~~~jsx
// app/posts/page.js
export default async function Page() {
const posts = await db.query(...);
return posts.map(p => <Post {...p} />);
}
~~~
Mermaid 내장 가능 (default theme 지원):
## 요청 흐름
~~~mermaid
flowchart LR
Browser --> Edge --> Server --> DB
~~~
##) 사용, h1은 제목 슬라이드에만무엇이 RSC인가 → RSC는 어디에 쓰는가 → RSC 예시)(이어서) 서브타이틀 — alt 만 — dimension 만 (w:NUMBER, h:NUMBER — px 단위 없이 숫자만) — alt + dimension (dimension 은 항상 마지막, space-separated) — alt: prefix 는 Marp가 인식 못해 통째로 plain text 로 렌더됨 (과거 실전 사고) — width: 가 아니라 w:, 단위는 생략data: URI 사용 금지 — Marp 는 보안 정책상 data:image/... URL 을 모든 형식(utf8,·base64,)에서 통째로 거부한다 (verified with marp-cli v4.3.1:  → <img> 태그 생성 안 됨, 원본 markdown 이 <p> 로 래핑되어 슬라이드에 raw text 노출). 인라인 다이어그램이 필요하면 SVG/PNG 를 slides_png/diag-NN.svg 같은 실제 파일로 저장하고 상대경로로 참조할 것:
--allow-local-files 플래그(build-bundle.sh 에 이미 포함)로 로컬 파일 SVG 를 PNG 렌더 시 인라인화한다.footer<!-- _footer: "LO-1.2" -->
## 이 슬라이드의 제목
각 슬라이드에 어떤 beat에서 유도됐는지 표기하면 synthesize-tts.py 가 per-slide speaker_affect 오버레이를 정확히 매핑한다 (없으면 proportional-stretch 휴리스틱으로 fallback).
---
<!-- beat: b2 -->
<!-- _footer: "LO-1.1" -->
## 슬라이드 제목
<!-- beat: bN --> 는 plain HTML comment — Marp directive 아니라 render 영향 없음_workspace/03_class_<id>_beats.json 의 beat id (예: b1, b2) 그대로course/sections/<sec-slug>/classes/<class-slug>/
├── slide.source.md ← Marp 원본 (편집 대상)
└── slide.html ← 렌더 결과 (generated, 편집 금지)
scripts/render-marp.sh를 호출:
bash .claude/skills/slide-authoring/scripts/render-marp.sh \
course/sections/01-intro/classes/01-what-is-rsc
이 스크립트는:
slide.source.md 존재 확인marp CLI 호출 (--html --allow-local-files)에러 시 사용자에게 안내: npm install -g @marp-team/marp-cli
Marp는 런타임에 overflow 감지 불가. 대신:
slide.html 각 section의 텍스트 길이 측정 스크립트로 post-checktone=friendly: 제목에 감탄형·질문형 혼용, bullet은 친근한 어미
tone=formal: 명사형 종결, 객관적 어휘
tone=socratic: 제목을 질문으로, bullet은 추론 유도
[slide N] cue 재매핑 필요함을 coherence-reviewer가 감지Final build step — render all Marp slides, validate SSML, synthesize the course manifest, and package bundle.zip. Use when coherence review has passed and the course is ready for deployment. Triggered by the asset-builder agent.
Orchestrate end-to-end online course generation from a topic. Invoke when user asks to "create a course", "design a curriculum", "build online lectures", "강의 만들어", "코스 설계", "커리큘럼 짜", "섹션별 퀴즈 포함 강의", "TTS 스크립트 강의", or any request to produce structured learning material with slides + notes + scripts + quizzes. Also invoke for follow-ups — "재실행", "섹션만 다시", "업데이트", "이전 결과 개선", "코스 수정". Do NOT invoke for single-artifact requests (just a slide, just a quiz) — those should call the specific authoring skill directly.
Synthesize TTS audio from course transcripts with pluggable engines (OpenAI gpt-4o-mini-tts default, edge-tts fallback). Use when turning a class transcript.txt into per-slide MP3s plus a concatenated full.mp3, handling [slide N] / [pause:ms] markers, retries, and per-slide speaker_affect overlays. Triggered after coherence-review passes and before/within asset-build, or as a standalone step. Also invoke for "오디오 생성", "TTS 합성", "강의 음성 만들어", "voice 변경", "speed 조정".
Write TTS-ready transcripts with [slide N] cues, [pause:ms] markers, and optional SSML. Convert raw code/URLs/long numbers to speakable forms. Use when turning slides+beats into a narrator script. Triggered by the script-writer agent.
Cross-artifact QA for the course pipeline. Verify LO coverage, Bloom balance, slide↔script cue alignment, note↔slide consistency, tone, quiz factual validity, and transcript speakability. Use when reviewing generated course assets before build. Triggered by the coherence-reviewer agent.
Plan a single class as a beat sheet (hook → teach → example → practice → recap) used jointly by slide, note, and script authors. Use when turning a class spec into beats, allocating duration across beats, or assigning visual/speaker cues. Triggered by the class-planner agent.