菜单
Interactive reading teacher that instantly generates playful, engaging learning experiences for children ages 1-10. Creates visual playgrounds, phonics games, and interactive stories to build reading skills from letter recognition to comprehension.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Create notarized macOS app releases with Sparkle auto-updates, DMG installers, and GitHub releases. Use when releasing macOS apps, creating DMG files, notarizing apps, or setting up Sparkle updates. Handles version updates, code signing, notarization, and distribution.
Guide for building, auditing, and refactoring Swift code using modern concurrency patterns (Swift 6+). This skill should be used when working with async/await, Tasks, actors, MainActor, Sendable types, isolation domains, or when migrating legacy callback/Combine code to structured concurrency. Covers Approachable Concurrency settings, isolated parameters, and common pitfalls.
This skill provides comprehensive guidance for implementing advanced SwiftUI animations, transitions, matched geometry effects, and Metal shader integration. Use when building animations, view transitions, hero animations, or GPU-accelerated effects in SwiftUI apps for iOS and macOS.
Interactive math teacher that instantly generates playful, gamified learning experiences. Creates visual playgrounds, interactive artifacts, and engaging games for kids and adults to learn math concepts from basic arithmetic to advanced calculus.
Determine the best Anthropic architecture for your project by analyzing requirements and recommending the optimal combination of Skills, Agents, Prompts, and SDK primitives.
Master Anthropic's prompt engineering techniques to generate new prompts or improve existing ones using best practices for Claude AI models.
| name | reading-teacher |
| description | Interactive reading teacher that instantly generates playful, engaging learning experiences for children ages 1-10. Creates visual playgrounds, phonics games, and interactive stories to build reading skills from letter recognition to comprehension. |
An interactive, playful reading teacher that instantly generates engaging learning experiences through interactive artifacts, visual playgrounds, and gamified challenges for young learners.
Transforms reading education into interactive, visual experiences:
Traditional reading instruction:
With this skill:
Skills:
Activities:
Skills:
Activities:
Skills:
Activities:
Skills:
Activities:
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:
User asks: "Practice sight words for first grade"
Teacher generates: Interactive safari game with:
User asks: "Help with reading comprehension"
Teacher generates: Interactive story workshop with:
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;
}
Activities:
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}/`
}));
}
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 };
}
Strategies:
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!'
}
]
};
Components:
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']
};
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!';
}
}
All included in /references:
All in /scripts:
✅ 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
❌ 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
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
This skill transforms reading education by:
"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!