사용 가이드로 건너뛰기
md-slides작성자 Alireza Rezvani

MD Slides 스킬.

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

  • Presentations
  • HTML 슬라이드
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, 그런 다음 상단 바에서 선택합니다.

05 오픈 소스, 추적 가능

출처, 라이선스 및 검증

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

스킬 파일
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를 가져온 다음, 위의 프롬프트를 붙여넣고 결과 전에 계획을 읽으십시오.

터미널
npx skills add https://github.com/alirezarezvani/claude-skills --skill md-slides

OpenDesign 데스크톱

하나의 디자인 시스템으로 모든 결과물에 브랜드 일관성을

완전한 Vibe Design Workspace에서 하나의 브랜드 규칙을 웹사이트, 슬라이드, 인터랙티브 프로토타입, 대시보드, 이미지, HTML 영상에 적용하세요. 로컬 Codex, Claude Code, Cursor 등을 연결해 무료로 제작할 수 있습니다.

  • 웹, 슬라이드, 프로토타입, 대시보드, 이미지, 영상
  • 140개+ 디자인 시스템과 전체 템플릿·스킬 라이브러리
  • 로컬 Codex 및 21개+ 코딩 에이전트 연결 · 무료
무료 다운로드

macOS, Windows 지원