pitfalls-react
بناء واجهات React أكثر أمانًا
قد يغفل عمل واجهات React حالات التحميل، والتحقق من صحة البيانات، والتخطيط المتجاوب، وتفاصيل إمكانية الوصول. ترشد هذه المهارة مراجعات المكونات باستخدام أنماط React موجزة وقوائم تحقق.
التثبيت باستخدام Agent لدي
انسخ هذا الطلب إلى Agent لديك. يتضمن صفحة Skill المعتمدة وملف manifest.
Review the Skillstore skill "pitfalls-react" from https://skillstore.io/skills/barissozen-pitfalls-react.md and its manifest at https://skillstore.io/api/skills/barissozen-pitfalls-react/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.يجب أن يواصل Agent عرض خطته وطلب أي تأكيد تفرضه سياسة الأمان.
موارد مهيّأة لـ Agents
استخدم هذه الروابط عندما يحتاج AI Agent أو crawler أو script إلى سياق نظيف بدلًا من قراءة الصفحة كاملة.
اختبرها
جارٍ استخدام "pitfalls-react". يعرض مكون React البيانات فورًا ويستخدم حاوية عامة قابلة للنقر.
النتيجة المتوقعة:
تشير المراجعة إلى حالات التحميل والخطأ المفقودة، وتوصي بسلوك زر دلالي، وتطلب دعم لوحة المفاتيح وتنسيق التركيز.
جارٍ استخدام "pitfalls-react". يقبل نموذج القيم لكنه لا يعرض التحقق إلا بعد الإرسال.
النتيجة المتوقعة:
توصي المراجعة بالتحقق عبر المخطط، وأخطاء الحقول الداخلية، وحالة إرسال معطلة أثناء نشاط التحقق أو الإرسال.
جارٍ استخدام "pitfalls-react". يعمل جدول لوحة معلومات على سطح المكتب لكنه يتجاوز حدود الشاشة على الشاشات الصغيرة.
النتيجة المتوقعة:
تقترح المراجعة تخطيطًا معتمدًا على الهاتف أولًا، وتمريرًا أفقيًا للجدول، وأحجام عناصر تحكم مناسبة للمس.
التدقيق الأمني
آمنAll static findings were false positives caused by Markdown code fences, React keyboard-event examples, CSS focus styles, or documentation checklist text. I found no prompt injection, malicious intent, command execution, credential handling, or system reconnaissance behavior in SKILL.md.
عوامل الخطر
شارك واستشهد بهذا التقرير
شارك تقرير التقييم المرتبط بالإصدار والشارة المحايدة وبطاقة التضمين والاستشهادات. تعرض Skillstore الأدلة من دون أن تقرر ما إذا كانت هذه المهارة آمنة.
نسخ رابط التقرير
https://skillstore.io/skills/barissozen-pitfalls-react/audits/8?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportشارة Markdown
[](https://skillstore.io/skills/barissozen-pitfalls-react?utm_source=security_passport_badge)شارة HTML
<a href="https://skillstore.io/skills/barissozen-pitfalls-react?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/barissozen-pitfalls-react/security.svg" alt="Skillstore security assessment" loading="lazy"></a>بطاقة قابلة للتضمين
<iframe src="https://skillstore.io/embed/skills/barissozen-pitfalls-react.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
BarisSozen. (2026). pitfalls-react security audit report (audit version 8) [Author version unspecified]. Skillstore. https://skillstore.io/skills/barissozen-pitfalls-react/audits/8اقتباس BibTeX
@techreport{barissozen-barissozen-pitfalls-react-2026,
author = {BarisSozen},
title = {pitfalls-react security audit report (audit version 8)},
institution = {Skillstore},
year = {2026},
number = {8},
url = {https://skillstore.io/skills/barissozen-pitfalls-react/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: "pitfalls-react security audit report (audit version 8)"
version: "unspecified"
type: report
authors:
- name: "BarisSozen"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/barissozen-pitfalls-react/audits/8"
identifiers:
- type: other
value: "skillstore:barissozen-pitfalls-react:audit:8"
description: "Skillstore immutable audit report identifier"
تقييم Skillstore
سبب هذا التقييم موثوقية الأدلة: مرتفعما الذي يمكنك بناؤه
مراجعة مكون جديد
اكتشاف حالات التحميل المفقودة، وحالات الخطأ، ومشكلات موضع النصوص المساعدة، ومزالق التنقل قبل الدمج.
تحسين سلوك النماذج
فحص مخططات التحقق، وعرض الأخطاء داخل الحقول، وحالات تعطيل الإرسال في نماذج React.
التحضير لفحوصات إمكانية الوصول
مراجعة HTML الدلالي، وتسميات ARIA، وسلوك لوحة المفاتيح، ومؤشرات التركيز، وأحجام أهداف اللمس.
جرّب هذه الموجّهات
استخدم مهارة pitfalls-react لمراجعة مكون React هذا من حيث حالات التحميل، وحالات الخطأ، وموضع النصوص المساعدة: [paste component].
استخدم مهارة pitfalls-react لفحص هذا النموذج من حيث تغطية مخطط Zod، والأخطاء داخل الحقول، والتعامل مع حالة الإرسال: [paste form].
استخدم مهارة pitfalls-react لمراجعة واجهة المستخدم هذه من حيث HTML الدلالي، وتسميات ARIA، ودعم لوحة المفاتيح، ومؤشرات التركيز: [paste code].
استخدم مهارة pitfalls-react لتدقيق هذه الميزة من حيث أنماط المكونات، والتحقق من النماذج، والسلوك المتجاوب، وحدود الأخطاء، وإمكانية الوصول: [paste files].
أفضل الممارسات
- استخدم المهارة قبل دمج تغييرات واجهة React التي تضيف نماذج أو تنقلًا أو بيانات غير متزامنة.
- قدّم سياق المكون كاملًا، بما في ذلك سلوك التحميل والخطأ والحالات الفارغة.
- اجمع قائمة التحقق مع الاختبارات، وlinting، وفحوصات إمكانية الوصول اليدوية.
تجنب
- لا تتعامل مع الأمثلة على أنها بنية تطبيق كاملة.
- لا تتخطّ اختبار المتصفح ولوحة المفاتيح بعد تطبيق الإرشادات.
- لا تستخدم حاويات عامة لعناصر التحكم التفاعلية عندما تكون العناصر الدلالية متاحة.
الأسئلة المتكررة
ما الذي تراجعه هذه المهارة؟
هل تنفذ أوامر المشروع؟
هل يمكنها استبدال الاختبارات المؤتمتة؟
هل هي مفيدة لـ React Hook Form؟
هل تغطي إمكانية الوصول؟
ما الأدوات التي يمكنها استخدامها؟
تفاصيل المطور
المؤلف
BarisSozenالترخيص
MIT
مراجعة Skillstore
r1
تنبيه الإصدار
لم يعلن المؤلف عن إصدار.
مرجع
c4231f0153ccd2a2ed62274c5a372bf8f2386d3f
حداثة الصيانة
٢١/٧/٢٠٢٦
الاستخدام
6 تنزيلات · 196 مشاهدات
بنية الملفات
📄 SKILL.md