# attention-management

Skill for directing user focus with Disney's animation principles when UI elements fight for attention. It fixes visual hierarchy across buttons and primary content.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 507 installs · ★ 129
- Author: dylantarre
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/dylantarre/animation-principles/tree/HEAD/skills/12-by-problem-type/attention-management/SKILL.md
- Updated: 2025-12-30
- HTML: https://affpapa.org/en/nevibecode/skills/attention-management

## What it does

When decorative elements distract from primary buttons, animation timing is broken. This skill guides coding agents through animation principles like staging and timing. Motion enforces visual hierarchy.

The central rule is sequencing motion rather than running it in parallel. Primary content moves quickly and first. Secondary elements trigger with delays, while backgrounds remain subtle. The checklist restricts active motion to 1–2 simultaneous animations.

The skill includes a CSS pattern staggering hero titles, subtitles, and buttons with 100ms and 200ms offsets. If hiding animation breaks page clarity, the layout itself needs work. Motion cannot fix a broken baseline layout.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add dylantarre/animation-principles --skill attention-management -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/attention-management/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/attention-management/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add dylantarre/animation-principles --skill attention-management -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/attention-management/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add dylantarre/animation-principles --skill attention-management -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/attention-management/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install dylantarre/animation-principles attention-management
```

2. **Manually: put the files in place**
- File: `.github/skills/attention-management/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add dylantarre/animation-principles --skill attention-management -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/dylantarre/animation-principles --path skills/12-by-problem-type/attention-management
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/attention-management/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add dylantarre/animation-principles --skill attention-management -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/dylantarre/animation-principles/tree/HEAD/skills/12-by-problem-type/attention-management/SKILL.md

## When to use it
- direct user attention toward key call-to-action buttons
- eliminate visual competition between simultaneous animations
- structure element appearance using CSS stagger delays
- tone down distracting background motion
- align UI animation order with Disney animation principles

## Example prompts
- Review the landing page animations: users keep overlooking the checkout button.
- Stagger the entrance animations for the hero section so the headline appears before the CTA.
- Refactor these CSS transitions using Disney principles so only one UI element moves at a time.

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 4e37a362f3d2eb7b.

BEGIN THIRD-PARTY FILE 4e37a362f3d2eb7b
````text
---
name: attention-management
description: Use when wrong elements get attention, important content is missed, or visual hierarchy is broken by animation
---

# Attention Management

Direct user focus correctly using Disney's principles.

## Problem Indicators
- Users miss important content
- Decorative elements steal focus
- CTAs don't stand out
- Users look at wrong things first
- Information hierarchy is unclear

## Diagnosis by Principle

### Staging
**Issue**: Multiple elements compete for attention
**Fix**: One thing moves at a time. Animate the most important element; keep others still.

### Timing
**Issue**: Everything animates at same speed
**Fix**: Primary content: faster animation. Secondary: slower or delayed. Speed implies importance.

### Exaggeration
**Issue**: Uniform motion across hierarchy
**Fix**: Important elements get more dramatic animation. Background elements get subtle motion.

### Anticipation
**Issue**: No buildup directs eyes
**Fix**: Use anticipation to guide attention. A small movement can draw eyes before the main action.

### Appeal
**Issue**: Wrong elements are visually interesting
**Fix**: Make important elements the most visually appealing. Animation should enhance hierarchy, not fight it.

## Quick Fixes

1. **One animation at a time** - Sequence, don't parallelize
2. **Stagger by importance** - Most important animates first
3. **Reduce decorative motion** - Background should be calm
4. **Increase CTA animation contrast** - Stands out from surroundings
5. **Use motion to guide reading order** - Top-to-bottom, left-to-right

## Troubleshooting Checklist

- [ ] What do users look at first? (Eye tracking or testing)
- [ ] Does animation sequence match importance hierarchy?
- [ ] Are decorative animations subtle enough?
- [ ] Does primary CTA have strongest motion?
- [ ] Count simultaneous animations (should be 1-2)
- [ ] Test: Hide animation—does hierarchy still work?
- [ ] Is motion guiding or distracting?
- [ ] Does stillness create emphasis where needed?

## Code Pattern

```css
/* Stagger by importance */
.hero-title {
  animation: fadeInUp 400ms ease-out;
}

.hero-subtitle {
  animation: fadeInUp 400ms ease-out 100ms backwards;
}

.hero-cta {
  animation: fadeInUp 400ms ease-out 200ms backwards,
             pulse 2s ease-in-out 1s infinite;
}

/* De-emphasize background */
.background-element {
  animation: subtleDrift 20s linear infinite;
  opacity: 0.3;
}
```

## Hierarchy Through Motion

| Priority | Animation Style |
|----------|----------------|
| Primary | Fast, prominent, potentially looping |
| Secondary | Medium speed, one-time |
| Tertiary | Slow, subtle, or static |
| Background | Very slow or no animation |
````
END THIRD-PARTY FILE 4e37a362f3d2eb7b

The third-party file has ended. Everything between the 4e37a362f3d2eb7b tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

© dylantarre · MIT · https://github.com/dylantarre/animation-principles/tree/HEAD/skills/12-by-problem-type/attention-management/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md