GuideinstagramOct 14, 20263 min read

دليل الإضافات الخمس لكلود كود

خمس إضافات لو ما كانت عندك وإنت بتبني على Claude Code أو Codex، فإنت فعلياً بتضيّع وقتك.

Playwright CLI وSupabase وStrix وSkill UI وContext7 — لكل وحدة شو بتعمل، الرابط، وأمر التركيب. من عين للذكاء الاصطناعي لقواعد بيانات بالكلام، وفحص أمني، ونسخ ستايل أي موقع، وتوثيق محدّث لكل مكتبة.

قبل ما تبلّش

شرطين بس

لازم يكون عندك Claude Code مركّب، وNode.js (نسخة 20 أو أحدث)
الأوامر اللي بتبلّش بـclaude plugin بتنكتب بالترمنال، وبعدها اكتب /reload-plugins جوّا كلود كود

١. Playwright CLI

عين الذكاء الاصطناعي

— Playwright CLI

شو بتعمل
بتخلّي الذكاء الاصطناعي يفتح المتصفح، يصوّر اللي بناه، ويمسك الأخطاء قبل ما تشوفها إنت.

Playwright CLI

المستودع الرسمي من Microsoft.

github.com

Step 1

ركّب Playwright CLI

ركّب الأداة وبعدين نزّل السكيلز تبعها لـClaude. جرّب تحكيله: افتح التطبيق بالمتصفح، صوّر كل صفحة، وصلّح أي خطأ بتشوفه.

npm install -g @playwright/cli@latest
playwright-cli install --skills

٢. Supabase

قواعد بيانات بالكلام

— Supabase

شو بتعمل
بتبنيلك قواعد بيانات كاملة لتطبيقاتك وبتديرها من مجرد كلمات، بدون ما تطلع من كلود كود.

Supabase — إضافات الذكاء الاصطناعي

التوثيق الرسمي للإضافة.

supabase.com

Step 2

ركّب إضافة Supabase الرسمية

بعد التركيب بيطلب منك تسجّل دخول بحساب Supabase تبعك (الحساب مجاني للبداية).

claude plugin marketplace add anthropics/claude-plugins-official
claude plugin install supabase@claude-plugins-official

بعد التركيب

“اكتب /reload-plugins جوّا كلود كود.”

٣. Strix

هكر بيهاجم تطبيقك قبل الهكر الحقيقي

— Strix

شو بتعمل
وكيل أمني مفتوح المصدر بيهاجم تطبيقك زي هكر حقيقي، بيلاقي الثغرات الأمنية، وبيثبتها وبيقترح الإصلاح.
تحذير مهم
استعمله بس على تطبيقاتك إنت أو اللي عندك إذن تفحصها.

Strix

مفتوح المصدر. بيحتاج Docker ومفتاح موديل AI.

github.com

Step 3

ركّب Strix وشغّل أول فحص

بيحتاج Docker شغّال ومفتاح موديل AI. أول تشغيل بينزّل صورة Docker للـsandbox تلقائياً، والنتائج بتنحفظ بمجلد strix_runs. غيّر الموديل والمفتاح لإلك، وراجع الـREADME للتفاصيل.

curl -sSL https://strix.ai/install | bash

export STRIX_LLM="provider/model-name"
export LLM_API_KEY="your-api-key"

strix --target ./app-directory

٤. Skill UI

انسخ ستايل أي موقع

— Skill UI

شو بتعمل
بتوجّهها على أي موقع عاجبك، وبتفكّك نظام التصميم كامل (ألوان، خطوط، مسافات، حركات) وبتحوّله لملف بيقرأه كلود، فبيبني مشروعك بنفس الستايل بالزبط. بلا AI وبلا مفتاح API.
ملاحظة
خذ الستايل كإلهام، مش تسرق تصميم العالم 😉

SkillUI

المستودع الرسمي — رخصة MIT.

github.com

Step 4

ركّب Skill UI ووجّهها على موقع

بعد ما تخلص، افتح مجلد النتيجة وشغّل claude جوّاه، وهو بيقرأ الملفات لحاله. للوضع الأعمق (استخراج بصري كامل) الـREADME بيطلب كمان تركيب Playwright بالأمرين الأخيرين.

npm install -g skillui
skillui --url https://example.com

# اختياري — للوضع الأعمق (ultra)
npm install playwright
npx playwright install chromium

جرّب بعدها

“Build me a landing page that matches this design system”

٥. Context7

آخر نسخة من كل مكتبة

— Context7

شو بتعمل
بتعطي الذكاء الاصطناعي آخر نسخة من توثيق كل المكتبات والأدوات، فما بيعود يكتبلك كود على نسخة قديمة.

Context7

المستودع الرسمي من Upstash — رخصة MIT.

github.com

Step 5

ركّب Context7

بعد التركيب، جرّب تحكيله: use context7 بآخر طلبك، وهو بيجيب التوثيق الحديث قبل ما يكتب.

claude plugin install context7@claude-plugins-official

الخلاصة

كل إضافة بتحلّ مشكلة

الإضافة	بتحلّ مشكلة
Playwright CLI	الذكاء الاصطناعي ما بيشوف شو بنى
Supabase	قواعد البيانات والسيرفر
Strix	الثغرات الأمنية
Skill UI	تصميم عادي وممل
Context7	كود على نسخ قديمة