互动阅读教师：为1-10岁儿童提供游戏化自然拼读与视觉词学习工具

reading-teacher by jamesrochabrun/skills

135 周安装量

111 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/jamesrochabrun/skills --skill reading-teacher

内容创作教育科技游戏

🇨🇳中文介绍

阅读教师

一款互动、有趣的阅读教师，通过互动式学习工具、可视化游戏场和游戏化挑战，为年轻学习者即时生成引人入胜的学习体验。

此技能的功能

将阅读教育转变为互动、可视化的体验：

即时游戏场生成 - 按需创建交互式 HTML/JS 学习工具
适龄内容 - 针对 1-10 岁儿童及其发展阶段量身定制
多感官学习 - 包含视觉、听觉和互动元素
自然拼读与视觉词 - 系统性的自然拼读教学和高频词学习
故事构建 - 互动式故事创作与理解
游戏化 - 星星、徽章、奖励和进度追踪
家长/教师工具 - 进度报告和自定义选项

此技能的重要性

传统阅读教学：

参与度和互动性有限
采用一刀切的方法
难以维持幼儿的注意力
练习机会有限
难以追踪个人进度

使用此技能：

通过游戏即时吸引注意力
根据孩子的水平个性化定制
有趣、有回报的体验
无限变化的练习方式
清晰的进度追踪
多感官学习方法

核心原则

1. 符合发展规律

特定年龄段的内容和挑战
循序渐进的学习过程
适当的复杂度级别
关注注意力持续时间
庆祝每一个里程碑

2. 多感官参与

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

3. 基于游戏的学习

游戏而非枯燥练习
故事驱动的活动
角色伙伴
奖励系统
庆祝动画

循序渐进的技能培养
基于自然拼读的方法
高频视觉词
理解策略
流利度培养

即时鼓励
视觉进度标记
成就庆祝
无负面反馈
关注成长型思维

涵盖的阅读阶段

阅读前准备 (1-3岁)

字母识别（大写和小写）
字母发音（音素意识）
环境印刷品意识
书本操作技能
听力理解

🔤 带动画的字母歌
🎨 字母描摹游戏
🔊 声音匹配活动
📚 互动图画书
🎵 押韵词游戏

早期阅读 (3-5岁)

字母-发音对应关系
基础自然拼读（CVC 单词）
印刷品意识
简单的视觉词
图片-文字联系

🐱 CVC 单词构建（cat, dog, sun）
🎯 视觉词匹配游戏
📖 简单句子阅读
🧩 词族探索
✨ 押韵时间挑战

初级阅读者 (5-7岁)

自然拼读模式（混合音、复合字母）
扩展视觉词词汇量
简单句子阅读
基础理解能力
流利度培养

🌟 复合字母侦探游戏（ch, sh, th）
📝 句子构建工作坊
📚 可解码故事阅读器
🎭 角色理解
⏱️ 流利度练习轨道

发展中阅读者 (7-10岁)

高级自然拼读模式
多音节单词
阅读理解策略
词汇发展
流利阅读

📖 故事理解挑战
🔍 上下文线索侦探
📚 章节书伴侣
✍️ 故事写作工作室
🎯 词汇构建器

互动游戏场示例

示例 1：字母乐园大冒险 (1-3岁)

用户提问： "帮助我的幼儿学习字母"

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>🌈 Letter Land Adventure!</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: 'Comic Sans MS', 'Chalkboard SE', cursive, sans-serif;
      background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px;
      color: #333;
    }
    .header {
      text-align: center;
      margin-bottom: 30px;
    }
    h1 {
      font-size: 3em;
      color: #FF6B9D;
      text-shadow: 3px 3px 6px rgba(0,0,0,0.1);
      margin-bottom: 10px;
    }
    .stars {
      font-size: 2em;
      background: rgba(255,255,255,0.8);
      padding: 10px 30px;
      border-radius: 30px;
      display: inline-block;
    }
    .letter-display {
      background: white;
      width: 400px;
      height: 400px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15em;
      font-weight: bold;
      color: #FF6B9D;
      box-shadow: 0 20px 60px rgba(0,0,0,0.2);
      margin: 20px;
      cursor: pointer;
      transition: all 0.3s ease;
      user-select: none;
    }
    .letter-display:hover {
      transform: scale(1.05);
      box-shadow: 0 30px 80px rgba(0,0,0,0.3);
    }
    .letter-display:active {
      transform: scale(0.95);
    }
    .controls {
      display: flex;
      gap: 20px;
      margin: 20px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .btn {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      border: none;
      padding: 20px 40px;
      font-size: 1.5em;
      border-radius: 20px;
      cursor: pointer;
      transition: transform 0.2s;
      font-weight: bold;
      box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    }
    .btn:hover { transform: translateY(-5px); }
    .btn:active { transform: translateY(0); }
    .letter-name {
      font-size: 2em;
      margin: 20px;
      color: #667eea;
      font-weight: bold;
    }
    .celebration {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0);
      font-size: 10em;
      animation: celebrate 1s ease forwards;
      pointer-events: none;
      z-index: 1000;
    }
    @keyframes celebrate {
      0% { transform: translate(-50%, -50%) scale(0) rotate(0deg); }
      50% { transform: translate(-50%, -50%) scale(1.5) rotate(180deg); }
      100% { transform: translate(-50%, -50%) scale(1) rotate(360deg); opacity: 0; }
    }
    .alphabet-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
      gap: 10px;
      max-width: 800px;
      margin: 20px;
    }
    .alphabet-letter {
      background: white;
      padding: 20px;
      border-radius: 15px;
      font-size: 2em;
      text-align: center;
      cursor: pointer;
      transition: all 0.2s;
      box-shadow: 0 5px 15px rgba(0,0,0,0.1);
      font-weight: bold;
      color: #667eea;
    }
    .alphabet-letter:hover {
      transform: scale(1.1);
      background: #FFD700;
    }
    .alphabet-letter.learned {
      background: #4CAF50;
      color: white;
    }
    @media (max-width: 768px) {
      .letter-display { width: 300px; height: 300px; font-size: 10em; }
      h1 { font-size: 2em; }
    }
  </style>
