math-teacher

jamesrochabrun

Updated Yesterday

19 views

Metadesign

About

The math-teacher skill instantly generates interactive, gamified math learning experiences as HTML/JS artifacts. It creates visual playgrounds and engaging games that scale from basic arithmetic to advanced calculus. Use this skill when you need to build dynamic, visual math tutorials or educational tools on demand.

Documentation

Math Teacher

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

Why This Skill Matters

Traditional math learning:

Abstract concepts without visualization
Passive reading and memorization
One-size-fits-all approach
Boring drills and repetition
Limited interactivity
Difficult to stay engaged

With this skill:

Instant visual understanding
Active learning through play
Personalized to your level
Fun, game-like challenges
Immediate feedback loops
High engagement and retention

Core Principles

1. Learn by Doing

Interactive manipulatives
Experiment with variables
Real-time feedback
Hands-on exploration
Visual experimentation

2. Gamification First

Points and achievements
Progress tracking
Level systems
Challenges and streaks
Leaderboards (personal bests)
Reward animations

3. Visual Learning

Dynamic graphs and charts
Animated demonstrations
Color-coded explanations
Interactive diagrams
Step-by-step visualizations

4. Instant Gratification

Generate artifacts immediately
No setup or installation
Works in any browser
Shareable playgrounds
Mobile-friendly

5. Adaptive Complexity

Starts simple, grows complex
Detects skill level
Progressive difficulty
Scaffolded learning
Multiple approaches

Math Topics Covered

Elementary (Ages 6-12)

Arithmetic: Addition, subtraction, multiplication, division
Fractions: Visual fraction bars, equivalent fractions
Geometry: Shapes, angles, perimeter, area
Patterns: Number sequences, visual patterns
Word Problems: Interactive story problems
Time & Money: Clock reading, coin counting

Middle School (Ages 12-15)

Pre-Algebra: Variables, expressions, equations
Ratios & Proportions: Scale drawings, unit rates
Percentages: Discounts, interest, growth
Statistics: Mean, median, mode, graphs
Basic Geometry: Pythagorean theorem, volume
Integers: Negative numbers, operations

High School (Ages 15-18)

Algebra: Linear equations, quadratics, polynomials
Functions: Domain/range, graphing, transformations
Trigonometry: Sin, cos, tan, unit circle
Geometry: Proofs, similarity, coordinate geometry
Pre-Calculus: Limits, sequences, series
Statistics: Probability, distributions, analysis

Advanced (College+)

Calculus: Derivatives, integrals, optimization
Linear Algebra: Matrices, vectors, transformations
Differential Equations: ODEs, PDEs, modeling
Complex Analysis: Complex numbers, mappings
Abstract Algebra: Groups, rings, fields
Real Analysis: Sequences, series, convergence

Interactive Playground Examples

Example 1: Fraction Visualizer (Elementary)

User asks: "Help me understand fractions"

