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

ux-researcher — скилл для Claude Code: оценка анимации в UX

Помогает агенту планировать исследования о том, как анимация влияет на восприятие, ошибки и время выполнения задачи.

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

Что делает ux-researcher

Скилл превращает агента в UX-исследователя, который смотрит на анимацию через 12 принципов Disney. По каждому принципу задан исследовательский вопрос и метод: A/B-тест упругой и жёсткой кнопки, айтрекинг при появлении элементов, замеры ошибок при наличии подготовительной анимации, тесты на запоминание при последовательном и одновременном выводе контента.

Внутри — разбор принципов вроде squash and stretch, anticipation, staging, timing и appeal. Для каждого указано, что именно измерять: воспринимаемую скорость, удовлетворённость, число промахов, доверие к интерфейсу. Отдельный блок про то, что тестировать нужно с учётом prefers-reduced-motion, вестибюлярных расстройств, культурных различий и возраста.

Практической ценности без реальных пользователей тут нет: скилл даёт структуру исследования, а не готовые выводы. Если вы просто хотите выбрать кривую easing для кнопки, это лишний инструмент — он про методологию, а не про код.

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

  • спланировать A/B-тест упругой и жёсткой анимации кнопки
  • сравнить запоминание контента при последовательном и одновременном появлении
  • замерить, как easing влияет на воспринимаемую длительность
  • проверить, не мешает ли вторичная анимация основной задаче
  • учесть пользователей с prefers-reduced-motion в исследовании

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

  • Спланируй A/B-тест: упругое нажатие кнопки против жёсткого, что замерять?
  • Как провести айтрекинг-исследование по принципу staging?
  • Составь план motion study с учётом prefers-reduced-motion

Как установить ux-researcher

1Через Skills CLI (Vercel)

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

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

~/.claude/skills/ux-researcher/SKILL.md

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

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

Вопросы о ux-researcher

Как установить ux-researcher в Claude?

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

Что делает ux-researcher?

Даёт агенту рамку из 12 принципов анимации Disney для оценки удобства: по каждому принципу есть исследовательский вопрос и метод — A/B-тесты, айтрекинг, замеры ошибок и времени на задачу.

На каких платформах работает скилл?

Claude, Codex, Cursor, GitHub Copilot, Gemini CLI и OpenCode. Для каждой платформы своя команда установки из репозитория dylantarre/animation-principles.

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

SKILL.md · MIT
---
name: ux-researcher
description: Use when evaluating animation usability, conducting motion studies, or when researching how animation affects user perception and task completion.
---

# UX Researcher: Animation & User Experience

You are a UX researcher investigating how motion affects usability, perception, and behavior. Apply Disney's 12 principles as a framework for evaluation.

## The 12 Principles for UX Research

### 1. Squash and Stretch
**Research Question**: Does elastic feedback improve perceived responsiveness?
**Method**: A/B test rigid vs elastic button states. Measure perceived speed, satisfaction scores. Users often rate elastic animations as "faster" despite identical duration.

### 2. Anticipation
**Research Question**: Do preparatory animations reduce user errors?
**Method**: Test task completion with/without anticipation cues. Pre-action signals reduce accidental clicks, improve targeting accuracy. Measure error rates and time-on-task.

### 3. Staging
**Research Question**: Does motion effectively direct attention?
**Method**: Eye-tracking studies during animated sequences. Heat maps reveal if users follow intended focus. Compare staged vs simultaneous element appearance.

### 4. Straight Ahead vs Pose to Pose
**Research Question**: Which approach feels more natural for different contexts?
**Method**: Preference testing between fluid continuous motion (straight ahead) and precise keyframe motion (pose to pose). Context matters—organic content vs data visualization.

### 5. Follow Through and Overlapping Action
**Research Question**: Does staggered animation improve content hierarchy comprehension?
**Method**: Recall tests comparing simultaneous vs sequenced content reveal. Users remember more when elements arrive in meaningful order.

### 6. Slow In and Slow Out
**Research Question**: How does easing affect perceived duration and quality?
**Method**: Time estimation tasks with different easing curves. Linear motion feels "cheap" and longer. Eased motion feels "polished" and shorter.

### 7. Arc
**Research Question**: Do curved motion paths feel more natural?
**Method**: Preference studies comparing linear vs arc-based transitions. Eye-tracking reveals smoother pursuit movements on curved paths.

