Skip to content
cccskills
FreePublished on GitHub

html-pdf-slides

Make good-looking slide-style PDFs fast with HTML + headless Chrome instead of PowerPoint: a ready 1280x720 template (Microsoft-style cover / content slide / ending), a render script that outputs PDF + per-page PNG and detects overflow, and design rules for dense one-page slides. Use when asked to quickly create a PDF slide deck, one-page explainers, customer handouts, or "PowerPoint-less" slides, or to bundle cards/info into a branded PDF. Not for editing existing .pptx files or template-based PPTX generation.

The English summary is being prepared. Showing the original description.

aktsmm/Agent-Skills
Works withPowerPoint
See how to install

Files included (5)

  • SKILL.md3.1 KB
  • assets/deck-template.html3.7 KB
  • LICENSE.txt269 B
  • references/rendering-notes.md1.7 KB
  • scripts/render-deck.mjs3.0 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

HTML → PDF Slides

Write each slide as HTML, render with Chrome. You get precise layout, selectable text, live links, and no PowerPoint automation. Pitfalls and merge/font details: Rendering Notes.

When to Use

  • 「PDF でスライドをさっと作りたい」「1 枚で完結する解説ページ」「顧客向けに綺麗な PDF」
  • 元データ（JSON など）から同じ見た目のページを大量に作りたい
  • PPTX の編集は不要で、配布物は PDF（＋任意で PNG）でよい

Quick Start

  1. Copy assets/deck-template.html; keep one <section class="page"> per page (1280×720 px). Page kinds: cover, content (page slide), ending.
  2. Fill content. Content slides need data-key (for reports), a .ft footer, and use .card blocks so overflow can be measured.
  3. Render: node scripts/render-deck.mjs deck.html out (needs playwright-core + a Chrome/Edge; set CHROME_PATH if not auto-found). Output: out/<name>.pdf, out/<name>-pN.png, out/<name>-report.json. Exit code 1 = a slide overflows.
  4. Look at the PNGs (cover, a dense slide, ending) before reporting done.

Design Rules

  • One slide = one question and one takeaway; title states the claim, a one-line subtitle supports it.
  • Fixed 3-box info strip under the title for explainers: 誰に関係するか (bold the target) / 嬉しい点 / 対応の要否.
  • Fill the page with useful content in cards (what changes, how it works, limits, glossary); avoid empty bands. Keep body ≥ 12.5 px, preferably 14–16 px; when it does not fit, cut wording or split to a continuation page rather than shrinking further.
  • Palette: white field, brand blue accents, navy footer band; one accent colour per meaning (green good, red caution). Do not make every card equally loud.
  • Visible text is final copy: no internal-memo wording (未確認 / 記載なし / 要確認 / 推定). Confirmed → write; unconfirmable → omit.
  • Put IDs, categories and links in the footer; per-page creation dates and credits only on cover/ending.
  • Every link https://, escaped; cite official sources for facts.

Done Criteria

  • Render exits 0 with zero overflow, PNGs inspected, links clickable in the PDF, Japanese glyphs visible (view an image; text extraction alone can hide missing glyphs).

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

agentic-workflow-guide

Free

Design, review, and debug agent workflows, and decide when a request should use a prompt, instruction, skill, agent, or hook before escalating to multi-agent design. Use for .agent.md / .instructions.md / .prompt.md / AGENTS.md work, workflow architecture, orchestration planning, scheduled automation model allocation, or when agent workflows may be overkill. Triggers on 'agent workflow', 'create agent', 'automation models', 'ワークフロー設計', 'orchestrator'.

The English summary is being prepared. Showing the original description.

aktsmm/Agent-Skills26Updated Oct 18, 2026

ai-cli-benchmark

Free

Design, run, and review fair performance, token, and cost comparisons across GitHub Copilot CLI, Codex CLI, and direct model APIs. Use for AI CLI benchmark, Copilot vs Codex, prompt-cache diagnosis, cache read/write analysis, fresh-process latency measurement, token-cost comparison, or when a benchmark must separate provider caching from local CLI caches.

The English summary is being prepared. Showing the original description.

aktsmm/Agent-Skills26Updated Oct 18, 2026

analyze-copilot-sessions

Free

Analyze historical VS Code GitHub Copilot Chat sessions by model, reasoning effort, AIU, time, reliability, workflow behavior, and external quality evidence, or safely prune workspace-scoped local chat history by age. Use for session analysis, repeated-task retrospectives, model evaluation, cost/performance analysis, and old session cleanup.

The English summary is being prepared. Showing the original description.

aktsmm/Agent-Skills26Updated Oct 18, 2026

animated-infographic

Free

Create reproducible animated infographic GIFs from structured data or measured results, with audience-language labels, explicit timing semantics, representative-frame QA, and a static fallback. Use when asked for GIF生成, animated infographic, 動的インフォグラフィック, 結果が流れる図, animated benchmark, or a blog/SNS animation whose displayed metrics must remain traceable to source data.

The English summary is being prepared. Showing the original description.

aktsmm/Agent-Skills26Updated Oct 18, 2026

archify

Free

Create polished, validated architecture, workflow, sequence, data-flow, and lifecycle/state diagrams as explorable standalone HTML with inline SVG, dark/light themes, optional trace motion, and PNG/JPEG/WebP/SVG/WebM export. Accept plain-language requirements or pasted Mermaid flowchart, sequenceDiagram, and stateDiagram input; inspect repository evidence when the diagram must reflect real code. Use when the user asks to visualize system architecture, infrastructure, cloud/security/network topology, technical workflows, API call sequences, request lifecycles, data pipelines, ETL/ELT, data lineage, state machines, or to convert/beautify Mermaid. Also use for Archify, interactive or animated HTML diagrams, インタラクティブ図, 動く構成図. When an editable .drawio file is required, use the draw.io workflow instead and treat Archify HTML only as a supplement.

The English summary is being prepared. Showing the original description.

aktsmm/Agent-Skills26Updated Oct 18, 2026

ascii-banner

Free

Generate ASCII-art text banners for terminals, READMEs, and CLI startup messages. Use when a user asks for an ASCII banner, text art, バナー, アスキーアート, or a decorative header for a script/README.

The English summary is being prepared. Showing the original description.

aktsmm/Agent-Skills26Updated Oct 18, 2026

See all skills by aktsmm

Report a problem with this skill