animated-focus
Fix Animated Focus Bugs
CSS animations can make floating UI content reject focus before keyboard handlers are ready. This skill guides Claude, Codex, and Claude Code through a retry-based focus pattern and matching tests.
Download the skill ZIP
Upload in Claude
Go to Settings → Capabilities → Skills → Upload skill
Toggle on and start using
Agent-readable resources
Use these links when an AI agent, crawler, or script needs clean context instead of reading the full page.
Test it
Using "animated-focus". A dropdown opens with Enter, but ArrowDown still targets the trigger button.
Expected outcome:
The likely issue is focus timing. The content starts invisible during the opening animation, so immediate focus fails. Add an animation-frame delay, verify active focus, and retry with short bounded delays.
Using "animated-focus". A team needs regression tests for animated select controls.
Expected outcome:
- Open the animated control with Enter.
- Confirm focus moves into the floating content.
- Verify ArrowDown changes the active item.
- Verify Enter selects and Escape closes during animated states.
Using "animated-focus". A reviewer asks whether a fixed delay is better than retries.
Expected outcome:
A fixed delay is simpler but can add visible lag or fail with different animation durations. Bounded retries respond sooner and still stop quickly if focus cannot move.
Security Audit
Low RiskStatic analysis flagged many Ruby or shell backtick patterns and one weak cryptography pattern. Review found the backticks are Markdown inline code, fenced JavaScript, CSS, and bash examples, and the cryptography alert is not supported by the frontmatter text at SKILL.md:3. No prompt injection, network access, secret access, or executable skill scripts were found in the reviewed file.
Low Risk Issues (2)
Risk Factors
⚙️ External commands (7)
Quality Score
What You Can Build
Repair Animated Menus
Debug menus that open visually but ignore arrow keys or Escape after a keyboard trigger.
Strengthen Accessibility Tests
Add focused tests that verify keyboard behavior when CSS open and close animations are present.
Review Component Focus Design
Evaluate whether floating components move focus at the correct time during animated rendering.
Try These Prompts
Use animated-focus to explain why my floating component opens but keyboard navigation does not work when fade-in animation is enabled.
Use animated-focus to adapt my focus helper so it waits for CSS animation timing and retries focus safely.
Use animated-focus to design Playwright tests for animated Select, DropdownMenu, and Popover keyboard behavior.
Use animated-focus to review my design system focus management and identify components that need animation-aware focus timing.
Best Practices
- Verify focus by checking the active element after each focus attempt.
- Keep retry attempts bounded so failed focus does not loop indefinitely.
- Test keyboard behavior with the same animation classes used in production.
Avoid
- Do not assume visual opening means the browser accepted focus.
- Do not remove keyboard tests when animation-only failures are hard to reproduce.
- Do not use long fixed delays when short verified retries can resolve timing faster.