### 8. Secondary Action
**Research Question**: Do supporting animations enhance or distract?
**Method**: Dual-task testing. Primary task completion + secondary animation. Measure if subtle motion aids or impairs focus. Threshold testing.

### 9. Timing
**Research Question**: What duration feels "right" for different actions?
**Method**: Just-noticeable-difference studies for animation speed. Establish ranges: too fast (anxious), optimal (fluid), too slow (sluggish). Context-dependent thresholds.

### 10. Exaggeration
**Research Question**: How much exaggeration improves noticeability without feeling cartoonish?
**Method**: Scaling studies—find the threshold where exaggeration becomes inappropriate for brand/context. B2B vs consumer differences.

### 11. Solid Drawing
**Research Question**: Does spatial consistency affect trust and usability?
**Method**: Test interfaces with consistent vs inconsistent spatial behavior. Measure orientation errors, trust ratings, completion confidence.

### 12. Appeal
**Research Question**: Does animation quality affect brand perception?
**Method**: Correlate animation polish with NPS, brand trust scores. Halo effect—smooth animations improve overall product perception.

## Research Considerations

- Always test with `prefers-reduced-motion` users
- Vestibular disorder screening in motion studies
- Cultural differences in motion preferences
- Age-related sensitivity to speed and complexity

© dylantarre · MIT · dylantarre/animation-principles

Похожие скиллы

Всё по теме «Дизайн» →
review-animations emilkowalski Проверяет код интерфейсных анимаций по принципам Эмиля Ковальски. Помогает убрать дерганые переходы, медленный ease-in и лишнюю нагрузку на процессор. CX Codex +1 256 500установок apple-design emilkowalski Переносит принципы физического интерфейса Apple с докладов WWDC в веб на CSS, Pointer Events и Motion. Пригодится при верстке жестов, шторки и прерываемых пружин. CX Codex +1 244 500установок transitions-polish Jakubantalik Скилл проверяет уже существующие анимации и подбирает токены для времени, расстояния, масштаба, blur и easing. Пригодится для точной настройки motion. CX Codex +1 10 800установок top-design wondelai Скилл направляет агента на создание веб-интерфейсов уровня Awwwards с акцентной типографикой, выверенной анимацией и оценкой макета по десятибалльной шкале. CX Codex +1 7 100установок motion-framer freshtechbro Помогает агенту добавлять анимации Motion и Framer Motion в React-интерфейсы: от эффектов наведения до переходов между состояниями. CX Codex +1 5 900установок motion-patterns jeff Скилл добавляет готовые паттерны анимации для React и Next.js. Подойдёт, когда нужно оформить кнопку, модальное окно, toast, переход страницы или scroll-reveal. CX Codex +1 4 700установок

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

solid-drawing-mastery Скилл для тех, кто делает анимацию и хочет, чтобы объекты в движении выглядели объёмными, а не плоскими. Помогает ловить ошибки перспективы и веса. CX Codex +1 535установок icons-badges Скилл для анимации иконок, бейджей, аватаров и статус-индикаторов. Пригодится, когда мелкие элементы интерфейса должны давать отклик и характер. CX Codex +1 535установок gesture-responses Скилл для анимации отклика на тап, свайп и перетаскивание: задаёт тайминги, кривые и паттерны для CSS и JS. CX Codex +1 533установок gaming-entertainment Скилл для анимаций в игровых приложениях, стриминговых сервисах и интерактивных медиа: раскладывает 12 принципов Disney по элементам интерфейса. CX Codex +1 532установок spatial-thinking Скилл для ИИ-агента, который заставляет думать о кадре как о трёхмерном пространстве: глубина, перспектива, объём. Пригодится, когда персонаж плывёт над полом или камера едет не туда. CX Codex +1 523установок arc-mastery Скилл для анимации движения: объясняет, почему прямые линии выглядят механически, и как строить дуги в UI, персонажах и играх. CX Codex +1 523установок micro-100-200ms Скилл для микроанимаций длительностью 100–200 мс: подсказки, выпадающие меню, мелкая обратная связь. Помогает подобрать тайминг и кривые. CX Codex +1 518установок calm-relaxation Скилл для ИИ-кодинга, который задаёт правила плавных и тихих анимаций: длинные тайминги, мягкие кривые, никаких резких движений. CX Codex +1 519установок

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

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