102.7K+다운로드
사용 가이드로 건너뛰기
md-slides작성자 Alireza Rezvani

MD Slides 스킬.

PPT 및 슬라이드 덱을 위한 Claude Code 및 Codex skill: Markdown 덱을 브랜드 슬라이드로 변환합니다.

  • Presentations
  • HTML 슬라이드
OpenDesign 다운로드사용 가이드 보기
alirezarezvani/claude-skills · markdown-html/skills/md-slides/SKILL.mdSKILL.md
--- name: md-slides description: Converts a markdown deck (slides separated by `---` HR boundaries or by `# ` H1 headings, with optional `<!-- notes: ... -->` presenter notes blocks) into a single-file HTML presentation with arrow-key / space / PgDn / PgUp / Home / End / P / Esc keyboard navigation, presenter mode (split view with current slide + speaker notes + clock + next-slide preview), URL-hash deep linking, and `@media print` page-per-slide … --- ## When to invoke ## Pipeline ## What ships in the HTML ## Hard rules ## Forcing-question library (Matt Pocock grill discipline) ## Distinct from
업스트림 파일에서 읽은 전문 및 섹션 제목 2026-09-14 · 전체 6,506자

01 기능

Claude Code와 Codex에서 md-slides Skill이 하는 일

요약, 워크플로, 산출물을 모두 해당 스킬의 SKILL.md에서 그대로 읽어 정리한 내용입니다.

SKILL.md에서2026-09-14 읽음 · 실행 기록 아님

스킬 자체의 표현으로

md-slides는 마크다운 덱을 어떤 브라우저에서도 실행되는 단일 파일 HTML 프레젠테이션으로 변환합니다. 덱은 --- HR 경계나 # H1 헤딩으로 구분된 슬라이드이며, 선택적으로 <!-- notes: ... --> 발표자 노트 블록을 포함할 수 있습니다. 세 개의 표준 라이브러리 Python 스크립트로 파이프라인을 구성합니다: slide_splitter.py, presenter_notes_parser.py, deck_html_renderer.py.

출력물에는 키보드 내비게이션, URL 해시 딥 링크, 진행 바와 슬라이드 카운터, 시계와 다음 슬라이드 미리보기가 있는 발표자 모드, 한 페이지당 한 슬라이드로 PDF를 내보낼 수 있는 인쇄용 스타일시트가 포함됩니다. md-document의 마크다운 파서를 재사용하며 config_loader.py를 통해 디자인 시스템 토큰을 읽습니다. 명확한 슬라이드 경계가 없는 입력, 슬라이드가 1개뿐인 덱, 100줄 미만의 파일, --strict-notes 50% 커버리지를 충족하지 못하는 덱은 거부합니다.

산출물

  • 렌더링된 HTML 덱으로, 확인된 기본 출력 디렉터리에 deck-{slug}.html로 작성되며, 충돌 시 -2, -3 등이 뒤에 추가됩니다.
  • 분할된 슬라이드를 담은 중간 JSON 파일과, 이후 노트가 첨부된 슬라이드를 담은 JSON 파일.
  • 인쇄용 스타일시트를 통해 브라우저에서 인쇄하여 생성되는, 페이지당 한 슬라이드씩 담긴 PDF.
예시 프롬프트 보기 ↗

작동 방식

  1. 01
    덱을 순서가 있는 슬라이드로 분할하기

    slide_splitter.py는 원본 마크다운을 읽고 --- HR 라인이나 H1 헤딩을 기준으로 분할하며, 기본적으로 경계 스타일을 자동으로 감지하여 순서가 있는 슬라이드 목록을 작성합니다.

  2. 02
    슬라이드별 발표자 노트 첨부하기

    presenter_notes_parser.py는 각 슬라이드에서 노트 블록을 스캔하여 해당 슬라이드에 첨부하므로, 발표자 모드가 오른쪽 패널에 표시할 내용을 갖게 됩니다.

  3. 03
    단일 파일 HTML 덱 렌더링하기

    deck_html_renderer.py는 슬라이드와 디자인 시스템 토큰을 결합하여 덱을 생성하며, 명령줄에서 제목과 출력 경로를 인자로 받습니다.

  4. 04
    디자인 시스템 토큰 적용하기

    디자인 시스템에서 열두 개의 브랜드 CSS 커스텀 속성이 제공되며, design_style은 슬라이드 레이아웃의 밀도를 변경합니다.

  5. 05
    덱이 아닌 입력은 거부합니다

    입력에 명확한 슬라이드 경계가 없거나, 슬라이드가 한 장으로 귀결되거나, --strict-notes 옵션에서 노트 커버리지 게이트를 통과하지 못하면 이 스킬은 변환 대신 종료합니다.

