デザイン&モーション · nexu-io/html-anything

deck-course-module

暖かみのある紙質背景 + Playfair、左側に学習目標を常時表示、MCQ自己診断スライドを含む

L1 基本 · ソース登録のみV1 コミット固定Dual-pass Audit
Author nexu-ioGitHub nexu-io/html-anything ↗Stars 8827License Apache-2.0(仓库根 LICENSE = Apache License, Version 2.0;GitHub API license.spdx_id = Apache-2.0;模板目录内无独立 LICENSE 文件)Commit 553ed98c28
管理レベルは Skill の能力と推奨統制措置を示すものであり、品質や安全性の認証、利用可否の判定ではありません。使用の可否はユーザーおよび管理者が決定します。Agent 環境によって制約が異なるため、自動保護を仮定しないでください。第三者製 Skill の著作権は原著作者に帰属し、利用リスクは利用者が負います。

1仕組みと動作原理

スライド順序は教育的なクローズドループとして設計を固定:表紙(モジュール名 + 講師)→ 学習目標 → 本文(概念 + 具体例)→ MCQ自己診断スライド → ラップアップ + 次回予告。これは組版の推奨事項ではなく、インストラクショナルデザインの骨格です。

next/src/lib/templates/skills/deck-course-module/SKILL.md
- Cover (模块名 + 讲师)
frontmatter の scenario: education はピッカーのグループ分けのみを担当し、真の教育ロジックは本文のスライド順序に記述されています。

「左側に学習目標を常時表示」は 260px + 1fr の CSS grid 2カラム構成で実装:各本文スライドに同一の <ul class="obj-list"> サイドバーを複製配置することで、固定配置(fixed)のフローティング層ではなく、ページめくりに合わせて継続的に表示されます。

next/src/lib/templates/skills/deck-course-module/example.html
.tpl-course-module .slide{padding:64px 80px;background:var(--bg);display:grid;grid-template-columns:260px 1fr;gap:56px;align-content:start}
sticky ではなく「ページごとに複製」を採用することで、PDFエクスポートやページごとのスクリーンショット取得時にも各スライドに学習目標が確実に含まれます。

学習目標には3つの状態セマンティクスを付与:デフォルト ○、完了 ●、進行中 ▸(.obj-list li / li.done / li.current の ::before で切り替え)。講義の進行に合わせてスライドごとに同期して更新されます。

next/src/lib/templates/skills/deck-course-module/example.html
.tpl-course-module .obj-list li.current::before{content:"▸";color:var(--accent-2)}
「現在どの目標を解説しているか」をサイドバーの記号にエンコードすることで、ページ番号よりも講義の進捗を明確に把握できます。

MCQ自己診断スライド = .mcq リスト + .mcq.correct による正解の明示。サイドバーには「Self-assess / You should get 3/3」が同期され、設問はそのまま回答可能な単一選択形式(Which function will recurse forever? など)です。

next/src/lib/templates/skills/deck-course-module/example.html
<p class="dim" style="font-size:13px">You should get 3/3.</p>
自己診断スライドは教育的ループの締めくくりです:問題 → 選択肢 → 正解の解説が、すべて純粋な HTML/CSS のみで完結しています。

暖かみのある紙のカラーパレットにより純白を完全排除:背景 #fbfaf6、カード面 #f6f3ea、アクセントカラーにティール #2d7d6e / アンバー #d88a3a、タイトルには Playfair Display 72px を採用。

next/src/lib/templates/skills/deck-course-module/example.html
--bg:#fbfaf6;--bg-soft:#f4f1e8;--surface:#ffffff;--surface-2:#f6f3ea;
「warm paper bg + Playfair serif」というデザイン詳細が具体的な変数として落とし込まれています。

配布資料パーツを完備:Exercise 破線ボックス(::before で「✎ Exercise」バッジを出力)、ダークブラウン背景の JetBrains Mono コードブロック、concept-box カード、フッターの slide-number(data-current / data-total)。

next/src/lib/templates/skills/deck-course-module/example.html
.tpl-course-module .exercise::before{content:"✎ Exercise";display:block;font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--accent-2);margin-bottom:10px;text-transform:uppercase}
サンプルには再利用可能な教育向けコンポーネントクラスが含まれており、モデルが毎回パーツを再発明する必要がありません。

ランタイム実行も同様にホスト側が担当:テンプレートディレクトリ内に実行可能ファイルは皆無であり、プロンプトは assemblePrompt によって構築されローカルの agent CLI に渡され、スライドのページ分割はホスト側の deck viewer が <section class="slide"> を解析して行います。

next/src/lib/deck.ts
The convention adopted by every deck skill
スキル本体は純粋なプロンプトとプレビュー用アセットのみで構成されています。

2コア機能

01講義 / ワークショップ向けポジショニング:学習目標を継続的に表示
02左側に常駐する学習目標リスト(3状態の進捗マーカー付き)
03MCQ自己診断スライド(選択肢 + 正解解説 + スコア目標表示)
04ラップアップスライド:今回の「You can now…」+ 次回モジュール予告
05演習スライド(破線フレーム + ✎ Exercise ラベル)
06概念 / 具体例スライド(concept-box + callout カード)
07グローバルページ番号 / 進捗フッター(data-current / data-total)
08暖紙風の教育向けカラーパレット + Playfair 見出し

