スキル animated-focus
📦

animated-focus

コンテンツリビジョン r1 安全 ⚙️ 外部コマンド

アニメーション付きフォーカスのバグを修正する

CSS が opacity ゼロから始まると、アニメーション付きのフローティングコンポーネントでキーボードフォーカスが失われることがあります。このスキルでは、Select、DropdownMenu、Popover コンポーネント向けのリトライパターンとテストについて説明します。

対応: Claude Codex Code(CC)
🥉 78 ブロンズ

自分のエージェントでインストール

このリクエストをエージェントにコピーしてください。正規の 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 エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。

Markdown詳細 GET /skills/andrehogberg-animated-focus.md 署名済み manifest GET /api/skills/andrehogberg-animated-focus/manifest 署名済み lockfile GET /api/skills/andrehogberg-animated-focus/lockfile

テストする

「animated-focus」を使用しています。 フェードアニメーションクラスが有効な場合にのみキーボードナビゲーションが失敗する理由を説明してください。

期待される結果:

要素はレンダリングされていますが、最初は不可視の状態で始まるため、ブラウザが最初のフォーカス要求を拒否することがあります。フォーカスはトリガーに残ります。

「animated-focus」を使用しています。 アニメーション付きの Select および DropdownMenu コンポーネント向けのテストを提案してください。

期待される結果:

  • アニメーションクラスが有効な状態で、各コンポーネントを Enter で開きます。
  • 開くアニメーションが開始した後、矢印キーで項目間を移動できることを確認します。
  • Enter でフォーカスされた項目を選択またはアクティブ化できることを確認します。
  • Escape でフローティングコンテンツが閉じることを確認します。

「animated-focus」を使用しています。 推奨される実装アプローチを要約してください。

期待される結果:

1 animation frame 後にフォーカスを試行し、アクティブ要素を検証してから、アニメーションによりフォーカス可能になるまで短時間リトライします。

セキュリティ監査

安全
v8 • 2026/7/6 バージョン別レポートを開く

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
スキャンされたファイル
166
解析済み行数
0
レビュー項目
0
誤検知を無視

リスク要因

⚙️ 外部コマンド (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
最新の完了済み静的・セマンティック監査では、確認済みのセキュリティ検出事項は見つかりませんでした。これは、スキルに副作用がないことを証明するものではありません。
監査者: codex 監査履歴を表示 →
このレポートを共有・引用

バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。

バージョン別レポートを開く
セキュリティ評価

レポートリンクをコピー

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

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)

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>

埋め込みカード

<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>
学術引用 (APA · BibTeX · CFF)

APA形式の引用

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

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"

Skillstore スコア

このスコアの理由 証拠の信頼度: 高
55
アーキテクチャ
85
保守性
87
コンテンツ
70
コミュニティ
83
仕様準拠

作成できるもの

アニメーション付きドロップダウンのキーボード動作を修正する

CSS アニメーション付きでドロップダウンを開いた後に、矢印キーが動作しなくなる理由を診断します。

アクセシブルなフォーカスタイミングの判断を文書化する

アニメーション付きフローティングコンテンツのレンダリング後にフォーカスをリトライする理由を記録します。

アニメーション付きコンポーネントの回帰テストを計画する

Enter、矢印キー、選択、Escape が引き続き動作することを確認するキーボードテストを定義します。

これらのプロンプトを試す

フォーカス症状を特定する 
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.

ベストプラクティス

  • 各試行後にアクティブ要素を確認して、フォーカスが成功したことを検証します。
  • キーボードユーザーが入力遅延を感じないように、リトライ時間は短く保ちます。
  • アニメーションありとなしのコンポーネント状態を、同じキーボードフローでテストします。

回避

  • アニメーション付きコンテンツをレンダリングした直後にフォーカスが成功すると仮定しないでください。
  • 長い無条件の遅延を追加してフォーカスタイミングを修正しないでください。
  • アニメーション付きフローティングコンポーネントでマウス操作だけをテストしないでください。

よくある質問

このスキルはどのような問題に対処しますか？
CSS アニメーション中に不可視の状態から始まるフローティングコンテンツによって発生する、キーボードフォーカスの失敗に対処します。
どのコンポーネントが対象ですか？
このガイダンスでは、アニメーション付きフローティングコンテンツを持つ Select、DropdownMenu、Popover コンポーネントを挙げています。
このスキルはコマンドを自動実行しますか？
いいえ。これは Markdown のガイダンス文書であり、開発者がレビューするための例のみを含みます。
1 回の遅延ではなくリトライロジックを使う理由は何ですか？
リトライロジックにより、待機時間を短く保ちながら、アニメーション開始後にブラウザがフォーカスを受け入れられるようにします。
チームは修正をどのように検証すべきですか？
チームは、アニメーションクラスを有効にした状態で、Enter、矢印キー、選択またはアクティブ化、Escape をテストする必要があります。
Claude、Codex、または Claude Code はこのスキルを使用できますか？
はい。レポートには Claude、Codex、Claude Code のサポートが記載されています。

開発者情報

作成者

AndreHogberg

ライセンス

MIT

Skillstore リビジョン

r1

バージョンに関する注意

作者はバージョンを宣言していません。

リポジトリ

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

参照

c4231f0153ccd2a2ed62274c5a372bf8f2386d3f

メンテナンスの新しさ

2026/7/23

利用状況

7 ダウンロード · 216 閲覧

ファイル構成

📄 SKILL.md

AndreHogberg のその他のスキル

すべて表示

関連スキル

すべて表示