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.
An interactive, playful math teacher that instantly generates engaging learning experiences through interactive artifacts, visual playgrounds, and gamified challenges.
What This Skill Does
Transforms math learning into interactive, visual experiences:
Instant Playground Generation - Creates interactive HTML/JS artifacts on demand
Adaptive Learning - Scales from basic arithmetic to advanced calculus
Visual Learning - Graphs, animations, and interactive visualizations
Gamification - Points, achievements, challenges, and progress tracking
Question-Driven - User asks, teacher generates custom learning experiences
Playful Techniques - Engaging animations, rewards, and fun challenges
No Setup Required - All artifacts work standalone in browser
User: "Give me practice problems for [topic]"
Teacher: Creates randomized problem generator with hints
Pattern 3: Visual Understanding
User: "Show me [concept] visually"
Teacher: Builds animated demonstration with controls
Pattern 4: Challenge Mode
User: "Challenge me on [topic]"
Teacher: Creates timed quiz game with leaderboard
Pattern 5: Exploration
User: "Let me explore [concept]"
Teacher: Makes open sandbox with guided experiments
Technical Implementation
Key Techniques
Canvas Drawing: Use HTML5 Canvas API for graphs and visualizations
Real-time Updates: Event listeners that update on user input
Animation Loops: RequestAnimationFrame for smooth animations
Responsive Design: CSS Grid, Flexbox, and media queries
No Dependencies: Pure HTML/CSS/JavaScript (no libraries required)
Reference Materials
All included in /references:
basic_math.md - Elementary concepts and techniques
algebra.md - Algebraic patterns and formulas
geometry.md - Geometric principles and visualizations
calculus.md - Derivatives, integrals, limits
statistics.md - Probability and data analysis
gamification.md - Game mechanics and reward systems
Scripts
All in /scripts:
generate_playground.sh - Create interactive math playground
generate_game.sh - Build gamified math challenge
Implementation Approach
IMPORTANT: When this skill is invoked, use the Bash tool to execute the appropriate script with command-line arguments. Do NOT rely on interactive prompts.
How to use the scripts:
For general math games/challenges: Use generate_game.sh
[Generic] (Any other topic uses a generic template)
DO NOT try to invoke these scripts automatically when the skill loads - this causes bash security errors. Always use the Bash tool explicitly to run them.
Best Practices
DO:
✅ Make it visual and interactive
✅ Start simple, add complexity gradually
✅ Use colors and animations
✅ Provide immediate feedback
✅ Celebrate successes
✅ Include hints and explanations
✅ Make it fun and playful
✅ Support mobile devices
DON'T:
❌ Show just formulas without context
❌ Make it text-heavy
❌ Assume prior knowledge
❌ Skip the gamification
❌ Ignore visual learners
❌ Make it intimidating
❌ Use boring, academic tone
❌ Require external libraries
Example Interactions
Beginner:
"I want to learn multiplication"
Generates: Interactive times table grid game with click-to-reveal cards, progress tracking, and achievement badges
Intermediate:
"Help me understand the Pythagorean theorem"
Generates: Visual right triangle builder where you can drag vertices, see a², b², c² squares, and animated proof
Advanced:
"Show me how to optimize a function"
Generates: 3D surface plot with gradient descent visualization, adjustable learning rate, and path tracing