vue-skills هي مكتبة مهارات لوكيل الذكاء الاصطناعي؛ بعد تثبيتها عبر الأمر `npx skills add vuejs-ai/skills` واستخدام البادئة `use vue skill` في محادثة الذكاء الاصطناعي، تجعل أدوات مثل Cursor وClaude Code وغيرها من أكثر من 30 أداة تتبع قواعد Vue 3 الرسمية في توليد الكود واستكشاف الأخطاء.
ما هو vue-skills؟
vue-skills هي مكتبة مهارات لوكيل الذكاء الاصطناعي أطلقها فريق Vue الأساسي وأعضاء VoidZero. تعتمد على معيار Agent Skills المفتوح وتحوّل أفضل ممارسات Vue 3 وقواعد Pinia ودليل Vue Router وVueUse إلى وحدات معرفية منظمة. بعد تثبيتها في أدوات مثل Cursor أو Claude Code، يتبع الذكاء الاصطناعي القواعد الرسمية تلقائيًا أثناء توليد كود Vue، مما يعالج مشكلة الكود الذي «يعمل لكنه غير صحيح» وينتج كودًا عالي الجودة ومطابقًا لمعايير المجتمع.
من المهم معرفة أن المستودع ما يزال في مرحلة 🚧 Early Experiment / Community Project (تجربة مبكرة/مشروع مجتمعي). تستند المهارات إلى issues حقيقية، لكنها قد تكون ناقصة بسبب الهلوسة؛ لذا يرحب الفريق بالملاحظات، ويخطط لنقل المشروع إلى منظمة Vue عندما ينضج ليفيد مجتمعًا أوسع.
موقع المشروع
يتمثل الدور الأساسي لـ vue-skills في كونه طبقة وسيطة بين الذكاء الاصطناعي والمعايير الرسمية لـ Vue. فمع انتشار البرمجة بمساعدة الذكاء الاصطناعي، قد تولد النماذج كودًا مبنيًا على مستندات قديمة أو أنماط خاطئة. توفر vue-skills مجموعة قواعد موثوقة ومنظمة لسد فجوات بيانات التدريب، وتضمن أن يخرج الذكاء الاصطناعي بأحدث كود Vue وأكثره التزامًا بالمعايير.
القدرات الأساسية
تغطي vue-skills سلسلة كاملة من معايير تطوير منظومة Vue، ومن أبرز وحداتها:
- أفضل ممارسات Vue 3: الاستخدام الصحيح لـ Composition API، وتجنب الأخطاء الشائعة، وتحسين أداء SSR، ومعايير قابلية الصيانة.
- معايير Options API: إدارة سياق this، وخطافات دورة الحياة، واستراتيجيات التكيف مع TypeScript.
- دليل Vue Router 4: إعداد حراس التنقل، ومعالجة معاملات المسار، ودورة حياة مكونات المسار.
- إدارة حالة Pinia: تصميم أنواع Store، والاستدلال في TypeScript، والتنظيم المعياري، وأنماط الاستجابة.
- معايير الاختبار: اختبارات الوحدة للمكونات واختبارات E2E باستخدام Vitest وVue Test Utils وPlaywright.
- صيغة Vue JSX: توضيح الاختلافات عن JSX في React من حيث نطاق العمل والتوجيهات لتجنب الخلط.
- دليل التصحيح: دليل مدمج لاستكشاف أخطاء وقت التشغيل والمعالجة غير المتزامنة للاستثناءات ومشكلات hydration (مثل تشغيل مهارة vue-debug-guides).
- تغليف Composables: دعم تغليف المنطق القابل لإعادة الاستخدام استنادًا إلى MaybeRef وMaybeRefOrGetter.
خطوات الاستخدام
- تثبيت حزمة المهارات: نفّذ في الطرفية
npx skills add vuejs-ai/skillsلإضافة Vue Skills إلى البيئة المحلية. - اختر أداة الذكاء الاصطناعي: من القائمة التفاعلية اختر الأداة المستخدمة، مثل Cursor أو Claude Code أو GitHub Copilot.
- حدد نطاق التثبيت: اختر التثبيت العام أو على مستوى المشروع، ثم أكمل تقييم الأمان والتأكيد.
- شغّل المهارة بشكل صريح: أضِف في محادثة الذكاء الاصطناعي البادئة
use vue skill. هذه الخطوة مهمة؛ إذ بدون هذه البادئة قد لا يكون تشغيل المهارة متسقًا بسبب ضعف تطابق الموجه مع الكلمات المفتاحية في وصف المهارة. - صِف مهمة التطوير: اكتب مهمة Vue المطلوبة مباشرة، وسيستعين الذكاء الاصطناعي تلقائيًا بقواعد المهارة لتوليد كود مطابق للمعايير الرسمية.
حالات الاستخدام العملية
- تطوير Vue 3 بمساعدة الذكاء الاصطناعي: استخدام Cursor أو Claude Code لاستدعاء المهارة وتوليد مكونات آمنة الأنواع ومتوافقة مع Composition API، بعيدًا عن الأنماط المضادة الشائعة.
- توحيد معايير الكود في الفريق: في المشاريع التعاونية، يضمن تثبيت vue-skills أن جميع المشاركين ينتجون كودًا يتبع المعايير الرسمية نفسها، فيقل الجدل حول الأسلوب أثناء مراجعة الكود.
- الانتقال من Vue 2 إلى Vue 3: الاستفادة من قواعد المقارنة بين Options API وComposition API لمساعدة الذكاء الاصطناعي على إعادة صياغة كود المشروع القديم إلى أسلوب Vue 3 القياسي وخفض تكلفة الترحيل.
- التصحيح واستكشاف الأخطاء: عند مواجهة أخطاء hydration أو خلل في الاستجابة أو مشكلات في استدلال TypeScript، يساعد تشغيل مهارة vue-debug-guides على جعل الذكاء الاصطناعي يتّبع دليل الاستكشاف الرسمي لتحديد السبب الجذري.
المزايا الرئيسية
- مصدر موثوق: يحتفظ به فريق Vue الأساسي وأعضاء VoidZero، ويستند إلى issues حقيقية ووثائق رسمية، وليس مجرد إعادة صياغة من منشورات المجتمع.
- تحميل حسب الحاجة: يستخدم آلية كشف تدريجي، فيُحمّل التعليمات الكاملة ديناميكيًا فقط عند مطابقة المهمة، مما يتجنب استهلاك الرموز ونافذة السياق لفترات طويلة.
- توافق عبر الأدوات: يتبع معيار Agent Skills المفتوح، ويدعم أكثر من 30 أداة مثل Cursor وClaude Code وGitHub Copilot وGemini CLI.
- تكيف ديناميكي: يحدد الإعداد التفاعلي خصائص المشروع تلقائيًا، مثل إصدار Vue 2/3، وواجهة Composition أو Options API، وحالة تفعيل Pinia.
- تحقق آلي: تمر كل قاعدة باختبار eval تلقائي، ولا تُبقى إلا القواعد التي تحقق شرط «يفشل بدون المهارة وينجح معها»، لضمان جودة مضبوطة.
الحدود وحالة المشروع
يُصنَّف المشروع حاليًا ضمن 🚧 Early Experiment / Community Project، وعلى الرغم من أن المهارات مأخوذة من مشكلات حقيقية، فقد تظل ناقصة نتيجة هلوسة النموذج. يجري التطوير على فرع dev، بينما يُخصَّص الفرع main للمهارات المنشورة فقط. تمر تغييرات المساهمين بالمراجعة ثم تُدمج في فرع dev، ويتولى المشرفون المزامنة إلى الفرع الرئيسي عبر GitHub Action عند الاستعداد للنشر.
ملاحظة حول التكلفة
وفقًا للمادة المتاحة، يُقدَّم vue-skills حاليًا كمشروع مفتوح المصدر على GitHub. لا تتضمن المصادر المقدَّمة أي معلومات محددة عن رسوم أو أسعار أو خطط مستقبلية؛ لذلك يُنصح بمراجعة المستودع الرسمي للاطلاع على أحدث المستجدات ومدى التوفر.
مشاريع مشابهة وبدائل
إذا كنت تبحث عن أدوات مشابهة، يمكنك الاطلاع على المشاريع التالية:
- antfu/skills: مجموعة مهارات مختارة بعناية من أنتوني فو لأدوات Vue/Vite/Nuxt.
- vueuse/vueuse-skills: مهارات Agent مخصصة لتطوير VueUse.
- onmax/nuxt-skills: مهارات Agent مخصصة لتطوير Nuxt.
المستودع الرسمي والمصادر
- المستودع الرسمي: https://github.com/vuejs-ai/skills
- منصة النشر: github.com
الأسئلة الشائعة
كيف أستخدم vue-skills داخل Cursor؟
نفّذ `npx skills add vuejs-ai/skills` في الطرفية واختر Cursor من القائمة التفاعلية، ثم حدد نطاق التثبيت العام أو على مستوى المشروع، وبعد ذلك أدخل البادئة `use vue skill` في المحادثة لتشغيل المهارة بشكل صريح وجعل الذكاء الاصطناعي يتبع القواعد الرسمية.
ما المواصفات التي تتضمنها vue-skills؟
تشمل المكتبة أفضل ممارسات Vue 3، ومعايير Options API، ودليل Vue Router 4، وإدارة حالة Pinia، ومعايير الاختبار، وصيغة Vue JSX، ودليل التصحيح، وتغليف Composables، لتغطية سلسلة تطوير منظومة Vue بشكل متكامل.
ما أدوات الذكاء الاصطناعي التي تدعمها vue-skills؟
لأنها تتبع معيار Agent Skills المفتوح، تدعم vue-skills أكثر من 30 أداة، منها Cursor وClaude Code وGitHub Copilot وGemini CLI.
لماذا يجب إضافة البادئة use vue skill في المحادثة؟
التشغيل الصريح للمهارة يضمن أن يستدعي الذكاء الاصطناعي القواعد المقابلة بدقة؛ أما من دون هذه البادئة فقد لا يكون تشغيل المهارة متسقًا بسبب ضعف تطابق الموجه مع الكلمات المفتاحية في وصف المهارة.
