Fehler mit animiertem Fokus beheben
Animierte schwebende Komponenten können den Tastaturfokus verlieren, wenn CSS bei opacity null beginnt. Dieser Skill erklärt ein Retry-Muster und Tests für Select-, DropdownMenu- und Popover-Komponenten.
Kopieren Sie diese Anfrage in Ihren Agent. Sie enthält die maßgebliche Skill-Seite und das 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.Ihr Agent sollte weiterhin seinen Plan anzeigen und alle von der Sicherheitsrichtlinie verlangten Bestätigungen anfordern.
Verwenden Sie diese Links, wenn ein KI-Agent, Crawler oder Skript sauberen Kontext benötigt, statt die vollständige Seite zu lesen.
„animated-focus“ wird verwendet. Erkläre, warum die Tastaturnavigation nur fehlschlägt, wenn Fade-Animationsklassen aktiviert sind.
Erwartetes Ergebnis:
Das Element wird gerendert, beginnt aber unsichtbar, sodass der Browser die erste Fokusanfrage ablehnen kann. Der Fokus bleibt auf dem Trigger.
„animated-focus“ wird verwendet. Schlage Tests für animierte Select- und DropdownMenu-Komponenten vor.
Erwartetes Ergebnis:
„animated-focus“ wird verwendet. Fasse den empfohlenen Implementierungsansatz zusammen.
Erwartetes Ergebnis:
Versuche nach einem Animation-Frame zu fokussieren, überprüfe das aktive Element und wiederhole dann kurz, während die Animation fokussierbar wird.
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.
Teile den versionierten Bewertungsbericht, das neutrale Badge, die Einbettungskarte und Zitate. Skillstore berichtet Nachweise, ohne zu entscheiden, ob dieser Skill sicher ist.
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"
Diagnostizieren, warum Pfeiltasten nicht mehr funktionieren, nachdem ein Dropdown mit CSS-Animation geöffnet wurde.
Den Grund für das erneute Fokussieren nach dem Rendern animierter schwebender Inhalte festhalten.
Tastaturtests definieren, die bestätigen, dass Enter, Pfeiltasten, Auswahl und Escape weiterhin funktionieren.
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.
Autor
AndreHogbergLizenz
MIT
Skillstore-Revision
r1
Versionshinweis
Der Autor hat keine Version angegeben.
Ref.
c4231f0153ccd2a2ed62274c5a372bf8f2386d3f
Aktualität der Wartung
18.7.2026
Nutzung
7 Downloads · 216 Aufrufe
Dateistruktur
📄 SKILL.md
RendererInfo in Blazor verwenden
Blazor-Komponenten können sich während static SSR, Prerendering und interaktiven Render-Modi unterschiedlich verhalten. Dieser Skill erklärt, wie RendererInfo verwendet wird, um klare UI-Zustände und renderer-spezifisches Verhalten auszuwählen.
TUnit-Playwright-Tests ausführen
Sich an den richtigen TUnit Playwright-Befehl zu erinnern, kann zeitaufwendig sein. Dieser Skill gibt Claude, Codex und Claude Code gezielte Befehle für die lokale Testausführung.
Zuverlässige Testautomatisierung entwickeln
von 89jobrien
Schwache Tests verlangsamen Releases und verbergen Regressionen. Diese Skill unterstützt bei Teststrategie, TDD, Automatisierung, Coverage-Review und Playwright-Webprüfungen.
Code auf Sicherheit und Qualität überprüfen
von AutumnsGrove
Manuelle Code-Reviews können Sicherheits-, Leistungs- und Testprobleme übersehen. Dieser Skill bietet Claude, Codex und Claude Code einen strukturierten Review-Workflow mit Checklisten und Anleitung für unterstützende Scans.
Build Accessible Tailwind Interfaces
von nextlevelbuilder
Building consistent, responsive interfaces requires many component, styling, and accessibility decisions. This skill provides shadcn/ui patterns, Tailwind guidance, and focused automation.
Web-Barrierefreiheit auf WCAG-Konformität prüfen
von 89jobrien
Barrierefreiheitslücken können Nutzer ausschließen und Compliance-Risiken schaffen. Diese Skill unterstützt WCAG-Audits, Screenreader-Prüfungen, Tastaturtests und die Planung von Korrekturmaßnahmen.
Bessere SwiftUI-Features entwickeln
von avdlee
In SwiftUI-Projekten können sich veraltete APIs, fragile Zustände und langsame View-Aktualisierungen ansammeln. Dieser Skill bietet gezielte Anleitung für modernen, wartbaren SwiftUI-Code.
React View Transitions implementieren
von vercel-labs
React View Transitions lassen sich leicht falsch platzieren, was zu unbemerkten oder störenden Animationen führt. Dieser Skill unterstützt Entscheidungen zu Animationen für Routen, Suspense, Listen und Shared Elements.