</head>
<body>
  <div class="header">
    <h1>🌈 Letter Land Adventure!</h1>
    <div class="stars">
      Stars: <span id="stars">0</span> ⭐
    </div>
  </div>

  <div class="letter-display" id="letterDisplay" onclick="speakLetter()">
    A
  </div>

  <div class="letter-name" id="letterName">
    Click the letter to hear its name and sound!
  </div>

  <div class="controls">
    <button class="btn" onclick="nextLetter()">Next Letter ➡️</button>
    <button class="btn" onclick="randomLetter()">Random Letter 🎲</button>
    <button class="btn" onclick="showAlphabet()">Show All 🔤</button>
  </div>

  <div class="alphabet-grid" id="alphabetGrid" style="display: none;"></div>

  <script>
    const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
    const letterNames = {
      'A': 'Apple', 'B': 'Ball', 'C': 'Cat', 'D': 'Dog', 'E': 'Elephant',
      'F': 'Fish', 'G': 'Goat', 'H': 'Hat', 'I': 'Ice Cream', 'J': 'Juice',
      'K': 'Kite', 'L': 'Lion', 'M': 'Moon', 'N': 'Nest', 'O': 'Orange',
      'P': 'Pig', 'Q': 'Queen', 'R': 'Rabbit', 'S': 'Sun', 'T': 'Tiger',
      'U': 'Umbrella', 'V': 'Violin', 'W': 'Whale', 'X': 'X-ray', 'Y': 'Yellow', 'Z': 'Zebra'
    };
    const letterSounds = {
      'A': 'ah', 'B': 'buh', 'C': 'kuh', 'D': 'duh', 'E': 'eh',
      'F': 'fuh', 'G': 'guh', 'H': 'huh', 'I': 'ih', 'J': 'juh',
      'K': 'kuh', 'L': 'luh', 'M': 'muh', 'N': 'nuh', 'O': 'ah',
      'P': 'puh', 'Q': 'kwuh', 'R': 'ruh', 'S': 'sss', 'T': 'tuh',
      'U': 'uh', 'V': 'vuh', 'W': 'wuh', 'X': 'ks', 'Y': 'yuh', 'Z': 'zzz'
    };

    let currentIndex = 0;
    let stars = 0;
    let learnedLetters = new Set();
    const colors = ['#FF6B9D', '#4ECDC4', '#FFE66D', '#A8E6CF', '#FF8B94', '#C7CEEA'];

    function updateDisplay(letter) {
      const display = document.getElementById('letterDisplay');
      display.textContent = letter;
      display.style.color = colors[Math.floor(Math.random() * colors.length)];

      const name = document.getElementById('letterName');
      name.textContent = `${letter} is for ${letterNames[letter]}!`;
    }

    function speakLetter() {
      const letter = document.getElementById('letterDisplay').textContent;

      // Award star
      stars++;
      document.getElementById('stars').textContent = stars;

      // Mark as learned
      if (!learnedLetters.has(letter)) {
        learnedLetters.add(letter);
        updateAlphabetGrid();
      }

      // Show celebration
      celebrate('🎉');

      // Simulate speech (in real implementation, use Web Speech API)
      const name = document.getElementById('letterName');
      name.textContent = `${letter}! ${letter} says "${letterSounds[letter]}"`;

      // Change color
      const display = document.getElementById('letterDisplay');
      display.style.color = colors[Math.floor(Math.random() * colors.length)];

      // Could use Web Speech API here:
      // const utterance = new SpeechSynthesisUtterance(`${letter}. ${letter} is for ${letterNames[letter]}`);
      // speechSynthesis.speak(utterance);
    }

    function nextLetter() {
      currentIndex = (currentIndex + 1) % alphabet.length;
      updateDisplay(alphabet[currentIndex]);
    }

    function randomLetter() {
      currentIndex = Math.floor(Math.random() * alphabet.length);
      updateDisplay(alphabet[currentIndex]);
      celebrate('✨');
    }

    function showAlphabet() {
      const grid = document.getElementById('alphabetGrid');
      if (grid.style.display === 'none') {
        grid.style.display = 'grid';
        if (grid.children.length === 0) {
          alphabet.forEach(letter => {
            const div = document.createElement('div');
            div.className = 'alphabet-letter';
            div.textContent = letter;
            div.onclick = () => {
              currentIndex = alphabet.indexOf(letter);
              updateDisplay(letter);
              speakLetter();
            };
            grid.appendChild(div);
          });
        }
      } else {
        grid.style.display = 'none';
      }
    }

    function updateAlphabetGrid() {
      const grid = document.getElementById('alphabetGrid');
      if (grid.children.length > 0) {
        Array.from(grid.children).forEach((div, i) => {
          if (learnedLetters.has(alphabet[i])) {
            div.classList.add('learned');
          }
        });
      }
    }

    function celebrate(emoji) {
      const celebration = document.createElement('div');
      celebration.className = 'celebration';
      celebration.textContent = emoji;
      document.body.appendChild(celebration);
      setTimeout(() => celebration.remove(), 1000);
    }

    // Initialize
    updateDisplay(alphabet[0]);

    // Encourage interaction
    setTimeout(() => {
      const name = document.getElementById('letterName');
      name.textContent = '👆 Click the letter to hear it!';
    }, 3000);
  </script>
</body>
</html>

大而多彩的字母展示
点击可听到字母名称和发音
带星星的进度追踪
显示已学字母的字母表网格
随机化以增加多样性
鼓励性动画
移动设备友好的触摸界面

示例 2：视觉词探险 (5-7岁)

