ux-researcher — скилл для Claude Code: оценка анимации в UX
Помогает агенту планировать исследования о том, как анимация влияет на восприятие, ошибки и время выполнения задачи.
npx skills add dylantarre/animation-principles --skill ux-researcher -a claude-codeЧто делает 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-code2Вручную: положить файлы
~/.claude/skills/ux-researcher/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/ux-researcher/
1Через Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill ux-researcher -a codex2Вручную: положить файлы
.agents/skills/ux-researcher/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill ux-researcher -a cursor2Вручную: положить файлы
.cursor/skills/ux-researcher/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install dylantarre/animation-principles ux-researcher2Вручную: положить файлы
.github/skills/ux-researcher/SKILL.md1Через Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill ux-researcher -a gemini-cli2Командой платформы
gemini skills install https://github.com/dylantarre/animation-principles --path skills/03-by-role-persona/ux-researcherВручную: положить файлы
.devin/skills/ux-researcher/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill ux-researcher -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в 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