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

presentations — скилл для Claude Code: анимации в слайдах

Скилл для анимации в Keynote, PowerPoint и Google Slides. Подсказывает тайминги, порядок появления элементов и переходы.

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

Что делает presentations

Скилл берёт 12 принципов анимации Диснея и переводит их на язык презентаций. Для каждого принципа есть конкретная реализация: squash & stretch — упругое масштабирование с лёгким перелётом, anticipation — затемнение старого блока перед показом нового, staging — один фокус в каждый момент и приглушение готового контента до 30-50% прозрачности.

Внутри — таблица быстрых ссылок по принципам, разбор каждого из них и отдельные блоки под Keynote, PowerPoint и Google Slides. Для Keynote это Dissolve, Move In, Scale и Magic Move, для PowerPoint — Fade, Fly In с кастомным путём и Morph, для Google Slides — Fade и Fly in без морфинга. Есть таблица сборки последовательностей с длительностями и задержками: заголовок 0.5s, подзаголовок 0.4s с задержкой 0.2s, пункты списка по 0.3s с шагом 0.15s.

Тайминги в скилле — ориентир, а не жёсткий стандарт: 0.3-0.5s на текстовые сборки, 0.5-0.8s на переходы между слайдами. Линейную анимацию скилл не советует вообще — она выглядит механически. В Google Slides контроль над таймингом слабее, поэтому там он предлагает держать анимации простыми. Отдельный блок — советы для докладчика: запускать по клику, а не автоматически, и держать запасную версию без анимаций на случай технических проблем.

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

  • подобрать длительность и задержку для сборки слайда
  • заменить линейные переходы на ease-in-out
  • выстроить порядок появления элементов на схеме
  • приглушить готовый контент перед показом нового
  • сделать морфинг-переход между слайдами в Keynote или PowerPoint

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

  • помоги настроить анимацию появления пунктов списка в PowerPoint
  • какие тайминги использовать для сборки слайда с заголовком и картинкой
  • сделай Magic Move между двумя слайдами в Keynote

Как установить presentations

1Через Skills CLI (Vercel)

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

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

~/.claude/skills/presentations/SKILL.md

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

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

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

css-native Скилл помогает агенту писать анимации на чистом CSS: @keyframes, transition, transform. Пригодится, когда нужны движения интерфейса без JS-библиотек. CX Codex +1 714установок saas-productivity Задаёт принципы анимации для рабочих интерфейсов: задач, форм, панелей и уведомлений. Нужен при проектировании движения без лишних отвлечений. CX Codex +1 706установок page-transitions Скилл для анимации смены маршрутов, модалок и навигации. Помогает агенту выбрать тайминги и тип перехода вместо случайных значений. CX Codex +1 667установок fitness-wellness Скилл задаёт тайминги и приёмы анимации для фитнес-приложений, трекеров тренировок и медитаций. Пригодится, когда интерфейс должен подбадривать, а не просто двигаться. CX Codex +1 661установок e-commerce-retail Скилл описывает анимации для карточек товаров, корзины и оформления заказа по 12 принципам Disney. Пригодится, если интерфейс магазина должен выглядеть дорого и не тормозить покупку. CX Codex +1 645установок educator-teacher Скилл для тех, кто делает обучающие видео и объясняет сложное через анимацию: раскладывает 12 принципов Disney по учебным задачам. CX Codex +1 642установок accessible-motion Скилл помогает заменить опасные анимации на безопасные альтернативы и соблюсти требования WCAG по движению. Пригодится, когда в интерфейсе есть параллакс, зум или бесконечные циклы. CX Codex +1 640установок anime-js Скилл для ИИ-агента, который подсказывает, как собрать анимацию на Anime.js по 12 принципам Disney. CX Codex +1 637установок

Похожие

gws-slides официальный googleworkspace Скилл для чтения и создания презентаций Google Slides через CLI. Пригодится, когда нужно автоматически собирать слайды или обновлять структуру презентации. CX Codex +1 41 700установок google-slides sanjay3290 Скилл для чтения, поиска и создания презентаций в Google Slides через скрипты на Python. Помогает генерировать слайды и менять текст в документах без ручной правки. CX Codex +1 407установок recipe-create-presentation официальный googleworkspace Рецепт, который создаёт новую презентацию Google Slides из терминала и сразу выдаёт к ней доступ. Пригодится, когда колоду заводит агент, а не вы в браузере. CX Codex +1 32 400установок publish-to-pages официальный github Публикует презентации и HTML в GitHub Pages, создавая репозиторий и выдавая адрес готовой страницы. Пригодится, когда нужно открыть материалы по ссылке. 1 800установок ppt-visual claude-office-skills Проектирует макеты слайдов, подбирает цвета и шрифты. Выдаёт текстовые спецификации и ASCII-схемы для презентаций. CX Codex +1 12 100установок elite-powerpoint-designer willem4130 Скилл превращает markdown и текст в слайды PowerPoint с типографикой, сеткой и анимациями по одному из пяти брендовых стилей. CX Codex +1 5 300установок

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

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

Вопросы о presentations

