Hubbestaiskill.com

Home / All Skills / Design & Motion / deck-course-module

Design & Motion · nexu-io/html-anything

deck-course-module

Warm paper background + Playfair, persistent left-side learning objectives, includes MCQ self-assessment slide

L1 Basic · Source registration onlyV1 Commit-PinnedDual-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

Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.

1How It Works & Mechanism

Slide sequence is strictly structured as an instructional loop: Cover (module title + instructor) → Learning objectives → Main body (concept + examples) → MCQ self-assessment slide → Wrap-up + Next module preview. This is an instructional design framework, not merely a layout recommendation.

next/src/lib/templates/skills/deck-course-module/SKILL.md

- Cover (模块名 + 讲师)

frontmatter's scenario: education only handles picker grouping; the actual pedagogical logic is embedded in the body slide sequence.

The 'persistent left-side learning objectives' is implemented via a 260px + 1fr CSS grid two-column layout: every body slide duplicates the same <ul class="obj-list"> sidebar so it remains visible across slide transitions, rather than using a fixed-position floating overlay.

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}

Using 'duplicate per slide' instead of sticky ensures learning objectives appear on every page when exporting to PDF or taking slide-by-slide screenshots.

Learning objectives carry three-state semantics: default ○, completed ●, and current ▸ (toggled via ::before on .obj-list li / li.done / li.current), updating synchronously on each slide as the course advances.

next/src/lib/templates/skills/deck-course-module/example.html

.tpl-course-module .obj-list li.current::before{content:"▸";color:var(--accent-2)}

Encoding 'which objective is currently being covered' into sidebar icons tracks instructional progress better than slide numbers.

MCQ self-assessment slide = .mcq list + .mcq.correct highlighting the right answer, with the sidebar displaying 'Self-assess / You should get 3/3', and question prompts being immediately actionable single-choice questions (e.g., 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>

The self-assessment slide closes the pedagogical loop: question → options → explanation of the correct choice, all built purely in HTML/CSS.

The warm paper palette replaces all pure white: background #fbfaf6, card surface #f6f3ea, accents in teal #2d7d6e / amber #d88a3a, with titles set in Playfair Display 72px.

next/src/lib/templates/skills/deck-course-module/example.html

--bg:#fbfaf6;--bg-soft:#f4f1e8;--surface:#ffffff;--surface-2:#f6f3ea;

The design detail 'warm paper bg + Playfair serif' is materialized into concrete variables.

Fully equipped with handout components: Exercise dashed boxes (::before renders the '✎ Exercise' badge), dark brown background JetBrains Mono code blocks, concept-box cards, and slide-number footer with 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}

The example includes reusable instructional component classes, so the model does not need to reinvent handout elements every time.

Runtime execution is handled entirely by the host: the template directory contains zero executable files, the prompt is assembled by assemblePrompt and passed to the local agent CLI, and deck pagination is handled by the host deck viewer parsing <section class="slide">.

next/src/lib/deck.ts

The convention adopted by every deck skill

The skill itself is purely prompts + preview assets.

2Core Capabilities

01Course / workshop orientation: continuously displays learning objectives

02Persistent left-side learning objective list (with three-state progress indicators)

03MCQ self-assessment slide (options + correct answer explanation + score hint)

04Wrap-up slide: current session 'You can now…' + next module preview

05Exercise slide (dashed border + ✎ Exercise label)

06Concept / example slide (concept-box + callout cards)

07Global slide numbering / progress footer (data-current / data-total)

08Warm paper educational palette + Playfair headings

3External Dependencies

Kind	Dependency / Endpoint
network	Google Fonts（Playfair Display / Noto Sans SC / JetBrains Mono / Inter）
network	宿主共享指令声明的 Tailwind CDN（宿主侧要求，非本模板要求）

4Recommended Governance & Evidence

Suggested Controls for Safe Operation

For Agent Runtime

Can be auto-loaded

For Administrators

Register source and version

Evidence & Triggers (File Paths & Excerpts)

SKILL.md: Pure prompt instructions and rule text; no script execution or external impact.

Audit Notes: Evaluation target = the skill's own directory (next/src/lib/templates/skills/deck-course-module/): The directory contains only SKILL.md and example.html, with no executable files such as .sh/.py/.mjs/.ts, no package.json, and no installation scripts; it contains no code reading credentials, environment variables, or cookies, and no file-write instructions (HTML is output by the model in the response body, and writing to disk is handled by the host frontend). The <script> count in example is 0. SKILL.md is purely layout/content specifications and specifies no generation backends or APIs to access at runtime; per Batch 4 guidelines (artifact references are not evaluated; pure instruction templates are rated green), this template is classified as pure instruction. The only endpoint actually appearing in the directory is the following (part of artifact examples or their metadata, fetched by the browser, not initiated by skill code): fonts.googleapis.com (found in example.html). Host-side behaviors are not rated here and are documented under verdict.risks: the convert route spawns a local agent CLI and passes prompts via stdin (next/src/lib/agents/invoke.ts), shared instructions require CDN imports of Tailwind / Google Fonts (next/src/lib/templates/shared.ts), and the preview iframe uses sandbox="allow-scripts allow-same-origin" (next/src/components/template-picker.tsx).

5Second-Pass Verification

[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），与目录内容相符。

6Verdict & Scenarios

Ready to use as a complete single-session lecture handout skeleton

Learning objectives remain visible throughout with active progress tracking

Highly modularized components

Content-driven slide count backed by shared discipline

Best for: Ideal for university course modules, corporate training, workshop handouts, and programming tutorials (with code and exercises): scenarios requiring an 'objective — explanation — exercise — self-assessment' closed loop and distribution as PDF handouts to learners.

Not for: Not suitable for marketing or product launches (low-contrast warm paper, no animations); not suitable for pure data reporting (no chart slide archetypes, only cards and code); not suitable for events requiring speaker notes or step-by-step click animations (the example includes no JS; pagination is provided by the host).

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

Agents automatically download and verify mirrors from this JSON guide.

② Upstream GitHub

GitHub Repo ↗

Pinned to commit 553ed98c28.