Habilidades animated-focus
📦

animated-focus

Revisão do conteúdo r1 Seguro ⚙️ Comandos externos

Corrigir Bugs de Foco Animado

Componentes flutuantes animados podem perder o foco do teclado quando o CSS começa com opacidade zero. Esta skill explica um padrão de repetição e testes para componentes Select, DropdownMenu e Popover.

Suporta: Claude Codex Code(CC)
🥉 78 Bronze

Instalar com meu Agente

Copie esta solicitação para o seu Agente. Ela inclui a página canônica do Skill e o manifesto.

Solicitação do agente
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.

Seu Agente ainda deve apresentar o plano e solicitar qualquer confirmação exigida pela política de segurança.

Recursos legíveis por agentes

Use estes links quando um agente de IA, crawler ou script precisar de contexto limpo em vez de ler a página completa.

Detalhe em Markdown GET /skills/andrehogberg-animated-focus.md manifest assinado GET /api/skills/andrehogberg-animated-focus/manifest lockfile assinado GET /api/skills/andrehogberg-animated-focus/lockfile

Testar

Usando "animated-focus". Explique por que a navegação por teclado falha somente quando classes de animação de fade estão habilitadas.

Resultado esperado:

O elemento é renderizado, mas começa invisível, então o navegador pode rejeitar a primeira solicitação de foco. O foco permanece no acionador.

Usando "animated-focus". Sugira testes para componentes Select e DropdownMenu animados.

Resultado esperado:

  • Abra cada componente com Enter enquanto as classes de animação estão ativas.
  • Verifique se as teclas de seta percorrem os itens depois que a animação de abertura começa.
  • Confirme que Enter seleciona ou ativa o item focado.
  • Confirme que Escape fecha o conteúdo flutuante.

Usando "animated-focus". Resuma a abordagem de implementação recomendada.

Resultado esperado:

Tente focar após um quadro de animação, verifique o elemento ativo e então repita brevemente enquanto a animação se torna focalizável.

Auditoria de segurança

Seguro
v8 • 06/07/2026 Abrir o relatório versionado

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.

1
Arquivos analisados
166
Linhas analisadas
0
Itens de revisão
0
Falsos positivos ignorados

Fatores de risco

⚙️ Comandos externos (26)
SKILL.md:12 SKILL.md:23 SKILL.md:24 SKILL.md:31-37 SKILL.md:37-41 SKILL.md:41-45 SKILL.md:45-69 SKILL.md:69-73 SKILL.md:73-74 SKILL.md:74-77 SKILL.md:77 SKILL.md:81-82 SKILL.md:82-90 SKILL.md:90-122 SKILL.md:122-130 SKILL.md:130-131 SKILL.md:131-132 SKILL.md:132-133 SKILL.md:133-137 SKILL.md:137-139 SKILL.md:139-145 SKILL.md:145 SKILL.md:146 SKILL.md:147 SKILL.md:148-155 SKILL.md:155
A auditoria estática e semântica concluída mais recente não detectou achados de segurança confirmados. Isso não comprova que a skill não tenha efeitos colaterais.
Auditado por: codex Ver histórico de auditoria →
Compartilhar e citar este relatório

Compartilhe o relatório de avaliação versionado, o badge neutro, o cartão incorporável e as citações. A Skillstore apresenta evidências sem decidir se este Skill é seguro.

Abrir o relatório versionado
Avaliação de Segurança

Copiar link do relatório

https://skillstore.io/skills/andrehogberg-animated-focus/audits/8?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Badge Markdown

[![Skillstore security assessment](https://skillstore.io/badges/skills/andrehogberg-animated-focus/security.svg)](https://skillstore.io/skills/andrehogberg-animated-focus?utm_source=security_passport_badge)

Badge HTML

<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>

Cartão incorporável

<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>
Citações acadêmicas (APA · BibTeX · CFF)

Citação APA

AndreHogberg. (2026). animated-focus security audit report (audit version 8) [Author version unspecified]. Skillstore. https://skillstore.io/skills/andrehogberg-animated-focus/audits/8

Citação BibTeX

@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"

Pontuação do Skillstore

Por que esta pontuação Confiança das evidências: Alto
55
Arquitetura
85
Manutenibilidade
87
Conteúdo
70
Comunidade
83
Conformidade com a especificação

O que você pode criar

Corrigir o comportamento de teclado de dropdowns animados

Diagnosticar por que as teclas de seta param de funcionar depois que um dropdown abre com animação CSS.

Documentar decisões de temporização de foco acessível

Registrar o motivo para repetir o foco depois que conteúdo flutuante animado é renderizado.

Planejar testes de regressão para componentes animados

Definir testes de teclado que confirmem que Enter, teclas de seta, seleção e Escape continuam funcionando.

Teste estes prompts

Identificar o sintoma de foco 
Use animated-focus para explicar por que meu dropdown animado abre, mas as teclas de seta ainda agem no botão acionador.
Aplicar o padrão de repetição 
Use animated-focus para adaptar meu helper de foco de componente flutuante para animações CSS que começam com opacidade zero.
Revisar a cobertura de componentes 
Use animated-focus para revisar os fluxos de foco de Select, DropdownMenu e Popover em busca de lacunas de temporização de animação.
Projetar testes de regressão 
Use animated-focus para criar um plano de testes Playwright para navegação por teclado em componentes flutuantes animados.

Boas práticas

  • Verifique o sucesso do foco conferindo o elemento ativo após cada tentativa.
  • Mantenha as janelas de repetição curtas para que usuários de teclado não sintam atraso na entrada.
  • Teste estados animados e não animados dos componentes com os mesmos fluxos de teclado.

Evitar

  • Não assuma que o foco terá sucesso imediatamente após renderizar conteúdo animado.
  • Não corrija a temporização de foco adicionando um atraso longo e incondicional.
  • Não teste apenas interações com mouse em componentes flutuantes animados.

Perguntas frequentes

Qual problema esta skill aborda?
Ela aborda falhas de foco do teclado causadas por conteúdo flutuante que começa invisível durante a animação CSS.
Quais componentes são cobertos?
A orientação cita os componentes Select, DropdownMenu e Popover com conteúdo flutuante animado.
A skill executa comandos automaticamente?
Não. É um documento de orientação em Markdown e inclui apenas exemplos para desenvolvedores revisarem.
Por que usar lógica de repetição em vez de um único atraso?
A lógica de repetição mantém a espera curta enquanto permite que o navegador aceite o foco depois que a animação começa.
Como as equipes devem validar a correção?
As equipes devem testar Enter, teclas de seta, seleção ou ativação e Escape com as classes de animação habilitadas.
Claude, Codex ou Claude Code podem usar esta skill?
Sim. O relatório lista suporte para Claude, Codex e Claude Code.

Detalhes do desenvolvedor

Licença

MIT

Revisão da Skillstore

r1

Aviso de versão

O autor não declarou uma versão.

Repositório

https://github.com/AndreHogberg/summit-ui/tree/main/.claude/skills/animated-focus

Referência

c4231f0153ccd2a2ed62274c5a372bf8f2386d3f

Atualidade da manutenção

18/07/2026

Uso

7 downloads · 216 visualizações

Estrutura de arquivos

📄 SKILL.md