Как установить presentations в Claude?

Выполните npx skills add dylantarre/animation-principles --skill presentations -a claude-code. Файл скилла окажется по пути ~/.claude/skills/presentations/SKILL.md.

Что делает скилл presentations?

Раскладывает 12 принципов анимации по инструментам презентаций: какие эффекты брать в Keynote, PowerPoint и Google Slides, с какими длительностями и задержками.

Чем Keynote отличается от Google Slides по возможностям анимации?

В Keynote есть Magic Move — объекты морфятся между слайдами. В Google Slides морфинга нет, поэтому скилл советует Fade и простые переходы.

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

SKILL.md · MIT
---
name: presentations
description: Use when creating Keynote, PowerPoint, Google Slides animations, or any presentation motion design work.
---

# Presentation Animation

Apply Disney's 12 animation principles to Keynote, PowerPoint, Google Slides, and presentation software.

## Quick Reference

| Principle | Presentation Implementation |
|-----------|----------------------------|
| Squash & Stretch | Bounce emphasis, elastic scaling |
| Anticipation | Build sequences, pre-reveal fades |
| Staging | Focal point management, dimming |
| Straight Ahead / Pose to Pose | Morph vs discrete transitions |
| Follow Through / Overlapping | Staggered builds, delayed elements |
| Slow In / Slow Out | Ease animations, avoid linear |
| Arc | Motion paths, curved entrances |
| Secondary Action | Supporting graphics follow primary |
| Timing | Builds 0.3-0.5s, transitions 0.5-0.8s |
| Exaggeration | Emphasis effects, attention draws |
| Solid Drawing | Consistent alignment, visual balance |
| Appeal | Professional polish, purposeful motion |

## Principle Applications

**Squash & Stretch**: Use bounce effect sparingly for playful emphasis. Scale animations should feel elastic not mechanical. Key numbers can "pop" with slight overshoot.

**Anticipation**: Fade out previous content before new appears. Slight pause after slide transition before builds begin. Dim existing elements before highlighting new ones.

**Staging**: One focal point per moment. Dim completed content to 30-50% opacity. Use motion to direct eye path. Build complex diagrams piece by piece.

**Straight Ahead vs Pose to Pose**: Morph transitions (Keynote Magic Move, PowerPoint Morph) create fluid straight-ahead motion. Standard builds are pose to pose. Use morph for transformation stories.

**Follow Through & Overlapping**: Build related items with 0.1-0.2s delays. Supporting text follows primary graphic. Bullet points stagger naturally. Don't animate everything simultaneously.

**Slow In / Slow Out**: Always use ease-in-out or ease-out. Never linear—looks robotic. Keynote: "Ease In & Out". PowerPoint: use custom motion paths with curve handles.

**Arc**: Motion paths should curve naturally. Elements entering from sides arc inward. Exit animations arc toward edges. Straight lines feel mechanical.

**Secondary Action**: Icons animate alongside text reveals. Arrows appear as relationships are explained. Background subtle shifts support primary content.

**Timing**: Text builds: 0.3-0.5s. Graphic reveals: 0.4-0.6s. Slide transitions: 0.5-0.8s. Complex sequences: 0.2-0.3s between elements. Match pacing to speaking rhythm.

**Exaggeration**: Use scale emphasis for key points. Pulse effect for critical numbers. Shake for contrast/disagreement. Reserve exaggeration for truly important moments.

**Solid Drawing**: Maintain grid alignment during motion. Consistent transform origins. Elements should feel anchored to the slide structure.

**Appeal**: Purposeful animation builds credibility. Excessive motion distracts and annoys. Every animation should serve communication.

## Software Patterns

### Keynote
```
Best builds: Dissolve, Move In, Scale
Magic Move: Most powerful transition—objects morph between slides
Timing: Use "Build Order" panel for precise sequencing
Tip: Group objects that should animate together
```

### PowerPoint
```
Best entrances: Fade, Fly In (with custom path)
Morph transition: Objects with same name transform
Timing: Animation Pane for sequencing
Tip: Use "With Previous" + delay for stagger
```

### Google Slides
```
Limited but functional: Fade, Fly in
No morphing: Use Fade for cleanest transitions
Timing: Less control—keep animations simple
Tip: Fewer, better animations beat many poor ones
```

## Build Sequences

| Content Type | Animation | Duration | Delay |
|-------------|-----------|----------|-------|
| Title | Fade + Scale | 0.5s | 0s |
| Subtitle | Fade | 0.4s | 0.2s |
| Bullet 1 | Fade + Move | 0.3s | 0.3s |
| Bullet 2+ | Fade + Move | 0.3s | +0.15s each |
| Image | Scale from center | 0.5s | varies |
| Chart | Custom/Wipe | 0.6s | varies |

## Presenter Tips

1. Animate on click, not automatically—control your pacing
2. Practice with animations—know what comes next
3. Less is more—animation should clarify, not decorate
4. Test on presentation display—timing feels different at scale
5. Have a backup with no animations for technical issues

© dylantarre · MIT · dylantarre/animation-principles

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

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

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