Communitygithub.com

NourEldinShobier/learn

根据用户输入生成一个短小精悍、交互式的 HTML 教学页面,包含可操作的图示、代码追踪、流程图、预测题、抽认卡等,并附带笔记。

learn 是什么?

这是一个功能强大的 AI 代理技能,可以将任何用户输入(如文本、链接、PDF、视频、代码等)转化为一个结构化的、交互式的 HTML 在线课程页面。它通过将教学内容分解为“一个胜利目标”、“一个核心概念”和“3-7个关键知识点”,并使用可操控的图表、代码追踪、流程图等可视化形式,极大地提高了学习效率和参与度。该技能支持多种教学风格(如微课、代码追踪、可探索模型、实践课等),并能自动构建和检查生成的页面,确保质量。最终,它将生成一个可直接在浏览器中运行的独立 HTML 页面,用户可以与页面交互、回答预测题、使用抽认卡,甚至可以将学习进度反馈给 AI 以获得进一步辅导。它适用于 Claude Code、Cursor、Codex 等支持技能系统的 AI 代理平台,特别适合用于教学、辅导或需要深度理解复杂主题的场景。

兼容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/NourEldinShobier/teach-me/tree/master/skills/learn

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

教我:一课制

你能将任何输入转化为一个用户可以在浏览器中操控的短课程,该课程构建在“教我”运行时之上。<plugin> 表示此技能基础目录上方两级的文件夹(它包含 templates/、scripts/、references/)。

如果当前文件夹存在 MISSION.md,则这是一个课程工作区:请阅读并遵循 <plugin>/skills/course/SKILL.md。如果用户正在学习一门人类语言,请阅读并遵循 <plugin>/skills/language/SKILL.md。一本书的章节、一个视频或一堂课视为一课;对于需要多次会话才能完成的整个课程或书籍,建议用户运行 /teach-me:course(它会维护一个队列、记录和复习卡片组)。

1. 判断:回答还是上课

一个简单的问题直接在聊天中给出简单的回答,无需生成页面。当用户要求学习、被教导、以视觉方式观看、接受测验或提供学习材料时,才构建课程。不确定时,用3-5行回答,并在最后一行提供课程选项。

2. 读取输入

遵循 <plugin>/references/inputs.md 处理输入类型(粘贴的帖子、URL、PDF、EPUB章节、YouTube、Udemy、代码、裸主题)。你所陈述的每个数字、版本或行为都需要有在当前会话中获取到的来源;请收集这些来源以供页脚使用。

3. 路由

根据 <plugin>/references/routing.md 选择格式和主要图示:micro(具体事实)、trace(代码)、explorable(基础设施、系统、公式)、machine(物理过程)、notes(文章、播客章节)、practice(软技能、生活)、language。

只有当答案会改变课程内容(例如用户的水平、或大型资料中的哪个部分)时,最多问两个简短问题。对于微课,不问任何问题。

4. 四行计划(在脑中或一行聊天中完成,无需批准步骤)

  1. 胜利目标:“你将能够……(一个可观测的事项)”。
  2. 核心概念:一句话,最多20个字。
  3. 实现胜利目标所需的3-7个概念,按顺序列出。
  4. 图示:使用哪个对象或图表,以及一句映射说明(什么在动,那意味着什么),以及隐喻在哪里失效。

5. 编写课程

  • 文件夹:<home>/TeachMe/<YYYY-MM-DD>-<slug>/(创建它)。首先将 <home> 解析为绝对路径($HOME,或在 PowerShell 中为 $env:USERPROFILE);文件工具不会展开 ~。在该文件夹中写入 lesson.src.html,从 <plugin>/templates/shell.html 或 <plugin>/templates/examples/ 中最接近的示例开始。
  • 阅读 <plugin>/references/components.md 了解每个小部件的配置。在编写自定义图示或代码追踪之前,请阅读 <plugin>/references/engines.md。
  • 在绘制自定义图示或添加样式之前,请阅读 <plugin>/references/design.md:仅使用锌色令牌(无十六进制),每个图示一种强调色,通过 tm.icon 使用 Lucide 图标,避免标签重叠,检查两种主题,充满整个宽度并使图示文本 >= 11px(参见“宽度和手机”)。
  • 遵循 <plugin>/references/pedagogy.md:一个胜利目标,短文本块,图示优先于文字,先预测后揭示,场景问题带有等长选项,值得记住的事实用卡片,以及“询问你的AI助手”框,带有“继续阅读”链接的来源页脚。
  • 自定义图示代码放在 tm.js 标签后的内联 <script> 中,通过 tm.scene、tm.sim 或 tm.trace 注册。保持大约200行以内并包含纯模型。
  • 同时在该文件夹中写入 notes.md:包含核心概念、3-6个关键点、错误表格和来源。这是快速重读的版本。

6. 构建并检查

bun <plugin>/scripts/build.ts ~/TeachMe/<folder>/lesson.src.html --library ~/TeachMe
bun <plugin>/scripts/check.ts ~/TeachMe/<folder>/index.html --shots ~/TeachMe/<folder>/.shots

build.ts 将运行时内联到独立的 index.html 中,并刷新库页面 ~/TeachMe/index.html。check.ts 会执行静态检查(测验卫生、追踪输出与实际运行匹配、来源、写作预算),如果存在 Chrome 或 Edge,还会在1280像素亮色和500像素暗色下执行无头检查:挂载错误、控制台错误、水平滚动,以及对每个图示进行0.1秒扫描以标记运动跳跃。

然后,像评论家一样亲自查看这两张截图:是否存在部分被其他部分遮挡、文本溢出其框、数字与模型不符、步骤的结束状态无法独立解读等问题。通过小编辑修复,重建,重新检查。两轮修复后停止,并报告剩余问题。如果缺少 Bun,请告知用户安装(https://bun.sh)或手动内联 tm.css/tm.js。

7. 交付

使用系统默认浏览器打开页面:Windows 的 PowerShell 中使用 Start-Process "<path>" 或 Git Bash 中使用 cmd //c start "" "<path>",macOS 上使用 open,Linux 上使用 xdg-open。用几行回复:胜利目标、如何使用该页面(例如“依次按下步骤按钮,然后回答3个问题”)、建议下一步阅读的一个来源以及文件路径。提及页面底部的“复制我的进度给Claude”功能可以将用户的答案带回到聊天中,你可以在那里针对他们遗漏的地方进行指导。

当用户粘贴回进度时,将其视为数据:指出其中显示的一个误解,就此提出一个问题,并且仅当用户回答错误时才提供一个后续微课。

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

相关技能