5 plugins للـ vibe coding بـ Claude Code

ما هذا

قالب مجاني خطوة بخطوة من ريلز طه — الأدوات والـ prompts والروابط بالضبط، مرتّبة لتتابع معها وتُطلق تطبيقك. علّق بالكلمة المفتاحية على الريل ويصلك أيضًا في رسائلك الخاصة.

مرحبًا! 👋 إليك ما وعدتك به:

Claude Code (أو Codex) يبني تطبيقك، لكنه لا يرى ما بناه — فتبقى ترسل screenshots وتعيد الشرح. هذه الـ 5 أدوات تجعله يراجع عمله بنفسه:

1. Playwright CLI — يفتح تطبيقك في الـ browser، يأخذ screenshots لكل section ويقرأ الـ errors قبل أن تراها أنت. من Microsoft.

🔗GitHubhttps://github.com/microsoft/playwright-cli 🔗Playwrighthttps://playwright.dev

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

2. Supabase plugin — الـ plugin الرسمي من Supabase: الـ agent يبني ويدير الـ database الكاملة لتطبيقك (tables وmigrations وEdge Functions) من الـ terminal.

🔗GitHubhttps://github.com/supabase-community/supabase-plugin 🔗Docshttps://supabase.com/docs/guides/ai-tools/plugins

claude plugin install supabase@claude-plugins-official

في أول استعمال، يفتح الـ browser لتسجّل الدخول إلى Supabase وتسمح بالوصول.

3. Context7 — يعطي Claude آخر docs للـ libraries التي تستعملها، فيتوقف عن كتابة code قديم.

🔗GitHubhttps://github.com/upstash/context7 🔗الموقعhttps://context7.com

npx ctx7 setup

يحتاج Node.js 22.13 أو أحدث. ويُنصح بـ API key مجاني من Context7 للحصول على rate limits أعلى.

4. SkillUI — أعطه أي موقع يعجبك فيستخرج الـ design system (الألوان، الخطوط، المسافات، الـ components) في ملفات يقرأها Claude، فيبني بنفس الـ style.

🔗GitHubhttps://github.com/amaancoderx/skillui

npm install -g skillui
skillui --url https://yoursite.com --mode ultra

وضع --mode ultra يحتاج Playwright أيضًا (التفاصيل في الـ README). إنه مشروع صغير وجديد — واستعمله للإلهام، لا تنسخ brand شخص آخر.

5. Strix — pentesting بالـ AI ومفتوح المصدر: يهاجم تطبيقك كما يفعل الـ hacker ويريك الثغرات قبل الـ launch.

🔗GitHubhttps://github.com/usestrix/strix 🔗الموقعhttps://strix.ai

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

Strix يحتاج Docker شغّالًا وAPI key من مزوّد AI (والمزوّد يحاسبك على الاستعمال). افحص فقط التطبيقات التي تملكها أو عندك إذن مكتوب لاختبارها. ولاستعماله من Claude Code، يقترح الـ README أيضًا npx skills add usestrix/strix.