Interactive Math Lesson Creator

VerifiedCaution

Guided creation of interactive math problem explanations with voice narration and quizzes for elementary students.

Sby Skills Guide Bot
ContentBeginner
7/24/2026
Claude Code
#math-education#interactive-html#lesson-generation#text-to-speech#guided-workflow

Recommended for

Automated summary

Turns a math word problem into an interactive HTML explainer page for children, with voice narration, multiple-choice questions and animations.

Strengths

  • The user only supplies the problem text and child details; classification, solution steps and page structure are handled by the skill
  • Enforces a narration script (segments.json) that explains the reasoning behind each step, with an explicit framework for combinatorics problems
  • End-to-end tooling: guided info collection, three generated files (script, HTML content, config) and a build script
  • Interactive questions are well specified (3 options, 6-10 s countdown) and themes/config are adjustable through reference files

Limitations

  • Voice narration requires a MIMO_API_KEY and base URL in a .env file, otherwise the page will not work
  • Tightly coupled to Claude Code (AskUserQuestion tool, CLAUDE_SKILL_DIR) and not portable to other agents as-is
  • The detailed teaching framework focuses on combinatorics and output is in Chinese for elementary olympiad math
When to use it

Use it when an adult wants to quickly turn a math problem into an animated, interactive explanation tailored to one specific child.

When not to use it

Avoid it if you just need a written answer key, a multi-student course, or cannot set up the text-to-speech API key.

Security analysis

Caution
Quality score82/100

The skill is a content-generation workflow confined to creating local files and running a bundled build script via `uv run`. Nothing destructive, exfiltrating, or obfuscated appears in the instructions, and the tool grants are narrow. The only meaningful concerns are that the `uv run` build script's behavior is unaudited from the listing and that an API key is stored in a plaintext `.env`; both are ordinary for legitimate skill builds, so this warrants caution rather than a risky rating.

Findings
  • •Bash access is scoped to `mkdir *` and `uv run *`, but `uv run "${CLAUDE_SKILL_DIR}/scripts/build.py"` executes a bundled Python script whose contents are not part of SKILL.md, so the actual behavior of the build step cannot be verified from the skill text alone.
  • •The skill instructs users to place an API key (`MIMO_API_KEY`) and base URL in a project-root `.env`; nothing in the file sends that key anywhere, but the key will be readable by the build script and by any subsequent agent actions in the project.
  • •Writes/creates files under `problems/[标题]/` (segments.json, content.html, config.json, index.html) — normal, non-destructive file generation; no `rm`, no overwrites outside the working directory.
  • •No obfuscation, no curl|sh, no network fetches, no safety-disabling instructions found.
How this analysis is made

Examples

Explain a combinatorics problem
讲题:3 个小朋友排队,其中两个穿一样的衣服,一共有多少种排法?小朋友叫小一,三年级,计算容易粗心。
Create a chicken-rabbit problem
创建题目:鸡兔同笼,头共 10 个,脚共 28 只。小朋友叫朵朵,四年级,对图形敏感。
Chat-based quick setup
帮我做一道互动题解,题目是 1 到 100 所有整数相加等于多少,小朋友叫乐乐,五年级。

name: jiangti description: 引导式创建小学奥数互动讲解页面(语音+问答+动画)。当用户说"讲题"、"出题"、"做一道题"、"创建题目"时使用。 when_to_use: 用户想要为小朋友创建一个带语音讲解和互动问答的数学题解页面。触发词:讲题、出题、做题、创建题目、互动题解、数学讲解页。 disable-model-invocation: true allowed-tools: Bash(mkdir *) Bash(uv run *) Read Write Edit Glob AskUserQuestion argument-hint: "[题目名称]" effort: high

讲题向导 — 互动数学题解生成器

你是专业的数学教学设计师。帮用户把一道数学题变成带语音讲解和互动问答的 HTML 页面。

工作方式

用户只需要提供题目和孩子信息,其他全部由你完成。

用户不需要知道题目属于什么模块、解题步骤是什么——如果他们知道,就不需要你讲了。

输入方式

方式一:模板填写(推荐)

引导用户创建 problems/[题目名]/input.md,格式如下:

# 题目

(粘贴题目原文)

# 小朋友

- 名字:
- 年级:
- 特点:(可选,比如"计算容易粗心"、"对图形敏感"等)

# 老师偏好(可选)

- 老师名字:(默认"糖糖老师")
- 风格:(比如"耐心一点"、"多举生活例子"等)

方式二:直接聊天

用户也可以直接在聊天中给出题目,你通过 AskUserQuestion 快速收集必要信息:

  1. 题目是什么?
  2. 小朋友叫什么?几年级?
  3. 主题色偏好(可选)

只问这两个核心问题就够了,不要问分类、步骤等用户不可能知道的信息。

生成流程

收到信息后,依次生成三个文件:

1. segments.json — 讲解脚本

这是最重要的部分,决定了讲解质量。

核心原则:讲"为什么",不只是"是什么"

讲解的重点是逻辑推理过程,不是直接给答案。每个关键步骤都要回答"为什么这样做"。

排列组合题的讲解框架:

  1. 理解题意 — 帮小朋友把题目翻译成数学语言
  2. 建立概念 — 如果涉及新概念(如排列、组合),要先解释:
    • "排列和组合有什么区别?排列要考虑顺序,组合不考虑"
    • "如果有 n 个不同的东西排成一排,有多少种排法?n 的阶乘"
    • "为什么要阶乘?第一个位置有 n 种选法,第二个有 n-1 种……"
  3. 分析约束 — 题目有什么限制条件?这些限制怎么影响计算?
  4. 逐步推理 — 每一步都要解释 WHY:
    • ❌ "2 个舞蹈相同,要除以 2!"
    • ✅ "2 个舞蹈是一模一样的,小明在左边小红在右边,和小红在左边小明在右边,观众看到的是一样的。所以这两种排法其实只能算一种。怎么去掉重复呢?用 2 的阶乘,也就是 2。"
  5. 验证答案 — 用简单例子验证,或用另一种方法交叉验证

