用途
Flashcards 用于把 AI 生成的 JSON 问答卡片转换成 NotebookLM 风格的可交互 HTML 学习界面。它是一个纯前端转换器：由 AI（如 Claude、Gemini）生成 JSON 格式的卡片，本技能负责将其渲染成带有 NotebookLM 界面与交互体验的 HTML 文件。
主要能力
- 输入为包含 question/answer 配对的 JSON 文件，输出为单个交互式 HTML 卡片组文件。
- 提供 NotebookLM 风格的视觉与交互：紫色渐变背景、深色卡片正面（问题）带“See answer”提示、白色卡片背面（答案）、平滑 3D 翻卡动画（600ms cubic-bezier）、卡片尺寸 600px 宽 × 420px 高。
- 交互方式：点击卡片翻面；按空格翻卡；按 → 下一张；按 ← 上一张；点击导航箭头切换；点击下载图标导出 CSV；点击重置图标回到第一张。
- 界面元素：标题 + “Based on 1 source”、操作提示“Press 'Space' to flip, '← / →' to navigate”、左右导航按钮、进度显示（如“1 / 59 cards”）、重置按钮与 CSV 下载按钮。
- 支持从界面导出 CSV，格式为 question,answer，便于导入 Anki、Quizlet、Excel/Google Sheets 等。
- 支持数学公式：使用 LaTeX 分隔符，行内公式用 $...$，块级公式用 $$...$$；字面美元符号需转义为 $。当本地存在 KaTeX 资源时，会在 HTML 旁创建 fonts/ 文件夹以支持离线渲染。
- 考试模式优化：自动格式化项目符号与编号列表，答案左对齐并保持条目间距。支持的项目符号包括 •、-、*；编号列表包括 1. 2. 3. 或 1) 2) 3)；字母列表包括 a. b. c. 或 a) b) c)。每个条目自动单独成行。
使用方式
- 让 AI 生成 JSON 卡片，例如：“Claude, generate 50 flashcards about quantum physics”。
- 将 JSON 保存为文件（如 flashcards.json）。
- 在 skills/flashcards 目录下运行：
python main.py -i flashcards.json -o flashcards.html。 - 打开生成的 HTML，即可使用 NotebookLM 风格的卡片界面。
命令行参数：
--input, -i：输入 JSON 文件（必填）。--output, -o：输出 HTML 文件（默认：flashcards.html）。
依赖安装：pip install -r requirements.txt，仅需 loguru（日志）。
JSON 输入格式有两种：
简单数组：
[
{
"question": "What are the three main types of chemical bonds?",
"answer": "• Ionic bonds\n• Covalent bonds\n• Metallic bonds"
},
{
"question": "List the steps of photosynthesis.",
"answer": "1. Light absorption\n2. Water splitting\n3. ATP production\n4. Carbon fixation"
}
]
带标题：
{
"title": "Quantum Physics Flashcards",
"flashcards": [
{
"question": "What is quantum superposition?",
"answer": "A state where a qubit exists in multiple states simultaneously."
}
]
}
适用场景
- 备考复习：生成聚焦考试重点的卡片，涵盖关键概念、定义、公式、重要事实、分步流程、对比要点、常见考题及答案。
- 概念记忆与自测：通过翻卡与键盘导航快速浏览卡片组。
- 跨工具使用：导出 CSV 后导入 Anki、Quizlet 或表格软件继续学习。
限制与说明
- 本技能不包含 LLM/AI 能力，仅做 JSON → HTML 转换；不需要 API Key，无外部调用。
- 输出为独立 HTML，所有 CSS/JS 内嵌，可离线使用；翻卡动画基于 CSS 3D transforms，CSV 在客户端生成，无需服务器。
- 与 NotebookLM 相比，本技能暂不提供“Explain”按钮（标注为未来功能）。
- 使用建议：每张卡片聚焦一个概念，问题保持简洁；答案 1–3 句最利于显示；每组 20–50 张卡片较适合学习；每个 HTML 约 10–15KB。
- 自定义：可编辑 main.py 第 36–37 行修改背景渐变（background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);），编辑第 74 行修改卡片高度（height: 420px;）。