VueJS

مهارة Claude Code في Vue.js: كيف تبني تطبيقات Vue أفضل باستخدام مهارات الذكاء الاصطناعي

Amine LahmaryAmine Lahmary·Aug 1, 2026·6 min read
مهارة Claude Code في Vue.js: كيف تبني تطبيقات Vue أفضل باستخدام مهارات الذكاء الاصطناعي

ما هي مهارة Claude Code؟

المهارة هي مجرد مجلد صغير يحتوي على ملف باسم SKILL.md. داخل هذا الملف تكتب شيئين:

  1. الترويسة (Frontmatter) — أسطر قليلة في الأعلى تخبر Claude متى يستخدم المهارة.
  2. التعليمات — الخطوات التي يجب على Claude اتباعها عند تشغيل المهارة. يقرأ Claude Code هذه الملفات ويضيفها إلى أدواته. عندما تتطابق مهمتك مع مهارة، يستخدمها Claude تلقائياً. يمكنك أيضاً تشغيل المهارة بنفسك بكتابة اسمها، مثل /build-vue-component.

تتبع المهارات المعيار المفتوح Agent Skills (agentskills.io). هذا يعني أن ملف المهارة نفسه يعمل مع العديد من أدوات الذكاء الاصطناعي — وليس فقط Claude Code.

لماذا يحب مطورو Vue المهارات؟

مشاريع Vue مليئة بالأعمال المتكررة. تكتب المكونات و composables والتحقق من النماذج والاختبارات مراراً وتكراراً. بدون مهارات، يعني كل مكون جديد إعادة كتابة نفس التعليمات لـ Claude. مع المهارات، يعرف ذكاؤك الاصطناعي بالفعل:

  • أسلوبك في Vue 3: <script setup> و Composition API وقواعد التسمية.
  • عادات مشروعك: لا فواصل منقوطة، علامات اقتباس مفردة، أسطر من 100 حرف.
  • بنية مكوناتك وتنظيم المجلدات.
  • كيف تكتب الاختبارات وتشغّلها. النتيجة؟ كتابة أقل، أخطاء أقل، وكود يشبه ما كتبه فريقك بنفسه.

أين توجد المهارات؟

يبحث Claude Code عن المهارات في عدة أماكن:

المكانالمساريطبَّق علىشخصي~/.claude/skills/<اسم-المهارة>/SKILL.mdكل مشاريعكالمشروع.claude/skills/<اسم-المهارة>/SKILL.mdهذا المشروع فقطإضافة<plugin>/skills/<اسم-المهارة>/SKILL.mdحيث تكون الإضافة مفعّلة

للفرق، ضع مهارات Vue في مجلد المشروع (.claude/skills/) وارفعها إلى git. بهذه الطريقة، يتبع كل مطور — وكل جلسة ذكاء اصطناعي — القواعد نفسها.

يراقب Claude Code مجلدات المهارات بحثاً عن التغييرات. عدّل ملف SKILL.md وستعمل النسخة الجديدة في جلستك الحالية دون إعادة تشغيل.

أنشئ أول مهارة Vue لك

لنبنِ مهارة بسيطة تساعد Claude على إنشاء مكونات Vue 3 بالطريقة التي تفضلها.

الخطوة 1: أنشئ مجلداً.

mkdir -p .claude/skills/vue-component

الخطوة 2: اكتب ملف SKILL.md.

---
description: Create Vue 3 components using the Composition API with script setup. Use when the user asks to build a new Vue component or page.
---

أنشئ مكوّناً في Vue 3 وفق القواعد التالية:

1. استخدم `<script setup>` و Composition API. لا تستخدم Options API أبداً.
2. استورد composables والأدوات المساعدة من `@/composables/` و `@/utils/`.
3. سمِّ الملف بأسلوب PascalCase، مثل `ContactForm.vue`.
4. استخدم `ref` و `computed` للحالة. اجعل الخصائص بسيطة مع `defineProps`.
5. لا تضف فواصل منقوطة واستخدم علامات اقتباس مفردة.
6. أنهِ القالب ببنية نظيفة وبسيطة تتناسب مع نظام التصميم.