互动问题设计原则:

  • 问题要引导思考,不是测试记忆
  • 好的问题:引导小朋友自己发现规律、理解概念
  • 差的问题:直接问计算结果

脚本格式:

每段 narration 约 20-40 秒(80-160 字),每段称呼小朋友名字 1-2 次。 每个 question 有 3 选项(1 正确 2 干扰),countdown 6-10 秒。 总计 12-18 段,3-5 个互动问答。 结构:问候 → 理解题意 → 概念讲解 → 逐步推理(穿插提问)→ 答案 → 总结方法

详见 ref/segments-format.md。

2. content.html — 页面内容

用语义化 CSS class,详见 ref/css-classes.md。

3. config.json — 配置

{
  "theme": "warm",
  "title": "标题",
  "title_short": "简短标题",
  "kid_name": "小一",
  "teacher_name": "糖糖老师",
  "emoji": "🎭",
  "problem_html": "<p>题目描述</p>",
  "tips_html": "<p>方法总结</p>",
  "footer_text": "🌟 鼓励的话"
}

主题选项详见 ref/themes.json。

构建

mkdir -p "problems/[标题]" && uv run "${CLAUDE_SKILL_DIR}/scripts/build.py" "problems/[标题]/"

首次使用

检查项目根目录是否有 .env,没有则提示创建:

MIMO_API_KEY=你的API密钥
MIMO_BASE_URL=https://api.xiaomimimo.com/v1

完成话术

✅ 全部完成! 文件位置:problems/[标题]/index.html 双击打开即可使用。试试看效果吧!

From the file to a first result

The download contains exactly the content displayed on this page. This copy may differ from the latest version in the source repository.

View the source and supporting files

This download contains SKILL.md only. Any scripts, references, templates and dependencies are not included. Get the required files from the source, preserving their directory structure, before continuing.

1. Download the file

Download SKILL.md

From the root of a test project, save the file as .skill-downloads/interactive-math-lesson-creator-mryiqg3h/SKILL.md, or use the command below. This folder is for inspecting the skill before installation.

Command for macOS/Linux or WSL: requires a POSIX shell and curl. On Windows without WSL, use the download button and create the folder manually.

mkdir -p '.skill-downloads/interactive-math-lesson-creator-mryiqg3h' && curl --fail --show-error --location 'https://skills-guides.com/api/skills/interactive-math-lesson-creator-mryiqg3h/download' --output '.skill-downloads/interactive-math-lesson-creator-mryiqg3h/SKILL.md.part' && mv '.skill-downloads/interactive-math-lesson-creator-mryiqg3h/SKILL.md.part' '.skill-downloads/interactive-math-lesson-creator-mryiqg3h/SKILL.md'

2. Check prerequisites

Read SKILL.md before using it. If it references scripts or external services, inspect them and prepare the required access in your test environment.

Tools declared by the author (check availability in your agent): Bash(mkdir *) Bash(uv run *) Read Write Edit Glob AskUserQuestion

No recognized prerequisites section in this file. This does not mean it is self-contained: libraries, tools and access requirements may be mentioned elsewhere in the content or source repository.

The platforms on this page are catalog indications. The paths below follow tool documentation; they do not prove this skill has been run in those tools. No minimum tool version is confirmed for this listing.

3. Load the skill

After inspection, copy the complete folder into your project using one of the commands below, then open a new tool session. The command stops if a folder with the same name already exists: compare the files before replacing it.

Claude Code
test -f '.skill-downloads/interactive-math-lesson-creator-mryiqg3h/SKILL.md' && test -s '.skill-downloads/interactive-math-lesson-creator-mryiqg3h/SKILL.md' && mkdir -p '.claude/skills' && test ! -e '.claude/skills/jiangti' && cp -R '.skill-downloads/interactive-math-lesson-creator-mryiqg3h' '.claude/skills/jiangti'

OpenSkills

OpenSkills must already be installed. The local install/read procedure is checked with OpenSkills 1.5.0, which requires Node.js ≥ 20.6.0. Catalog slugs are not resolved automatically.

Official OpenSkills installation
openskills install './.skill-downloads/interactive-math-lesson-creator-mryiqg3h'

openskills read 'interactive-math-lesson-creator-mryiqg3h'

Reading should display the installed file content and its base directory. It does not run the skill or install its dependencies.

For an agent that reads AGENTS.md, then sync the index. This command changes AGENTS.md: review the diff before using it.

openskills sync

Manual method or another tool: attach SKILL.md to a conversation, or open it in an agent that can read files. Include any required supporting resources. No universal folder is recognized by every tool.

4. Try a first task

Use a short, synthetic input: an API endpoint, a small document or an interface brief. In a new conversation, attach the file or give the agent its path, then adapt this request:

Read .skill-downloads/interactive-math-lesson-creator-mryiqg3h/SKILL.md and apply its instructions to this example: [describe a test input]. Identify any missing files, dependencies or access. Produce the result requested by the skill without inventing data or running unreviewed scripts.

Expected result: output matching the skill instructions, or a precise list of missing prerequisites. A read confirmation alone does not validate a first use. If an external resource is unavailable, that path remains untested.

Related skills