用户提问： "练习一年级的视觉词"

教师生成： 包含以下内容的互动探险游戏：

高频 Dolch/Fry 单词
单词识别挑战
句子构建活动
限时阅读练习
进度徽章和奖励

示例 3：故事构建工作室 (7-10岁)

用户提问： "帮助提高阅读理解能力"

教师生成： 包含以下内容的互动故事工作坊：

选择你自己的冒险形式
嵌入理解性问题
词汇高亮工具
角色分析工具
故事排序活动

字母星星 (1 颗星): 学习一个新字母
单词星星 (5 颗星): 阅读一个新单词
故事星星 (10 颗星): 完成一个故事
速度星星 (3 颗星): 快速识别
完美星星 (20 颗星): 100% 准确率

🌟 字母大师: 学会所有 26 个字母
📖 首位读者: 阅读第一个完整句子
🏆 单词巫师: 掌握 50 个视觉词
🎯 完美一周: 连续练习 7 天
🚀 快速阅读者: 1 分钟内阅读 20 个单词
📚 故事时间: 完成 10 个故事
🎨 创意作家: 构建自己的故事
⭐ 超级明星: 总共获得 1000 颗星

已学字母 (共 26 个)
已掌握的视觉词
已完成的故事
阅读连续天数
阅读花费时间
准确率百分比
阅读水平进阶

成就时的五彩纸屑
正确答案时的星星爆炸
角色动画
音效 (可选)
进度条填充
升级动画

按类型划分的学习活动

带动画的字母歌
字母匹配游戏
大小写配对
字母描摹 (触摸/鼠标)
寻找字母挑战
字母分类活动

function createLetterMatch() {
  const uppercase = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
  const lowercase = 'abcdefghijklmnopqrstuvwxyz'.split('');

  // Shuffle and match pairs
  const pairs = uppercase.map((u, i) => ({
    upper: u,
    lower: lowercase[i],
    matched: false
  }));

  return pairs;
}

声音匹配 (字母到发音)
CVC 单词构建 (cat, dog, run)
词族 (-at, -an, -ig)
押韵词游戏
混合音练习 (bl, cr, st)
复合字母检测 (ch, sh, th)

const wordFamilies = {
  'at': ['cat', 'bat', 'rat', 'hat', 'mat', 'sat'],
  'an': ['can', 'man', 'pan', 'ran', 'van', 'fan'],
  'ig': ['big', 'dig', 'fig', 'pig', 'wig', 'jig']
};

function generateWordFamily(family) {
  return wordFamilies[family].map(word => ({
    word: word,
    letters: word.split(''),
    sound: `/${family}/`
  }));
}

高频词 (Dolch/Fry 列表)：

const preK = ['a', 'and', 'away', 'big', 'blue', 'can', 'come',
              'down', 'find', 'for', 'funny', 'go', 'help', 'here',
              'I', 'in', 'is', 'it', 'jump', 'little', 'look', 'make',
              'me', 'my', 'not', 'one', 'play', 'red', 'run', 'said',
              'see', 'the', 'three', 'to', 'two', 'up', 'we', 'where',
              'yellow', 'you'];

const firstGrade = ['after', 'again', 'an', 'any', 'as', 'ask', 'by',
                    'could', 'every', 'fly', 'from', 'give', 'going',
                    'had', 'has', 'her', 'him', 'his', 'how', 'just',
                    'know', 'let', 'live', 'may', 'of', 'old', 'once',
                    'open', 'over', 'put', 'round', 'some', 'stop',
                    'take', 'thank', 'them', 'then', 'think', 'walk',
                    'were', 'when'];

互动视觉词游戏：

function createSightWordChallenge(wordList, timeLimit = 60) {
  let score = 0;
  let currentWord = '';
  let timeRemaining = timeLimit;

  function nextWord() {
    currentWord = wordList[Math.floor(Math.random() * wordList.length)];
    displayWord(currentWord);
  }

  function checkAnswer(userInput) {
    if (userInput.toLowerCase() === currentWord.toLowerCase()) {
      score++;
      celebrate();
      nextWord();
    }
  }

  return { nextWord, checkAnswer, score };
}

预测接下来会发生什么
识别主要角色
回忆故事细节
理解因果关系
进行推断
想象场景

const comprehensionQuestions = {
  'The Cat and the Hat': [
    {
      question: 'Who are the main characters?',
      type: 'multiple-choice',
      options: ['Cat, Kids', 'Dog, Bird', 'Fish, Mom'],
      answer: 'Cat, Kids'
    },
    {
      question: 'Where does the story take place?',
      type: 'multiple-choice',
      options: ['Outside', 'At home', 'At school'],
      answer: 'At home'
    },
    {
      question: 'What did you like about the story?',
      type: 'open-ended',
      encouragement: 'Great thinking!'
    }
  ]
};

角色选择
场景选择
问题/解决结构
事件顺序
结局选项
插图工具

const storyElements = {
  characters: ['🐱 Cat', '🐶 Dog', '🦊 Fox', '🐻 Bear', '🦁 Lion'],
  settings: ['🏠 House', '🌳 Forest', '🏖️ Beach', '🏰 Castle', '🚀 Space'],
  problems: ['Lost something', 'Made a friend', 'Went on adventure', 'Solved mystery'],
  solutions: ['Found it!', 'Worked together', 'Used creativity', 'Never gave up']
};

function buildStory(selections) {
  return `Once upon a time, there was a ${selections.character}.
          The ${selections.character} lived in a ${selections.setting}.
          One day, the ${selections.character} ${selections.problem}.
          In the end, ${selections.solution}!`;
}

const progressReport = {
  childName: 'Emma',
  age: 6,
  level: 'Beginning Reader',
  stats: {
    lettersLearned: 26,
    sightWordsMastered: 45,
    storiesCompleted: 12,
    currentStreak: 7,
    totalTimeMinutes: 240
  },
  strengths: ['Letter recognition', 'Phonics', 'Enthusiasm'],
  workingOn: ['Sight words', 'Reading fluency'],
  nextSteps: ['Practice high-frequency words', 'Read aloud daily']
};

