본문으로 건너뛰기
cccskills
무료GitHub에 공개

export-as-pptx-editable

Convert an HTML slide deck into a PowerPoint file with editable text, shapes, and images. The skill handles font substitutions, imports speaker notes, and checks export warnings to help identify missing images or incorrectly captured slides.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

원문원문 설명 보기

Native text & shapes — editable in PowerPoint

연동 도구PowerPoint
설치 방법 보기

이럴 때 유용합니다

  • Convert HTML slides into an editable PowerPoint deck
  • Replace custom fonts before exporting
  • Include speaker notes in a PowerPoint file
  • Investigate missing images or duplicated slides after export

포함된 파일(1)

  • SKILL.md6.0 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

Export as PPTX (editable)

Export an HTML slide deck to a .pptx with native PowerPoint objects (editable text, shapes, images). One gen_pptx tool call does everything: capture, font handling, generation, download.

What you do

  1. Know the deck. You probably wrote it. If not, read_file the HTML to find: the slide selector, how to navigate (function name? class toggle?), what fonts it uses, whether there's a scaling wrapper.
  2. show_to_user the deck so it's in the user's preview.
  3. Call gen_pptx with the inputs below.
  4. Read the validation flags in the result and decide if you need to retry.

gen_pptx inputs

{
  "width": 1920, "height": 1080,   // CSS px — match the deck's slide size
  "slides": [                      // one entry per slide, in order
    { "showJs": "goToSlide(0)", "selector": ".slide.active" },
    { "showJs": "goToSlide(1)", "selector": ".slide.active" }
    // For decks where all slides are in DOM at once and you don't need to navigate:
    //   { "selector": ".slide:nth-child(1)" }, { "selector": ".slide:nth-child(2)" }
  ],
  "hideSelectors": [".nav", ".progress", "[data-omelette-chrome]", "[data-noncommentable]"],
  // If the deck wraps slides in a transform:scale() container, name it here.
  // gen_pptx clears the transform AND forces width/height onto this element.
  "resetTransformSelector": ".slide-container",
  // Font handling — pick ONE strategy based on the directive at the bottom.
  // Substitution happens BEFORE capture so layout reflows correctly.
  "googleFontImports": ["Poppins", "Lora"],
  "fontSwaps": [{ "from": "BrandSans", "to": "Poppins" }],
  // Or fontSwaps: [{from:"BrandSans", to:"Arial"}] for web-safe.
  // Or omit both to keep brand fonts as-is.
  "filename": "my-deck"
}

If — and only if — the user asked for Google Slides, also pass "offer_google_slides": true: the export dialog gains a 'Send to Google Slides' button, and the upload happens only if they click it.

slides[].showJs runs inside the iframe as a sync expression — don't await. If your deck's nav function is async, call it without await; the per-slide delay (default 600ms) covers the transition. Bump delay for decks with longer CSS transitions.

If the deck uses the <deck-stage> starter component

  • resetTransformSelector: "deck-stage" — the exporter sets the noscale attribute on it, which the component observes and responds to by dropping its shadow-DOM transform: scale(). You cannot reach the scaled canvas any other way.
  • slides[N].showJs: "document.querySelector('deck-stage').goTo(N)" — 0-indexed, so slide 1 is goTo(0).
  • slides[N].selector: "deck-stage > [data-deck-active]".
  • hideSelectors is unnecessary — the overlay and tap-zones live in shadow DOM and aren't captured.

Speaker notes

Read automatically from <script type="application/json" id="speaker-notes"> and attached by index. You don't pass them.

Validation flags

