К основному содержанию
скилл CX Codex

educator-teacher — скилл для Claude Code: анимация в обучении

Скилл для тех, кто делает обучающие видео и объясняет сложное через анимацию: раскладывает 12 принципов Disney по учебным задачам.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add dylantarre/animation-principles --skill educator-teacher -a claude-code
Открыть на GitHub

Что делает educator-teacher

Скилл включает режим преподавателя. Агент берёт каждый из двенадцати принципов анимации и показывает, как применить его в учебном материале: squash and stretch объясняет причину и следствие, anticipation готовит зрителя к новой мысли, staging убирает лишнее из кадра. Рядом с каждым принципом идёт пометка, что это даёт учащемуся.

Внутри ещё блок педагогики и раздел доступности. Первый советует резать длинную анимацию на куски, которыми управляет учащийся, добавлять перемотку, дублировать смысл голосом и картинкой. Второй напоминает про аудиоописание, субтитры, вариант с уменьшенным движением и расшифровку с ключевыми кадрами. Никаких скриптов и зависимостей тут нет — это текстовый файл SKILL.md.

Полезно знать: скилл про смысл, а не про софт. Он не подскажет, в чём рендерить, и не заменит знание After Effects или Blender. Ставить стоит, если у вас уже есть чем рисовать и вы хотите, чтобы агент держал в голове дидактику, а не только тайминги.

Какие задачи решает

  • разложить учебный ролик по принципам анимации
  • объяснить абстрактное понятие через движение
  • убрать из кадра лишнее и оставить одну мысль
  • подобрать темп под сложность материала
  • добавить субтитры и вариант с уменьшенным движением

Примеры запросов агенту

  • Помоги спланировать анимацию, которая объясняет закон сохранения энергии
  • Как показать разницу между двумя состояниями через принципы анимации?
  • Проверь мой сценарий обучающего ролика: не отвлекает ли анимация от сути?

Как установить educator-teacher

1Через Skills CLI (Vercel)

npx skills add dylantarre/animation-principles --skill educator-teacher -a claude-code

2Вручную: положить файлы

~/.claude/skills/educator-teacher/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/educator-teacher/

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Из того же набора85

page-transitions Скилл для анимации смены маршрутов, модалок и навигации. Помогает агенту выбрать тайминги и тип перехода вместо случайных значений. CX Codex +1 667установок fitness-wellness Скилл задаёт тайминги и приёмы анимации для фитнес-приложений, трекеров тренировок и медитаций. Пригодится, когда интерфейс должен подбадривать, а не просто двигаться. CX Codex +1 661установок presentations Скилл для анимации в Keynote, PowerPoint и Google Slides. Подсказывает тайминги, порядок появления элементов и переходы. CX Codex +1 648установок e-commerce-retail Скилл описывает анимации для карточек товаров, корзины и оформления заказа по 12 принципам Disney. Пригодится, если интерфейс магазина должен выглядеть дорого и не тормозить покупку. CX Codex +1 645установок accessible-motion Скилл помогает заменить опасные анимации на безопасные альтернативы и соблюсти требования WCAG по движению. Пригодится, когда в интерфейсе есть параллакс, зум или бесконечные циклы. CX Codex +1 640установок anime-js Скилл для ИИ-агента, который подсказывает, как собрать анимацию на Anime.js по 12 принципам Disney. CX Codex +1 637установок emotional-narrative Скилл для анимации, когда движение должно передавать чувство: персонажные моменты, драматические биты, любой кадр, за которым зритель следит. CX Codex +1 621установок healthcare-medical Задаёт правила анимации для медицинских приложений, порталов пациентов и телемедицины: спокойные переходы вместо резких. CX Codex +1 604установок

Похожие

better-ui jakubkrehel Скилл задаёт точные правила для радиусов, теней, иконок и анимаций интерфейса. Пригодится, когда базовые взаимодействия уже работают и нужна визуальная доводка. CX Codex +1 39 300установок premium-frontend-ui официальный Utkarsh Patrikar Направляет GitHub Copilot при создании визуально выразительных страниц и компонентов с анимацией. Подойдёт для лендинга или интерактивного портфолио. 4 900установок modern-web-design freshtechbro Скилл-методичка по веб-дизайну 2024-2025: тренды, микровзаимодействия, скроллителлинг, доступность и производительность. Пригодится, когда агент верстает интерфейс. CX Codex +1 2 900установок accessible-animation iart-ai Скилл учит агента уважать prefers-reduced-motion: убирает опасное движение, но оставляет плавные переходы и подсказки интерфейса. CX Codex +1 2 600установок emilkowalski-motion nexu-io Добавляет микровзаимодействия, переходы состояний и анимацию к готовому интерфейсу. Работает после того, как макет или компонент уже собран. CX Codex +1 2 300установок micro-interaction-spec Owl-Listener Описывает одну микромикровзаимодействие целиком: триггер, правила, отклик, циклы и режимы. Пригодится, когда пора передать её в разработку. CX Codex +1 2 300установок

Рядом в теме «Дизайн»

Всё по теме «Дизайн» →

Вопросы о educator-teacher

Как установить educator-teacher в Claude?

Выполните npx skills add dylantarre/animation-principles --skill educator-teacher -a claude-code. После этого файл скилла окажется в ~/.claude/skills/educator-teacher/SKILL.md.

Что делает educator-teacher?

Помогает строить обучающую анимацию: сопоставляет каждый из 12 принципов Disney с учебной задачей и добавляет заметки про педагогику и доступность.

Нужны ли для него дополнительные библиотеки?

Скилл состоит из одного текстового файла и ничего не запускает. Работать с ним можно в любой из поддерживаемых платформ, включая Codex, Cursor и Gemini CLI.

Исходный текст

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

Смотрите также

Спонсоры проекта

Компании, которые помогают держать аналитику открытой