本文へ移動
cccskills
無料GitHub で公開

slides

Create and edit presentation slide decks (`.pptx`) with PptxGenJS, bundled layout helpers, and render/validation utilities. Use when tasks involve building a new PowerPoint deck, recreating slides from screenshots/PDFs/reference decks, modifying slide content while preserving editable output, adding charts/diagrams/visuals, or diagnosing layout issues such as overflow, overlaps, and font substitution.

インストール方法を見る

含まれるファイル(17)

  • SKILL.md4.5 KB
  • assets/pptxgenjs_helpers/code.js2.2 KB
  • assets/pptxgenjs_helpers/image.js9.0 KB
  • assets/pptxgenjs_helpers/index.js697 B
  • assets/pptxgenjs_helpers/latex.js1.8 KB
  • assets/pptxgenjs_helpers/layout_builders.js10.6 KB
  • assets/pptxgenjs_helpers/layout.js22.5 KB
  • assets/pptxgenjs_helpers/svg.js941 B
  • assets/pptxgenjs_helpers/text.js26.6 KB
  • assets/pptxgenjs_helpers/util.js373 B
  • LICENSE.txt11.3 KB
  • references/pptxgenjs-helpers.md3.0 KB
  • scripts/create_montage.py10.1 KB
  • scripts/detect_font.py34.0 KB
  • scripts/ensure_raster_image.py6.2 KB
  • scripts/render_slides.py9.3 KB
  • scripts/slides_test.py6.3 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Slides

Overview

Use PptxGenJS for slide authoring. Do not use python-pptx for deck generation unless the task is inspection-only; keep editable output in JavaScript and deliver both the .pptx and the source .js.

Keep work in a task-local directory. Only copy final artifacts to the requested destination after rendering and validation pass.

Bundled Resources

  • assets/pptxgenjs_helpers/: Copy this folder into the deck workspace and import it locally instead of reimplementing helper logic.
  • scripts/render_slides.py: Rasterize a .pptx or .pdf to per-slide PNGs.
  • scripts/slides_test.py: Detect content that overflows the slide canvas.
  • scripts/create_montage.py: Build a contact-sheet style montage of rendered slides.
  • scripts/detect_font.py: Report missing or substituted fonts as LibreOffice resolves them.
  • scripts/ensure_raster_image.py: Convert SVG/EMF/HEIC/PDF-like assets into PNGs for quick inspection.
  • references/pptxgenjs-helpers.md: Load only when you need API details or dependency notes.

Workflow

  1. Inspect the request and determine whether you are creating a new deck, recreating an existing deck, or editing one.
  2. Set the slide size up front. Default to 16:9 (LAYOUT_WIDE) unless the source material clearly uses another aspect ratio.
  3. Copy assets/pptxgenjs_helpers/ into the working directory and import the helpers from there.
  4. Build the deck in JavaScript with an explicit theme font, stable spacing, and editable PowerPoint-native elements when practical.
  5. Run the bundled scripts from this skill directory or copy the needed ones into the task workspace. Render the result with render_slides.py, review the PNGs, and fix layout issues before delivery.
  6. Run slides_test.py for overflow checks when slide edges are tight or the deck is dense.
  7. Deliver the .pptx, the authoring .js, and any generated assets that are required to rebuild the deck.

Authoring Rules

  • Set theme fonts explicitly. Do not rely on PowerPoint defaults if typography matters.
  • Use autoFontSize, calcTextBox, and related helpers to size text boxes; do not use PptxGenJS fit or autoFit.
  • Use bullet options, not literal • characters.
  • Use imageSizingCrop or imageSizingContain instead of PptxGenJS built-in image sizing.
  • Use latexToSvgDataUri() for equations and codeToRuns() for syntax-highlighted code blocks.
  • Prefer native PowerPoint charts for simple bar/line/pie/histogram style visuals so reviewers can edit them later.
  • For charts or diagrams that PptxGenJS cannot express well, render SVG externally and place the SVG in the slide.
  • Include both warnIfSlideHasOverlaps(slide, pptx) and warnIfSlideElementsOutOfBounds(slide, pptx) in the submitted JavaScript whenever you generate or substantially edit slides.
  • Fix all unintentional overlap and out-of-bounds warnings before delivering. If an overlap is intentional, leave a short code comment near the relevant element.

Recreate Or Edit Existing Slides

  • Render the source deck or reference PDF first so you can compare slide geometry visually.
  • Match the original aspect ratio before rebuilding layout.
  • Preserve editability where possible: text should stay text, and simple charts should stay native charts.
  • If a reference slide uses raster artwork, use ensure_raster_image.py to generate debug PNGs from vector or odd image formats before placing them.

Validation Commands

Examples below assume you copied the needed scripts into the working directory. If not, invoke the same script paths relative to this skill folder.

# Render slides to PNGs for review
python3 scripts/render_slides.py deck.pptx --output_dir rendered

# Build a montage for quick scanning
python3 scripts/create_montage.py --input_dir rendered --output_file montage.png

# Check for overflow beyond the original slide canvas
python3 scripts/slides_test.py deck.pptx

# Detect missing or substituted fonts
python3 scripts/detect_font.py deck.pptx --json

Load references/pptxgenjs-helpers.md if you need the helper API summary or dependency details.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

This skill should be used when the user asks for "ADHD output", "fewer output tokens", "short numbered steps", "limited working memory formatting", or explicitly invokes "adhd-output-style".

日本語の概要は準備中です。原文の説明を表示しています。

fcakyon/claude-codex-settings1,1732026年10月10日 更新

Agent-browser usage guide. Read this before running any agent-browser commands. Covers the snapshot-and-ref workflow, navigating pages, interacting with elements (click, fill, type, select), extracting text and data, taking screenshots, managing tabs, handling forms and auth, waiting for content, running multiple browser sessions in parallel, and troubleshooting common failures. Use when the user asks to interact with a website, fill a form, click something, extract data, take a screenshot, log into a site, test a web app, or automate any browser task.

日本語の概要は準備中です。原文の説明を表示しています。

fcakyon/claude-codex-settings1,1732026年10月10日 更新

Build, debug, or review Cloudflare Agents SDK applications using the agents package.

日本語の概要は準備中です。原文の説明を表示しています。

fcakyon/claude-codex-settings1,1732026年10月10日 更新

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

日本語の概要は準備中です。原文の説明を表示しています。

fcakyon/claude-codex-settings1,1732026年10月10日 更新

This skill should be used when user asks to "query Azure resources", "list storage accounts", "manage Key Vault secrets", "work with Cosmos DB", "check AKS clusters", "use Azure MCP", or interact with any Azure service.

日本語の概要は準備中です。原文の説明を表示しています。

fcakyon/claude-codex-settings1,1732026年10月10日 更新

basin

無料

Build and troubleshoot Cloudflare Basin analytics workflows with Basin Pipelines, Basin Catalog, and Basin SQL. Use for streaming data into R2 Iceberg tables, managing catalogs, or querying those tables; also use for requests using the former Data Platform, Pipelines, R2 Data Catalog, or R2 SQL names.

日本語の概要は準備中です。原文の説明を表示しています。

fcakyon/claude-codex-settings1,1732026年10月10日 更新

fcakyon のスキルをすべて見る

このスキルの問題を報告する