ワンクリックでManusで任意のスキルを実行

export-pdf

スター1

フォーク0

更新日2026年3月19日 23:35

Playwrightでスライドをスクリーンショットし、PDFまたはPNG画像として出力する。html2canvasより確実で表示通りの出力が得られる。 PDF出力、画像出力、エクスポート、スライドをPDFにして、PNGで出力、export slides と言われたら必ずこのスキルを使う。ワークフローの最終ステップとして使う。

インストール

Codex または Claude でインストールこの Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。

Manusで実行

ソース

tomohiro-owada

tomohiro-owada/slide-template

GitHub リポジトリを開く Creator のリポジトリを見る

ダウンロード

Manusで実行

Export PDF / PNG

Playwrightで全スライドをスクリーンショットし、PDF or PNG として出力する。

手順

引数からファイル名とフォーマットを取得（デフォルト: deck.json, pdf）
mkdir -p output/screenshots output/slides
スクリーンショット撮影スクリプトを実行
pdf の場合: PDF結合スクリプトを実行 → output/slides.pdf
png の場合: output/screenshots/ のファイル一覧を報告

スクリーンショット撮影

const { chromium } = require('playwright');
const fs = require('fs');
const path = require('path');
const deckFile = process.argv[2] || 'deck.json';
fs.mkdirSync('output/screenshots', { recursive: true });
(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage({ viewport: { width: 1920, height: 1080 } });
  await page.goto(`http://localhost:5173/?deck=${deckFile}`);
  await page.waitForTimeout(3000);
  const items = await page.locator('div[style*="cursor: pointer"]').all();
  console.log(`Found ${items.length} slides`);
  for (let i = 0; i < items.length; i++) {
    await items[i].click();
    await page.waitForTimeout(500);
    const el = await page.locator('[data-slide-index]').first();
    const file = path.join('output/screenshots', `slide-${String(i+1).padStart(2,'0')}.png`);
    await el.screenshot({ path: file });
    console.log(`Captured: ${file}`);
  }
  await browser.close();
  console.log('Done');
})();

PDF結合

const { jsPDF } = require('jspdf');
const fs = require('fs');
const path = require('path');
const dir = 'output/screenshots';
const files = fs.readdirSync(dir).filter(f => f.endsWith('.png')).sort();
const pdf = new jsPDF({ orientation: 'landscape', unit: 'px', format: [1920, 1080] });
files.forEach((file, i) => {
  if (i > 0) pdf.addPage();
  const base64 = 'data:image/png;base64,' + fs.readFileSync(path.join(dir, file)).toString('base64');
  pdf.addImage(base64, 'PNG', 0, 0, 1920, 1080);
  console.log(`Added: ${file}`);
});
fs.mkdirSync('output/slides', { recursive: true });
fs.writeFileSync('output/slides/slides.pdf', Buffer.from(pdf.output('arraybuffer')));
console.log(`PDF: output/slides/slides.pdf (${files.length} pages)`);

前提

npm run dev で http://localhost:5173/ が起動していること

このリポジトリの他の Skills

同じリポジトリ

slide-generator

tomohiro-owada/slide-template

slide-plan.mdまたはユーザーの情報からdeck.jsonを生成する。44種類のレイアウトから最適なものを選び、コンテンツスキーマに従ってJSONを出力する。スライド生成、deck.json作成、JSON生成、generate slides、プレゼンをJSONにしてと言われたら必ずこのスキルを使う。 /slide-planner の出力を入力として受け取ることが多い。

2026-03-191

slide-planner

tomohiro-owada/slide-template

大量の情報からプレゼンテーションの骨格を対話的に設計する。情報整理→核心の引き出し→取捨選択→構成設計→slide-plan.md出力の5ステップ。プレゼン作りたい、スライド作りたい、資料まとめたい、発表準備したい、アウトライン作りたい、構成考えて、プレゼン企画、presentation plan と言われたら必ずこのスキルを使う。素材やメモを渡された場合も、まずこのスキルで構成を設計してから /slide-generator でJSON化する。

2026-03-191

chart-designer

tomohiro-owada/slide-template