3外部依存関係

KindDependency / Endpoint
networkGoogle Fonts(Playfair Display / Noto Sans SC / JetBrains Mono / Inter)
network宿主共享指令声明的 Tailwind CDN(宿主侧要求,非本模板要求)

4推奨統制措置と判定根拠

安全運用のための推奨統制措置
Agent 向け
自動ロード可能
管理者向け
ソースとバージョンの記録
判定根拠(ファイルパスと抜粋)
  • SKILL.md: 純粋なプロンプト指示およびルールテキストのみで構成され、スクリプト実行や外部への影響はありません。
監査ノート: 評価対象 = スキル自身のディレクトリ(next/src/lib/templates/skills/deck-course-module/):ディレクトリ内には SKILL.md と example.html のみが存在し、.sh/.py/.mjs/.ts などの実行可能ファイル、package.json、インストールスクリプトは一切含まれていません。クレデンシャル、環境変数、Cookie を読み取るコードやファイル書き込み命令も存在しません(HTML はモデルの応答本文として出力され、ディスクへの保存はホストのフロントエンドが担当)。example 内の <script> 数は 0 です。SKILL.md は純粋なレイアウト/コンテンツ仕様書であり、実行時にアクセスすべき生成バックエンドや API は指定されていません。第4バッチの判定基準(生成物の参照は評価対象外、純粋な指示テンプレートは green と判定)に基づき、本テンプレートは純粋な指示型に分類されます。ディレクトリ内に実際に現れるエンドポイントは以下のみです(すべて成果物のサンプルまたはそのメタデータに属し、ブラウザ側から取得されるもので、スキルコードが発起したものではありません):fonts.googleapis.com(example.html 内)。ホスト側の挙動はここでの判定対象外であり、verdict.risks に別途記録されています:convert ルートがローカル agent CLI を spawn して stdin 経由でプロンプトを渡す(next/src/lib/agents/invoke.ts)、共有指示が Tailwind / Google Fonts の CDN 読み込みを要求する(next/src/lib/templates/shared.ts)、プレビュー用 iframe が sandbox="allow-scripts allow-same-origin" を使用する(next/src/components/template-picker.tsx)。

5二重目の独立検証

  • [ok] 「左侧学习目标常驻」在示例中是否真的持续可见 — 5 张内容页(Objectives / Concept / Example / Exercise / Check)各带一份 <aside class="sidebar"> 与 <h5>Learning objectives</h5>;Cover 与 Summary 为整页(.slide.full)无侧栏——符合「持续显示」意图。
  • [ok] MCQ 自测页是否可判分 — 正确项带 .mcq.correct 且文案含「✓ Correct.」;侧栏同步把前 4 条标 done、第 5 条标 current。
  • [ok] SKILL.md 的「含 MCQ 自测页」是否与示例一致 — 示例第 6 页即 <p class="kicker">CHECK YOUR UNDERSTANDING</p> 的单选题页,claim 无夸大。
  • [ok] 目录内是否有脚本 / 网络调用 / 凭证读取 — 目录仅 SKILL.md + example.html;<script> 计数 0;无 fetch/XHR/env/写盘代码;无凭证读取。
  • [ok] SKILL.md 是否要求运行时外链 — SKILL.md 只声明字族(Playfair serif / warm paper bg)与页序,全文无 URL;字体 @import 属 example.html(产物示例)。
  • [ok] pin commit 与路径 — HEAD = 553ed98c283f9c0f489902d035416a972d6a9699;skill.path = next/src/lib/templates/skills/deck-course-module,含 SKILL.md。
  • [ok] README 收录一致性 — README deck 表列出 deck-course-module(Course module deck),与目录内容相符。

6結論

  • 1コマ分の講義資料の骨格としてそのまま利用可能
  • 学習目標が常時可視化され、進捗も一目で把握可能
  • 高いコンポーネント化レベル
  • 共有規律に裏打ちされたコンテンツ主導のページ構成
  • 最適な用途: 大学の講義モジュール、企業内研修、ワークショップ資料、プログラミング教育(コードや演習を含む):目標—解説—演習—自己診断のループを完結させ、受講生にPDFとして配布する必要があるシナリオに最適です。
    不向きな用途: マーケティングや新製品発表会には不向き(紙風の低コントラスト、アニメーションなし);純粋なデータレポートには不向き(グラフ用のスライドタイプがなく、カードとコードのみ);発表者ノートやクリックごとのアニメーションが必要な場面には不向き(サンプル内に JS はなく、ページめくりはホスト側が提供)。
    Install Agent-Ready
    ① Verified Mirror 2026-09-15
    Option A · Direct DownloadDownload deck-course-module.tar.gz
    sha256: f859affcf97be929…
    Option B · Copy Guide for Agent
    install.json
    Agent はこの JSON ガイドから自動的にダウンロードして検証します。
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit 553ed98c28.