02 적합성 확인

md-slides 스킬 사용 시기

이러한 종류의 PPT 및 슬라이드 덱 작업이 필요할 때 Claude Code 또는 Codex에서 md-slides 스킬을 사용하십시오. 아래의 적합성 및 제한 사항은 스킬 자체 파일에서 가져왔습니다.

적합한 경우

  • 오케스트레이터가 입력을 SLIDES로 분류하여 여기로 라우팅했습니다.
  • 누군가가 슬래시 명령으로 마크다운 파일에 대해 이 스킬을 직접 호출합니다.
  • 마크다운에 이미 --- HR 라인이 3개 이상 있거나, 본문이 짧은 H1 제목이 5개 이상 있습니다.
  • 덱이 실시간으로 발표될 예정이며, 이는 발표자 노트가 중요하고 자율 읽기에서는 선택적이 되는 경우입니다.

한계 인지하기

  • 입력은 덱이 아니라 장문 스펙이므로 md-document로 가야 합니다.
  • 입력은 코드 리뷰이므로 md-review에 속합니다.
  • 이것은 그래픽 디자인 도구가 아닙니다: Keynote와 PowerPoint가 그 영역을 담당하며, 이 스킬은 브라우저에서 발표되는 마크다운 기반 덱을 다룹니다.

제공할 사항

  • 마크다운 덱 파일그 경로는 --input과 함께 slide_splitter.py로 전달되고, 분할 결과는 --output을 통해 JSON 파일로 기록됩니다.
  • 경계 스타일슬라이드는 --- HR 경계나 H1 제목 중 하나로 구분 가능해야 하며, 그래야 스플리터가 자를 지점을 찾을 수 있습니다.
  • 선택적 발표자 노트노트는 슬라이드 내부의 HTML 주석 블록 형태로 제공되며, 파이프라인의 두 번째 단계에서 파싱되어 각 슬라이드에 첨부됩니다.

03 스킬 내부

md-slides 스킬이 Claude Code와 Codex에 부여하는 규칙

SKILL.md가 에이전트에게 설정하는 8가지 구체적인 지시, 기본값, 제한 — 결과를 바꾸는 파일의 부분입니다.

  1. 경계 요구 사항

    자동 모드에서는 원본에 최소 3개의 HR 라인 또는 최소 5개의 H1 제목이 있어야 하며, 둘 다 없으면 스킬은 거부하고 입력은 대신 md-document로 가야 합니다.

  2. 단일 슬라이드 출력 금지

    한 장으로 렌더링되는 덱은 덱이 아닌 포스터로 취급되어 종료 코드 5로 거부됩니다.

  3. 최소 100줄의 소스

    100줄 미만의 입력은 거부되며, 이는 모든 컨버터에 적용되는 동일한 Shihipar 기준입니다.

  4. 온보딩 게이트

    이 스킬은 온보딩 없이는 실행을 거부하며, 이는 모든 컨버터가 사용하는 동일한 게이트입니다.

  5. 엄격한 노트 커버리지

    --strict-notes 옵션을 사용하면 슬라이드의 50% 미만이 노트를 포함한 덱은 발표자 모드용으로 설정되지 않았다는 이유로 거부되며, 이 거부는 종료 코드 7로 처리됩니다.

  6. 슬라이드가 너무 길면 경고합니다

    40줄이 넘는 소스는 신호 대 잡음 비율에 대한 완화된 경고를 발생시킵니다. 덱은 여전히 렌더링되지만 줄 수가 표시됩니다.

  7. Output를 단일 파일로 유지

    모든 CSS와 JS는 인라인 처리되며, 유일한 외부 리소스는 Google Fonts CSS입니다. Prism.js는 기본으로 번들되지 않고 --syntax를 통해 선택적으로 사용합니다.

  8. 프레임워크 런타임 없음

    덱은 순수 JS와 키보드 이벤트 핸들러만 사용하며, React, Vue, Svelte 런타임은 포함되지 않습니다.