Teacher generates:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>🍕 Fraction Pizza Party!</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: 'Comic Sans MS', cursive, sans-serif;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px;
      color: white;
    }
    .header {
      text-align: center;
      margin-bottom: 30px;
    }
    h1 { font-size: 3em; margin-bottom: 10px; }
    .score {
      background: rgba(255,255,255,0.2);
      padding: 10px 20px;
      border-radius: 20px;
      font-size: 1.5em;
      display: inline-block;
    }
    .pizza-container {
      position: relative;
      width: 300px;
      height: 300px;
      margin: 20px;
    }
    .pizza {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: #FFA500;
      border: 10px solid #CC8400;
      position: relative;
      overflow: hidden;
      box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    }
    .slice {
      position: absolute;
      width: 50%;
      height: 50%;
      top: 50%;
      left: 50%;
      transform-origin: 0 0;
      background: #FF6347;
      border: 2px solid white;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    .slice:hover { transform: scale(1.05) !important; }
    .slice.eaten {
      background: #FFA500;
      border-color: #CC8400;
    }
    .controls {
      background: white;
      padding: 30px;
      border-radius: 20px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.2);
      color: #333;
      margin: 20px;
      max-width: 500px;
    }
    .slider-group {
      margin: 20px 0;
    }
    label {
      font-weight: bold;
      font-size: 1.2em;
      display: block;
      margin-bottom: 10px;
    }
    input[type="range"] {
      width: 100%;
      height: 10px;
      border-radius: 5px;
      background: #ddd;
      outline: none;
      cursor: pointer;
    }
    .value-display {
      font-size: 2em;
      text-align: center;
      margin: 20px 0;
      color: #667eea;
      font-weight: bold;
    }
    .explanation {
      background: #f0f0f0;
      padding: 15px;
      border-radius: 10px;
      margin-top: 20px;
      font-size: 1.1em;
      line-height: 1.6;
    }
    button {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      border: none;
      padding: 15px 30px;
      font-size: 1.2em;
      border-radius: 10px;
      cursor: pointer;
      margin: 10px;
      transition: transform 0.2s;
    }
    button:hover { transform: scale(1.05); }
    .achievement {
      position: fixed;
      top: 20px;
      right: 20px;
      background: gold;
      color: #333;
      padding: 20px;
      border-radius: 10px;
      font-weight: bold;
      animation: slideIn 0.5s ease;
      box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    }
    @keyframes slideIn {
      from { transform: translateX(400px); opacity: 0; }
      to { transform: translateX(0); opacity: 1; }
    }
  </style>
</head>
<body>
  <div class="header">
    <h1>🍕 Fraction Pizza Party!</h1>
    <div class="score">Points: <span id="points">0</span> 🌟</div>
  </div>

  <div class="pizza-container">
    <div class="pizza" id="pizza"></div>
  </div>

  <div class="controls">
    <div class="slider-group">
      <label for="numerator">How many slices do you want? (Numerator)</label>
      <input type="range" id="numerator" min="0" max="8" value="1" step="1">
    </div>

    <div class="slider-group">
      <label for="denominator">How many total slices? (Denominator)</label>
      <input type="range" id="denominator" min="1" max="8" value="4" step="1">
    </div>

    <div class="value-display">
      <span id="fraction">1/4</span>
    </div>

    <div class="explanation">
      <strong>You have:</strong> <span id="explanation"></span>
    </div>

    <button onclick="checkEquivalent()">Find Equivalent Fraction! ✨</button>
    <button onclick="reset()">New Pizza! 🆕</button>
  </div>

  <script>
    let points = 0;
    const numeratorSlider = document.getElementById('numerator');
    const denominatorSlider = document.getElementById('denominator');
    const fractionDisplay = document.getElementById('fraction');
    const explanationDiv = document.getElementById('explanation');
    const pizza = document.getElementById('pizza');

    function updatePizza() {
      const numerator = parseInt(numeratorSlider.value);
      const denominator = parseInt(denominatorSlider.value);

      // Update max for numerator
      numeratorSlider.max = denominator;
      if (numerator > denominator) {
        numeratorSlider.value = denominator;
      }

      // Update display
      fractionDisplay.textContent = `${numerator}/${denominator}`;

      // Clear pizza
      pizza.innerHTML = '';

      // Create slices
      const anglePerSlice = 360 / denominator;
      for (let i = 0; i < denominator; i++) {
        const slice = document.createElement('div');
        slice.className = 'slice';
        if (i >= numerator) {
          slice.classList.add('eaten');
        }
        slice.style.transform = `rotate(${i * anglePerSlice}deg) skewY(${90 - anglePerSlice}deg)`;
        pizza.appendChild(slice);
      }

      // Update explanation
      const percentage = ((numerator / denominator) * 100).toFixed(1);
      explanationDiv.innerHTML = `
        <strong>${numerator}</strong> out of <strong>${denominator}</strong> slices =
        <strong>${percentage}%</strong> of the pizza!
        ${numerator === denominator ? '🎉 You have the whole pizza!' : ''}
        ${numerator === 0 ? '😢 No pizza for you!' : ''}
      `;

      // Award points
      if (numerator === denominator && numerator > 0) {
        awardPoints(10, 'Whole Pizza!');
      }
    }

    function checkEquivalent() {
      const numerator = parseInt(numeratorSlider.value);
      const denominator = parseInt(denominatorSlider.value);

      // Find simplified fraction
      const gcd = (a, b) => b === 0 ? a : gcd(b, a % b);
      const divisor = gcd(numerator, denominator);
      const simplified = `${numerator / divisor}/${denominator / divisor}`;

      if (divisor > 1) {
        showAchievement(`✨ ${numerator}/${denominator} = ${simplified}!`);
        awardPoints(20, 'Found equivalent!');
      } else {
        showAchievement('Already simplified! 👏');
        awardPoints(5, 'Already simple!');
      }
    }

    function awardPoints(amount, reason) {
      points += amount;
      document.getElementById('points').textContent = points;
    }

    function showAchievement(text) {
      const achievement = document.createElement('div');
      achievement.className = 'achievement';
      achievement.textContent = text;
      document.body.appendChild(achievement);
      setTimeout(() => achievement.remove(), 3000);
    }

    function reset() {
      numeratorSlider.value = 1;
      denominatorSlider.value = 4;
      updatePizza();
      awardPoints(5, 'New pizza!');
    }

    numeratorSlider.addEventListener('input', updatePizza);
    denominatorSlider.addEventListener('input', updatePizza);

    // Initialize
    updatePizza();
  </script>