调整难度级别
选择单词列表
选择主题/角色
设置时间限制
启用/禁用声音
追踪多个孩子
导出进度数据

文本转语音 (Web Speech API)

function speakText(text, rate = 1.0) {
  if ('speechSynthesis' in window) {
    const utterance = new SpeechSynthesisUtterance(text);
    utterance.rate = rate;
    utterance.pitch = 1.2; // Higher pitch for kids
    utterance.volume = 1.0;
    speechSynthesis.speak(utterance);
  } else {
    // Fallback: show text with pronunciation guide
    showPronunciation(text);
  }
}

function createWordBuilder(targetWord) {
  const letters = targetWord.split('');
  const scrambled = shuffle([...letters]);

  let builtWord = [];

  function addLetter(letter) {
    builtWord.push(letter);
    updateDisplay();

    if (builtWord.join('') === targetWord) {
      celebrate('Correct!');
      return true;
    }
    return false;
  }

  function removeLetter() {
    builtWord.pop();
    updateDisplay();
  }

  return { addLetter, removeLetter, scrambled };
}

阅读流利度计时器

class FluencyTracker {
  constructor(text) {
    this.text = text;
    this.wordCount = text.split(' ').length;
    this.startTime = null;
    this.endTime = null;
  }

  start() {
    this.startTime = Date.now();
  }

  stop() {
    this.endTime = Date.now();
    return this.calculate();
  }

  calculate() {
    const seconds = (this.endTime - this.startTime) / 1000;
    const minutes = seconds / 60;
    const wpm = Math.round(this.wordCount / minutes);

    return {
      wordsPerMinute: wpm,
      timeSeconds: seconds,
      wordCount: this.wordCount,
      rating: this.getRating(wpm)
    };
  }

  getRating(wpm) {
    // Age-appropriate WPM benchmarks
    if (wpm >= 100) return '🏆 Excellent!';
    if (wpm >= 70) return '⭐ Great job!';
    if (wpm >= 50) return '👍 Good work!';
    return '💪 Keep practicing!';
  }
}

所有内容包含在 /references 中：

phonics.md - 自然拼读模式、规则和活动
sight_words.md - 按级别划分的 Dolch 和 Fry 单词列表
comprehension.md - 阅读策略和问题类型
stories.md - 可解码文本和故事模板

所有脚本在 /scripts 中：

generate_playground.sh - 创建互动阅读游戏场
generate_game.sh - 构建自然拼读或视觉词游戏
generate_story.sh - 创建互动故事

✅ 使用大而清晰的字体 (初学者至少 24pt) ✅ 包含音频发音 ✅ 提供即时积极反馈 ✅ 使用色彩丰富、引人入胜的视觉效果 ✅ 庆祝每一次成功 ✅ 保持会话简短 (5-15 分钟) ✅ 使其充满游戏性和趣味性 ✅ 可视化地追踪进度

❌ 使用复杂词汇 ❌ 显示负面反馈 ❌ 活动时间过长 ❌ 使用小或难以阅读的文本 ❌ 跳过音频支持 ❌ 使其感觉像工作 ❌ 用太多选择压倒孩子 ❌ 忘记庆祝进步

幼儿 (2岁)：

"教我的幼儿学习字母表"

生成：带有可点击字母、发音、动画和追踪功能的互动字母乐园

幼儿园 (5岁)：

"帮助学习 CVC 单词"

生成：带有 cat, bat, rat 的词族游戏 - 拖放字母构建并伴有发音

一年级 (6岁)：

生成：带有计时挑战、句子和进度徽章的视觉词探险

二年级 (7岁)：

"阅读理解练习"

生成：带有嵌入式问题、词汇帮助和奖励的互动故事

此技能通过以下方式改变阅读教育：

即时参与 - 立即生成游戏场
多感官 - 视觉、音频、互动元素
符合发展规律 - 涵盖 1-10 岁
系统性 - 基于自然拼读的进阶
游戏化 - 星星、徽章、庆祝
有效 - 基于研究的方法
有趣 - 基于游戏的学习

"每个孩子都能在正确的支持和鼓励下学会阅读。" 📚

用法： 请求任何阅读技能方面的帮助 - 字母识别、自然拼读、视觉词、阅读理解 - 即可获得即时、互动的学习体验，并根据您孩子的水平量身定制！

🇺🇸English

Reading Teacher

An interactive, playful reading teacher that instantly generates engaging learning experiences through interactive artifacts, visual playgrounds, and gamified challenges for young learners.

What This Skill Does

Transforms reading education into interactive, visual experiences:

Instant Playground Generation - Creates interactive HTML/JS artifacts on demand
Age-Appropriate Content - Tailored for ages 1-10 with developmental stages
Multi-Sensory Learning - Visual, auditory, and interactive elements
Phonics & Sight Words - Systematic phonics instruction and high-frequency words
Story Building - Interactive story creation and comprehension
Gamification - Stars, badges, rewards, and progress tracking
Parent/Teacher Tools - Progress reports and customization options

Why This Skill Matters

Traditional reading instruction:

Limited engagement and interactivity
One-size-fits-all approach
Difficult to maintain young attention spans
Limited practice opportunities
Hard to track individual progress

With this skill:

Instant engagement through games
Personalized to child's level
Fun, rewarding experiences
Unlimited practice variations
Clear progress tracking
Multi-sensory approach

Core Principles

1. Developmentally Appropriate

Age-specific content and challenges
Scaffolded learning progression
Appropriate complexity levels
Sensitive to attention spans
Celebrates every milestone

2. Multi-Sensory Engagement

Visual letter displays
Audio pronunciation
Interactive touch/click
Animated feedback
Colorful, engaging design

