·react-flow-usage
</>

react-flow-usage

✓
thedogwiththedataonit/react-flowGitHub: thedogwiththedataonit/react-flowالمصدر: thedogwiththedataonit/react-flow

أنماط تدفق التفاعل الشاملة (@xyflow/react) وأفضل الممارسات لبناء واجهات المستخدم القائمة على العقد، ومحررات سير العمل، والرسوم البيانية التفاعلية. يُستخدم عند العمل مع React Flow من أجل (1) إنشاء محررات تدفق أو واجهات قائمة على العقد، (2) إنشاء عقد وحواف مخصصة، (3) تنفيذ عمليات سير عمل السحب والإفلات، (4) تحسين الأداء للرسوم البيانية الكبيرة، (5) إدارة حالة التدفق والتفاعلات، (6) تنفيذ التخطيط التلقائي أو تحديد الموضع، أو (7) تكامل TypeScript مع React Flow.

thedogwiththedataonit·react·flow·usage
20التثبيتات·0الرائج·@thedogwiththedataonit

التثبيت

GitHub: thedogwiththedataonit/react-flow
$npx skills add https://github.com/thedogwiththedataonit/react-flow --skill react-flow-usage

كيفية تثبيت react-flow-usage

ثبّت مهارة الذكاء الاصطناعي react-flow-usage بسرعة في بيئة التطوير لديك عبر سطر الأوامر

  1. افتح الطرفية: افتح الطرفية أو أداة سطر الأوامر لديك مثل Terminal أو iTerm أو Windows Terminal
  2. نفّذ أمر التثبيت: انسخ ونفّذ هذا الأمر: npx skills add https://github.com/thedogwiththedataonit/react-flow --skill react-flow-usage
  3. تحقق من التثبيت: بعد التثبيت، سيتم إعداد المهارة تلقائيا في بيئة البرمجة بالذكاء الاصطناعي لديك وتصبح جاهزة للاستخدام في Claude Code أو Cursor أو OpenClaw

المصدر: thedogwiththedataonit/react-flow.

SKILL.md

عرض النص الخام

Comprehensive patterns and best practices for building production-ready node-based UIs with React Flow (@xyflow/react v12+).

| 1 | Setup & Configuration | CRITICAL | setup- | | 2 | Performance Optimization | CRITICAL | perf- | | 3 | Node Patterns | HIGH | node- | | 4 | Edge Patterns | HIGH | edge- | | 5 | State Management | HIGH | state- | | 6 | Hooks Usage | MEDIUM | hook- | | 7 | Layout & Positioning | MEDIUM | layout- | | 8 | Interaction Patterns | MEDIUM | interaction- |

| 9 | TypeScript Integration | MEDIUM | typescript- |

أنماط تدفق التفاعل الشاملة (@xyflow/react) وأفضل الممارسات لبناء واجهات المستخدم القائمة على العقد، ومحررات سير العمل، والرسوم البيانية التفاعلية. يُستخدم عند العمل مع React Flow من أجل (1) إنشاء محررات تدفق أو واجهات قائمة على العقد، (2) إنشاء عقد وحواف مخصصة، (3) تنفيذ عمليات سير عمل السحب والإفلات، (4) تحسين الأداء للرسوم البيانية الكبيرة، (5) إدارة حالة التدفق والتفاعلات، (6) تنفيذ التخطيط التلقائي أو تحديد الموضع، أو (7) تكامل TypeScript مع React Flow. المصدر: thedogwiththedataonit/react-flow.

حقائق جاهزة للاقتباس

حقول وأوامر مستقرة للاقتباس في أنظمة الذكاء الاصطناعي والبحث.

أمر التثبيت
npx skills add https://github.com/thedogwiththedataonit/react-flow --skill react-flow-usage
المصدر
thedogwiththedataonit/react-flow
الفئة
</>أدوات التطوير
موثق
✓
أول ظهور
2026-02-01
آخر تحديث
2026-03-10
الرابط
https://www.learn-skills.dev/ar/skills/thedogwiththedataonit/react-flow/react-flow-usage

Browse more skills from thedogwiththedataonit/react-flow

إجابات سريعة

ما هي react-flow-usage؟

أنماط تدفق التفاعل الشاملة (@xyflow/react) وأفضل الممارسات لبناء واجهات المستخدم القائمة على العقد، ومحررات سير العمل، والرسوم البيانية التفاعلية. يُستخدم عند العمل مع React Flow من أجل (1) إنشاء محررات تدفق أو واجهات قائمة على العقد، (2) إنشاء عقد وحواف مخصصة، (3) تنفيذ عمليات سير عمل السحب والإفلات، (4) تحسين الأداء للرسوم البيانية الكبيرة، (5) إدارة حالة التدفق والتفاعلات، (6) تنفيذ التخطيط التلقائي أو تحديد الموضع، أو (7) تكامل TypeScript مع React Flow. المصدر: thedogwiththedataonit/react-flow.

كيف أثبّت react-flow-usage؟

افتح الطرفية أو أداة سطر الأوامر لديك مثل Terminal أو iTerm أو Windows Terminal انسخ ونفّذ هذا الأمر: npx skills add https://github.com/thedogwiththedataonit/react-flow --skill react-flow-usage بعد التثبيت، سيتم إعداد المهارة تلقائيا في بيئة البرمجة بالذكاء الاصطناعي لديك وتصبح جاهزة للاستخدام في Claude Code أو Cursor أو OpenClaw

أين مستودع المصدر؟

https://github.com/thedogwiththedataonit/react-flow

التفاصيل

الفئة
</>أدوات التطوير
المصدر
skills.sh
أول ظهور
2026-02-01

مهارات ذات صلة

لا يوجد