</body>
</html>

Features:

Visual pizza slices to understand fractions
Interactive sliders to change numerator/denominator
Real-time percentage calculation
Gamified with points and achievements
Equivalent fraction finder
Color-coded, playful design

Example 2: Quadratic Explorer (High School)

User asks: "I don't understand quadratic functions"

Teacher generates: Interactive graph with sliders for a, b, c coefficients, showing:

Real-time parabola graphing
Vertex highlighting
Roots (x-intercepts) marked
Axis of symmetry
Discriminant explanation
Points for discovering special cases

Example 3: Derivative Visualizer (Advanced)

User asks: "Show me how derivatives work"

Teacher generates: Interactive calculus playground with:

Function input field
Tangent line at any point
Secant line animation showing limit
Slope calculation display
Common derivative rules reference
Challenge mode: guess the derivative

Gamification System

Points & Rewards

Exploration Points (5pts): Try different values
Discovery Points (10pts): Find special cases
Mastery Points (20pts): Complete challenges
Streak Bonus (2x): Consecutive correct answers
Speed Bonus (1.5x): Quick correct responses

Achievements

🌟 First Steps: Complete first problem
🔥 Hot Streak: 5 correct in a row
🎯 Bullseye: Perfect score on challenge
🏆 Math Master: 1000 points earned
💡 Eureka: Discover hidden pattern
🚀 Speed Demon: 10 problems under 5 min

Progress Tracking

Problems attempted
Success rate
Points earned
Current streak
Time spent learning
Topics mastered

Challenge Modes

Time Attack: Solve as many as possible
Accuracy Mode: Get perfect answers
Exploration: Discover patterns
Boss Battle: Complex multi-step problems
Daily Challenge: New problem each day

Playful Learning Techniques

1. Storytelling

Math problems wrapped in engaging narratives:

"Space mission" for algebra
"Treasure hunt" for geometry
"Recipe scaling" for ratios
"Game design" for functions

2. Visual Metaphors

Abstract concepts made concrete:

Derivatives = "speedometer"
Integrals = "area under curve"
Variables = "mystery boxes"
Functions = "magic machines"

3. Progressive Hints

Scaffolded support system:

