الخمسة بنظرة: مين بتعمل شو
كل وحدة بتسدّ ثغرة مختلفة بطريقة شغل Claude Code. مش لازم تركّبها كلها اليوم: ابدأ بالأولى والثانية، وبعدها ضيف حسب حاجتك. الأرقام من GitHub يوم 2026-11-02.
| الإضافة | شو بتعمل لـ Claude Code | نجوم GitHub | كيف بتتركّب | امتى بتحتاجها |
|---|---|---|---|---|
| Agent Skills | 25 مهارة هندسية (تخطيط، اختبارات، مراجعة، نشر…) بتتفعّل لحالها حسب المرحلة | 112 ألف+ | إضافة (plugin) من داخل Claude Code | من اليوم الأول |
| Context7 | بيجيب توثيق المكتبة بنفس الإصدار اللي بتستعمله، فما بيبرمج على نسخ قديمة | 64 ألف+ | أمر واحد، أو إضافة رسمية | أول ما تستعمل مكتبة خارجية |
| Graphify | بيحوّل مشروعك لخريطة معرفة بيسألها بدل ما يعيد يقرأ الملفات | 141 ألف+ | أمرين بالطرفية + /graphify | مشروع أكبر من 20 ملف |
| 21st MCP | بحث بأكثر من 10 آلاف مكوّن واجهة React/Tailwind وتركيبها بمشروعك | 6 آلاف+ (المستودع القديم) | أداة 21st من npm + تسجيل دخول | لما تبني واجهة |
| Strix | وكيل اختبار اختراق: بيهاجم تطبيقك فعلياً، بيثبت الثغرة، وبيقترح الإصلاح | 73 ألف+ | سكربت تركيب + Docker + مفتاح LLM | قبل أي نشر |
هاد الدليل تكملة لدليل الأربع إضافات اللي بتدير وكالتك: هناك إضافات للشغل والعملاء، هون إضافات للبرمجة نفسها.
لكل وحدة: الرابط، التركيب، وأول أمر تجرّبه.
Agent Skills: 25 مهارة بتشتغل لحالها
من Addy Osmani (مهندس بـ Google) وفريقه. الرابط: github.com/addyosmani/agent-skills، رخصة MIT. الفكرة: ملفات مهارات (Skills) بتوصف كيف السينيور بيشتغل بكل مرحلة، من كتابة المواصفات لحد النشر، ومعها 9 أوامر جاهزة. المهارة المناسبة بتتفعّل لحالها: بتصمّم API؟ بتشتغل مهارة تصميم الواجهات البرمجية. بتبني واجهة؟ بتشتغل مهارة الواجهات. (شو هي الـ Skill أصلاً وكيف بتشتغل: دليل الـ Skills.)
الطريقة الرسمية: داخل جلسة Claude Code، أمرين (السوق أولاً، بعدها الإضافة):
/plugin marketplace add addyosmani/agent-skills
/plugin install agent-skills@addy-agent-skills
أو من الطرفية (بينسخ الـ 25 مهارة كملفات، وبيشتغل مع 70+ وكيل غير Claude Code):
npx skills add addyosmani/agent-skills
/plugin marketplace add https://github.com/addyosmani/agent-skills.git وبعدها نفس أمر التركيب.بعد التركيب، لو Claude Code قال Reload needed اكتب /reload-plugins أو افتح جلسة جديدة. الأوامر التسعة:
| الأمر | شو بيعمل | المبدأ |
|---|---|---|
/spec | بيكتب مواصفات الميزة قبل أي سطر كود | المواصفات قبل الكود |
/plan | بيقسّم المواصفات لمهام صغيرة قابلة للتحقق | مهام صغيرة |
/build | بيبني شريحة وحدة، بيختبرها، بيعمل commit، وبيكمّل | شريحة بشريحة |
/test | اختبارات بتثبت إنه الشغل بيشتغل | الاختبار هو الدليل |
/constraints | بيسألك عن معايير الجودة وبيكتبها بملف CONSTRAINTS.md | قرّرها مرة |
/agent-skills:review | مراجعة كود من خمس زوايا قبل الدمج | حسّن صحة الكود |
/webperf | تدقيق أداء الويب (Core Web Vitals) | قِس قبل ما تحسّن |
/code-simplify | تبسيط الكود بدون تغيير سلوكه | الوضوح قبل الذكاء |
/ship | قائمة ما قبل النشر: أعلام، نشر تدريجي، تراجع | الأسرع هو الأأمن |
ليش review مكتوبة بالصيغة الطويلة؟ لأنه Claude Code عنده أمر مدمج بنفس الاسم؛ أي أمر من إضافة بتقدر تناديه بصيغة /plugin-name:command-name لما يصير تعارض. جرّب أول ميزة هيك:
/spec add email sign-in with a 6-digit code sent by email, with tests
الوصف بعد الأمر ممكن يكون بالعربي. بعدها /plan ثم /build. ولما تتعوّد: /build auto بيولّد الخطة وبينفّذ كل المهام بموافقة وحدة، وبيوقف لحاله عند أي فشل أو خطوة خطرة.
Context7: أحدث توثيق للمكتبات
المشكلة: Claude بيعرف المكتبات من بيانات تدريبه، يعني نسخ عمرها سنة أو أكثر. فبيعطيك دوال انشالت، أو إعدادات من إصدار قديم. Context7 من Upstash بيجيب التوثيق والأمثلة الحالية للمكتبة والإصدار اللي بتستعمله، وبيحطّها بسياق الجلسة. الرابط: github.com/upstash/context7، رخصة MIT. بيعطي Claude أداتين: resolve-library-id (بتلاقي المكتبة) وquery-docs (بتجيب التوثيق لسؤالك).
الأسهل: أمر واحد بالطرفية (بده Node 22.13 أو أحدث). بيفتح المتصفح لتسجيل الدخول، بيعمل لك مفتاح API مجاني، وبيركّب المهارة:
npx ctx7 setup --claude
أو الإضافة الرسمية من داخل Claude Code (بدون Node ولا npx، مناسبة لويندوز):
/plugin marketplace add upstash/context7
/plugin install context7@context7-marketplace
بعدها أعد تشغيل Claude Code، اكتب /mcp، اختار Context7، وكمّل تسجيل الدخول بالمتصفح. ما بده مفتاح API.
أو يدوياً كسيرفر MCP (لجهاز بدون متصفح أو لسيرفر). المفتاح مجاني من context7.com/dashboard؛ --scope user بتخلّيه شغال بكل مشاريعك:
claude mcp add --scope user --header "Authorization: Bearer YOUR_API_KEY" --transport http context7 https://mcp.context7.com/mcp
تأكد إنه اشتغل: اكتب /mcp بالجلسة، أو من الطرفية claude mcp list: لازم تشوف ✔ جنب context7. الاستعمال: اطلب شغلك عادي، وضيف بالآخر «use context7» (مع ctx7 setup المهارة بتشتغل لحالها حتى بدون ما تقولها):
اعمل لي middleware بـ Next.js 16 بيفحص JWT بالكوكيز وبيحوّل غير المسجّل على صفحة الدخول. use context7
اعطيني أمثلة استعلامات Prisma مع العلاقات (relations) للإصدار اللي بمشروعي. use context7
صيغة سياسة row-level security بـ Supabase لجدول فيه user_id. use context7 with /supabase/supabase
المثال الأخير فيه حركة سينيور: لو بتعرف معرّف المكتبة بصيغة /owner/repo (مثل /vercel/next.js) اكتبه، فبيقفز خطوة البحث. ولو بدك إصدار معيّن اذكره بالجملة. وعشان ما تضل تكتب «use context7»، ضيف هالقاعدة لملف CLAUDE.md بمشروعك:
Always use Context7 when I need library/API documentation, code generation, setup or configuration steps without me having to explicitly ask.
Graphify: خريطة معرفة لمشروعك
Context7 بيعرّف Claude على العالم برّا مشروعك؛ Graphify بيعرّفه على مشروعك نفسه. بيحلّل الكود (حوالي 40 لغة، تحليل محلي بدون LLM)، والتوثيق والـ SQL والـ PDF، وبيبني خريطة معرفة: مين بينادي مين، شو بيعتمد على شو، وشو أهم العقد بالمشروع. بعدها Claude بيسأل الخريطة بدل ما يعيد يقرأ الملفات كل جلسة، وهاد بيوفّر عليك اشتراكك. الرابط: github.com/Graphify-Labs/graphify، رخصة Apache-2.0. عملت له دليل كامل من قبل: اشتراكك بالـ$20 خلّيه يشتغل زي الـ$100؛ هون المختصر.
بده Python 3.10 أو أحدث وأداة uv. تركيب uv على ويندوز (PowerShell):
winget install astral-sh.uv
على ماك أو لينكس:
curl -LsSf https://astral.sh/uv/install.sh | sh
بعدها أمرين (انتبه: اسم الحزمة graphifyy بحرفين y؛ الثاني بيكتشف Claude Code وبيسجّل المهارة):
uv tool install graphifyy
graphify install
وبداخل Claude Code، من مجلد المشروع:
/graphify .
بيطلع لك مجلد graphify-out/ فيه ثلاث ملفات: graph.html (خريطة تفاعلية بالمتصفح)، GRAPH_REPORT.md (أهم المفاهيم والروابط المفاجئة)، وgraph.json (الخريطة كاملة اللي Claude بيستعلم منها). الأوامر اليومية:
/graphify query "what connects auth to the database?"
/graphify path "UserService" "DatabasePool"
/graphify explain "RateLimiter"
/graphify . --update
الأخير بعد كل تغييرات كبيرة (أو بعد git pull) عشان الخريطة تلحق الكود. ولو بدك المهارة بمشروع واحد بس بدل جهازك كله: graphify install --project.
21st MCP: مكوّنات واجهة جاهزة
21st.dev مكتبة فيها أكثر من 10 آلاف مكوّن واجهة React/Tailwind (جداول أسعار، قوائم، بطاقات…) من مصمّمين حقيقيين. الـ MCP بيخلّي Claude Code يدوّر فيها، يجيب كود المكوّن، ويركّبه بمشروعك بألوانك. الرابط اللي بالريل github.com/21st-dev/magic-mcp صار مستودع توافق قديم: الأداة الحالية اسمها 21st CLI والإعداد على 21st.dev/mcp. (تنبيه صدق: البحث مجاني بكل الحسابات، أما جلب كود المكوّن فمحسوب: الحساب المجاني إله حصة صغيرة باليوم، والتوليد بالذكاء الاصطناعي مدفوع. التفاصيل بقسم تنبيهات صدق.)
ركّب الأداة وسجّل دخول (بيفتح المتصفح وبيحفظ التوكن على جهازك):
npm i -g @21st-dev/cli
21st login
اكتب إعداد الـ MCP لـ Claude Code (بيندمج مع إعداداتك الموجودة، ما بيمسح سيرفرات ثانية)، وركّب مهارات 21st عشان Claude يعرف كيف يستعملها:
21st init --client claude --write
21st skills install --global
بديل يدوي: مفتاح API من 21st.dev/settings/api-keys وسيرفر HTTP عادي:
claude mcp add --transport http 21st https://21st.dev/api/mcp --header "x-api-key: YOUR_21ST_API_KEY"
تأكد بـ /mcp إنه 21st عليه ✔. بعدها اطلب عادي بالكلام (الكلمة القديمة /ui ما عاد إلها معنى):
دوّر لي بـ 21st على جدول أسعار فيه تبديل شهري/سنوي، اعرض لي أفضل 3 خيارات باختصار، وبعد ما أختار ركّبه بألوان المشروع (متغيرات Tailwind تبعنا) مش بألوانه الأصلية.
بدي صفحة إعدادات للمستخدم بنفس ستايل الموقع: ابحث بـ 21st عن مكوّنات مناسبة، استعمل منها اللي بيلزم بس، وتأكد إنه الـ build بيمرّ قبل ما تقول خلصت.
ملاحظة لمن ركّب Magic MCP القديم: مفاتيح Magic القديمة كلها انلغت؛ اعمل مفتاح جديد من 21st.dev/mcp أو سجّل دخول بالأداة الجديدة.
Strix: هاكر أخلاقي لتطبيقك
Strix وكلاء ذكاء اصطناعي لاختبار الاختراق: بيشغّلوا تطبيقك فعلياً، بيدوّروا على ثغرات (حقن SQL، XSS، تجاوز صلاحيات، IDOR، SSRF…)، وبيثبتوا كل ثغرة بهجوم حقيقي قبل ما يبلّغوا عنها، فما في إنذارات كاذبة زي الماسحات القديمة. وبالآخر تقرير مع اقتراح إصلاح. الرابط: github.com/usestrix/strix، رخصة Apache-2.0، التوثيق على docs.strix.ai.
بده شيئين قبل: Docker شغال (على ماك وويندوز: Docker Desktop)، ومفتاح API لنموذج لغوي من أي مزوّد مدعوم (OpenAI، Anthropic، Google، OpenRouter…). الفحص بيستهلك من رصيد هالمفتاح. التركيب على ماك أو لينكس:
curl -sSL https://strix.ai/install | bash
أو عبر pipx إذا عندك Python:
pipx install strix-agent
حدّد النموذج والمفتاح (التوثيق بينصح بـ GLM-5.3 عبر OpenRouter أو Vercel AI Gateway؛ Strix بيحفظ الإعداد بعد أول مرة):
export STRIX_LLM="openrouter/z-ai/glm-5.3"
export LLM_API_KEY="your-api-key"
أول فحص على مجلد مشروعك (أول مرة بينزّل صورة Docker للصندوق المعزول):
strix --target ./your-app
النتائج بتنحفظ بمجلد strix_runs/، وstrix view بيفتحها بلوحة محلية بالمتصفح. بتقدر تعطيه رابط موقعك الحي أو مستودع GitHub بدل المجلد. للفحص السريع بدون واجهة (مناسب قبل كل نشر): strix -n --target ./your-app --scan-mode quick، وفي خيار --max-budget بيحط سقف للتكلفة.
وعشان Claude Code نفسه يعرف يشغّل Strix ويصلّح اللي بيلاقيه: 9 مهارات رسمية بأمر واحد:
npx skills add usestrix/strix
افحص هالمشروع بـ Strix بالوضع السريع وبميزانية 10 دولار كحد أقصى، ولخّص لي النتائج مرتبة حسب الخطورة.
صلّح كل الثغرات الحرجة والعالية من آخر فحص Strix، وبعدها أعد الفحص عشان تتأكد إنها انسكرت.
ضيف فحص Strix على GitHub Actions عشان كل pull request ينفحص قبل الدمج.
على ويندوز: التوثيق الرسمي بيعطي أوامر ماك ولينكس بس. الطريقة المضمونة: Docker Desktop مع تفعيل تكامل WSL، وتشغيل أمر التركيب والفحص من داخل WSL (Ubuntu). ولو ما بدك Docker ولا مفتاح أصلاً، في نسخة سحابية مُدارة على app.strix.ai بتسجيل مجاني، بس هاي خدمة مش الأداة المفتوحة.
الترتيب، الأخطاء، وشو المجاني بالضبط.
الترتيب الصح، ويوم شغل كامل
لا تركّب الخمسة بيوم واحد وتضيع. هاد الترتيب اللي بينفع أغلب الناس:
- Agent Skills أولاً. هي الأساس: بتغيّر طريقة شغل Claude بكل مهمة، ومجانية بالكامل، وتركيبها دقيقة.
- Context7 بنفس اليوم. أول ما تستعمل مكتبة خارجية بتحس بالفرق: ما عاد يخترع دوال.
- Graphify لما يكبر المشروع. فوق 20 ملف، أو لما تلاحظ إنه كل جلسة بتبدأ بـ «خلّيني أقرأ المشروع».
- 21st لما تبني واجهة. ما إله لزوم بمشروع خلفي (backend) بس.
- Strix قبل النشر. مرة قبل كل نشر مهم، أو على كل pull request لو عندك CI.
وهيك بيصير يوم الشغل مع الخمسة، على ميزة جديدة:
/specووصف الميزة بالعربي. بيرجع لك مواصفات؛ عدّل عليها قبل ما تكمّل./planبيقسّمها لمهام. اقرأها: هون بتكتشف إنه فهم غلط، مش بعد ما يبني./graphify queryعن الجزء اللي رح يتعدّل، عشان يعرف شو ممكن ينكسر./buildشريحة بشريحة. Context7 بيشتغل لحاله لما يلمس مكتبة خارجية.- الواجهة من 21st، بألوان مشروعك، مش بألوان المكوّن.
/agent-skills:reviewقبل الدمج. خلّيه يصلّح اللي بيلاقيه بنفسه.- فحص Strix سريع على الفرع. الحرج والعالي بيتصلّح قبل الدمج.
/ship: قائمة ما قبل النشر، وبعدها/graphify . --updateعشان الخريطة تلحق.
أخطاء بتضيّع وقتك
تنبيهات صدق: شو المجاني بالضبط
- Agent Skills: مجانية بالكامل (MIT)، ملفات نصية بتشتغل بجلسة Claude Code العادية. ما في خدمة وراها.
- Context7: مجاني مع مفتاح API مجاني ورفع لحدود الاستعمال؛ في خطط مدفوعة للاستعمال الكثيف. الخدمة سحابية: بتبعت اسم المكتبة وسؤالك، مش ملفات مشروعك.
- Graphify: الأداة المحلية مجانية بالكامل، وتحليل الكود بيصير على جهازك بدون أي نموذج. الشركة عندها نسخة سحابية مدفوعة (Graphify Cloud) ما بتحتاجها لمشروع واحد.
- 21st: البحث مجاني بكل الحسابات. جلب كود المكوّن محسوب: الحساب المجاني إله حصة صغيرة باليوم، والاشتراك بيفتحها بلا حدود. التوليد بالذكاء الاصطناعي (21st AI) مدفوع. وأرقام نجوم المستودع بالريل (6 آلاف) لمستودع Magic القديم؛ المنتج أكبر من هيك.
- Strix: الأداة مجانية، بس كل فحص بيستهلك من مفتاح النموذج اللي بتحطه (دولارات حسب حجم المشروع والوضع)، وبده Docker. لو بدك تشغّله على Claude Opus 5.5 كنموذج، التوثيق بيقول إنه بده قبول ببرنامج التحقق السيبراني من Anthropic؛ الأسهل GLM-5.3 عبر OpenRouter زي ما بينصحوا.
- الأرقام: النجوم من GitHub يوم 2026-11-02، وبتتغيّر كل يوم. «25 مهارة» و«9 أوامر» من README المشروع نفسه. Addy Osmani مهندس بـ Google؛ ما حطّيت منصبه بالضبط لأنه ما لقيته موثّق.
أسئلة شائعة
بتشتغل كلها على ويندوز؟
لازم أركّب الخمسة؟
كيف بتأكد إنه الإضافة اشتغلت فعلاً؟
/mcp بالجلسة أو claude mcp list بالطرفية؛ ✔ يعني متصل، ✘ يعني فشل الاتصال (غالباً مفتاح غلط أو ما أعدت التشغيل). الإضافات (Agent Skills): اكتب /plugin وشوفها بقائمة المركّب، أو جرّب /spec. Graphify: لازم يطلع مجلد graphify-out/ بعد أول تشغيل.Context7 بيشوف كود مشروعي؟
ليش أمر review ما بيشتغل زي ما بالجدول؟
/agent-skills:review. نفس القاعدة لأي أمر من أي إضافة لما يصير تعارض.قديش بتستهلك من اشتراك Claude؟
كيف بشيل وحدة منهم؟
claude mcp remove context7 (أو 21st). الإضافات: من قائمة /plugin. Context7 المركّب بالأمر: npx ctx7 remove. Graphify: graphify uninstall (مع --purge بيحذف مجلد الخريطة كمان). Strix: احذف الحزمة بنفس الطريقة اللي ركّبتها فيها (pipx uninstall strix-agent مثلاً).