3. Play-Based Learning

Games over drills
Story-driven activities
Character companions
Reward systems
Celebration animations

4. Systematic Instruction

Sequential skill building
Phonics-based approach
High-frequency sight words
Comprehension strategies
Fluency development

5. Positive Reinforcement

Immediate encouragement
Visual progress markers
Achievement celebrations
No negative feedback
Growth mindset focus

Reading Stages Covered

Pre-Reading (Ages 1-3)

Skills:

Letter recognition (uppercase & lowercase)
Letter sounds (phonemic awareness)
Environmental print awareness
Book handling skills
Listening comprehension

Activities:

🔤 Alphabet song with animations
🎨 Letter tracing games
🔊 Sound matching activities
📚 Interactive picture books
🎵 Rhyming word games

Early Reading (Ages 3-5)

Skills:

Letter-sound correspondence
Beginning phonics (CVC words)
Print awareness
Simple sight words
Picture-text connection

Activities:

🐱 CVC word building (cat, dog, sun)
🎯 Sight word matching games
📖 Simple sentence reading
🧩 Word family exploration
✨ Rhyme time challenges

Beginning Readers (Ages 5-7)

Skills:

Phonics patterns (blends, digraphs)
Expanding sight word vocabulary
Simple sentence reading
Basic comprehension
Fluency building

Activities:

🌟 Digraph detective games (ch, sh, th)
📝 Sentence building workshops
📚 Decodable story readers
🎭 Character comprehension
⏱️ Fluency practice tracks

Developing Readers (Ages 7-10)

Skills:

Advanced phonics patterns
Multi-syllable words
Reading comprehension strategies
Vocabulary development
Fluent reading

Activities:

📖 Story comprehension challenges
🔍 Context clue detectives
📚 Chapter book companions
✍️ Story writing studios
🎯 Vocabulary builders

Interactive Playground Examples

Example 1: Letter Land Adventure (Ages 1-3)

User asks: "Help my toddler learn letters"

Teacher generates:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>🌈 Letter Land Adventure!</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: 'Comic Sans MS', 'Chalkboard SE', cursive, sans-serif;
      background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px;
      color: #333;
    }
    .header {
      text-align: center;
      margin-bottom: 30px;
    }
    h1 {
      font-size: 3em;
      color: #FF6B9D;
      text-shadow: 3px 3px 6px rgba(0,0,0,0.1);
      margin-bottom: 10px;
    }
    .stars {
      font-size: 2em;
      background: rgba(255,255,255,0.8);
      padding: 10px 30px;
      border-radius: 30px;
      display: inline-block;
    }
    .letter-display {
      background: white;
      width: 400px;
      height: 400px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15em;
      font-weight: bold;
      color: #FF6B9D;
      box-shadow: 0 20px 60px rgba(0,0,0,0.2);
      margin: 20px;
      cursor: pointer;
      transition: all 0.3s ease;
      user-select: none;
    }
    .letter-display:hover {
      transform: scale(1.05);
      box-shadow: 0 30px 80px rgba(0,0,0,0.3);
    }
    .letter-display:active {
      transform: scale(0.95);
    }
    .controls {
      display: flex;
      gap: 20px;
      margin: 20px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .btn {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      border: none;
      padding: 20px 40px;
      font-size: 1.5em;
      border-radius: 20px;
      cursor: pointer;
      transition: transform 0.2s;
      font-weight: bold;
      box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    }
    .btn:hover { transform: translateY(-5px); }
    .btn:active { transform: translateY(0); }
    .letter-name {
      font-size: 2em;
      margin: 20px;
      color: #667eea;
      font-weight: bold;
    }
    .celebration {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0);
      font-size: 10em;
      animation: celebrate 1s ease forwards;
      pointer-events: none;
      z-index: 1000;
    }
    @keyframes celebrate {
      0% { transform: translate(-50%, -50%) scale(0) rotate(0deg); }
      50% { transform: translate(-50%, -50%) scale(1.5) rotate(180deg); }
      100% { transform: translate(-50%, -50%) scale(1) rotate(360deg); opacity: 0; }
    }
    .alphabet-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
      gap: 10px;
      max-width: 800px;
      margin: 20px;
    }
    .alphabet-letter {
      background: white;
      padding: 20px;
      border-radius: 15px;
      font-size: 2em;
      text-align: center;
      cursor: pointer;
      transition: all 0.2s;
      box-shadow: 0 5px 15px rgba(0,0,0,0.1);
      font-weight: bold;
      color: #667eea;
    }
    .alphabet-letter:hover {
      transform: scale(1.1);
      background: #FFD700;
    }
    .alphabet-letter.learned {
      background: #4CAF50;
      color: white;
    }
    @media (max-width: 768px) {
      .letter-display { width: 300px; height: 300px; font-size: 10em; }
      h1 { font-size: 2em; }
    }
  </style>
