メニュー
案件個別のスライド定義書（YAML）から、Youbleテンプレートと同じデザインのHTMLスライドデッキを生成するスキル。マスターのテーマCSS・スライド別マークアップを再利用し、1920x1080ステージのスタンドアロンHTMLを出力する。「定義書からスライドを作って」「HTMLデッキを生成して」等で使う。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
案件コンテキストと評価ルーブリックを読み込み、正解の型に沿って提案デッキの骨子を作り、proposal-evaluator サブエージェントの採点が合格(PASS)するまで「採点→修正」を自動で繰り返す。提案資料・提案デッキを新規に作る／作り直す／合格ラインまで仕上げたいときに使う。
提案内容を読み込み、マスター定義書（Youble_スライド定義書.yaml）に基づいて案件個別のスライド定義書を作成し、slide-def-reviewer サブエージェントのレビューが合格(PASS)するまで「レビュー→修正」を自動で繰り返すスキル。提案内容からスライド化の設計図（定義書）を作りたいときに使う。
| name | build-slide-deck |
| description | 案件個別のスライド定義書（YAML）から、Youbleテンプレートと同じデザインのHTMLスライドデッキを生成するスキル。マスターのテーマCSS・スライド別マークアップを再利用し、1920x1080ステージのスタンドアロンHTMLを出力する。「定義書からスライドを作って」「HTMLデッキを生成して」等で使う。 |
build-slide-definition で作った案件個別スライド定義書（YAML）を入力に、
マスターテンプレート（Youble）と同じ見た目のHTMLスライドデッキを生成するスキル。
デザイン/proposals/<案件名>_スライド定義書.yamlデザイン/templates/youble-theme.css（design system＋ビューア＋レイアウト）デザイン/templates/slide-markup/NN_*.html（17タイプの正確なHTML構造）デザイン/templates/Youble_スライド定義書.yamlデザイン/proposals/<案件名>_deck.html（スタンドアロン）<section class="slide"> で絶対配置。.slide を .slide-holder に入れ、JSで transform: scale() して画面幅にフィット。<i data-lucide="..."> ＋ lucide.createIcons()）。<em> で囲む（CSSで黄マーカー/黄文字になる）。1スライド1語のみ。<div class="foot">{提案者} / {宛先} 御中</div>、ページ番号 <div class="page">NN</div>。fmt（FORMAT注記）は社内用。出力デッキには含めない（削除する）。build-slide-definition で合格させるよう促す。youble-theme.css（そのまま <style> に埋め込む。スタンドアロン化のため）slide-markup/NN_*.html（各スライドタイプの正確な雛形。クラス構造を崩さない）定義書の slides[] を順に処理。各スライドの id に対応する slide-markup/ 雛形を選び、テキストを置換する。
accent_word を本文中で <em>…</em> に。figures の指示どおり図を作る（雛形のSVG/CSS構造を再利用）:
.bars/.bar(.hl) 雛形、注目1本だけ hl。.stp-track/.stp-col(.now)、先頭または現在地に now。.sol/.sol-col。 mock: .mock（.mock-row は4列グリッド固定 = 3データ＋tag）。.met/.m（数値が長い場合は mn に inline font-size で縮小）。.vo/.vo-card。 table: .cm-tbl/.tr。 plan_columns: .pr/.pr-col(.feat)。.src で配置。fmt注記は出力しない。<!DOCTYPE html><html lang="ja"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>{案件名} — 提案デッキ</title>
<style>/* youble-theme.css の中身をそのまま */</style>
</head><body>
<div class="deck">
<div class="slide-holder"><section class="slide" ...>…</section></div>
…（全スライド）
</div>
<script src="https://unpkg.com/lucide@latest"></script>
<script>
// 各 slide-holder の高さと内側 .slide の scale を画面幅に合わせる
function fit(){document.querySelectorAll('.slide-holder').forEach(h=>{
const s=h.clientWidth/1920; const sl=h.querySelector('.slide');
sl.style.transform='scale('+s+')'; h.style.height=(1080*s)+'px';});}
window.addEventListener('resize',fit); fit();
if(window.lucide) lucide.createIcons();
</script>
</body></html>