Level 1: Gentle nudge
Level 2: Show strategy
Level 3: Step-by-step
Level 4: Full solution

4. Immediate Feedback

Real-time learning loops:

Color-coded correctness
Encouraging messages
Error explanations
Try-again suggestions

5. Celebration Animations

Reward correct answers:

Confetti explosions
Success sounds
Growing score counter
Achievement popups

Artifact Generation Patterns

Standard Playground Structure

Every generated artifact includes:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>[Math Topic] - Interactive Playground</title>
  <style>
    /* Playful, colorful styling */
    /* Responsive design */
    /* Animations and transitions */
  </style>
</head>
<body>
  <!-- Header with title and score -->
  <!-- Visual representation area -->
  <!-- Interactive controls -->
  <!-- Explanation section -->
  <!-- Gamification elements -->

  <script>
    // Core math logic
    // Visualization updates
    // Game mechanics
    // Achievement system
  </script>
</body>
</html>

Key Features in Every Artifact

✅ Visual: Graphs, animations, diagrams ✅ Interactive: Sliders, inputs, buttons ✅ Responsive: Works on mobile/tablet/desktop ✅ Gamified: Points, achievements, feedback ✅ Educational: Clear explanations ✅ Accessible: Keyboard navigation, ARIA labels ✅ Standalone: No external dependencies

Usage Patterns

Pattern 1: Concept Explanation

User: "Explain [concept]" Teacher: Generates interactive visualization + step-by-step guide

Pattern 2: Practice Problems

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

Canvas Drawing (for graphs)

const canvas = document.getElementById('graph');
const ctx = canvas.getContext('2d');

function drawFunction(fn, xMin, xMax) {
  ctx.beginPath();
  for (let x = xMin; x <= xMax; x += 0.1) {
    const y = fn(x);
    const px = (x - xMin) / (xMax - xMin) * canvas.width;
    const py = canvas.height - (y / 10) * canvas.height;
    if (x === xMin) ctx.moveTo(px, py);
    else ctx.lineTo(px, py);
  }
  ctx.strokeStyle = '#667eea';
  ctx.lineWidth = 3;
  ctx.stroke();
}

Real-time Updates

// Update visualization as user changes inputs
input.addEventListener('input', () => {
  const value = parseFloat(input.value);
  updateVisualization(value);
  updateExplanation(value);
  checkForAchievements(value);
});

Animation Loop

function animate() {
  // Clear canvas
  // Update positions
  // Draw new frame
  // Check game state
  requestAnimationFrame(animate);
}

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
generate_quiz.sh - Create adaptive quiz system

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

Summary

This skill transforms math education by:

Instant Engagement - Generates playgrounds immediately
Visual Learning - Graphs, animations, interactive diagrams
Gamification - Points, achievements, challenges
Adaptive Difficulty - From elementary to advanced
Self-Contained - All artifacts work standalone
Playful - Fun, colorful, rewarding
Effective - Learn by doing and exploring

"Math should be an adventure, not a chore." 🚀

Usage: Ask any math question, request a concept explanation, or say "teach me [topic]" and get an instant, interactive learning experience!

Quick Install

/plugin add https://github.com/jamesrochabrun/skills/tree/main/math-teacher

Copy and paste this command in Claude Code to install this skill

GitHub 仓库

jamesrochabrun/skills

Path: math-teacher

Related Skills

langchain

Algorithmic Art Generation

webapp-testing

Testing

This Claude Skill provides a Playwright-based toolkit for testing local web applications through Python scripts. It enables frontend verification, UI debugging, screenshot capture, and log viewing while managing server lifecycles. Use it for browser automation tasks but run scripts directly rather than reading their source code to avoid context pollution.

View skill

requesting-code-review

Design

This skill dispatches a code-reviewer subagent to analyze code changes against requirements before proceeding. It should be used after completing tasks, implementing major features, or before merging to main. The review helps catch issues early by comparing the current implementation with the original plan.

View skill