</head>
<body>
  <div class="header">
    <h1>🌈 Letter Land Adventure!</h1>
    <div class="stars">
      Stars: <span id="stars">0</span> ⭐
    </div>
  </div>

  <div class="letter-display" id="letterDisplay" onclick="speakLetter()">
    A
  </div>

  <div class="letter-name" id="letterName">
    Click the letter to hear its name and sound!
  </div>

  <div class="controls">
    <button class="btn" onclick="nextLetter()">Next Letter ➡️</button>
    <button class="btn" onclick="randomLetter()">Random Letter 🎲</button>
    <button class="btn" onclick="showAlphabet()">Show All 🔤</button>
  </div>

  <div class="alphabet-grid" id="alphabetGrid" style="display: none;"></div>

  <script>
    const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
    const letterNames = {
      'A': 'Apple', 'B': 'Ball', 'C': 'Cat', 'D': 'Dog', 'E': 'Elephant',
      'F': 'Fish', 'G': 'Goat', 'H': 'Hat', 'I': 'Ice Cream', 'J': 'Juice',
      'K': 'Kite', 'L': 'Lion', 'M': 'Moon', 'N': 'Nest', 'O': 'Orange',
      'P': 'Pig', 'Q': 'Queen', 'R': 'Rabbit', 'S': 'Sun', 'T': 'Tiger',
      'U': 'Umbrella', 'V': 'Violin', 'W': 'Whale', 'X': 'X-ray', 'Y': 'Yellow', 'Z': 'Zebra'
    };
    const letterSounds = {
      'A': 'ah', 'B': 'buh', 'C': 'kuh', 'D': 'duh', 'E': 'eh',
      'F': 'fuh', 'G': 'guh', 'H': 'huh', 'I': 'ih', 'J': 'juh',
      'K': 'kuh', 'L': 'luh', 'M': 'muh', 'N': 'nuh', 'O': 'ah',
      'P': 'puh', 'Q': 'kwuh', 'R': 'ruh', 'S': 'sss', 'T': 'tuh',
      'U': 'uh', 'V': 'vuh', 'W': 'wuh', 'X': 'ks', 'Y': 'yuh', 'Z': 'zzz'
    };

    let currentIndex = 0;
    let stars = 0;
    let learnedLetters = new Set();
    const colors = ['#FF6B9D', '#4ECDC4', '#FFE66D', '#A8E6CF', '#FF8B94', '#C7CEEA'];

    function updateDisplay(letter) {
      const display = document.getElementById('letterDisplay');
      display.textContent = letter;
      display.style.color = colors[Math.floor(Math.random() * colors.length)];

      const name = document.getElementById('letterName');
      name.textContent = `${letter} is for ${letterNames[letter]}!`;
    }

    function speakLetter() {
      const letter = document.getElementById('letterDisplay').textContent;

      // Award star
      stars++;
      document.getElementById('stars').textContent = stars;

      // Mark as learned
      if (!learnedLetters.has(letter)) {
        learnedLetters.add(letter);
        updateAlphabetGrid();
      }

      // Show celebration
      celebrate('🎉');

      // Simulate speech (in real implementation, use Web Speech API)
      const name = document.getElementById('letterName');
      name.textContent = `${letter}! ${letter} says "${letterSounds[letter]}"`;

      // Change color
      const display = document.getElementById('letterDisplay');
      display.style.color = colors[Math.floor(Math.random() * colors.length)];

      // Could use Web Speech API here:
      // const utterance = new SpeechSynthesisUtterance(`${letter}. ${letter} is for ${letterNames[letter]}`);
      // speechSynthesis.speak(utterance);
    }

    function nextLetter() {
      currentIndex = (currentIndex + 1) % alphabet.length;
      updateDisplay(alphabet[currentIndex]);
    }

    function randomLetter() {
      currentIndex = Math.floor(Math.random() * alphabet.length);
      updateDisplay(alphabet[currentIndex]);
      celebrate('✨');
    }

    function showAlphabet() {
      const grid = document.getElementById('alphabetGrid');
      if (grid.style.display === 'none') {
        grid.style.display = 'grid';
        if (grid.children.length === 0) {
          alphabet.forEach(letter => {
            const div = document.createElement('div');
            div.className = 'alphabet-letter';
            div.textContent = letter;
            div.onclick = () => {
              currentIndex = alphabet.indexOf(letter);
              updateDisplay(letter);
              speakLetter();
            };
            grid.appendChild(div);
          });
        }
      } else {
        grid.style.display = 'none';
      }
    }

    function updateAlphabetGrid() {
      const grid = document.getElementById('alphabetGrid');
      if (grid.children.length > 0) {
        Array.from(grid.children).forEach((div, i) => {
          if (learnedLetters.has(alphabet[i])) {
            div.classList.add('learned');
          }
        });
      }
    }

    function celebrate(emoji) {
      const celebration = document.createElement('div');
      celebration.className = 'celebration';
      celebration.textContent = emoji;
      document.body.appendChild(celebration);
      setTimeout(() => celebration.remove(), 1000);
    }

    // Initialize
    updateDisplay(alphabet[0]);

    // Encourage interaction
    setTimeout(() => {
      const name = document.getElementById('letterName');
      name.textContent = '👆 Click the letter to hear it!';
    }, 3000);
  </script>
</body>
</html>

Features:

Large, colorful letter display
Click to hear letter name and sound
Progress tracking with stars
Alphabet grid showing learned letters
Randomization for variety
Encouraging animations
Mobile-friendly touch interface

Example 2: Sight Word Safari (Ages 5-7)

User asks: "Practice sight words for first grade"

Teacher generates: Interactive safari game with:

High-frequency Dolch/Fry words
Word recognition challenges
Sentence building activities
Timed reading practice
Progress badges and rewards

Example 3: Story Builder Studio (Ages 7-10)

User asks: "Help with reading comprehension"

Teacher generates: Interactive story workshop with:

Choose-your-own-adventure format
Comprehension questions embedded
Vocabulary highlighting
Character analysis tools
Story sequencing activities

Gamification System

Rewards & Stars

Letter Stars (1 star): Learn a new letter
Word Stars (5 stars): Read a new word
Story Stars (10 stars): Complete a story
Speed Stars (3 stars): Quick recognition
Perfect Stars (20 stars): 100% accuracy

Achievement Badges

🌟 ABC Master : Learn all 26 letters
📖 First Reader : Read first complete sentence
🏆 Word Wizard : Master 50 sight words
🎯 Perfect Week : Practice 7 days in a row
🚀 Speed Reader : Read 20 words in 1 minute
📚 Story Time : Complete 10 stories
🎨 Creative Writer : Build own story
⭐ Super Star : Earn 1000 total stars

Progress Tracking

Letters learned (26 total)
Sight words mastered
Stories completed
Reading streak (days)
Time spent reading
Accuracy percentage
Reading level advancement

