education-learning — скилл для Claude Code: анимации в обучающих
Скилл для тех, кто делает анимации в e-learning и тренажёрах: подсказывает тайминги, отклик на ответ и подачу прогресса.
npx skills add dylantarre/animation-principles --skill education-learning -a claude-codeЧто делает education-learning
Скилл раскладывает 12 принципов анимации Диснея по элементам учебного интерфейса. Кнопки ответов получают мягкий сквош при нажатии, маскоты — растяжение, бейджи достижений — отскок. Перед показом результатов квиза закладывается подготовка, а перед обратной связью на отправленный ответ — короткая пауза.
Внутри есть таблица таймингов: отклик на ответ 200ms с ease-out, празднование правильного ответа 600ms на spring, переход между уроками 350ms с ease-in-out, обновление прогресса 300ms, разблокировка достижения 800ms на custom-bounce. Отдельно оговорено, что ошибки обрабатываются мягко, а успех празднуется щедро. Это повод проверить свои текущие длительности: если отклик на ответ у вас длиннее 200ms, интерфейс ощущается вязким.
Скилл ставят в Claude, Codex, Cursor, GitHub Copilot, Gemini CLI и OpenCode. Для Claude файл ложится в ~/.claude/skills/education-learning/SKILL.md, для Cursor — в .cursor/skills/education-learning/SKILL.md, для Copilot — в .github/skills/education-learning/SKILL.md.
Какие задачи решает
- подобрать длительность и кривую для отклика на ответ в квизе
- сделать празднование правильного ответа заметным, но не раздражающим
- показать прогресс курса, не отвлекая от учебного материала
- оформить переход между уроками без резких скачков
- добавить маскоту или персонажу характер через анимацию
Примеры запросов агенту
- подбери тайминги для анимации правильного ответа в квизе
- сделай переход между уроками плавным, по принципам из скилла
- как анимировать разблокировку достижения в тренажёре
Как установить education-learning
1Через Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill education-learning -a claude-code2Вручную: положить файлы
~/.claude/skills/education-learning/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/education-learning/
1Через Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill education-learning -a codex2Вручную: положить файлы
.agents/skills/education-learning/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill education-learning -a cursor2Вручную: положить файлы
.cursor/skills/education-learning/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install dylantarre/animation-principles education-learning2Вручную: положить файлы
.github/skills/education-learning/SKILL.md1Через Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill education-learning -a gemini-cli2Командой платформы
gemini skills install https://github.com/dylantarre/animation-principles --path skills/08-by-industry/education-learningВручную: положить файлы
.devin/skills/education-learning/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill education-learning -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о education-learning
Как установить education-learning в Claude?
Выполните npx skills add dylantarre/animation-principles --skill education-learning -a claude-code. Скилл окажется в ~/.claude/skills/education-learning/SKILL.md.
Что делает этот скилл?
Разбирает 12 принципов анимации применительно к учебным интерфейсам: кнопки ответов, маскоты, бейджи, показ результатов квиза, счётчик очков. Плюс даёт таблицу длительностей и кривых для типовых действий.
Подойдёт ли он для Cursor или Copilot?
Да. Для Cursor команда npx skills add dylantarre/animation-principles --skill education-learning -a cursor, для GitHub Copilot — gh skill install dylantarre/animation-principles education-learning.
Исходный текст
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