The result lists flags. These are warnings, not errors — read each message and decide if it's expected for THIS deck:

  • duplicate_adjacent / duplicate_majority — slides captured identically. Almost always means showJs didn't navigate. Check the function name, try a longer delay, or check if the deck uses 0-indexed vs 1-indexed slides.
  • slide_size_mismatch — captured rect doesn't match width/height. The selector is probably matching a wrapper, or you need a resetTransformSelector.
  • notes_uniform_nonempty — every speaker note is the same string. Likely a placeholder. Fine if intentional.
  • notes_count_mismatch — #speaker-notes length ≠ slides length. Notes attach by index so the tail will be wrong.
  • no_speaker_notes — deck has no #speaker-notes tag. Expected if there are no notes.
  • fonts_timeout — fonts.ready took >8s. Font URLs may be unreachable.
  • font_swap_failed — one or more fontSwaps targets never loaded (misspelled family, or Google Fonts doesn't serve it), so the deck was laid out with a fallback while the file names the swap font. Retry with a corrected or different family, or fall back to web-safe fonts. Whatever you do next, tell the user plainly which fonts couldn't be applied — e.g. "Heads up: Poppins couldn't be loaded during export, so the deck uses a stand-in font and text may wrap differently. Want me to try a different font?"
  • images_failed — images didn't decode before capture. Usually a 404 or CORS.
  • reset_selector_miss — your resetTransformSelector matched nothing.

If the flags look like real problems, fix the inputs and retry. If they're expected (deck genuinely has no notes, two slides really are identical), tell the user the download fired and move on.

Talking to the user about flags: these names and messages are internal diagnostics — do NOT relay them verbatim. If everything is expected, don't mention validation at all; just confirm the download. If something looks genuinely wrong, describe it in plain language without the flag identifier or technical specifics — e.g. "Uh oh, the speaker notes may not be exporting properly." rather than "I received the no_speaker_notes flag", or "A couple of slides may have captured identically — let me fix navigation and retry." rather than quoting duplicate_adjacent.

The page reloads automatically after capture — DOM mutations (hidden chrome, font swaps) are reverted.

Font strategy

Read the directive at the end of this prompt and translate it to inputs:

DirectiveInputs
brand fonts as-isomit googleFontImports and fontSwaps
web-safe substitutesfontSwaps: [{from:"EachCustomFont", to:"Arial"}] (or Georgia for serifs, Courier New for monospace)
Google Fonts substitutesgoogleFontImports: ["Poppins","Lora"] + fontSwaps: [{from:"EachCustomFont", to:"Poppins"}]

System fonts (Arial, Helvetica, Georgia, Times, Courier, sans-serif, etc.) — leave alone.

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

3d-object

무료

Create a 3D object with three.js, inspect it from every angle in an interactive viewer, and download it as OBJ + MTL or GLB for use in other 3D applications.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Create a 3D object and inspect it from every angle
  • Export a model for further editing in Blender
  • Review an object's silhouette and materials
asgeirtj/system_prompts_leaks7만2026년 10월 20일 업데이트

Maintain a private task list with deadlines, next steps, waiting parties, and blockers. Update progress and dependencies, merge duplicate items, and archive closed tasks so ongoing commitments stay clear and easy to follow.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Record tasks and commitments with deadlines
  • Track pending replies and reasons work cannot proceed
  • Update task dependencies when prerequisites are completed
asgeirtj/system_prompts_leaks7만2026년 10월 20일 업데이트

agents

무료

Coordinate a task from a verifiable goal through completion. Handle work directly or split independent tasks across separate agent sessions, track progress, verify results, and arrange pull request merging when included in the goal.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Split independent tasks across agents
  • Check progress across ongoing tasks
  • Resume a previously started project
asgeirtj/system_prompts_leaks7만2026년 10월 20일 업데이트

Create animated HTML pages with smooth scene transitions and playback controls. An editable timeline lets users adjust scene lengths and speeds, with fixed landscape or portrait layouts prepared for video export.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Create an animated product walkthrough
  • Explain a message through moving text and graphics
  • Build a portrait animation for video export
asgeirtj/system_prompts_leaks7만2026년 10월 20일 업데이트

Review synced Apple Health records, including steps, heart rate, sleep, and workouts. Retrieve daily summaries or detailed samples for a chosen period, and check sync status and missing data before interpreting the results.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Review daily steps and heart rate over time
  • Check sleep stages, duration, and awakenings
  • Review workout duration, distance, and calories
asgeirtj/system_prompts_leaks7만2026년 10월 20일 업데이트

Create and edit Word documents and templates, reorganize text, replace images, and work with tracked changes or comments. Apply proper headings and lists, then render every page to check its appearance before delivery.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Create a structured Word document
  • Reorganize content in an existing document
  • Replace images or text in a document
asgeirtj/system_prompts_leaks7만2026년 10월 20일 업데이트

asgeirtj의 스킬 모두 보기

이 스킬의 문제 신고