首页 / 全部技能 / 设计 / deck-course-module
设计 · 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实现原理 · 为什么它能做到

页序被写死为教学闭环:Cover(模块名 + 讲师)→ Learning objectives → 正文(concept + 例子)→ MCQ 自测页 → Wrap-up + 下一模块预告。这是教学设计骨架,不是排版建议。

next/src/lib/templates/skills/deck-course-module/SKILL.md
- Cover (模块名 + 讲师)
frontmatter 的 scenario: education 只负责 picker 分组;真正的教学逻辑写在正文页序里

「左侧学习目标常驻」的实现是 260px + 1fr 的 CSS grid 双栏:每张正文页都重复同一份 <ul class="obj-list"> 侧栏,随翻页持续可见,而不是固定定位的浮层。

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 / 逐页截图时每页都带学习目标

学习目标带三态语义:默认 ○、已完成 ●、当前 ▸(由 .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}
示例自带可复用的教学组件类,模型不必每次重新发明讲义零件

运行时同样由宿主承担:模板目录零可执行文件,prompt 由 assemblePrompt 拼装后交本地 agent CLI,deck 分页由宿主 deck viewer 拆 <section class="slide">。

next/src/lib/deck.ts
The convention adopted by every deck skill
skill 本体只是 prompt + 预览素材

2核心能力

01课程 / workshop 定位:持续显示学习目标
02左侧常驻学习目标列表(含三态进度标记)
03MCQ 自测页(选项 + 正确项解释 + 分数提示)
04Wrap-up 页:本轮「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: 纯提示词指令与规则文本,无脚本执行与外部影响
审计说明: 。判级对象=skill 自身目录(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 是纯版式 / 内容规范,未点名任何运行时要访问的生成后端或接口;按批4 口径(产物引用不判级、纯指令模板判 green),本模板属纯指令型。目录内实际出现的端点仅以下(均属产物示例或其元数据,由浏览器端拉取,非 skill 代码发起):fonts.googleapis.com(见于 example.html)。宿主侧行为不判档,另记于 verdict.risks:convert 路由 spawn 本地 agent CLI 并以 stdin 传 prompt(next/src/lib/agents/invoke.ts)、共享指令要求 CDN 引入 Tailwind / Google Fonts(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结论

  • 可直接当一节课的讲义骨架
  • 学习目标全程可见且带进度
  • 组件化程度高
  • 内容驱动页数有共享纪律兜底
  • 适合: 适合高校课程模块、企业内训、workshop 讲义、编程教学(含代码与练习):需要「目标—讲解—练习—自测」闭环且要能发 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.