تحسين إمكانية الوصول في الواجهات الأمامية
غالبا ما تفوّت فرق الواجهات الأمامية متطلبات لوحة المفاتيح والدلالات وقارئات الشاشة أثناء العمل الروتيني على واجهات المستخدم. ترشد هذه المهارة Claude وCodex وClaude Code إلى تطبيق فحوصات إمكانية الوصول أثناء إنشاء الواجهات أو تعديلها.
هذه المهارة جزء من حزمة
ثبّت الحزمة كاملة للحصول على كل المهارات التي تحتاجها المهمة بأمر واحد.
انسخ هذا الطلب إلى Agent لديك. يتضمن صفحة Skill المعتمدة وملف manifest.
Review the Skillstore skill "frontend-accessibility" from https://skillstore.io/skills/eis-its-frontend-accessibility.md and its manifest at https://skillstore.io/api/skills/eis-its-frontend-accessibility/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.يجب أن يواصل Agent عرض خطته وطلب أي تأكيد تفرضه سياسة الأمان.
استخدم هذه الروابط عندما يحتاج AI Agent أو crawler أو script إلى سياق نظيف بدلًا من قراءة الصفحة كاملة.
جارٍ استخدام "frontend-accessibility". يستخدم نموذج تسجيل دخول تسميات تعتمد على placeholder فقط وحالات خطأ تعتمد على اللون فقط.
النتيجة المتوقعة:
جارٍ استخدام "frontend-accessibility". تُفتح نافذة منبثقة من زر الإعدادات وتحتوي على عدة عناصر تحكم لنموذج.
النتيجة المتوقعة:
جارٍ استخدام "frontend-accessibility". تحتوي صفحة على عدة بطاقات بعناوين وأيقونات قابلة للنقر.
النتيجة المتوقعة:
The only static finding is a relative Markdown link that uses parent directory segments to reference an accessibility standards document. This is not executable filesystem access, and I found no prompt injection, network activity, or data exfiltration intent in SKILL.md.
شارك تقرير التقييم المرتبط بالإصدار والشارة المحايدة وبطاقة التضمين والاستشهادات. تعرض Skillstore الأدلة من دون أن تقرر ما إذا كانت هذه المهارة آمنة.
https://skillstore.io/skills/eis-its-frontend-accessibility/audits/10?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/eis-its-frontend-accessibility?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/eis-its-frontend-accessibility?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/eis-its-frontend-accessibility/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/eis-its-frontend-accessibility.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>EIS-ITS. (2026). frontend-accessibility security audit report (audit version 10) [Author version unspecified]. Skillstore. https://skillstore.io/skills/eis-its-frontend-accessibility/audits/10@techreport{eis-its-eis-its-frontend-accessibility-2026,
author = {EIS-ITS},
title = {frontend-accessibility security audit report (audit version 10)},
institution = {Skillstore},
year = {2026},
number = {10},
url = {https://skillstore.io/skills/eis-its-frontend-accessibility/audits/10},
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: "frontend-accessibility security audit report (audit version 10)"
version: "unspecified"
type: report
authors:
- name: "EIS-ITS"
date-released: "2026-07-09"
url: "https://skillstore.io/skills/eis-its-frontend-accessibility/audits/10"
identifiers:
- type: other
value: "skillstore:eis-its-frontend-accessibility:audit:10"
description: "Skillstore immutable audit report identifier"
تبقى مهارة كل مؤلف عنصراً مستقلاً قابلاً للتثبيت. يُرتب المتغير الموصى به وفق أدلة Skillstore.
سبب تصدر هذا المتغير
eis-its-frontend-accessibility
2026-09-09
devanb-frontend-accessibility
2026-09-09
العثور على التسميات المفقودة والدلالات الضعيفة وعوائق لوحة المفاتيح قبل دمج المكون.
تطبيق قواعد إمكانية وصول متسقة على النماذج والقوائم ومربعات الحوار وعناصر التحكم القابلة لإعادة الاستخدام.
إنشاء ملاحظات مراجعة مركزة لتدفق لوحة المفاتيح وترتيب التركيز والعناوين ودعم قارئات الشاشة.
راجع واجهة المستخدم هذه من حيث أساسيات إمكانية الوصول. ركّز على HTML الدلالي والتسميات والعناوين والنص البديل ومشكلات لوحة المفاتيح الواضحة.
حسّن هذا النموذج من أجل إمكانية الوصول. افحص التسميات والأوصاف والحقول المطلوبة ورسائل التحقق وسلوك التركيز والإعلان عن الأخطاء.
عرّف سلوك لوحة المفاتيح والتركيز لهذا المكون التفاعلي. اذكر ترتيب التنقل المتوقع بمفتاح Tab وعودة التركيز واستخدام ARIA وسلوك مفتاح Escape.
دقق هذه الميزة بحثا عن مخاطر إمكانية الوصول. صنّف المشكلات حسب تأثيرها على المستخدم، واقترح إصلاحات على مستوى الكود، واذكر ما يحتاج إلى اختبار في المتصفح أو باستخدام قارئ شاشة.
المؤلف
EIS-ITSالترخيص
MIT
مراجعة Skillstore
r1
تنبيه الإصدار
لم يعلن المؤلف عن إصدار.
مرجع
26421118b848d9f1efc0aa169d8a7a9e7e0a877e
حداثة الصيانة
٢٣/٧/٢٠٢٦
الاستخدام
9 تنزيلات · 213 مشاهدات
بنية الملفات
📄 SKILL.md
بناء مكونات واجهة أمامية قابلة لإعادة الاستخدام
تحتاج فرق الواجهة الأمامية إلى بنية مكونات متسقة عبر أطر العمل. ترشد هذه المهارة Claude وCodex وClaude Code إلى تصميم مكونات واجهة مستخدم مركزة وقابلة لإعادة الاستخدام.
تطبيق أسلوب ترميز متسق
تؤدي الشيفرة غير المتسقة إلى إبطاء المراجعات وتجعل الصيانة أصعب. تمنح هذه المهارة Claude وCodex وClaude Code قواعد واضحة لكتابة شيفرة قابلة للقراءة ومتسقة.
اكتب اختبارات سلوك مركزة
غالبا ما تضيف الفرق اختبارات هشة تعكس تفاصيل التنفيذ بدلا من سلوك المستخدم. ترشد هذه المهارة Claude وCodex وClaude Code إلى كتابة اختبارات مركزة لسير العمل الحرج.
بناء CSS متسق للواجهات الأمامية
غالبا ما تنحرف تنسيقات الواجهة الأمامية عبر الملفات والمكونات وأطر العمل. توجه هذه المهارة Claude وCodex وClaude Code نحو أساليب CSS ورموز تصميم متسقة.
التحقق من المدخلات عبر نقاط الدخول
غالبا ما يصبح التحقق من المدخلات غير متسق عبر النماذج وواجهات API وقواعد الأعمال. توجه هذه المهارة Claude وCodex وClaude Code نحو أنماط تحقق آمنة.
تحسين معالجة أخطاء التطبيق
يمكن أن تخفي معالجة الأخطاء غير المتسقة الإخفاقات وتربك المستخدمين. توجه هذه المهارة Claude وCodex وClaude Code نحو استثناءات واضحة، والتحقق من الصحة، والتنظيف، ومسارات الاسترداد.
ابنِ ميزات SwiftUI أفضل
بواسطة avdlee
يمكن أن تتراكم في مشاريع SwiftUI واجهات API مهملة، وحالة هشة، وتحديثات بطيئة للواجهات. توفر هذه المهارة إرشادات مركزة لكتابة كود SwiftUI حديث وقابل للصيانة.
تنفيذ React View Transitions
بواسطة vercel-labs
من السهل وضع انتقالات عرض React في المكان غير المناسب، مما يؤدي إلى رسوم متحركة صامتة أو مزعجة. ترشد هذه المهارة اختيارات الرسوم المتحركة للمسارات وSuspense والقوائم والعناصر المشتركة.
إنشاء قوالب React Email باستخدام Resend
بواسطة resend
إنشاء قوالب بريد إلكتروني جاهزة للإنتاج أمر صعب لأن عملاء البريد الإلكتروني يختلفون. ترشد هذه المهارة Claude وCodex وClaude Code خلال مكونات React Email والإرسال والتنسيق والتوطين وسير عمل المحرر.
تحسين ممارسات Vue 3 TypeScript
بواسطة hyf0
غالبا ما تواجه مشاريع Vue TypeScript أخطاء مربكة في القوالب وrouter وVolar. تمنح هذه المهارة إصلاحات Vue 3 موجهة لكل من Codex وClaude وClaude Code.
تحسين مكونات Vue Options API
بواسطة vuejs-ai
يمكن لمشاريع Vue Options API أن تفقد أمان الأنواع والربط الصحيح لـ this. توفر هذه المهارة أنماطًا مباشرة لمكونات Vue أكثر أمانًا.
إنشاء ميزات واجهة أمامية جاهزة للإنتاج
بواسطة davila7
تحتاج فرق الواجهة الأمامية إلى إرشادات متسقة حول React وNext.js عبر المشاريع. توفر هذه المهارة سير عمل مرجعيًا وممارسات للجودة وبرامج نصية مساعدة لتحليل الواجهة الأمامية.