データと「何を主張したいか」からChart.jsのチャート設定を生成する。主張に合わせた色のintentを自動選択し、deck.jsonに組み込む。チャート作りたい、グラフ作りたい、データを可視化したい、chart作成、棒グラフ、円グラフ、折れ線グラフと言われたら必ずこのスキルを使う。データの見せ方について相談された場合もこのスキルが適切。

2026-03-191

generate-image-prompts

tomohiro-owada/slide-template

deck.jsonの画像・動画プレースホルダーから、画像生成AI用のプロンプトMDファイルを1件1ファイルで生成する。画像プロンプト作って、image prompt、画像生成依頼、プレースホルダーの画像を用意してと言われたら必ずこのスキルを使う。 /validate-deck の後に実行するのが標準フロー。

2026-03-191

validate-deck

tomohiro-owada/slide-template

deck.jsonの品質検証を行う。Playwrightで全ページスクリーンショットを撮影し、スキーマとの突き合わせで未使用・欠損フィールドを検出、修正提案する。デッキ検証、JSON検証、バリデーション、スライドチェック、validate、check deck と言われたら必ずこのスキルを使う。 /slide-generator で deck.json を作った後に実行するのが標準フロー。

2026-03-191

name	export-pdf
description	Playwrightでスライドをスクリーンショットし、PDFまたはPNG画像として出力する。html2canvasより確実で表示通りの出力が得られる。 PDF出力、画像出力、エクスポート、スライドをPDFにして、PNGで出力、export slides と言われたら必ずこのスキルを使う。ワークフローの最終ステップとして使う。
argument-hint	[ファイル名（省略時: deck.json）] [pdf\|png（省略時: pdf）]
disable-model-invocation	true
allowed-tools	Bash(node ), Bash(mkdir ), Read

Export PDF / PNG

Playwrightで全スライドをスクリーンショットし、PDF or PNG として出力する。

手順

引数からファイル名とフォーマットを取得（デフォルト: deck.json, pdf）
mkdir -p output/screenshots output/slides
スクリーンショット撮影スクリプトを実行
pdf の場合: PDF結合スクリプトを実行 → output/slides.pdf
png の場合: output/screenshots/ のファイル一覧を報告

スクリーンショット撮影

const { chromium } = require('playwright');
const fs = require('fs');
const path = require('path');
const deckFile = process.argv[2] || 'deck.json';
fs.mkdirSync('output/screenshots', { recursive: true });
(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage({ viewport: { width: 1920, height: 1080 } });
  await page.goto(`http://localhost:5173/?deck=${deckFile}`);
  await page.waitForTimeout(3000);
  const items = await page.locator('div[style*="cursor: pointer"]').all();
  console.log(`Found ${items.length} slides`);
  for (let i = 0; i < items.length; i++) {
    await items[i].click();
    await page.waitForTimeout(500);
    const el = await page.locator('[data-slide-index]').first();
    const file = path.join('output/screenshots', `slide-${String(i+1).padStart(2,'0')}.png`);
    await el.screenshot({ path: file });
    console.log(`Captured: ${file}`);
  }
  await browser.close();
  console.log('Done');
})();

PDF結合

const { jsPDF } = require('jspdf');
const fs = require('fs');
const path = require('path');
const dir = 'output/screenshots';
const files = fs.readdirSync(dir).filter(f => f.endsWith('.png')).sort();
const pdf = new jsPDF({ orientation: 'landscape', unit: 'px', format: [1920, 1080] });
files.forEach((file, i) => {
  if (i > 0) pdf.addPage();
  const base64 = 'data:image/png;base64,' + fs.readFileSync(path.join(dir, file)).toString('base64');
  pdf.addImage(base64, 'PNG', 0, 0, 1920, 1080);
  console.log(`Added: ${file}`);
});
fs.mkdirSync('output/slides', { recursive: true });
fs.writeFileSync('output/slides/slides.pdf', Buffer.from(pdf.output('arraybuffer')));
console.log(`PDF: output/slides/slides.pdf (${files.length} pages)`);

前提

npm run dev で http://localhost:5173/ が起動していること