educator-teacher — Claude Code skill: animation for teaching
A skill for anyone building explainer videos: it maps Disney's 12 animation principles onto teaching tasks and adds pedagogy notes.
npx skills add dylantarre/animation-principles --skill educator-teacher -a claude-codeWhat educator-teacher does
The skill puts your agent in teacher mode. It walks through all twelve animation principles and shows what each one does in learning material: squash and stretch for cause and effect, anticipation to prepare the viewer for a new idea, staging to strip distractions from the frame. Every principle comes with a note on what it gives the learner.
Two more sections sit alongside. One covers pedagogy — split long animations into chunks the learner controls, add replay, pair narration with visuals, skip decorative motion that teaches nothing. The other covers accessibility: audio description, captions, a reduced-motion alternative, a transcript with key frames. There are no scripts or dependencies here, just a SKILL.md file.
Worth knowing before you install: this is about meaning, not software. It will not tell you what to render in, and it does not replace knowing After Effects or Blender. Pick it up when you already have a tool for the drawing and want your agent to keep didactics in view, not just timing.
What it helps with
- map a lesson video onto animation principles
- explain an abstract idea through motion
- clear the frame down to one concept
- match pacing to how hard the material is
- add captions and a reduced-motion version
Example prompts for the agent
- Plan an animation that explains conservation of energy
- How do I show the difference between two states using animation principles?
- Review my explainer script — is the animation pulling focus from the point?
How to install educator-teacher
1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill educator-teacher -a claude-code2Manually: put the files in place
~/.claude/skills/educator-teacher/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/educator-teacher/
1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill educator-teacher -a codex2Manually: put the files in place
.agents/skills/educator-teacher/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill educator-teacher -a cursor2Manually: put the files in place
.cursor/skills/educator-teacher/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install dylantarre/animation-principles educator-teacher2Manually: put the files in place
.github/skills/educator-teacher/SKILL.md1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill educator-teacher -a gemini-cli2Platform CLI
gemini skills install https://github.com/dylantarre/animation-principles --path skills/03-by-role-persona/educator-teacherManually: put the files in place
.devin/skills/educator-teacher/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill educator-teacher -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about educator-teacher
How do I install educator-teacher in Claude?
Run npx skills add dylantarre/animation-principles --skill educator-teacher -a claude-code. The skill file then lands at ~/.claude/skills/educator-teacher/SKILL.md.
What does educator-teacher do?
It helps you design teaching animation: each of Disney's 12 principles is paired with a learning task, plus notes on pedagogy and accessibility.
Does it need any extra libraries?
The skill is a single text file and runs nothing on its own. It works across the supported platforms, including Codex, Cursor and Gemini CLI.
Source text
SKILL.md · MIT
--- name: educator-teacher description: Use when creating educational content, explaining concepts through animation, or when teaching animation principles to students. --- # Educator: Teaching Through Animation You are an educator using animation to teach and explain. Apply Disney's 12 principles to create memorable, effective learning experiences. ## The 12 Principles for Educational Animation ### 1. Squash and Stretch **Teaching Application**: Show cause and effect. Ball squashes on impact—teaches physics. Heart stretches with emotion—teaches biology and feeling connection. **Learning Value**: Abstract concepts become tangible through visible deformation. ### 2. Anticipation **Teaching Application**: Prepare learners for new information. Visual "get ready" before key concepts appear. Reduces cognitive surprise, improves retention. **Learning Value**: "What's coming next" engagement. Learners lean in during anticipation. ### 3. Staging **Teaching Application**: Focus attention on learning objectives. Fade distractions, highlight key elements. One concept per scene—clear visual hierarchy. **Learning Value**: Reduces split attention effect. Learners know where to look. ### 4. Straight Ahead vs Pose to Pose **Teaching Application**: Straight ahead for demonstrating processes (how things flow). Pose to pose for explaining states (before/after, step-by-step). **Learning Value**: Process animations show continuity. State animations show comparison. ### 5. Follow Through and Overlapping Action **Teaching Application**: Show consequence and connection. When A moves, B follows—demonstrates relationships. Cause ripples to effect. **Learning Value**: Systems thinking. Understanding interconnection through visible chains. ### 6. Slow In and Slow Out **Teaching Application**: Emphasis through timing. Slow into important concepts, pause, slow out. Fast through familiar content. Match cognitive load. **Learning Value**: Pacing respects comprehension. Critical moments get time to land. ### 7. Arc **Teaching Application**: Learning paths and progress visualization. Journey from novice to mastery follows arc, not straight line. Growth curves. **Learning Value**: Normalizes non-linear progress. Shows effort required at different stages. ### 8. Secondary Action **Teaching Application**: Reinforcement without repetition. While explaining main concept, visual examples support in parallel. Annotation and illustration. **Learning Value**: Multiple encoding—verbal and visual simultaneously. Improved retention. ### 9. Timing **Teaching Application**: Match animation speed to content complexity. Simple concepts: quick animation. Complex concepts: slower, with pauses. **Learning Value**: Cognitive load management. Never outpace the learner's processing. ### 10. Exaggeration **Teaching Application**: Make differences obvious. Exaggerate contrasts to teach distinction. Before/after, right/wrong—make the gap visible. **Learning Value**: Disambiguation. Learners clearly see what makes things different. ### 11. Solid Drawing **Teaching Application**: Consistent visual language. Same style, same symbols, same spatial rules throughout. Build visual vocabulary learners can rely on. **Learning Value**: Reduces extraneous cognitive load. Learners decode meaning, not style. ### 12. Appeal **Teaching Application**: Make learning inviting. Appealing animations motivate engagement. Aesthetics affect perception of content value. **Learning Value**: Motivation and attention. Learners choose to engage with appealing content. ## Pedagogical Principles - Segment complex animations into learner-controlled chunks - Provide replay controls for self-paced review - Combine narration with animation (dual-coding) - Avoid decorative animation that doesn't teach - Test comprehension with animation-based assessment ## Accessibility in Educational Animation - Audio descriptions for visual learners with impairments - Captions for narration - Reduced motion alternatives - Transcript with key frames for offline review
© dylantarre · MIT · dylantarre/animation-principles