Исправление ошибок фокуса при анимации
Анимированные плавающие компоненты могут терять фокус клавиатуры, когда CSS-анимация начинается с opacity: 0. Этот skill объясняет паттерн повторных попыток и тесты для компонентов Select, DropdownMenu и Popover.
Скопируйте этот запрос в своего Агента. Он содержит каноническую страницу Skill и манифест.
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.Ваш Агент по-прежнему должен показать план и запросить все подтверждения, требуемые политикой безопасности.
Используйте эти ссылки, когда AI-агенту, crawler или script нужен чистый контекст вместо полной страницы.
Использование «animated-focus». Объясни, почему клавиатурная навигация ломается только при включенных классах fade-анимации.
Ожидаемый результат:
Элемент отрендерен, но сначала невидим, поэтому браузер может отклонить первый запрос фокуса. Фокус остается на trigger.
Использование «animated-focus». Предложи тесты для анимированных компонентов Select и DropdownMenu.
Ожидаемый результат:
Использование «animated-focus». Кратко опиши рекомендуемый подход к реализации.
Ожидаемый результат:
Попытаться установить фокус после одного animation frame, проверить active element, затем недолго повторять попытку, пока анимация не сделает элемент фокусируемым.
All 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.
Делитесь версионным отчетом об оценке, нейтральным значком, встраиваемой карточкой и цитатами. Skillstore публикует доказательства, не решая, безопасен ли этот Skill.
https://skillstore.io/skills/andrehogberg-animated-focus/audits/8?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/andrehogberg-animated-focus?utm_source=security_passport_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><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>AndreHogberg. (2026). animated-focus security audit report (audit version 8) [Author version unspecified]. Skillstore. https://skillstore.io/skills/andrehogberg-animated-focus/audits/8@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}
}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"
Диагностировать, почему клавиши со стрелками перестают работать после открытия dropdown с CSS-анимацией.
Зафиксировать причину повторной попытки фокусировки после рендеринга анимированного плавающего контента.
Определить клавиатурные тесты, подтверждающие, что Enter, клавиши со стрелками, выбор и Escape по-прежнему работают.
Используй animated-focus, чтобы объяснить, почему мой анимированный dropdown открывается, но клавиши со стрелками по-прежнему действуют на trigger button.
Используй animated-focus, чтобы адаптировать мой helper фокуса для floating component под CSS-анимации, которые начинаются с opacity: 0.
Используй animated-focus, чтобы проверить потоки фокуса Select, DropdownMenu и Popover на пробелы в тайминге анимации.
Используй animated-focus, чтобы создать план тестирования Playwright для клавиатурной навигации по анимированным floating components.
Автор
AndreHogbergЛицензия
MIT
Ревизия Skillstore
r1
Примечание о версии
Автор не указал версию.
Ссылка
c4231f0153ccd2a2ed62274c5a372bf8f2386d3f
Актуальность поддержки
25.07.2026
Использование
7 загрузок · 216 просмотров
Структура файлов
📄 SKILL.md
Использование RendererInfo в Blazor
Компоненты Blazor могут вести себя по-разному во время static SSR, предварительного рендеринга и интерактивных режимов рендеринга. Этот навык объясняет, как использовать RendererInfo для выбора понятных состояний UI и поведения, зависящего от рендерера.
Запуск тестов TUnit Playwright
Вспомнить правильную команду TUnit Playwright может быть непросто. Этот навык дает Claude, Codex и Claude Code точные команды для локального запуска тестов.
Создавайте надежную автоматизацию тестирования
от 89jobrien
Слабые тесты замедляют релизы и скрывают регрессии. Этот навык помогает со стратегией тестирования, TDD, автоматизацией, анализом покрытия и веб-проверками Playwright.
Проверка кода на безопасность и качество
от AutumnsGrove
При ручной проверке кода можно пропустить проблемы безопасности, производительности и тестирования. Этот навык предоставляет Claude, Codex и Claude Code структурированный рабочий процесс проверки с чеклистами и рекомендациями по вспомогательному сканированию.
Build Accessible Tailwind Interfaces
от nextlevelbuilder
Building consistent, responsive interfaces requires many component, styling, and accessibility decisions. This skill provides shadcn/ui patterns, Tailwind guidance, and focused automation.
Аудит веб-доступности на соответствие WCAG
от 89jobrien
Пробелы в доступности могут блокировать пользователей и создавать риски несоответствия требованиям. Этот навык помогает проводить аудиты WCAG, проверки со скринридерами, тестирование с клавиатуры и планирование исправлений.
Создавайте более качественные функции SwiftUI
от avdlee
В проектах SwiftUI могут накапливаться устаревшие API, хрупкое состояние и медленные обновления представлений. Этот навык дает сфокусированные рекомендации для современного и поддерживаемого кода SwiftUI.
Реализация React View Transitions
от vercel-labs
Переходы представлений React легко разместить неправильно, что приводит к незаметным или избыточным анимациям. Этот навык помогает выбирать анимации для маршрутов, Suspense, списков и общих элементов.