education-learning — Claude Code skill: animation for learning apps
A skill for animation work in e-learning and tutoring apps: it sets timings, answer feedback and progress cues.
npx skills add dylantarre/animation-principles --skill education-learning -a claude-codeWhat education-learning does
The skill maps Disney's 12 animation principles onto learning UI. Answer buttons get a friendly squash on selection, mascots stretch for personality, achievement badges bounce. Quiz reveals build up before showing results, and submitting an answer gets a beat before feedback lands.
A timing table sits inside: answer feedback 200ms ease-out, correct-answer celebration 600ms spring, lesson transition 350ms ease-in-out, progress update 300ms ease-out, achievement unlock 800ms custom-bounce. The guidance is explicit that mistakes are handled gently while success is celebrated generously. Worth checking your own numbers against it — feedback slower than 200ms reads as lag to a learner.
The skill installs into Claude, Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode. In Claude the file lands at ~/.claude/skills/education-learning/SKILL.md, in Cursor at .cursor/skills/education-learning/SKILL.md, in Copilot at .github/skills/education-learning/SKILL.md.
What it helps with
- pick duration and easing for quiz answer feedback
- make a correct-answer celebration noticeable without annoying learners
- show course progress without pulling focus from the lesson
- smooth the transition between lessons
- give a mascot or character personality through motion
Example prompts for the agent
- pick timings for the correct-answer animation in my quiz
- make the lesson transition smooth, following the skill's principles
- how should I animate an achievement unlock in a tutoring app
How to install education-learning
1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill education-learning -a claude-code2Manually: put the files in place
~/.claude/skills/education-learning/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/education-learning/
1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill education-learning -a codex2Manually: put the files in place
.agents/skills/education-learning/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill education-learning -a cursor2Manually: put the files in place
.cursor/skills/education-learning/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install dylantarre/animation-principles education-learning2Manually: put the files in place
.github/skills/education-learning/SKILL.md1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill education-learning -a gemini-cli2Platform CLI
gemini skills install https://github.com/dylantarre/animation-principles --path skills/08-by-industry/education-learningManually: put the files in place
.devin/skills/education-learning/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill education-learning -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 education-learning
How do I install education-learning in Claude?
Run npx skills add dylantarre/animation-principles --skill education-learning -a claude-code. The skill ends up at ~/.claude/skills/education-learning/SKILL.md.
What does this skill do?
It applies the 12 animation principles to learning interfaces: answer buttons, mascots, badges, quiz result reveals, points counters. It also ships a table of durations and easings for common actions.
Does it work with Cursor or Copilot?
Yes. For Cursor run npx skills add dylantarre/animation-principles --skill education-learning -a cursor; for GitHub Copilot run gh skill install dylantarre/animation-principles education-learning.
Source text
SKILL.md · MIT
--- name: education-learning description: Use when designing animations for educational platforms, e-learning, tutoring apps, or skill-building experiences --- # Education & Learning Animation Principles Apply Disney's 12 principles to create engaging, encouraging experiences that support comprehension and celebrate progress. ## The 12 Principles Applied ### 1. Squash & Stretch - **Answer Buttons**: Friendly squash on selection - **Mascots/Characters**: Personality through stretch - **Achievement Badges**: Bounce with character ### 2. Anticipation - **Quiz Reveal**: Build-up before showing results - **Next Lesson**: Preparation for new content - **Submit Answer**: Moment before feedback ### 3. Staging - **Learning Content**: Primary focus always - **Progress Indicators**: Visible but not distracting - **Interactive Elements**: Clear call to action ### 4. Straight Ahead & Pose to Pose - **Video Lessons**: Continuous playback (straight ahead) - **Course Progress**: Step-by-step modules (pose to pose) - **Interactive Exercises**: Defined question states ### 5. Follow Through & Overlapping Action - **Correct Answer**: Checkmark lands, then celebration - **Lesson Cards**: Stack with natural follow-through - **Points Counter**: Numbers settle after update ### 6. Slow In & Slow Out - **Gentle Transitions**: Nothing jarring while learning - **Content Reveals**: Comfortable pacing - **Modal Opens**: Smooth 300-400ms ### 7. Arc - **Progress Paths**: Curved learning journeys - **Drag Answers**: Natural arc to drop zones - **Reward Animations**: Confetti follows arcs ### 8. Secondary Action - **XP Gained**: Sparkles while points update - **Streak Maintained**: Fire animation with counter - **Level Up**: Background effects with main celebration ### 9. Timing - **Feedback**: Quick 150-200ms for responsiveness - **Celebrations**: Longer 500-800ms for motivation - **Transitions**: Moderate 300-400ms for clarity ### 10. Exaggeration - **Celebrate Success**: Big positive reinforcement - **Gentle on Errors**: Never discouraging - **Milestones**: Mark achievements memorably ### 11. Solid Drawing - **Illustrations**: Friendly, consistent art style - **Diagrams**: Clear educational visuals - **Icons**: Approachable, not intimidating ### 12. Appeal - **Encouraging Personality**: Warm and supportive - **Age-Appropriate**: Match target learner - **Motivation Design**: Reward-driven animations ## Industry Timing Standards | Action | Duration | Easing | |--------|----------|--------| | Answer Feedback | 200ms | ease-out | | Correct Celebration | 600ms | spring | | Lesson Transition | 350ms | ease-in-out | | Progress Update | 300ms | ease-out | | Achievement Unlock | 800ms | custom-bounce | ## Key Principle Animation should encourage and reward. Celebrate progress generously, handle mistakes gently, and maintain engagement through thoughtful micro-interactions that make learning feel like an adventure.
© dylantarre · MIT · dylantarre/animation-principles