Celebration Animations

Confetti for achievements
Star explosions for correct answers
Character animations
Sound effects (optional)
Progress bar fills
Level-up animations

Learning Activities by Type

Letter Recognition

Activities:

Alphabet song with animations
Letter matching games
Upper/lowercase pairing
Letter tracing (touch/mouse)
Find the letter challenges
Letter sorting activities

Example Code:

function createLetterMatch() {
  const uppercase = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
  const lowercase = 'abcdefghijklmnopqrstuvwxyz'.split('');

  // Shuffle and match pairs
  const pairs = uppercase.map((u, i) => ({
    upper: u,
    lower: lowercase[i],
    matched: false
  }));

  return pairs;
}

Phonics Practice

Activities:

Sound matching (letter to sound)
CVC word building (cat, dog, run)
Word families (-at, -an, -ig)
Rhyming word games
Blend practice (bl, cr, st)
Digraph detection (ch, sh, th)

Example:

const wordFamilies = {
  'at': ['cat', 'bat', 'rat', 'hat', 'mat', 'sat'],
  'an': ['can', 'man', 'pan', 'ran', 'van', 'fan'],
  'ig': ['big', 'dig', 'fig', 'pig', 'wig', 'jig']
};

function generateWordFamily(family) {
  return wordFamilies[family].map(word => ({
    word: word,
    letters: word.split(''),
    sound: `/${family}/`
  }));
}

Sight Word Training

High-Frequency Words (Dolch/Fry Lists):

Pre-K:

const preK = ['a', 'and', 'away', 'big', 'blue', 'can', 'come',
              'down', 'find', 'for', 'funny', 'go', 'help', 'here',
              'I', 'in', 'is', 'it', 'jump', 'little', 'look', 'make',
              'me', 'my', 'not', 'one', 'play', 'red', 'run', 'said',
              'see', 'the', 'three', 'to', 'two', 'up', 'we', 'where',
              'yellow', 'you'];

First Grade:

const firstGrade = ['after', 'again', 'an', 'any', 'as', 'ask', 'by',
                    'could', 'every', 'fly', 'from', 'give', 'going',
                    'had', 'has', 'her', 'him', 'his', 'how', 'just',
                    'know', 'let', 'live', 'may', 'of', 'old', 'once',
                    'open', 'over', 'put', 'round', 'some', 'stop',
                    'take', 'thank', 'them', 'then', 'think', 'walk',
                    'were', 'when'];

Interactive Sight Word Game:

function createSightWordChallenge(wordList, timeLimit = 60) {
  let score = 0;
  let currentWord = '';
  let timeRemaining = timeLimit;

  function nextWord() {
    currentWord = wordList[Math.floor(Math.random() * wordList.length)];
    displayWord(currentWord);
  }

  function checkAnswer(userInput) {
    if (userInput.toLowerCase() === currentWord.toLowerCase()) {
      score++;
      celebrate();
      nextWord();
    }
  }

  return { nextWord, checkAnswer, score };
}

Reading Comprehension

Strategies:

Predicting what happens next
Identifying main characters
Recalling story details
Understanding cause/effect
Making inferences
Visualizing scenes

Interactive Questions:

const comprehensionQuestions = {
  'The Cat and the Hat': [
    {
      question: 'Who are the main characters?',
      type: 'multiple-choice',
      options: ['Cat, Kids', 'Dog, Bird', 'Fish, Mom'],
      answer: 'Cat, Kids'
    },
    {
      question: 'Where does the story take place?',
      type: 'multiple-choice',
      options: ['Outside', 'At home', 'At school'],
      answer: 'At home'
    },
    {
      question: 'What did you like about the story?',
      type: 'open-ended',
      encouragement: 'Great thinking!'
    }
  ]
};

Story Building

Components:

Character selection
Setting choices
Problem/solution structure
Sequence of events
Ending options
Illustration tools

const storyElements = { characters: ['🐱 Cat', '🐶 Dog', '🦊 Fox', '🐻 Bear', '🦁 Lion'], settings: ['🏠 House', '🌳 Forest', '🏖️ Beach', '🏰 Castle', '🚀 Space'], problems: ['Lost something', 'Made a friend', 'Went on adventure', 'Solved mystery'], solutions: ['Found it!', 'Worked together', 'Used creativity', 'Never gave up'] };

function buildStory(selections) { return Once upon a time, there was a ${selections.character}. The ${selections.character} lived in a ${selections.setting}. One day, the ${selections.character} ${selections.problem}. In the end, ${selections.solution}!; }

Parent/Teacher Tools

Progress Reports

const progressReport = {
  childName: 'Emma',
  age: 6,
  level: 'Beginning Reader',
  stats: {
    lettersLearned: 26,
    sightWordsMastered: 45,
    storiesCompleted: 12,
    currentStreak: 7,
    totalTimeMinutes: 240
  },
  strengths: ['Letter recognition', 'Phonics', 'Enthusiasm'],
  workingOn: ['Sight words', 'Reading fluency'],
  nextSteps: ['Practice high-frequency words', 'Read aloud daily']
};

Customization Options

Adjust difficulty level
Select word lists
Choose themes/characters
Set time limits
Enable/disable sound
Track multiple children
Export progress data

Technical Implementation

Text-to-Speech (Web Speech API)

function speakText(text, rate = 1.0) {
  if ('speechSynthesis' in window) {
    const utterance = new SpeechSynthesisUtterance(text);
    utterance.rate = rate;
    utterance.pitch = 1.2; // Higher pitch for kids
    utterance.volume = 1.0;
    speechSynthesis.speak(utterance);
  } else {
    // Fallback: show text with pronunciation guide
    showPronunciation(text);
  }
}

Interactive Word Building

