إصلاح أخطاء التركيز في التحريكات
قد تفقد المكونات العائمة المتحركة تركيز لوحة المفاتيح عندما يبدأ CSS عند opacity صفرية. تشرح هذه المهارة نمط إعادة المحاولة واختبارات لمكونات Select وDropdownMenu وPopover.
انسخ هذا الطلب إلى Agent لديك. يتضمن صفحة Skill المعتمدة وملف 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.يجب أن يواصل Agent عرض خطته وطلب أي تأكيد تفرضه سياسة الأمان.
استخدم هذه الروابط عندما يحتاج AI Agent أو crawler أو script إلى سياق نظيف بدلًا من قراءة الصفحة كاملة.
جارٍ استخدام "animated-focus". اشرح لماذا يفشل التنقل بلوحة المفاتيح فقط عند تمكين فئات تحريك التلاشي.
النتيجة المتوقعة:
يتم عرض العنصر لكنه يبدأ غير مرئي، لذلك قد يرفض المتصفح طلب التركيز الأول. يبقى التركيز على زر التشغيل.
جارٍ استخدام "animated-focus". اقترح اختبارات لمكونات Select وDropdownMenu المتحركة.
النتيجة المتوقعة:
جارٍ استخدام "animated-focus". لخص نهج التنفيذ الموصى به.
النتيجة المتوقعة:
حاول التركيز بعد إطار تحريك واحد، وتحقق من العنصر النشط، ثم أعد المحاولة لفترة وجيزة بينما يصبح التحريك قابلا للتركيز.
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 الأدلة من دون أن تقرر ما إذا كانت هذه المهارة آمنة.
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"
تشخيص سبب توقف مفاتيح الأسهم عن العمل بعد فتح قائمة منسدلة مع تحريك 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.
المؤلف
AndreHogbergالترخيص
MIT
مراجعة Skillstore
r1
تنبيه الإصدار
لم يعلن المؤلف عن إصدار.
مرجع
c4231f0153ccd2a2ed62274c5a372bf8f2386d3f
حداثة الصيانة
٢١/٧/٢٠٢٦
الاستخدام
7 تنزيلات · 216 مشاهدات
بنية الملفات
📄 SKILL.md
استخدام RendererInfo في Blazor
يمكن لمكونات Blazor أن تتصرف بشكل مختلف أثناء static SSR، والعرض المسبق، وأوضاع العرض التفاعلي. تشرح هذه المهارة كيفية استخدام RendererInfo لاختيار حالات واجهة مستخدم واضحة وسلوك خاص بكل عارض.
تشغيل اختبارات 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 والقوائم والعناصر المشتركة.