attention-direction — скилл Claude Code: что делает и как ставить
Скилл помогает выстроить визуальную иерархию и направить взгляд зрителя в анимациях или интерфейсах. Пригодится при раскадровке и устранении визуального шума.
npx skills add dylantarre/animation-principles --skill attention-direction -a claude-codeЧто делает attention-direction
Скилл адаптирует классические принципы анимации под управление вниманием: в фокусе сценичность и тайминг. Логика проста: зритель воспринимает лишь один объект за раз. Скилл задаёт чёткую последовательность действий. Нужно определить стартовую точку взгляда, выстроить траекторию через кадр и зафиксировать интерес на ключевом объекте.
Кадр требует времени на считывание. Внутри собраны правила работы с контрастом и пространственной изоляцией. Когда элементы спорят за внимание, скилл предписывает снизить вторичную динамику и усилить контраст на главном объекте. Если автор заранее не выбрал один ключевой элемент в кадре, правила скилла бесполезны: сначала нужно чётко определить фокус.
Какие задачи решает
- выстроить траекторию взгляда зрителя через анимационную сцену
- устранить визуальный шум и конкуренцию объектов за внимание
- расставить акценты в интерфейсе с помощью контраста и свободного пространства
- задать паузы для считывания ключевых визуальных триггеров
Примеры запросов агенту
- Разбери раскадровку интерфейса и покажи стрелками, как перемещается взгляд пользователя
- В сцене модального окна слишком много движения. Оптимизируй акценты по правилам attention-direction
- Настрой тайминг появления плашки уведомления, чтобы она не перебивала основной контент
Как установить attention-direction
1Через Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill attention-direction -a claude-code2Вручную: положить файлы
~/.claude/skills/attention-direction/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/attention-direction/
1Через Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill attention-direction -a codex2Вручную: положить файлы
.agents/skills/attention-direction/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill attention-direction -a cursor2Вручную: положить файлы
.cursor/skills/attention-direction/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install dylantarre/animation-principles attention-direction2Вручную: положить файлы
.github/skills/attention-direction/SKILL.md1Через Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill attention-direction -a gemini-cli2Командой платформы
gemini skills install https://github.com/dylantarre/animation-principles --path skills/02-by-thinking-style/attention-directionВручную: положить файлы
.devin/skills/attention-direction/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill attention-direction -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о attention-direction
Как установить attention-direction в Claude Code?
Установка выполняется командой npx skills add dylantarre/animation-principles --skill attention-direction -a claude-code. Файл запишется по пути ~/.claude/skills/attention-direction/SKILL.md.
Для чего нужен этот скилл?
Он задаёт правила распределения внимания в анимациях и веб-интерфейсах. Скилл помогает выстроить траекторию взгляда, отсечь конкурирующие движения и выделить главное действие.
Что делать, если сцена перегружена движением?
Скилл предлагает снизить вторичную анимацию, повысить контраст главного элемента, добавить паузы вокруг фокусных зон и временно упростить фон.
Исходный текст
SKILL.md · MIT
--- name: attention-direction description: Use when controlling where the audience looks—composing shots, choreographing action, revealing information, or any situation requiring clear visual hierarchy and focus management. --- # Attention Direction Think like a magician controlling where the audience looks. Animation is misdirection and direction. You decide what matters, then make it impossible to miss—while hiding what shouldn't be seen yet. ## Core Mental Model Before animating any scene, ask: **Where should the eye go, and in what order?** Audiences can only look at one thing at a time. Your job is to guide their attention through the frame and through time. Every element either supports focus or competes with it. ## The 12 Principles Through Focus **Staging** — The foundation of attention direction. Clear silhouettes. Uncluttered compositions. Important elements separated from background. Staging serves focus. **Timing** — Attention follows movement. Motion against stillness commands the eye. Strategic timing controls when things get noticed. Stillness is also a tool. **Anticipation** — Attention setup. Before the important thing, direct eyes to where it will happen. Anticipation is a spotlight warming up before the main act. **Secondary Action** — Supporting, not competing. Secondary elements should enhance focus on primary action, not steal attention. The backup singer shouldn't upstage the lead. **Follow Through & Overlapping Action** — Attention carries momentum. Where one motion ends, the eye expects the next to begin. Use follow-through to guide gaze through sequences. **Exaggeration** — Emphasis through amplification. Important elements are bigger, faster, more contrasted. Exaggeration says "look here." Restraint says "this can wait." **Squash & Stretch** — Visual attention-grabbers. Impact frames (squash) and speed lines (stretch) create pops of visual interest that capture the eye. **Arcs** — Eye paths. The audience's gaze follows arcs of motion. Design movement paths that lead attention where you want it to land. **Slow In & Slow Out** — Attention ramps. Ease-in gives time to find the action. Ease-out gives time to process. Control pacing of comprehension. **Solid Drawing** — Hierarchy through form. Important elements have more dimensional presence. Background elements are flatter, less detailed. Volume commands attention. **Appeal** — The eye seeks appeal. Attractive elements draw focus naturally. Use appeal strategically—the most appealing thing in frame gets looked at first. **Straight Ahead & Pose to Pose** — Planning attention (pose to pose) ensures focus hits are intentional. Spontaneous discovery (straight ahead) might need attention refinement afterward. ## Practical Application **Attention Tools:** - Contrast: Light against dark, color against neutral - Isolation: Space around important elements - Size: Bigger elements read first - Position: Center and rule-of-thirds intersections - Motion: Movement in stillness commands eyes - Detail: More detailed areas attract focus - Character eyelines: Audiences look where characters look **Attention Sequence:** 1. Establish where eyes should start 2. Plan the path through the frame 3. Land on the most important element 4. Allow processing time 5. Transition to next focus point **Common Attention Errors:** - Competing centers: Multiple elements fighting for focus - Buried information: Important elements lost in noise - Nowhere to look: No clear hierarchy - Missed beats: Focus points not held long enough - Leading nowhere: Motion that doesn't resolve to landing point When focus feels "confused": 1. Reduce secondary motion 2. Increase contrast on primary element 3. Add stillness around important areas 4. Simplify background during key moments When scenes feel "empty": 1. Add supporting motion (without competing) 2. Use secondary action to create visual interest 3. Ensure something is always moving 4. Create visual rhythm in attention flow **Eye Path Mapping:** Sketch your scene with arrows showing intended eye movement. If the path is unclear or chaotic, simplify. If multiple paths compete, choose one. ## The Golden Rule **You can't control attention if you haven't decided what matters.** Before worrying about technique, answer the fundamental question: What's the single most important thing in this frame right now? Everything else serves that.
© dylantarre · MIT · dylantarre/animation-principles