メニュー
Use this skill as reference material when creating or editing presentation slide decks.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/phodal/claude-code-codex-slide --skill slide-skillコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SOC 職業分類に基づく
SKILL.md を表示中
| name | slide-skill |
| description | Use this skill as reference material when creating or editing presentation slide decks. |
Use this skill as reference material when creating or editing presentation slide decks.
Contents of the slides/ skill folder:
container_tools/: Standalone python scripts for slides and relevant asset manipulation.artifact_tool/: API documentation and coding examples for the artifact tool library.pptxgenjs_helpers/: JavaScript helpers for PptxGenJS.slide_templates/: Optional slide templates to use; see slide_templates/Overview.png to get started.You MUST use PptxGenJS to implement the slide deck. Even when the user provides a template (or you use a built-in one), you MUST still generate the deck with PptxGenJS and adhere to the template’s visual style, typography, spacing, color palette, and layout conventions. The only exception is for trivial quick-edit requests, where you may use python-pptx or artifact_tool.
We also provide OpenAI-specific helper scripts under pptxgenjs_helpers/ to make it easier to use the upstream open-source library. Import and use these helpers; do not copy-paste their code into your deliverable source files.
Work in your own working directory while coding. Only copy artifacts to the requested locations after you finish building and validating the slides.
ensure_raster_image.py: Ensure images are rasterized; convert to PNG if needed; quick usage --input_files <img_path1> ....render_slides.py: render a PowerPoint file into a folder of PNG slides using default sizing; quick usage: . Output files are named , , ... in a directory with the same name as the input file.<input.pptx>slide-1.pngslide-2.pngcreate_montage.py: build a tiled montage from images in a directory (for viewing multiple image assets or rendered slides at once); quick usage: --input_dir <imgs_dir> --output_file <montage.png>. It supports most image formats with auto conversion under the hood.slides_test.py: detect content overflowing the original slide canvas; usage: <input.pptx>.Run each script with -h to view detailed usage info.
For high-resolution browser demo screenshots, use:
agent-browser --headed open http://127.0.0.1:3000 && agent-browser set viewport 2560 1440 && agent-browser wait --load networkidle && agent-browser screenshot --full artifacts/slide-demo.png
Version: 1.2.0 (from pptxgenjs_helpers/index.js)
slide.addText(textOrRuns, autoFontSize(textOrRuns, fontFace, { x, y, w, h, fontSize?, minFontSize?, maxFontSize?, mode? }))addText options for a given font size.
slide.addText(textOrRuns, calcTextBox(fontSizePt, { text: textOrRuns, w, fontFace, ...opts }))const h = calcTextBoxHeightSimple(fontSizePt, numLines, leading?, padding?)path or data (data URI, raw SVG string, or Buffer), and likewise for the APIs below that take pathOrData
slide.addImage({ path|data, ...imageSizingCrop(pathOrData, x, y, w, h) })slide.addImage({ path|data, ...imageSizingContain(pathOrData, x, y, w, h) })addImage.
slide.addImage({ data: svgToDataUri(svgString), x, y, w, h })slide.addImage({ data: latexToSvgDataUri(texString), x, y, w }){ width, height, aspectRatio, type } for a file path or data.
const { aspectRatio } = getImageDimensions(pathOrData)slide.addText(text, { shadow: safeOuterShadow(), ... })addText.
slide.addText(codeToRuns(code, lang), { x, y, w, h })warnIfSlideHasOverlaps(slide, pptx)warnIfSlideElementsOutOfBounds(slide, pptx)alignSlideElements(slide, indices, "left"|"right"|"top"|"bottom"|"hcenter"|"vcenter")distributeSlideElements(slide, indices, "horizontal"|"vertical")LAYOUT_WIDE) by default, unless a
different aspect ratio is explicitly required.
For example, if the user uploads a 4:3 slide image and asks you to recreate it, set the page size to 4:3 (not 16:9).
If you are not defining the page size, derive the
page size using getSlideDimensions. Prefer (7.5 / 9) * 16 over 13.33 for exact computation.addImage, avoid the built-in sizing argument due to known bugs.imageSizingCrop enlarges and center-crops to fit most images. Adjust crop parameters as needed if the subject is not centered in the frame.imageSizingContain keeps important images (e.g., plots or text) fully visible.addImage directly without the helpers.sizing field alongside them.flipH: true to addImage({ ..., flipH: true }).Strive for strong spatial consistency and balance. Use these helpers to detect and correct layout issues:
warnIfSlideHasOverlaps(slide, pptx): Detects overlapping elements; cropped images use the
viewport; diagonal-line false positives filtered; no “pass” logs.warnIfSlideElementsOutOfBounds(slide, pptx): Flags items outside the canvas; uses EMU→inch
conversion and throws if slide size is unknown.alignSlideElements(slide, indices, alignment): Precisely align selected elements
(left/right/top/bottom/centers) to enforce tidy columns/rows for shapes (text boxes, images,
icons).distributeSlideElements(slide, indices, direction): Evenly space elements horizontally or
vertically to maintain consistent gaps and rhythm across a row/column.You MUST fix ALL severe text overlap errors, ALL unintended overlap warnings, and ALL unintended elements out of bounds warnings before you deliver the slides!
file to verify that it downloaded successfully and is an image.Include [Sources] blocks in the speaker notes for every externally sourced asset and every externally sourced non-trivial claim.