تحسين إمكانية الوصول في الواجهة الأمامية
قد تفوّت فرق الواجهة الأمامية متطلبات لوحة المفاتيح والدلالات وقارئات الشاشة. ترشد هذه المهارة وكلاء الذكاء الاصطناعي إلى بناء مكونات واجهة مستخدم قابلة للوصول.
انسخ هذا الطلب إلى Agent لديك. يتضمن صفحة Skill المعتمدة وملف manifest.
Review the Skillstore skill "frontend-accessibility" from https://skillstore.io/skills/devanb-frontend-accessibility.md and its manifest at https://skillstore.io/api/skills/devanb-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". نموذج React يستخدم تسميات كعناصر نائبة فقط ورسائل تحقق مضمنة.
النتيجة المتوقعة:
تحدد المراجعة التسميات المفقودة وإعلانات الأخطاء غير الواضحة وحالات التركيز الضعيفة، وتوصي بتسميات صريحة مع نص تحقق قابل للوصول.
جارٍ استخدام "frontend-accessibility". مكوّن قائمة مخصص يفتح عند النقر ويحتوي على عدة إجراءات.
النتيجة المتوقعة:
تشرح الاستجابة سلوك لوحة المفاتيح المطلوب وحركة التركيز والأسماء القابلة للوصول وأدوار ARIA فقط عندما تكون العناصر الأصلية غير كافية.
جارٍ استخدام "frontend-accessibility". تخطيط صفحة يتضمن مستويات عناوين متخطاة ومعالم غير واضحة.
النتيجة المتوقعة:
يقترح التدقيق ترتيبا منطقيا للعناوين وتحسينات للمعالم وبنية تنقل أوضح لمستخدمي قارئات الشاشة.
The inline-code backticks on line 12 are a false positive because they only mark file extensions. The relative path on line 29 is confirmed because it points outside the skill directory. No prompt injection or data exfiltration intent was found.
هذه قدرات محلية حقيقية قد يُتوقع وجودها لهذه المهارة، لذا فهي تتطلب مراجعة ولكن لا تُحتسب كسلوك خبيث مؤكد.
شارك تقرير التقييم المرتبط بالإصدار والشارة المحايدة وبطاقة التضمين والاستشهادات. تعرض Skillstore الأدلة من دون أن تقرر ما إذا كانت هذه المهارة آمنة.
https://skillstore.io/skills/devanb-frontend-accessibility/audits/10?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/devanb-frontend-accessibility?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/devanb-frontend-accessibility?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/devanb-frontend-accessibility/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/devanb-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>DevanB. (2026). frontend-accessibility security audit report (audit version 10) [Author version unspecified]. Skillstore. https://skillstore.io/skills/devanb-frontend-accessibility/audits/10@techreport{devanb-devanb-frontend-accessibility-2026,
author = {DevanB},
title = {frontend-accessibility security audit report (audit version 10)},
institution = {Skillstore},
year = {2026},
number = {10},
url = {https://skillstore.io/skills/devanb-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: "DevanB"
date-released: "2026-07-09"
url: "https://skillstore.io/skills/devanb-frontend-accessibility/audits/10"
identifiers:
- type: other
value: "skillstore:devanb-frontend-accessibility:audit:10"
description: "Skillstore immutable audit report identifier"
تبقى مهارة كل مؤلف عنصراً مستقلاً قابلاً للتثبيت. يُرتب المتغير الموصى به وفق أدلة Skillstore.
سبب تصدر هذا المتغير
eis-its-frontend-accessibility
2026-09-09
devanb-frontend-accessibility
2026-09-09
العثور على فجوات إمكانية الوصول في ترميز المكونات والتسميات وحالات التركيز واستخدام ARIA قبل الإصدار.
إنشاء نماذج بتسميات واضحة ورسائل تحقق ودعم للوحة المفاتيح وبنية ملائمة لقارئات الشاشة.
تقييم مربعات الحوار والقوائم والأزرار والمحتوى الديناميكي من حيث التحكم في التركيز وسلوك لوحة المفاتيح.
راجع هذا المكوّن بحثا عن مشكلات إمكانية الوصول. ركّز على HTML الدلالي والتسميات ودعم لوحة المفاتيح والتباين وسلوك قارئات الشاشة.
حسّن هذا النموذج من حيث إمكانية الوصول. تأكد من أن لكل إدخال تسمية، وأن التحقق يتم الإعلان عنه، وأن مستخدمي لوحة المفاتيح يمكنهم إكمال التدفق.
دقّق تدفق هذه النافذة المشروطة أو مربع الحوار. افحص حصر التركيز والتركيز الأولي وسلوك مفتاح escape وإعادة التركيز والإعلانات والتفاعل بلوحة المفاتيح.
راجع سير عمل الواجهة الأمامية هذا بحثا عن مخاطر إمكانية الوصول وفق WCAG. قدّم إصلاحات مرتبة حسب الأولوية للدلالات والتركيز والتباين والعناوين وARIA ودعم التقنيات المساعدة.
المؤلف
DevanBالترخيص
MIT
مراجعة Skillstore
r1
تنبيه الإصدار
لم يعلن المؤلف عن إصدار.
مرجع
0519034dad657fb1f7706e0550e962beeda73fdf
حداثة الصيانة
٢٣/٧/٢٠٢٦
الاستخدام
5 تنزيلات · 155 مشاهدات
بنية الملفات
📄 SKILL.md
بناء واجهات API خلفية بنمط RESTful
غالبًا ما يتعثر العمل على واجهات API الخلفية عند التوجيه، وإدارة الإصدارات، ومعايير الاستجابة. ترشد هذه المهارة Claude وCodex وClaude Code خلال تصميم وتنفيذ نقاط نهاية REST بشكل متسق.
توحيد اتفاقيات التطوير للفريق
غالبا ما تهدر الفرق وقتا عندما تختلف ممارسات بنية المشروع والالتزامات والمراجعات والتهيئة بين المساهمين. تمنح هذه المهارة Claude وCodex وClaude Code قائمة تحقق مشتركة لاتفاقيات تطوير متسقة.
كتابة تعليقات شيفرة واضحة ومستدامة
غالبًا ما تضيف الفرق تعليقات تصبح قديمة أو تكرر الشيفرة الواضحة. ترشد هذه المهارة مساعدي الذكاء الاصطناعي إلى كتابة تعليقات محدودة تشرح القرارات غير البديهية.
بناء نماذج Backend موثوقة
تحتاج فرق Backend إلى تعريفات نماذج متسقة تتوافق مع معايير قواعد البيانات وORM. ترشد هذه المهارة مساعدي الذكاء الاصطناعي عبر تسمية النماذج، والعلاقات، والتحويلات، والتحقق، والمصانع، والمزودات الأولية.
بناء مكوّنات واجهة أمامية قابلة لإعادة الاستخدام
يصعب إعادة استخدام مكوّنات الواجهة الأمامية الكبيرة واختبارها وصيانتها. توجّه هذه المهارة Claude وCodex وClaude Code لإنشاء مكوّنات React مركّزة ذات props واضحة وحدود واضحة للحالة.
إنشاء ترحيلات خلفية آمنة
يمكن أن تؤدي تغييرات مخطط قاعدة البيانات إلى تعطيل عمليات النشر عندما تفتقر الترحيلات إلى خطط تراجع أو فحوصات توافق. توجه هذه المهارة Claude وCodex وClaude Code نحو ترحيلات مركزة.
أنشئ تطبيقات Fullstack بإرشاد خبير
بواسطة alirezarezvani
غالبًا ما تحتاج مشاريع Fullstack إلى إعداد متسق، وخيارات معمارية، وفحوصات جودة. توفر هذه المهارة سكربتات ومراجع للعمل على React وNext.js وNode.js وGraphQL وPostgreSQL.
ابنِ ميزات SwiftUI أفضل
بواسطة avdlee
يمكن أن تتراكم في مشاريع SwiftUI واجهات API مهملة، وحالة هشة، وتحديثات بطيئة للواجهات. توفر هذه المهارة إرشادات مركزة لكتابة كود SwiftUI حديث وقابل للصيانة.
تنفيذ React View Transitions
بواسطة vercel-labs
من السهل وضع انتقالات عرض React في المكان غير المناسب، مما يؤدي إلى رسوم متحركة صامتة أو مزعجة. ترشد هذه المهارة اختيارات الرسوم المتحركة للمسارات وSuspense والقوائم والعناصر المشتركة.
بناء مكونات React آمنة الأنواع
بواسطة softaworks
غالبا ما يتطلب العمل على React TypeScript أنواعا دقيقة للأحداث والـ hooks والمسارات. توفر هذه المهارة أنماطا مركزة للمكونات المكتوبة الأنواع، وواجهات React 19 API، والتوجيه.
إنشاء ميزات واجهة أمامية جاهزة للإنتاج
بواسطة davila7
تحتاج فرق الواجهة الأمامية إلى إرشادات متسقة حول React وNext.js عبر المشاريع. توفر هذه المهارة سير عمل مرجعيًا وممارسات للجودة وبرامج نصية مساعدة لتحليل الواجهة الأمامية.
تحسين أداء Next.js
بواسطة Atman36
قد تصبح تطبيقات Next.js بطيئة بسبب الحِزم الكبيرة، والتخزين المؤقت الضعيف، والوسائط غير المحسّنة. ترشد هذه المهارة Claude وCodex وClaude Code عبر تحسينات أداء مركّزة لتطبيقات الإنتاج.