메뉴
Playwrightでスライドをスクリーンショットし、PDFまたはPNG画像として出力する。html2canvasより確実で表示通りの出力が得られる。 PDF出力、画像出力、エクスポート、スライドをPDFにして、PNGで出力、export slides と言われたら必ずこのスキルを使う。 ワークフローの最終ステップとして使う。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
slide-plan.mdまたはユーザーの情報からdeck.jsonを生成する。44種類のレイアウトから最適なものを選び、コンテンツスキーマに従ってJSONを出力する。 スライド生成、deck.json作成、JSON生成、generate slides、プレゼンをJSONにして と言われたら必ずこのスキルを使う。 /slide-planner の出力を入力として受け取ることが多い。
大量の情報からプレゼンテーションの骨格を対話的に設計する。情報整理→核心の引き出し→取捨選択→構成設計→slide-plan.md出力の5ステップ。 プレゼン作りたい、スライド作りたい、資料まとめたい、発表準備したい、アウトライン作りたい、構成考えて、プレゼン企画、presentation plan と言われたら必ずこのスキルを使う。 素材やメモを渡された場合も、まずこのスキルで構成を設計してから /slide-generator でJSON化する。
データと「何を主張したいか」からChart.jsのチャート設定を生成する。主張に合わせた色のintentを自動選択し、deck.jsonに組み込む。 チャート作りたい、グラフ作りたい、データを可視化したい、chart作成、棒グラフ、円グラフ、折れ線グラフ と言われたら必ずこのスキルを使う。 データの見せ方について相談された場合もこのスキルが適切。
deck.jsonの画像・動画プレースホルダーから、画像生成AI用のプロンプトMDファイルを1件1ファイルで生成する。 画像プロンプト作って、image prompt、画像生成依頼、プレースホルダーの画像を用意して と言われたら必ずこのスキルを使う。 /validate-deck の後に実行するのが標準フロー。
deck.jsonの品質検証を行う。Playwrightで全ページスクリーンショットを撮影し、スキーマとの突き合わせで未使用・欠損フィールドを検出、修正提案する。 デッキ検証、JSON検証、バリデーション、スライドチェック、validate、check deck と言われたら必ずこのスキルを使う。 /slide-generator で deck.json を作った後に実行するのが標準フロー。
| 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 |
Playwrightで全スライドをスクリーンショットし、PDF or PNG として出力する。
deck.json, pdf）mkdir -p output/screenshots output/slidesoutput/slides.pdfoutput/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');
})();
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/ が起動していること