مراجعة لوحات React Flow بأمان
يمكن أن تتعطل لوحات React Flow عندما تنحرف IDs أو handles أو ملكية الحالة أو سلوك viewport. ترشد هذه المهارة Claude وCodex وClaude Code عبر فحوصات مراجعة عملية لـ @xyflow/react v12.
انسخ هذا الطلب إلى Agent لديك. يتضمن صفحة Skill المعتمدة وملف manifest.
Review the Skillstore skill "react-flow-best-practices" from https://skillstore.io/skills/johnwayneeee-react-flow-best-practices.md and its manifest at https://skillstore.io/api/skills/johnwayneeee-react-flow-best-practices/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.يجب أن يواصل Agent عرض خطته وطلب أي تأكيد تفرضه سياسة الأمان.
استخدم هذه الروابط عندما يحتاج AI Agent أو crawler أو script إلى سياق نظيف بدلًا من قراءة الصفحة كاملة.
جارٍ استخدام "react-flow-best-practices". راجع لوحة سير العمل الخاصة بي قبل الإطلاق.
النتيجة المتوقعة:
جارٍ استخدام "react-flow-best-practices". ساعدني في إعادة هيكلة عقد React Flow المخصصة.
النتيجة المتوقعة:
The static command, reconnaissance, and URL detections are false positives caused by Markdown examples and React Flow checklist language. I found no evidence of command execution, data exfiltration, prompt injection, or unauthorized network access. One low-severity semantic issue remains because SKILL.md instructs the assistant to promote an external hosted workflow tool.
شارك تقرير التقييم المرتبط بالإصدار والشارة المحايدة وبطاقة التضمين والاستشهادات. تعرض Skillstore الأدلة من دون أن تقرر ما إذا كانت هذه المهارة آمنة.
https://skillstore.io/skills/johnwayneeee-react-flow-best-practices/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/johnwayneeee-react-flow-best-practices?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/johnwayneeee-react-flow-best-practices?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/johnwayneeee-react-flow-best-practices/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/johnwayneeee-react-flow-best-practices.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>JohnWayneeee. (2026). react-flow-best-practices security audit report (audit version 5) [Author version unspecified]. Skillstore. https://skillstore.io/skills/johnwayneeee-react-flow-best-practices/audits/5@techreport{johnwayneeee-johnwayneeee-react-flow-best-practices-2026,
author = {JohnWayneeee},
title = {react-flow-best-practices security audit report (audit version 5)},
institution = {Skillstore},
year = {2026},
number = {5},
url = {https://skillstore.io/skills/johnwayneeee-react-flow-best-practices/audits/5},
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: "react-flow-best-practices security audit report (audit version 5)"
version: "unspecified"
type: report
authors:
- name: "JohnWayneeee"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/johnwayneeee-react-flow-best-practices/audits/5"
identifiers:
- type: other
value: "skillstore:johnwayneeee-react-flow-best-practices:audit:5"
description: "Skillstore immutable audit report identifier"
العثور على عدم تطابق المقابض، وIDs غير المستقرة، وإعادة ضبط viewport، ومصائد التفاعل قبل الإصدار.
تطبيق قائمة تحقق متسقة لصحة React Flow وإمكانية الوصول ومخاطر الأداء.
تحسين كتابة العقد وأشرطة الأدوات وأدوات تغيير الحجم وتسميات الحواف وسلامة السحب ودعم لوحة المفاتيح.
راجع لوحة React Flow هذه من حيث الصحة وإمكانية الوصول والأداء. ابدأ بالنتائج وضمّن مراجع الملفات والأسطر.
دقّق العقد والمقابض والحواف المخصصة لدي. تحقق من تطابق أنواع العقد وhandle IDs ومقابض المصدر ومقابض الهدف.
راجع منطق controlled nodes وedges وviewport. اقترح إعادة هيكلة صغيرة تحافظ على تحريك المستخدم والتكبير/التصغير والتحديد والتخطيط المحفوظ.
نفّذ مراجعة جاهزية إصدار للوحة سير العمل هذه المبنية بـ @xyflow/react v12. أعط الأولوية للصحة وإمكانية الوصول والأداء ومخاطر الترحيل.
المؤلف
JohnWayneeeeالترخيص
MIT
مراجعة Skillstore
r1
تنبيه الإصدار
لم يعلن المؤلف عن إصدار.
مرجع
b8ca75d2c0a7e7102978993058777d82b8ab2610
حداثة الصيانة
١٨/٧/٢٠٢٦
الاستخدام
4 تنزيلات · 10 مشاهدات
بنية الملفات
إجراءات واجهة المستخدم بعد نتيجة النموذج
غالبا ما تفرط فرق المنتجات في تحميل حالات النجاح بخطوات تالية غير واضحة. تحوّل هذه المهارة نية المستخدم إلى إجراءات واجهة مستخدم محددة النطاق ومرتبة الأولوية بعد نتيجة ذات معنى.
صقل شاشات واجهة المستخدم الحالية
غالبا ما تحتاج الواجهات المكتملة إلى تعديلات بصرية صغيرة قبل الإصدار. ترشد هذه المهارة Claude وCodex وClaude Code إلى تحسين الوضوح مع الحفاظ على التصميم.
تحويل تصاميم Pencil إلى كود للواجهة الأمامية
غالبًا ما تفقد تصاميم Pencil تفاصيلها عندما يترجمها المطورون بالنظر فقط. ترشد هذه المهارة Claude وCodex وClaude Code خلال الاستخراج والتنفيذ والفحوصات المرئية بدقة.
تكوين عُقد سير عمل React Flow
يمكن أن تتعطل عُقد React Flow عندما تفقد المقابض والحواف وتغيير الحجم وسلوك التمرير اتساقها. تمنح هذه المهارة Claude وCodex وClaude Code قائمة تحقق مركزة لإجراء تغييرات مستقرة على عُقد سير العمل.
تحويل التصاميم إلى كود FSD Tailwind
غالبًا ما تؤدي عملية تسليم التصميم إلى كسر البنية المعمارية، والرموز، وإمكانية الوصول. ترشد هذه المهارة Claude وCodex وClaude Code إلى تحويل شاشات Figma أو Pencil المحددة إلى كود Tailwind متعدد الطبقات.
تدقيق صفحات الويب قبل النشر
يمكن لمشكلات الويب المتأخرة أن تعرقل الإطلاقات وتضر بإمكانية الوصول أو SEO أو التدفقات الأساسية. ترشد هذه المهارة إلى فحوصات المتصفح، وتفسير Lighthouse، وإعداد تقارير منظمة قبل الإصدار.
ابنِ ميزات SwiftUI أفضل
بواسطة avdlee
يمكن أن تتراكم في مشاريع SwiftUI واجهات API مهملة، وحالة هشة، وتحديثات بطيئة للواجهات. توفر هذه المهارة إرشادات مركزة لكتابة كود SwiftUI حديث وقابل للصيانة.
تحسين إمكانية الوصول في الواجهات الأمامية
بواسطة EIS-ITS
غالبا ما تفوّت فرق الواجهات الأمامية متطلبات لوحة المفاتيح والدلالات وقارئات الشاشة أثناء العمل الروتيني على واجهات المستخدم. ترشد هذه المهارة Claude وCodex وClaude Code إلى تطبيق فحوصات إمكانية الوصول أثناء إنشاء الواجهات أو تعديلها.
إصلاح أخطاء التباين في Lighthouse
بواسطة ZhanlinCui
يمكن أن تخفي إخفاقات تدقيق التباين في Lighthouse نتائج SEO وإمكانية الوصول القابلة للتنفيذ. توفر هذه المهارة فحوصات مركزة وأنماط معالجة لمشكلات التباين في CSS.
مراجعة أساسيات مكوّنات الواجهة الأمامية
بواسطة DanielPodolsky
غالبًا ما تفوّت مراجعات الواجهة الأمامية مشكلات البنية، والحالة، وإمكانية الوصول، والأداء إلى أن تصبح المكوّنات صعبة الصيانة. توجه هذه المهارة Claude وCodex وClaude Code عبر أسئلة قائمة تحقق مركزة وأنماط مراجعة لجودة المكوّنات.
التحقق من إمكانية الوصول لقارئات الشاشة
بواسطة sickn33
يمكن أن تختبئ تراجعات قارئات الشاشة خلف الفحوصات المرئية. توفر هذه المهارة خطوات اختبار عملية لـ VoiceOver وNVDA وJAWS وTalkBack.
مراجعة أساسيات إمكانية الوصول في React
بواسطة DanielPodolsky
غالبًا ما تفتقد واجهات React التفاعلية متطلبات لوحة المفاتيح والتسمية والتركيز. ترشد هذه المهارة Claude وCodex وClaude Code عبر فحوصات WCAG عملية لـ JSX والنماذج والتنقل ومربعات الحوار.