jiangti — Claude Code Skill for Interactive Math Tutorials

A Claude Code skill that transforms math problems into interactive HTML pages with voice narration, quiz interactions, and countdown timers. Designed for elementary school math olympiad tutoring.

What it does

Input a math problem → get a self-contained HTML page that:

• Narrates the solution step-by-step with a professional tutor voice
• Pauses at key moments and shows interactive quiz cards
• Encourages with confetti animations on correct answers
• Explains the reasoning behind each step, not just the answer

The generated page works offline — just double-click index.html.

Install

1. Clone into your project

cd your-project
git clone https://github.com/x5/jiangti-skill.git .claude/skills/jiangti

Or install to your personal skills directory (available across all projects):

git clone https://github.com/x5/jiangti-skill.git ~/.claude/skills/jiangti

2. Configure TTS API

Create .env in your project root:

MIMO_API_KEY=your-api-key
MIMO_BASE_URL=https://api.xiaomimimo.com/v1

Variable	Required	Default
MIMO_API_KEY	Yes	—
MIMO_BASE_URL	No	https://api.xiaomimimo.com/v1

3. Install Python dependency

uv venv && uv pip install openai

4. Use

In Claude Code:

/jiangti

Then describe the problem. Claude will ask for the child's name and grade, then generate everything.

Usage

Quick start (chat)

/jiangti
文艺汇演共有 6 个节目，1 个小品、2 个舞蹈、3 个演唱……

Claude asks two quick questions (child's name/grade, theme color), then generates.

Template-based

Copy the template and fill it in:

cp .claude/skills/jiangti/ref/input-template.md problems/my-problem/input.md

# 题目

（paste problem here）

# 小朋友

- 名字：小一
- 年级：三年级
- 特点：（optional）

# 老师偏好（optional）

- 老师名字：糖糖老师
- 风格：耐心一点

Then tell Claude: /jiangti and point to the template.

Output

problems/
└── your-problem/
    ├── index.html      ← open this (offline, self-contained)
    ├── audio.wav        ← voice narration (~3-5 min)
    ├── segments.json    ← narration script
    ├── content.html     ← page content
    ├── config.json      ← configuration
    └── meta.json        ← quiz timestamps

Themes

Set "theme" in config.json:

Value	Style
warm	Orange (default)
green	Green
blue	Blue
purple	Purple
pink	Pink

How it works

1. User provides the problem text and child's info
2. Claude analyzes the problem, designs a step-by-step explanation with logical reasoning, and creates interactive quiz questions
3. build.py calls MiMo TTS API to generate voice audio, then merges everything into a single HTML file
4. Result — a self-contained HTML page with embedded audio and quiz logic

Project structure

jiangti-skill/
├── SKILL.md              # Skill instructions (Claude reads this)
├── README.md             # This file
├── LICENSE               # MIT
├── template.html         # HTML template (CSS + JS + quiz logic)
├── ref/                  # Reference docs (loaded on demand)
│   ├── math_olympiad_modules.md
│   ├── css-classes.md
│   ├── segments-format.md
│   ├── themes.json
│   └── input-template.md
├── scripts/
│   └── build.py          # Build script (TTS + HTML assembly)
└── examples/
    └── fibonacci/        # Complete example

Requirements

• Claude Code (or any Claude Code-compatible tool)
• Python 3.10+
• uv (for dependency management)
• MiMo TTS API key

License

MIT