قبل أن تبدأ vibe coding مع Claude Code، ثبّت أربع إضافات تعطيه ما ينقصه: يدًا في قاعدة البيانات، ويدًا في النشر، وفريقًا يخطط ويراجع، وعينين على المتصفح.
الأولى إضافة Supabase والثانية إضافة Vercel، وهما من الشركتين نفسيهما. والثالثة oh-my-claudecode من مطوّر مستقل، والرابعة Chrome DevTools MCP من فريق Chrome في Google.
أذكر لكل واحدة ما تضيفه وأمر التثبيت وأول جملة تكتبها بعده، وما تنتبه له قبل أن تمنحها صلاحيات.
| الإضافة | ما تضيفه | من صنعها |
|---|---|---|
| Supabase | قاعدة بياناتك | Supabase |
| Vercel | النشر على رابط | Vercel |
| oh-my-claudecode | فريق وكلاء | مطوّر مستقل |
| Chrome DevTools MCP | عينان في المتصفح | فريق Chrome في Google |
ما الذي ينقص Claude Code في أول مشروع؟
Claude Code يكتب الملفات ويشغّل الأوامر داخل مجلد مشروعك، وهذا يكفي لبرنامج صغير. حين تبني تطبيقًا حقيقيًا تظهر أربع ثغرات. التطبيق يحتاج قاعدة بيانات لا يراها Claude. وتحتاج رابطًا يفتحه الناس ولا يعرف Claude كيف يصل إليه. والمهمة الكبيرة تُكتب كلها في محادثة واحدة بلا من يراجعها. والصفحة تبدو خاطئة في المتصفح وClaude لا يراها، فيخمّن.
كل إضافة من الأربع تسدّ ثغرة واحدة. وإن كان مشروعك لا يستعمل Supabase أو Vercel، فأجّل الإضافة المقابلة حتى تحتاجها.
إضافة Supabase: قاعدة بياناتك داخل المحادثة
Supabase خدمة تعطي تطبيقك قاعدة بيانات وتسجيل دخول وتخزين ملفات. وإضافتها تربط Claude Code بمشروعك عبر خادم MCP، وهو الطريقة التي يتصل بها Claude بخدمة خارجية، وشرحتها في الفرق بين API وMCP. وتضيف معه مهارتين تعلّمانه طريقة العمل على Supabase وأفضل ممارسات Postgres.
بعد أن تسجّل الدخول يستطيع Claude أن يعرض جداولك ويشغّل استعلامات SQL. ويطبّق migrations، وهي ملفات تعدّل بنية الجداول خطوة بعد خطوة. ويولّد أنواع TypeScript من بنية قاعدتك، ويجلب تنبيهات الأمان والأداء، ويقرأ السجلات ليعرف لماذا فشل طلب، وينشر Edge Functions.
تخيّل أنك طلبت عمودًا جديدًا في جدول المهام. بدون الإضافة تفتح لوحة Supabase وتكتب الأمر بيدك ثم تنسخ الأنواع الجديدة إلى مشروعك. ومعها يطبّق Claude الـ migration على قاعدتك، ثم يولّد الأنواع من جديد ليعرفها كودك، ثم يفحص تنبيهات الأمان قبل أن تنتقل إلى غيره. وهذا مثال على طريقة العمل، وأنت من يوافق على كل خطوة منه.
التثبيت من صفحة Supabase الرسمية للإضافات، وهو أمر واحد في الطرفية (تيرمينال):
npx plugins add supabase-community/supabase-pluginيكتشف الأمر أدوات الذكاء الاصطناعي المثبّتة عندك ويضيف الإضافة إليها. والاتصال بحسابك يتم بتسجيل دخول من المتصفح، وتبدأه من داخل Claude Code بهذا الأمر ثم تختار supabase وتضغط Authenticate:
/mcpوأول جملة تكتبها بعد ذلك:
اعرض لي جداول مشروعي في Supabase، ثم اقترح بنية جدول للمهام فيه العنوان والحالة وتاريخ الإنشاء.هذه الإضافة تنفّذ SQL على قاعدتك، أي أنها قادرة على تغيير بياناتك أو حذفها. وتوصي Supabase في صفحة MCP بثلاثة أشياء: ألا تربطه بمشروع فيه بيانات حقيقية إلا إن احتاجت المهمة ذلك، وأن تجعله للقراءة فقط بإضافة read_only=true إلى رابط الخادم، وأن تحصره في مشروع واحد بإضافة project_ref ومعرّف المشروع. وتحذّر كذلك من أن نصًا خبيثًا داخل بيانات المستخدمين، كتذكرة دعم مثلًا، قد يخدع النموذج فيشغّل استعلامًا ضارًا، ولهذا أبقِ الموافقة اليدوية على كل أمر.
والإعداد المقيَّد بمشروع واحد وللقراءة فقط يكون بهذا الأمر:
claude mcp add --scope project --transport http supabase "https://mcp.supabase.com/mcp?project_ref=<project-id>&read_only=true"إضافة Vercel: من الكود إلى رابط يفتحه الناس
Vercel منصة تنشر مواقعك وتطبيقاتك على الإنترنت. وإضافتها تعطي Claude Code معرفة بمنتجات Vercel وأوامرها، وفيها ٣٣ مهارة وثلاثة وكلاء متخصصين في النشر والأداء وبناء تطبيقات الذكاء الاصطناعي، وأربعة أوامر: إعداد المشروع والنشر ومتغيرات البيئة وحالة المشروع.
التثبيت من صفحة Vercel الرسمية، وتحتاج Node.js بإصدار ١٨ أو أحدث ومعه Bun:
npx plugins add vercel/vercel-pluginبعده تنشر من داخل Claude Code بأمر واحد:
/vercel-plugin:deployالأمر ينشر معاينة أو إنتاجًا، ولاختيار الإنتاج تضيف prod بعده. المعاينة رابط خاص بهذه النسخة تجرّب عليه قبل أن يراها الناس، والإنتاج هو العنوان الذي يزوره الناس فعلًا.
وفي الإضافة أمران آخران تحتاجهما قبل النشر الأول. أمر env يعرض متغيرات البيئة ويضيفها ويحذفها، فتضع مفاتيح تطبيقك فيه بدل أن تكتبها داخل الكود. وأمر status يعرض حالة المشروع وآخر عمليات النشر، فتعرف إن كانت النسخة الأخيرة نجحت من غير أن تفتح لوحة Vercel.
انتبه لشيئين. الأول أن الإنتاج هو موقعك الحي، فانشر معاينة أولًا وافتحها بنفسك. والثاني أن الإضافة ترسل مرة في اليوم إشارة بأنها تعمل، مع أسماء المهارات التي حمّلها وكيلك. وتقول صفحتها إنها لا تجمع نص ما تكتبه ولا أوامر الطرفية (تيرمينال)، وتوقف الإرسال كله بضبط VERCEL_PLUGIN_TELEMETRY على off.
oh-my-claudecode: فريق وكلاء بدل وكيل واحد
oh-my-claudecode إضافة مفتوحة المصدر بترخيص MIT، صنعها مطوّر مستقل اسمه Yeachan Heo، وهي ليست من Anthropic. وتقول صفحتها إنها تحوّل Claude Code إلى فريق من ١٩ وكيلًا متخصصًا: منهم المخطِّط والمنفِّذ والناقد ومراجع الكود ومختبر الجودة ومراجع الأمان ومصحّح الأخطاء.
الأمر الذي يجمعهم هو team. تكتب عدد الوكلاء ودورهم ثم المهمة، ويمرّ العمل بمراحل: تخطيط، ثم وثيقة متطلبات، ثم تنفيذ، ثم تحقق، ثم إصلاح يتكرر حتى ينجح التحقق. مثال الصفحة الرسمية يشغّل ثلاثة منفّذين لإصلاح أخطاء TypeScript:
/team 3:executor "fix all TypeScript errors"
التثبيت أمران داخل Claude Code. أدخلهما واحدًا بعد الآخر، لأن لصقهما معًا يفشل بحسب الصفحة:
/plugin marketplace add https://github.com/Yeachan-Heo/oh-my-claudecode/plugin install oh-my-claudecodeثم أمر الإعداد:
/omc-setupوتحتاج اشتراك Claude Pro أو Max أو مفتاح API. وتعمل الإضافة بعد الإعداد بكلمات اختصار أخرى تذكرها صفحتها، مثل autopilot الذي ينفّذ مهمة من أولها إلى آخرها بوكيل واحد، وralph الذي يكرر المحاولة حتى يكتمل العمل ويُتحقق منه. وثلاث ملاحظات قبل أن تبدأ. الكلمة وحدها لا تشغّل الوضع الجماعي، فالصفحة تقول إنه صريح: تكتب الشرطة المائلة قبل team. ووضع الفرق الأصلي في Claude Code تجريبي، ويحتاج ضبط CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS على القيمة 1 داخل ملف settings.json، وإن لم تفعّله تحذّرك الإضافة وتعمل بلا فرق عند الإمكان. وكلما زاد عدد الوكلاء المشتغلين معًا زاد ما يُستهلك من حصة اشتراكك.
Chrome DevTools MCP: عينان في المتصفح
أدوات المطوّر في Chrome هي ما تفتحه بالضغط على F12: الكونسول وتبويب الشبكة وتسجيل الأداء. وChrome DevTools MCP يعطي Claude هذه الأدوات نفسها، ويشغّل لك متصفح Chrome حقيقيًا ويتحكم فيه. صنعه فريق Chrome DevTools في Google، وشفرته مفتوحة بترخيص Apache-2.0.
بدونه يكتب Claude الكود ثم ينتظر أن تخبره ماذا ظهر. ومعه يفتح الصفحة بنفسه، فيقرأ أخطاء الكونسول مع موضع الخطأ في ملفاتك، ويفحص طلبات الشبكة، ويلتقط صورة للصفحة، ويسجّل تتبعًا للأداء ويستخرج منه توصيات.
وفي قائمة أدواته ما يفيد من يبني لشاشة الجوال: محاكاة حجم الهاتف ولمسه، وإبطاء الشبكة والمعالج، فيرى الصفحة كما تظهر على هاتف بطيء ولا تكتفي أنت بوصفها له. وفيها تدقيق Lighthouse الذي يعطيك تقييمًا لسهولة الوصول وتحسين محركات البحث وأفضل الممارسات، أما الأداء فيأتي من تسجيل التتبع.
التثبيت أمر واحد في الطرفية (تيرمينال)، ويحتاج Node.js بإصدار LTS ومتصفح Chrome بإصداره المستقر:
claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latestوجرّبه بالجملة التي تقترحها صفحة المشروع نفسها:
Check the performance of https://developers.chrome.comبعدها وجّهه إلى مشروعك: «افتح صفحة مشروعي المحلية وقل لي ما الأخطاء في الكونسول، ثم اقترح إصلاحها».
صفحة المشروع تحذّر من أن الأداة تكشف محتوى المتصفح الذي تشغّله لـ Claude، فلا تفتح فيه حسابك البنكي أو بريدك أثناء الجلسة. وأدوات الأداء قد ترسل عناوين التتبّع إلى واجهة CrUX من Google لجلب بيانات مستخدمين حقيقيين. وتجمع Google إحصاءات استعمال بشكل افتراضي. وتوقف الأمرين بهذين الخيارين عند التشغيل:
--no-performance-crux
--no-usage-statisticsبأي ترتيب تثبّتها، وما الذي تمنحه كل واحدة؟
ثبّتها واحدة بعد أخرى، وجرّب كل واحدة بجملة قبل أن تنتقل إلى التالية، فإن تعطّل شيء عرفت أي إضافة سببه.
وكل إضافة تمنح Claude صلاحية مختلفة، فاعرف ما أعطيته. Supabase تعطيه بياناتك، وVercel تعطيه موقعك المنشور، وoh-my-claudecode تعطيه حصة اشتراكك، وChrome DevTools يعطيه ما يظهر في متصفحك.
وإن أردت ترتيبًا، فابدأ بما لا يمس بياناتك ولا موقعك: Chrome DevTools ثم oh-my-claudecode. ثم الإضافتان اللتان تلمسان قاعدتك وموقعك الحي، وأنت تعرف الآن ما تقيّده فيهما.
ما لا يغطّيه هذا المقال
- لا أقارن هذه الإضافات ببدائلها ولا أرتّبها بحسب الجودة، فهي الأربع التي ذكرتها في الفيديو.
- لا أشرح بناء تطبيق كامل، بل ما يجهّز Claude Code قبل أن تبدأ.
- الأوامر والأرقام، ومنها ١٩ وكيلًا و٣٣ مهارة، من صفحات الجهات الصانعة وقت كتابة المقال في أكتوبر ٢٠٢٦. وهي تتغير مع الإصدارات، فاقرأ صفحة التثبيت قبل أن تنسخ الأمر.
- oh-my-claudecode إضافة مجتمعية لا تشرف عليها Anthropic، فاقرأ ما تثبّته قبل أن تمنحه صلاحيات على مشاريعك.
- أسعار الخطط في Supabase وVercel وClaude خارج هذا المقال.
أسئلة يطرحها الناس
هل أثبّت الأربع كلها؟
نعم إن كان مشروعك يحتاجها كلها. إن لم يكن لديك قاعدة بيانات بعد فلا حاجة إلى Supabase الآن، وإن لم تنشر بعد فأجّل Vercel. وChrome DevTools وoh-my-claudecode يفيدانك في أي مشروع.
هل oh-my-claudecode من Anthropic؟
لا. صنعها مطوّر مستقل وترخيصها MIT، وتثبّتها من مستودعها على GitHub لا من دليل Claude الرسمي. أما Chrome DevTools MCP وإضافتا Supabase وVercel فهي مدرجة في دليل الإضافات الرسمي.
هل يكفي أن أكتب team؟
لا. تكتب الأمر بالشرطة المائلة، ويلزم أن يكون وضع الفرق مفعّلًا في الإعدادات كما شرحت في قسمها.
هل تستطيع إضافة Supabase حذف بياناتي؟
نعم، لأنها تشغّل SQL على قاعدتك. اجعلها للقراءة فقط بإضافة read_only=true إلى رابط الخادم، واربطها بمشروع تجريبي أولًا.
ما الفرق بين الإضافة وخادم MCP؟
خادم MCP يعطي Claude أدوات يتصل بها بخدمة خارجية. والإضافة قد تجمع معه مهارات وأوامر وتثبّت الكل مرة واحدة، كما تفعل إضافة Supabase. وشرحت الفكرة من أساسها في الفرق بين API وMCP.
