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

attention-direction — скилл Claude Code: что делает и как ставить

Скилл помогает выстроить визуальную иерархию и направить взгляд зрителя в анимациях или интерфейсах. Пригодится при раскадровке и устранении визуального шума.

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

Что делает attention-direction

Скилл адаптирует классические принципы анимации под управление вниманием: в фокусе сценичность и тайминг. Логика проста: зритель воспринимает лишь один объект за раз. Скилл задаёт чёткую последовательность действий. Нужно определить стартовую точку взгляда, выстроить траекторию через кадр и зафиксировать интерес на ключевом объекте.

Кадр требует времени на считывание. Внутри собраны правила работы с контрастом и пространственной изоляцией. Когда элементы спорят за внимание, скилл предписывает снизить вторичную динамику и усилить контраст на главном объекте. Если автор заранее не выбрал один ключевой элемент в кадре, правила скилла бесполезны: сначала нужно чётко определить фокус.

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

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

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

  • Разбери раскадровку интерфейса и покажи стрелками, как перемещается взгляд пользователя
  • В сцене модального окна слишком много движения. Оптимизируй акценты по правилам attention-direction
  • Настрой тайминг появления плашки уведомления, чтобы она не перебивала основной контент

Как установить attention-direction

1Через Skills CLI (Vercel)

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

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

~/.claude/skills/attention-direction/SKILL.md

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

По шагам, с командами для каждой платформы: Как установить скилл в 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

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

Всё по теме «Дизайн» →
motion-art-direction iart-ai Скилл задаёт правила движения до первой отрисованной сцены: одна кривая, один тайминг, один набор переходов на весь ролик. CX Codex +1 3 300установок animation-principles iart-ai Скилл задаёт физику и тайминги интерфейсной анимации. Он выдаёт точные кривые cubic-bezier, задержки шагов и длительности в миллисекундах. CX Codex +1 3 000установок frontend-design-direction affaan-m Скилл задаёт направление для веб-интерфейсов: помогает продумать и проверить визуальную иерархию, состояния, адаптивность и доступность. CX Codex +1 5 300установок critique-visual-hierarchy Owl-Listener Скилл разбирает готовый экран по четырём измерениям и говорит, куда на самом деле падает взгляд. Пригодится, когда внимание уходит не туда. CX Codex +1 2 000установок law-of-continuity Owl-Listener Скилл про закон непрерывности: выравнивание, стрелки и линии задают путь, по которому глаз идёт по интерфейсу. Пригодится при вёрстке форм, каруселей и таймлайнов. CX Codex +1 1 100установок visual-emphasis-and-hierarchy dembrandt Задаёт правила визуальной иерархии в интерфейсе: акценты на кнопках, контраст, отступы и выделение текста. Пригодится при вёрстке дашбордов, карточек и баннеров. CX Codex +1 874установок

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

buttons-ctas Скилл для ИИ-кодинга, который подсказывает агенту, как анимировать кнопки и CTA: состояния, тайминги, CSS-переходы. CX Codex +1 552установок figma-prototyping Скилл подсказывает агенту, как собрать прототип в Figma по 12 принципам анимации Диснея — через Smart Animate и варианты компонентов. CX Codex +1 550установок brand-marketing Скилл переносит 12 диснеевских принципов анимации в коммерческое видео, рекламу и айдентику. Задаёт чёткие тайминги для логотипов и бренд-стилей. CX Codex +1 545установок motion-one Скилл показывает, как собрать 12 принципов анимации Диснея на библиотеке Motion One — от squash and stretch до stagger и scroll. CX Codex +1 544установок solid-drawing-mastery Скилл для тех, кто делает анимацию и хочет, чтобы объекты в движении выглядели объёмными, а не плоскими. Помогает ловить ошибки перспективы и веса. CX Codex +1 538установок icons-badges Скилл для анимации иконок, бейджей, аватаров и статус-индикаторов. Пригодится, когда мелкие элементы интерфейса должны давать отклик и характер. CX Codex +1 537установок naturalistic-motion Свод принципов для естественной анимации существ и природных элементов. Помогает убрать роботизированную статику и добавить ощущение жизни. CX Codex +1 537установок gesture-responses Скилл для анимации отклика на тап, свайп и перетаскивание: задаёт тайминги, кривые и паттерны для CSS и JS. CX Codex +1 535установок

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

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