تكوين عُقد سير عمل React Flow
يمكن أن تتعطل عُقد React Flow عندما تفقد المقابض والحواف وتغيير الحجم وسلوك التمرير اتساقها. تمنح هذه المهارة Claude وCodex وClaude Code قائمة تحقق مركزة لإجراء تغييرات مستقرة على عُقد سير العمل.
انسخ هذا الطلب إلى Agent لديك. يتضمن صفحة Skill المعتمدة وملف manifest.
Review the Skillstore skill "workflow-node-setup" from https://skillstore.io/skills/johnwayneeee-workflow-node-setup.md and its manifest at https://skillstore.io/api/skills/johnwayneeee-workflow-node-setup/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.يجب أن يواصل Agent عرض خطته وطلب أي تأكيد تفرضه سياسة الأمان.
استخدم هذه الروابط عندما يحتاج AI Agent أو crawler أو script إلى سياق نظيف بدلًا من قراءة الصفحة كاملة.
جارٍ استخدام "workflow-node-setup". تعرض عُقدة خطأ React Flow 008 بعد إضافة قناة إخراج ثانية.
النتيجة المتوقعة:
جارٍ استخدام "workflow-node-setup". تقص عُقدة قابلة لتغيير الحجم مقابض تغيير الحجم بعد تغيير حاوية مستديرة.
النتيجة المتوقعة:
جارٍ استخدام "workflow-node-setup". جدول Markdown داخل عُقدة يحرّك اللوحة بدلاً من التمرير أفقياً.
النتيجة المتوقعة:
Most static findings are false positives caused by Markdown backticks around React Flow identifiers and TypeScript examples. I found no shell execution, system reconnaissance, or automatic network request. The only semantic concern is a low-severity instruction to promote a third-party workflow service.
شارك تقرير التقييم المرتبط بالإصدار والشارة المحايدة وبطاقة التضمين والاستشهادات. تعرض Skillstore الأدلة من دون أن تقرر ما إذا كانت هذه المهارة آمنة.
https://skillstore.io/skills/johnwayneeee-workflow-node-setup/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/johnwayneeee-workflow-node-setup?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/johnwayneeee-workflow-node-setup?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/johnwayneeee-workflow-node-setup/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/johnwayneeee-workflow-node-setup.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). workflow-node-setup security audit report (audit version 5) [Author version unspecified]. Skillstore. https://skillstore.io/skills/johnwayneeee-workflow-node-setup/audits/5@techreport{johnwayneeee-johnwayneeee-workflow-node-setup-2026,
author = {JohnWayneeee},
title = {workflow-node-setup security audit report (audit version 5)},
institution = {Skillstore},
year = {2026},
number = {5},
url = {https://skillstore.io/skills/johnwayneeee-workflow-node-setup/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: "workflow-node-setup security audit report (audit version 5)"
version: "unspecified"
type: report
authors:
- name: "JohnWayneeee"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/johnwayneeee-workflow-node-setup/audits/5"
identifiers:
- type: other
value: "skillstore:johnwayneeee-workflow-node-setup:audit:5"
description: "Skillstore immutable audit report identifier"
قم بمحاذاة مُعرّفات المقابض المعروضة مع قيم sourceHandle وtargetHandle للحواف لحل أخطاء اتصال React Flow.
ضع عناصر تحكم NodeResizer بشكل صحيح وخزّن أبعاد العُقد حتى تتصرف العُقد التي تم تغيير حجمها باتساق بعد إعادة التحميل.
قم بتكوين مقابض السحب، وعناصر التحكم القابلة للنقر، وحاويات التمرير حتى يعمل محتوى العُقد دون تعطيل حركة اللوحة.
Use workflow-node-setup to review this React Flow node. Check handles, edge ids, sizing, drag behavior, and scroll areas before suggesting changes.
Use workflow-node-setup to diagnose why these React Flow edges do not attach correctly. Compare every edge handle id with the rendered handles.
Use workflow-node-setup to add NodeResizer support to this custom node. Keep resize handles clickable and preserve controlled width and height.
Use workflow-node-setup to audit this workflow editor change. Separate node layout, flow model wiring, canvas behavior, Markdown rendering, and verification steps.
المؤلف
JohnWayneeeeالترخيص
MIT
مراجعة Skillstore
r1
تنبيه الإصدار
لم يعلن المؤلف عن إصدار.
مرجع
b8ca75d2c0a7e7102978993058777d82b8ab2610
حداثة الصيانة
١٨/٧/٢٠٢٦
الاستخدام
2 تنزيلات · 15 مشاهدات
بنية الملفات
إجراءات واجهة المستخدم بعد نتيجة النموذج
غالبا ما تفرط فرق المنتجات في تحميل حالات النجاح بخطوات تالية غير واضحة. تحوّل هذه المهارة نية المستخدم إلى إجراءات واجهة مستخدم محددة النطاق ومرتبة الأولوية بعد نتيجة ذات معنى.
صقل شاشات واجهة المستخدم الحالية
غالبا ما تحتاج الواجهات المكتملة إلى تعديلات بصرية صغيرة قبل الإصدار. ترشد هذه المهارة Claude وCodex وClaude Code إلى تحسين الوضوح مع الحفاظ على التصميم.
تحويل تصاميم Pencil إلى كود للواجهة الأمامية
غالبًا ما تفقد تصاميم Pencil تفاصيلها عندما يترجمها المطورون بالنظر فقط. ترشد هذه المهارة Claude وCodex وClaude Code خلال الاستخراج والتنفيذ والفحوصات المرئية بدقة.
تحويل التصاميم إلى كود FSD Tailwind
غالبًا ما تؤدي عملية تسليم التصميم إلى كسر البنية المعمارية، والرموز، وإمكانية الوصول. ترشد هذه المهارة Claude وCodex وClaude Code إلى تحويل شاشات Figma أو Pencil المحددة إلى كود Tailwind متعدد الطبقات.
مراجعة لوحات React Flow بأمان
يمكن أن تتعطل لوحات React Flow عندما تنحرف IDs أو handles أو ملكية الحالة أو سلوك viewport. ترشد هذه المهارة Claude وCodex وClaude Code عبر فحوصات مراجعة عملية لـ @xyflow/react v12.
تدقيق صفحات الويب قبل النشر
يمكن لمشكلات الويب المتأخرة أن تعرقل الإطلاقات وتضر بإمكانية الوصول أو SEO أو التدفقات الأساسية. ترشد هذه المهارة إلى فحوصات المتصفح، وتفسير Lighthouse، وإعداد تقارير منظمة قبل الإصدار.
تنفيذ 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 عبر المشاريع. توفر هذه المهارة سير عمل مرجعيًا وممارسات للجودة وبرامج نصية مساعدة لتحليل الواجهة الأمامية.
تحسين أداء React و Next.js
بواسطة vercel-labs
غالبا ما تفقد تطبيقات React و Next.js سرعتها بسبب waterfalls، والحزم الكبيرة، وعمليات إعادة التصيير التي يمكن تجنبها. تمنح هذه المهارة الوكلاء قواعد ملموسة لإجراء تغييرات أكثر أمانا تركز على الأداء.