04 활용하기

Claude Code 또는 Codex에 md-slides 설치

npx skills add 명령 한 번 실행 후, 에이전트에서 첫 번째 작업을 수행하고 결과 체크리스트를 확인합니다.

Claude Code, Codex 또는 귀하의 에이전트에 md-slides 추가

프로젝트에서 실행합니다. 설치 프로그램이 어떤 에이전트에 추가할지 묻습니다.

Terminal
npx skills add https://github.com/alirezarezvani/claude-skills --skill md-slides

markdown-html/skills/md-slides/SKILL.md에 대한 일반적인 skills CLI 형식입니다. 저장소에서 자체 경로를 문서화할 수 있습니다.

스킬에 첫 PPT 및 슬라이드 덱 작업 제공

스킬 자체의 용어로 작성되었습니다. 대괄호 부분은 각자의 자료로 교체합니다.

Starter prompt
Convert [deck.md] into a presentation. It uses --- HR boundaries for slides and each slide has a <!-- notes: ... --> block. Title it "[Talk title]" and run it with --strict-notes, since it will be presented live rather than read on its own. Write the result to [output/deck.html].

출처: 스킬 자체의 용어로 SKILL.md에서 작성했습니다.

첫 번째 결과 확인

SKILL.md 자체가 올바른 결과의 모습으로 제시하는 내용:

  • 브라우저에서 덱을 열고 키를 눌러보십시오: 방향키, Space, PgDn은 다음으로 진행하고, PgUp은 뒤로 가며, Home과 End는 이동하고, P는 발표자 모드를 전환하며, Esc는 종료합니다.
  • 딥 링크를 테스트하십시오: #3은 3번 슬라이드로 이동해야 하며, 브라우저의 뒤로/앞으로 이동은 슬라이드를 따라 움직여야 하고, 공유된 deck.html#5는 5번 슬라이드에서 바로 열려야 합니다.
  • 우측 하단의 슬라이드 카운터가 "3 / 12"와 같이 표시되는지 덱 길이와 대조하여 확인하십시오.
  • 모션 축소를 요청한 사용자에게 애니메이션이 제거되도록 reduced-motion 미디어 쿼리가 준수되는지 확인하십시오.

OpenDesign에서 md-slides를 SKILL.md 링크에서 가져오십시오: Plugins → Add → Skill → Import from link, 그런 다음 상단 바에서 선택합니다.

OpenDesign 다운로드빠른 시작 가이드 읽기

05 오픈 소스, 추적 가능

출처, 라이선스 및 검증

이 페이지의 사실이 어디에서 왔으며 언제 마지막으로 확인되었는지 안내합니다.

Author
Alireza Rezvani
Repository
github.com/alirezarezvani/claude-skills 브랜치 main
스킬 파일
markdown-html/skills/md-slides/SKILL.md 검증 시 기록된 콘텐츠 체크섬; 커밋 19392f7
License
MIT LICENSE에서.
리포지토리 스타
25,934 이 카탈로그에서 5개의 스킬을 포함하는 전체 alirezarezvani/claude-skills 리포지토리에 대해 2026-09-14에 촬영한 GitHub 스냅샷입니다. md-slides에 대한 평가나 사용 횟수가 아닙니다.
OpenDesign에서 검증됨
2026-09-14 소스 파일, 경로, 라이선스 텍스트 및 스타 수가 확인되었습니다. OpenDesign 메인에 번들로 포함되지 않음(2026-08-28 확인); 이 페이지에 실제 실행 기록이 없습니다.

