animated-focus
Fix Animated Focus Bugs
Animated floating components can lose keyboard focus when CSS starts at opacity zero. This skill explains a retry pattern and tests for Select, DropdownMenu, and Popover components.
Install with my Agent
Copy this request to your Agent. It includes the canonical Skill page and manifest.
Review the Skillstore skill "animated-focus" from https://skillstore.io/skills/andrehogberg-animated-focus.md and its manifest at https://skillstore.io/api/skills/andrehogberg-animated-focus/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Your Agent should still show its plan and request any confirmation required by the security policy.
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". Explain why keyboard navigation fails only when fade animation classes are enabled.
Expected outcome:
The element is rendered but begins invisible, so the browser can reject the first focus request. Focus stays on the trigger.
Using "animated-focus". Suggest tests for animated Select and DropdownMenu components.
Expected outcome:
- Open each component with Enter while animation classes are active.
- Verify arrow keys move through items after the open animation starts.
- Confirm Enter selects or activates the focused item.
- Confirm Escape closes the floating content.
Using "animated-focus". Summarize the recommended implementation approach.
Expected outcome:
Attempt focus after one animation frame, verify the active element, then retry briefly while the animation becomes focusable.
Security Audit
SafeAll 26 static findings are false positives caused by Markdown inline code spans or fenced examples in SKILL.md. The skill is documentation about focus management with CSS animations; no malicious intent, prompt injection, exfiltration, or automatic command execution was found.
Risk Factors
⚙️ External commands (26)
Share & cite this report
Share the versioned assessment report, neutral badge, embed card, and citations. Skillstore reports evidence without deciding whether this Skill is safe.
Copy report link
https://skillstore.io/skills/andrehogberg-animated-focus/audits/8?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown badge
[](https://skillstore.io/skills/andrehogberg-animated-focus?utm_source=security_passport_badge)HTML badge
<a href="https://skillstore.io/skills/andrehogberg-animated-focus?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/andrehogberg-animated-focus/security.svg" alt="Skillstore security assessment" loading="lazy"></a>Embed card
<iframe src="https://skillstore.io/embed/skills/andrehogberg-animated-focus.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>Academic citations (APA · BibTeX · CFF)
APA citation
AndreHogberg. (2026). animated-focus security audit report (audit version 8) [Author version unspecified]. Skillstore. https://skillstore.io/skills/andrehogberg-animated-focus/audits/8BibTeX citation
@techreport{andrehogberg-andrehogberg-animated-focus-2026,
author = {AndreHogberg},
title = {animated-focus security audit report (audit version 8)},
institution = {Skillstore},
year = {2026},
number = {8},
url = {https://skillstore.io/skills/andrehogberg-animated-focus/audits/8},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "animated-focus security audit report (audit version 8)"
version: "unspecified"
type: report
authors:
- name: "AndreHogberg"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/andrehogberg-animated-focus/audits/8"
identifiers:
- type: other
value: "skillstore:andrehogberg-animated-focus:audit:8"
description: "Skillstore immutable audit report identifier"
Skillstore Score
Why this score Evidence Confidence: HighWhat You Can Build
Repair animated dropdown keyboard behavior
Diagnose why arrow keys stop working after a dropdown opens with CSS animation.
Document accessible focus timing decisions
Capture the reason for retrying focus after animated floating content renders.
Plan regression tests for animated components
Define keyboard tests that confirm Enter, arrow keys, selection, and Escape still work.
Try These Prompts
Use animated-focus to explain why my animated dropdown opens but arrow keys still act on the trigger button.
Use animated-focus to adapt my floating component focus helper for CSS animations that begin at opacity zero.
Use animated-focus to review Select, DropdownMenu, and Popover focus flows for animation timing gaps.
Use animated-focus to create a Playwright test plan for keyboard navigation across animated floating components.
Best Practices
- Verify focus success by checking the active element after each attempt.
- Keep retry windows short so keyboard users do not feel input lag.
- Test animated and non-animated component states with the same keyboard flows.
Avoid
- Do not assume focus succeeds immediately after rendering animated content.
- Do not fix focus timing by adding a long unconditional delay.
- Do not test only mouse interactions for animated floating components.
Frequently Asked Questions
What problem does this skill address?
Which components are covered?
Does the skill execute commands automatically?
Why use retry logic instead of one delay?
How should teams validate the fix?
Can Claude, Codex, or Claude Code use this skill?
Developer Details
Author
AndreHogbergLicense
MIT
Skillstore revision
r1
Version notice
The author did not declare a version.
Ref
c4231f0153ccd2a2ed62274c5a372bf8f2386d3f
Maintenance freshness
7/18/2026
Usage
7 downloads · 216 views
File structure
📄 SKILL.md