عبدالله خطاطبة

I build products with AI

WhatsApp
Skip to content
All gifts
GuideinstagramOct 26, 20262 min read

دليل 5 إضافات لـClaude Code — برمجة بمستوى سينيور

5 إضافات مجانية بتخلّي Claude Code يشتغل زي مبرمج محترف.

Agent Skills وContext7 وGraphify و21st MCP وStrix — لكل وحدة شو بتعمل، أمر التركيب، والرابط. من مهارات مهندس سينيور، لتوثيق محدّث، لخريطة معرفية للكود، لمكتبة واجهات، لفحص أمني.

الإضافات الخمس

نظرة سريعة

#الإضافةشو بتعمل
1Agent Skillsمجموعة skills من Addy Osmani (مدير سابق بجوجل) بتغطي كل مراحل البرمجة وبتشتغل لحالها
2Context7بتعطي Claude آخر نسخة من توثيق المكتبات اللي بتستخدمها
3Graphifyبتحوّل الكود تبعك لخريطة معرفية، فـClaude ما بيعيد قراءة كل إشي
421st MCPأكثر من 10,000 عنصر واجهة احترافي بتضيفهم بأمر واحد
5Strixبتهاجم تطبيقك زي هاكر وبتلاقي الثغرات وبتصلحها
  • كل الأوامر بتنكتب بالتيرمنال جوّا مجلد مشروعك
  • بعد التركيب سكّر Claude Code وافتحه من جديد

١. Agent Skills

مهارات مهندس سينيور

— Agent Skills

  • شو بتعمل

    مجموعة skills من Addy Osmani (مدير سابق بجوجل) بتغطي كل مراحل البرمجة، وبتشتغل لحالها.

1

Agent Skills

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

github.com
1

Step 1

ركّب Agent Skills

الأمر بيركّب كل المهارات.

npx skills add addyosmani/agent-skills

٢. Context7

توثيق محدّث لكل مكتبة

— Context7

  • شو بتعمل

    بتعطي Claude آخر نسخة من توثيق المكتبات اللي بتستخدمها، فما بيكتبلك كود على نسخة قديمة.

2

Context7

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

github.com
2

Step 2

ركّب Context7

الأمر بيظبط الإضافة مع Claude Code.

npx ctx7 setup

٣. Graphify

خريطة معرفية لكودك

— Graphify

  • شو بتعمل

    بتحوّل الكود تبعك لخريطة معرفية، فـClaude ما بيعيد قراءة كل إشي.

  • بتحتاج

    Python 3.10 أو أحدث، وأداة uv.

3

Graphify

المستودع الرسمي. رخصة Apache-2.0.

github.com
3

Step 3

ركّب Graphify

الأمر الأول بيركّب الأداة، والتاني بيسجّلها كـskill عند Claude Code. لو ما لقى أمر graphify بعد التركيب، شغّل uv tool update-shell.

uv tool install graphifyy
graphify install

٤. 21st MCP

مكتبة واجهات جاهزة

— 21st MCP

  • شو بتعمل

    أكثر من 10,000 عنصر واجهة احترافي بتضيفهم لمشروعك بأمر واحد.

  • ملاحظة

    ممكن يطلب منك مفتاح API من موقعهم عشان يكمّل الربط.

4

21st MCP

الموقع الرسمي وطريقة الربط.

21st.dev
4

Step 4

ركّب 21st MCP

الأمر بيربط الأداة مع Claude Code.

npx @21st-dev/cli@latest init --client claude

٥. Strix

هاكر بيفحص تطبيقك قبل الهاكر الحقيقي

— Strix

  • شو بتعمل

    بتهاجم تطبيقك زي هاكر، وبتلاقي الثغرات وبتصلحها.

  • بتحتاج

    مفتاح API لنموذج ذكاء اصطناعي، وDocker شغّال.

  • ⚠️ تحذير مهم

    شغّله بس على تطبيقاتك إنت.

5

Strix

مفتوح المصدر. رخصة Apache-2.0.

github.com
5

Step 5

ركّب Strix وشغّله

بدّل ./app-directory بمسار تطبيقك. وراجع الـREADME لإعداد الموديل والمفتاح.

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

المصادر

للاطلاع أكثر

6

توثيق Graphify

التوثيق الرسمي.

docs.graphify.com
7

Context7

الموقع الرسمي.

context7.com

ركّب إضافة إضافة، وسكّر Claude Code وافتحه من جديد بعد التركيب. وشغّل Strix بس على تطبيقاتك إنت.

ركّبت أول إضافة؟

تابعني عشان أكثر

كل يوم بنزّل محتوى يساعدك تبني بالذكاء الاصطناعي.

تواصل معي على إنستغرام— عبدالله AI

Get the next guide by email

One email per new video. No spam, unsubscribe anytime.

More gifts

GuideOct 28, 2026

دليل LinkedIn Agent Skill — Claude بيدير حسابك

11 سكيل مجانية بتخلّي Claude يكتب ويخطط ويحلل حساب LinkedIn تبعك، والنشر عليك إنت.

2 minOpen
GuideOct 27, 2026

دليل 11 إضافة من Anthropic — Claude خبير بوظيفتك

11 إضافة مجانية ومفتوحة المصدر من Anthropic، كل وحدة لوظيفة محددة.

1 minOpen
GuideOct 25, 2026

دليل Prompt Motion — موشن جرافيكس بـClaude

مكتبة مجانية من فيديوهات الموشن جرافيكس، ومع كل فيديو البرومت اللي انبنى فيه بالضبط.

1 minOpen