ينفذ واجهات السحب والإفلات والقابلة للفرز باستخدام React/TypeScript بما في ذلك لوحات كانبان، والقوائم القابلة للفرز، وتحميل الملفات، والشبكات القابلة لإعادة الترتيب. يُستخدم عند إنشاء واجهات مستخدم تفاعلية تتطلب معالجة مباشرة أو تنظيمًا مكانيًا أو إعادة ترتيب بسهولة اللمس.
ثبّت مهارة الذكاء الاصطناعي implementing-drag-drop بسرعة في بيئة التطوير لديك عبر سطر الأوامر
المصدر: ancoleman/ai-design-components.
This skill helps implement drag-and-drop interactions and sortable interfaces using modern React/TypeScript libraries. It covers accessibility-first approaches, touch support, and performance optimization for creating intuitive direct manipulation UIs.
Primary: dnd-kit Modern, accessible, and performant drag-and-drop for React.
Step 1: Analyze Requirements Determine the drag-and-drop pattern needed:
ينفذ واجهات السحب والإفلات والقابلة للفرز باستخدام React/TypeScript بما في ذلك لوحات كانبان، والقوائم القابلة للفرز، وتحميل الملفات، والشبكات القابلة لإعادة الترتيب. يُستخدم عند إنشاء واجهات مستخدم تفاعلية تتطلب معالجة مباشرة أو تنظيمًا مكانيًا أو إعادة ترتيب بسهولة اللمس. المصدر: ancoleman/ai-design-components.
حقول وأوامر مستقرة للاقتباس في أنظمة الذكاء الاصطناعي والبحث.
npx skills add https://github.com/ancoleman/ai-design-components --skill implementing-drag-dropينفذ واجهات السحب والإفلات والقابلة للفرز باستخدام React/TypeScript بما في ذلك لوحات كانبان، والقوائم القابلة للفرز، وتحميل الملفات، والشبكات القابلة لإعادة الترتيب. يُستخدم عند إنشاء واجهات مستخدم تفاعلية تتطلب معالجة مباشرة أو تنظيمًا مكانيًا أو إعادة ترتيب بسهولة اللمس. المصدر: ancoleman/ai-design-components.
افتح الطرفية أو أداة سطر الأوامر لديك مثل Terminal أو iTerm أو Windows Terminal انسخ ونفّذ هذا الأمر: npx skills add https://github.com/ancoleman/ai-design-components --skill implementing-drag-drop بعد التثبيت، سيتم إعداد المهارة تلقائيا في بيئة البرمجة بالذكاء الاصطناعي لديك وتصبح جاهزة للاستخدام في Claude Code أو Cursor أو OpenClaw
https://github.com/ancoleman/ai-design-components