# Frog And Toad Studio

> >-

- **Type:** Skill
- **Install:** `agentstack add skill-cathyerer-frog-and-toad-studio-frog-and-toad-studio`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [CathyErer](https://agentstack.voostack.com/s/cathyerer)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [CathyErer](https://github.com/CathyErer)
- **Source:** https://github.com/CathyErer/frog-and-toad-studio

## Install

```sh
agentstack add skill-cathyerer-frog-and-toad-studio-frog-and-toad-studio
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Frog and Toad Studio · 三件套工作流

本 skill 面向教 ESL G1（一年级）学生的老师。每个故事 = 一次课 = 一个三件套：

1. **`0M -  关键词地图.html`** — 投屏 lesson plan，锁定风格（奶油纸+手写风），5 个 tab（含 Vocabulary）
2. **`0M -  Workbook.docx`** — 单页学生练习
3. **`0M -  Workbook 答案版.docx`** — 答案版，答案红色加粗下划线

外加（按需）：**课程总结与作业（微信版）** 段落、**Obsidian 同步**。

## 运行前配置

不要写死或猜测用户电脑上的路径。先确定三个路径变量：

- ``：当前 `SKILL.md` 所在的 Skill 文件夹，无需用户设置
- ``：Frog and Toad 课程资料根目录
- ``：Obsidian 中的 Frog and Toad 课程追踪目录

首次运行时读取 `/config.local.json`。若文件不存在，参考
`/config.example.json`，向用户确认 `` 和 `` 后创建本地配置。
找不到目录时必须询问用户，不得根据用户名或常见文件夹位置猜测。

模板、脚本和参考资料始终相对于 `` 定位。本地配置和生成的微信版课程总结不得提交到公开仓库。

## 文件夹与命名约定

素材库：`/`

```
Frog and Toad精读课/
├── 1.days with frog and toad/    ← 课 01–05（Tomorrow/Kite/Shivers/Hat/Alone）
├── 2.frog and toad all year/     ← 课 06–10
├── 3.frog and toad together/     ← 课 11–15
├── 4.frog and toad are friends/  ← 课 16–20
│   ├── 1.Frog and Toad Are Friends.pdf   ← 扫描版原书
│   └── 1-Spring/                 ← 每章一个文件夹 /
│       ├── 01 - Spring 关键词地图.html
│       ├── 01 - Spring Workbook.docx
│       └── 01 - Spring Workbook 答案版.docx
```

Skill 文件夹：`/`。其中可保存本地生成的
`课程总结与作业（微信版）.md` 和可安装的 `frog-and-toad-studio.skill`；这两类本地文件不提交到公开仓库。

**教学顺序 = 文件夹书序**（Days with → All Year → Together → Are Friends），全系列课号 01–20。

Obsidian 库：`/`
- `00 - Frog and Toad 全系列课程地图.md` — 20 课寓意 + inference 问题总表
- `0N -  关键词地图.md` — 每本书一份，每章一节（含 ✅三件套已生成 标记）
- `0N - .md` — 追踪笔记，升级日志加一行（带 wikilink）
- `课程总结与作业（微信版）.md` — 与 `/课程总结与作业（微信版）.md` 保持同步

## 工作流（7 步，顺序执行）

### 1. 读原文（扫描 PDF 无文字层）

用 pypdfium2 渲染成图再 Read（视觉转录）：

```python
import pypdfium2 as pdfium
pdf = pdfium.PdfDocument(".pdf")
for i, page in enumerate(pdf):
    page.render(scale=1.5).to_pil().save(f"outputs目录/pXX.png")
```

每张 PNG 是一个跨页（2 个书页）。用 Read 工具逐张读图、逐字转录。**引文必须逐字**——
后面 HTML/Workbook 里的所有 quote 都要能在原文找到（历史教训：dumb≠dump、
"I am feeling much better now"≠"I feel much better"、"on the front door"≠"at the front door"）。

### 2. 先列关键词，确认后再动手

**绝不跳过**：先把关键词列表发给用户确认，再开始生成（"先列出关键词，再来做"）。
粒度是「中间版」——历史校准中"字太多"和"这也太精简啦"都被反馈过，收敛后的标准：

- **寓意**（英文 moral + 中文短释）
- **核心 inference 问题**（Why did …? 一课一个，笑点藏在"说的和做的不一致"里）
- **关键词复述线**：场景小标题 + emoji 开头的 bullet + **加粗关键词** + 简短逐字引文
- **动词词库**（6 个，供 Workbook 填空）+ **寓意填空**（2 个空）

若用户上传了手绘关键词地图，以用户的图为准挑关键词。

### 3. 生成关键词地图 HTML

**复制 `/assets/template_keyword_map.html`，只换内容，绝不发明新版式。**
五个 tab 固定：① Warm-up 读前（3 张 q-card：聊自己→标题猜想→带问题读）
② Vocabulary 10 个核心词汇（英文解释 + 中文解释 + 例句）
③ The Story Map 复述路线 ④ Characters 人物+情绪线 ⑤ Theme 寓意。

版式部件（按故事结构选用）：
- `.route` 路线卡：**每一段都必须用 `` 包住**（flex 容器裸文本会错误换行——历史 bug）
- `.mishap` 网格：3 项默认 / 4 项加 `.four` / 5 项加 `.five`
- `.idea` / `.we-know`（红色手写金句）/ `.morning` / `.gold`（金色寓意卡）/ `.sad-line`
- `.feel-line` 情绪线固定 **6 站**：📍节点卡（先读发生了什么）→ emoji → 心情标签
- `.char-grid` 两张人物卡，各带一个句型支架 `.frame`（"___ is ___ because ___."）

语言规则：中文都放 `` 里（EN only 按钮会隐藏）；正文关键词式精简；
标题区 moral-tag = 寓意；footer 写 Lesson N。
词汇规则：Vocabulary tab 的主数据来自 Obsidian `0N -  关键词地图.md` 中每课的
`10 个词汇（中英解释 + 例句）` 模块；本地同步脚本为
`/scripts/sync_vocabulary_to_html.py`。

**自检**：Python HTMLParser 做标签平衡检查（历史上每次都查）。

### 4. 生成 Workbook 两件

用 `/scripts/make_workbooks.py`：照 `EXAMPLE`（Spring）的 shape 写新 config、
调 `build(cfg, False/True, path)` 生成学生版+答案版。规格已内置（Letter、Arial、
三列固定表格、红色答案、无 emoji）。四个 Part 固定：
Story Map 填动词（6 行，cue 逐字引文）→ Think! 推断题 → 寓意填空（2 空）→ Draw! 画图框+一句话。

**自检**：soffice 转 PDF 断言**每个文件恰好 1 页**（超页就精简 cue/closing 文字）。

### 5. 逐字核对

把 HTML + Workbook 里的每条引文与转录原文比对一遍。宁可删引号改叙述，不可改动原句。

### 6. Obsidian 同步（可选）

用户未使用 Obsidian 或未配置 `` 时跳过本步（此时第 3 步的词汇数据改为直接向用户确认）。
使用 `config.local.json` 中的 ``。同步前先确认该目录及目标笔记存在；
如果配置缺失或目录无效，停止并向用户确认，不得尝试其他 Obsidian Vault。

- 书的关键词地图笔记：追加/更新该章小节，标 `✅三件套已生成`，frontmatter `last_updated` 改今天
- 追踪笔记 `0N - .md`：升级日志加一行（日期 + 内容 + wikilink）
- 若全书完成：写"全书五章完成 ✅"

### 7. 课程总结与作业（微信版，可选）

按用户需要生成。每课一段，纯文本（微信不渲染 markdown），格式固定：

```
【Frog and Toad 精读 ·  】

📖 今天的故事：（3-5 句中文概述，穿插英文关键句/引文）

🎯 本课重点
· 寓意： —— 
· 思考题：
· 重点动词：

📝 课后作业
1️⃣ 复述：打开"关键词地图"，沿 Story Map 路线把故事讲一遍（用上重点动词）
2️⃣ 完成  Workbook（一页）
3️⃣ 预习《》：
```

最后一课的第 3 项改为全系列复习。写入
`/课程总结与作业（微信版）.md` 对应段落，并同步到 ``。

## 参考资料

- `/config.example.json` — 首次运行的路径配置示例
- `/sync-config.md` — 路径变量、资料分工和同步规则
- `/sync-checklist.md` — 每次检查/同步 Obsidian 时使用的固定清单
- `/assets/template_keyword_map.html` — 锁定的 HTML 模板（Spring 成品，含 .four/.five CSS）
- `/scripts/make_workbooks.py` — Workbook 生成器 + EXAMPLE config
- `/scripts/sync_vocabulary_to_html.py` — 从 Obsidian 关键词地图同步 Vocabulary tab 到 20 个 HTML
- `/references/course-map.md` — 全系列 20 课总表（寓意/思考题/动词词库），改总结或补课时查这里
- `/skills/frog-and-toad-illustration-style/` — 插画子 skill：画风规则 + 20 章提示词库（prompts/）+ 插图注入关键词地图 HTML 的锁定版式

## 交付清单（每章完成前过一遍）

- [ ] 关键词列表已经用户确认
- [ ] HTML 标签平衡，route 段都包了 span，中文都在 .zh 里，Vocabulary tab 有 10 个词汇卡
- [ ] Workbook + 答案版都是 1 页；答案红粗下划线；无 emoji
- [ ] 所有引文与原书逐字一致
- [ ] 章节文件夹三件套齐全，命名 `0M -  …`
- [ ] Obsidian 两个笔记已更新
- [ ] 把生成的文件交付给用户，说明简短

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [CathyErer](https://github.com/CathyErer)
- **Source:** [CathyErer/frog-and-toad-studio](https://github.com/CathyErer/frog-and-toad-studio)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-cathyerer-frog-and-toad-studio-frog-and-toad-studio
- Seller: https://agentstack.voostack.com/s/cathyerer
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.