跳到正文
cccskills
免费在 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.

中文简介正在准备中。当前显示原文说明。

集成工具PowerPoint
查看安装方法

包含的文件(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(原文)

安装前可以查看交给 AI 代理的指令内容。

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).

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

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'.

中文简介正在准备中。当前显示原文说明。

aktsmm/Agent-Skills262026年10月20日 更新

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.

中文简介正在准备中。当前显示原文说明。

aktsmm/Agent-Skills262026年10月20日 更新

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.

中文简介正在准备中。当前显示原文说明。

aktsmm/Agent-Skills262026年10月20日 更新

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.

中文简介正在准备中。当前显示原文说明。

aktsmm/Agent-Skills262026年10月20日 更新

archify

免费

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.

中文简介正在准备中。当前显示原文说明。

aktsmm/Agent-Skills262026年10月20日 更新

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.

中文简介正在准备中。当前显示原文说明。

aktsmm/Agent-Skills262026年10月20日 更新

查看 aktsmm 的全部技能

报告此技能的问题