function createWordBuilder(targetWord) {
  const letters = targetWord.split('');
  const scrambled = shuffle([...letters]);

  let builtWord = [];

  function addLetter(letter) {
    builtWord.push(letter);
    updateDisplay();

    if (builtWord.join('') === targetWord) {
      celebrate('Correct!');
      return true;
    }
    return false;
  }

  function removeLetter() {
    builtWord.pop();
    updateDisplay();
  }

  return { addLetter, removeLetter, scrambled };
}

Reading Fluency Timer

class FluencyTracker {
  constructor(text) {
    this.text = text;
    this.wordCount = text.split(' ').length;
    this.startTime = null;
    this.endTime = null;
  }

  start() {
    this.startTime = Date.now();
  }

  stop() {
    this.endTime = Date.now();
    return this.calculate();
  }

  calculate() {
    const seconds = (this.endTime - this.startTime) / 1000;
    const minutes = seconds / 60;
    const wpm = Math.round(this.wordCount / minutes);

    return {
      wordsPerMinute: wpm,
      timeSeconds: seconds,
      wordCount: this.wordCount,
      rating: this.getRating(wpm)
    };
  }

  getRating(wpm) {
    // Age-appropriate WPM benchmarks
    if (wpm >= 100) return '🏆 Excellent!';
    if (wpm >= 70) return '⭐ Great job!';
    if (wpm >= 50) return '👍 Good work!';
    return '💪 Keep practicing!';
  }
}

Reference Materials

All included in /references:

phonics.md - Phonics patterns, rules, and activities
sight_words.md - Dolch and Fry word lists by level
comprehension.md - Reading strategies and question types
stories.md - Decodable texts and story templates

Scripts

All in /scripts:

generate_playground.sh - Create interactive reading playground
generate_game.sh - Build phonics or sight word game
generate_story.sh - Create interactive story

Best Practices

DO:

✅ Use large, clear fonts (minimum 24pt for beginners) ✅ Include audio pronunciation ✅ Provide immediate positive feedback ✅ Use colorful, engaging visuals ✅ Celebrate every success ✅ Keep sessions short (5-15 minutes) ✅ Make it playful and fun ✅ Track progress visibly

DON'T:

❌ Use complex vocabulary ❌ Show negative feedback ❌ Make activities too long ❌ Use small or hard-to-read text ❌ Skip audio support ❌ Make it feel like work ❌ Overwhelm with too many choices ❌ Forget to celebrate progress

Example Interactions

Toddler (Age 2):

"Teach my toddler the alphabet"

Generates: Interactive Letter Land with clickable letters, sounds, animations, and tracking

Kindergarten (Age 5):

"Help with CVC words"

Generates: Word family game with cat, bat, rat - drag-and-drop letter building with sounds

First Grade (Age 6):

"Practice sight words"

Generates: Sight Word Safari with timed challenges, sentences, and progress badges

Second Grade (Age 7):

"Reading comprehension practice"

Generates: Interactive story with embedded questions, vocabulary help, and rewards

Summary

This skill transforms reading education by:

Instant Engagement - Generates playgrounds immediately
Multi-Sensory - Visual, audio, interactive elements
Developmentally Appropriate - Age 1-10 coverage
Systematic - Phonics-based progression
Gamified - Stars, badges, celebrations
Effective - Research-based methods
Fun - Play-based learning

"Every child can learn to read with the right support and encouragement." 📚

Usage: Ask for help with any reading skill - letter recognition, phonics, sight words, comprehension - and get an instant, interactive learning experience tailored to your child's level!

Weekly Installs

116

Repository

jamesrochabrun/skills

GitHub Stars

First Seen

Jan 22, 2026

Security Audits

Gen Agent Trust HubFail SocketPass SnykPass

Installed on

opencode103

codex98

gemini-cli97

cursor94

github-copilot91

amp85

dbs-hook：短视频开头优化AI工具，诊断开头问题并生成优化方案，提升视频吸引力

1,700 周安装

互动阅读教师：为1-10岁儿童提供游戏化自然拼读与视觉词学习工具

🇨🇳中文介绍

阅读教师

此技能的功能

此技能的重要性

核心原则

1. 符合发展规律

2. 多感官参与

相关 Skills

3. 基于游戏的学习

4. 系统性教学

5. 积极强化

涵盖的阅读阶段

阅读前准备 (1-3岁)

早期阅读 (3-5岁)

初级阅读者 (5-7岁)

发展中阅读者 (7-10岁)

互动游戏场示例

示例 1：字母乐园大冒险 (1-3岁)

示例 2：视觉词探险 (5-7岁)

示例 3：故事构建工作室 (7-10岁)

游戏化系统

奖励与星星

成就徽章

进度追踪

庆祝动画

按类型划分的学习活动

字母识别

自然拼读练习

视觉词训练

阅读理解

故事构建

家长/教师工具

进度报告

自定义选项

技术实现

文本转语音 (Web Speech API)

互动单词构建

阅读流利度计时器

参考资料

脚本

最佳实践

应该做：

不应该做：

示例互动

总结

🇺🇸English

Reading Teacher

What This Skill Does

Why This Skill Matters

Core Principles

1. Developmentally Appropriate

2. Multi-Sensory Engagement

3. Play-Based Learning

4. Systematic Instruction

5. Positive Reinforcement

Reading Stages Covered

Pre-Reading (Ages 1-3)

Early Reading (Ages 3-5)

Beginning Readers (Ages 5-7)

Developing Readers (Ages 7-10)

Interactive Playground Examples

Example 1: Letter Land Adventure (Ages 1-3)

Example 2: Sight Word Safari (Ages 5-7)

Example 3: Story Builder Studio (Ages 7-10)

Gamification System

Rewards & Stars

Achievement Badges

Progress Tracking

Celebration Animations

Learning Activities by Type

Letter Recognition

Phonics Practice

Sight Word Training

Reading Comprehension

Story Building

Parent/Teacher Tools

Progress Reports

Customization Options

Technical Implementation