SKILL.md 내부

  1. 호출 시점라우팅 증상과 어떤 입력을 거부하거나 다른 곳으로 보내야 하는지에 대한 내용입니다.
  2. 파이프라인덱을 분리하고, 노트를 파싱하고, 렌더링하는 세 가지 명령입니다.
  3. HTML에 포함되는 것내비게이션, 딥 링크, 발표자 모드, 프린트 스타일시트, 토큰, 파서 재사용입니다.
  4. 엄격한 규칙거부 기준, 완화된 경고, 단일 파일 출력 제약입니다.
  5. 강제 질문 목록(Matt Pocock grill discipline)소스 파일을 변환하기 전에 확정해야 할 다섯 가지 질문입니다.
  6. 구별되는 점md-document, md-review, 랜딩 페이지, Keynote와 어떻게 다른지에 대한 내용입니다.
  7. 출력 산출물출력 경로 해석과 충돌 접미사 규칙입니다.
  8. 참고 자료덱 규칙의 근거가 되는 출처와 표준입니다.
스킬 자체 설명
"Markdown 덱(`---` HR 경계 또는 `# ` H1 제목으로 구분된 슬라이드, 선택적 `<!-- notes: ... -->` 발표자 노트 블록 포함)을 화살표 키 / space / PgDn / PgUp / Home / End / P / Esc 키보드 네비게이션, 발표자 모드(현재 슬라이드 + 발표자 노트 + 시계 + 다음 슬라이드 미리보기 분할 보기), URL 해시 딥 링킹, PDF 내보내기를 위한 `@media print` 페이지별 슬라이드가 있는 단일 파일 HTML 프레젠테이션으로 변환합니다. markdown-html-orchestrator가 입력을 SLIDES로 분류하거나 /cs:md-slides를 통해 직접 호출될 때 작동합니다. 슬라이드 본문 렌더링을 위해 md-document의 Markdown 파서를 재사용하고 config_loader.py를 통해 design-system 토큰을 읽습니다. 입력에 명확한 슬라이드 경계가 없거나, 1개 슬라이드 덱을 생성하거나, `--strict-notes`가 켜져 있고 노트 커버리지가 50% 미만인 경우 거부합니다. orchestrator 라우팅 후 사용합니다."

SKILL.md의 프런트 매터 설명입니다. 전체 파일은 약 6,506자입니다. GitHub에서 전체 파일 읽기.

06 설치하기 전에

md-slides 스킬에 대한 질문

이 답변은 2026-09-14 기준으로 확인한 SKILL.md 내용을 근거로 하며, 실행 기록을 바탕으로 한 것이 아닙니다.

어떤 코딩 에이전트가 이 스킬을 실행할 수 있습니까?

이 파일은 claude-code, codex-cli, cursor, antigravity, opencode, gemini-cli를 호환 도구로 나열하고 있으며, markdown-html-orchestrator가 입력을 SLIDES로 분류할 때도 트리거될 수 있습니다.

마크다운에 명확한 슬라이드 경계가 없다면 어떻게 됩니까?

이 스킬은 추측하는 대신 거부하고 코드 6으로 종료합니다. 문서화된 다음 단계는 해당 파일을 md-document로 라우팅하는 것으로, 이는 개별 슬라이드가 아닌 하나의 연속된 문서를 처리합니다.

덱에서 PDF를 뽑아내려면 어떻게 해야 합니까?

인쇄 스타일시트를 사용합니다. 브라우저에서 인쇄하면 슬라이드 하나당 한 페이지로 구성된 PDF가 생성되므로, 별도의 도구 없이 내보낼 수 있습니다.

MD Slides

실제 PPT 및 슬라이드 덱 작업에서 md-slides를 실행합니다.

OpenDesign을 다운로드하고, SKILL.md 링크에서 md-slides를 가져온 다음, 위의 프롬프트를 붙여넣고 결과 전에 계획을 읽으십시오.

OpenDesign 다운로드모든 스킬 보기
Terminal
npx skills add https://github.com/alirezarezvani/claude-skills --skill md-slides