الخطوة 3: اختبر المهارة. افتح Claude Code في مشروعك واطلب:

«أنشئ مكوّن نموذج تواصل.»

يقرأ Claude المهارة ويبني المكوّن بالضبط كما يريد فريقك.

حقول الترويسة بشرح مبسط

لست مضطراً لحفظ كل خيار. هذه هي الحقول التي ستستخدمها غالباً:

الحقلوظيفتهdescriptionيخبر Claude متى يستخدم المهارة. أضفه دائماً.nameاسم للعرض. يستخدم Claude Code اسم المجلد للأمر.disable-model-invocation: trueلن يشغّل Claude هذه المهارة بنفسه أبداً. أنت فقط من يكتب /الاسم. مناسبة لخطوات النشر أو الرفع.user-invocable: falseClaude فقط من يستخدمها. مناسبة للمعرفة الخلفية.when_to_useإرشادات إضافية، مثل أسئلة مثال يجب أن تفعّل المهارة.allowed-toolsالأدوات التي يمكن لـ Claude استخدامها دون طلب إذن، مثل Bash(npm run test).

حقل description هو الأهم. اكتبه بهذه الطريقة: ماذا تفعل المهارة، ثم متى تستخدمها. يقرؤه Claude ليقرر ما إذا كانت المهارة مناسبة لطلبك.

أفكار مهارات Vue يمكنك نسخها

إليك أفكار عملية لمهارات Vue.js في Claude Code. كل واحدة توفر وقتاً حقيقياً.

1. أداة بناء مكونات Vue

المثال أعلاه. يبقي كل مكوّن متوافقاً مع نظام التصميم وعاداتك.

2. كاتب الـ composables

---
description: Create reusable Vue composables with the Composition API. Use when the user wants shared logic like forms, API calls, or local storage.
---

اكتب composable في `src/composables/`:

1. صدّر دالة تُرجع `ref` و `computed` ودوالاً.
2. اختر اسماً واضحاً، مثل `useContactForm`.
3. عالِج حالات التحميل والخطأ والنجاح بوضوح.
4. لا تضف فواصل منقوطة واستخدم علامات اقتباس مفردة.
5. أرجِع فقط ما يحتاجه المكوّن.

3. مختبِر Vue

---
description: Write and run Vue tests with Vitest. Use when the user asks to test a component or composable.
---

1. اكتب الاختبارات في `src/components/__tests__/`.
2. استخدم `@vue/test-utils` لتثبيت المكونات.
3. اختبر السلوك المرئي أولاً: العرض والأحداث والنماذج.
4. شغّل `pnpm run test:unit` بعد كتابة الاختبارات.

4. مساعد إعادة الهيكلة

---
description: Migrate Vue 2 Options API code to Vue 3 Composition API. Use when the user asks to refactor or modernize old Vue components.
---

عند إعادة هيكلة مكوّن Vue:

1. حوّل `data` و `methods` و `computed` إلى `ref` ودوال و `computed` في Composition API.
2. انقل خطافات دورة الحياة (`mounted`، `beforeDestroy`) إلى `onMounted` و `onBeforeUnmount`.
3. حافظ على نفس السلوك — لا تغيّر ما يفعله المكوّن.
4. استبدل `this.$emit` و `this.$props` بـ `defineEmits` و `defineProps`.
5. اشرح التغييرات باختصار حتى يتمكن المطوّر من مراجعتها.

5. مهارة تعليمات المشروع

---
description: Apply this project's coding rules to every Vue file. Use for all Vue.js work in this repo.
---

هذا المشروع يستخدم Vue 3 و Vite و Tailwind CSS.

- استخدم Composition API مع `<script setup>`.
- لا تستخدم أسماء ألوان Tailwind القياسية لألوان العلامة التجارية. استخدم `text-primary` و `bg-primary`.
- اجعل المكونات في `src/components/` والصفحات في `src/views/`.
- أضف النصوص المترجمة الجديدة إلى الملفات الثلاثة: `english.js` و `french.js` و `arabic.js`.
- شغّل `pnpm run lint` قبل الانتهاء.

تحوّل هذه المهارة قواعد مشروعك إلى ملف يشاركه الفريق بأكمله.

المهارات المدمجة التي تساعد في عمل Vue

يأتي Claude Code بمهارات جاهزة. بعضها مفيد جداً لمشاريع Vue:

  • /run — يشغّل تطبيقك ويتحقق أن التغيير يعمل، وليس فقط أنه يترجم بنجاح.
  • /verify — يبني تطبيق Vue ويعمل به للتأكد أن التغيير يفعل ما يجب.
  • /code-review — يراجع آخر تغييراتك ويكتشف المشاكل قبل الرفع.
  • /debug — يساعدك في إيجاد وإصلاح الأخطاء بسرعة.
  • /doctor — يتحقق أن إعداد Claude Code سليم. يمكنك أيضاً استخدام @vueuse/head و vue-router وأدوات Vue أخرى مع المهارات — المهارة تضيف القواعد فوقها فقط.

المهارات أم CLAUDE.md؟

يتساءل كثير من المطورين: لماذا لا نضع كل شيء في CLAUDE.md؟

الجواب المختصر: السياق. ملف CLAUDE.md يُحمَّل في كل جلسة، وهذا يكلف رموزاً (tokens) وتركيزاً. أما المهارة فتُحمَّل فقط عند الحاجة. المواد المرجعية الطويلة — مثل نظام التصميم الكامل — تنتمي إلى مهارة، وليس إلى CLAUDE.md. اترك CLAUDE.md للحقائق القصيرة المطلوبة دائماً.

يطبّق Claude Code الفكرة نفسها على المهارات: اجعل SKILL.md قصيراً وبسيطاً، وضع التفاصيل في ملفات مساندة.

أفضل الممارسات لمهارات Vue.js في Claude Code

  1. اكتبdescriptionواضحة. هي التي تقرر متى يستخدم Claude المهارة.
  2. اجعل المهارة قصيرة. كل سطر تضيفه يبقى في السياق طوال الجلسة.
  3. استخدم السياق الديناميكي. سطر مثل git diff HEAD يشغّل أمراً ويلصق نتيجته داخل المهارة. مثالي لمهارات المراجعة.
  4. ارفع المهارات إلى git. يحصل فريقك كله على نفس سلوك الذكاء الاصطناعي.
  5. استخدمdisable-model-invocationللخطوات الخطرة. لا يفعّل إلا البشر عمليات النشر أو الرفع.
  6. قسّم المهارات الكبيرة إلى ملفات. اربط المستندات والأمثلة من SKILL.md بدلاً من كتابة كل شيء في ملف واحد.

    ابدأ باستخدام مهارة Vue.js اليوم

مهارات Claude Code من أسهل الطرق لجعل البرمجة بالذكاء الاصطناعي شخصية. في عشر دقائق يمكنك إنشاء مهارة Vue توفر ساعات كل أسبوع. ابدأ بمهارة بسيطة — مثل أداة بناء مكونات Vue — ووسّع مجموعتك كلما اكتشفت أعمالاً متكررة جديدة.

أفضل المهارات هي التي يستخدمها فريقك فعلاً. ضعها في المشروع، ارفعها إلى git، ودع Claude Code يتعلم كيف تبني أنت تطبيقات Vue.

كُتب هذا المقال في أغسطس 2026 بالاعتماد على أحدث وثائق مهارات Claude Code. تتبع المهارات المعيار المفتوح Agent Skills وقد تستمر الميزات في التطور.