Skillpro: دليل أدوات التصميم والتطوير

دليل عربي منظّم لأفضل مهارات Claude وخوادم MCP والمكتبات والأدوات، مع وصف قصير لكل أداة، ونجوم GitHub، وأمر التثبيت، ورابط المستودع والموقع الرسمي، وأداة "ماذا تبني؟" التي تعرض الأدوات المناسبة لنوع مشروعك.

مبني بـ Astro. الصفحات كلها تُولَّد ثابتة وقت البناء، فالموقع سريع ويعمل حتى بدون JavaScript في القراءة.

الهيكل

data/
  tools.json        كل الأدوات (هنا تضيف وتعدّل)
  categories.json   الأقسام وترتيبها
  projects.json     أنواع المشاريع ونصائحها والأدوات المقترحة
  meta.json         تاريخ آخر تحديث للنجوم (يُحدَّث تلقائيًا)، وبيانات الناشر والنشرة البريدية
src/
  pages/index.astro         الصفحة الرئيسية
  pages/tools/[slug].astro  صفحة مستقلة لكل أداة
  pages/category/[id].astro صفحة لكل قسم
  pages/search.json.ts      فهرس البحث (ومثله /de/ و/en/)
  lib/search.js             تطبيع البحث وترتيب النتائج و«هل تقصد»
  lib/install.js            حزمة التثبيت وإعداد خوادم MCP لكل برنامج
  scripts/filter.js         البحث والفلترة والترتيب في الرئيسية
  scripts/quick-search.js   البحث السريع في باقي الصفحات
scripts/
  update-stars.mjs  يجلب النجوم وتاريخ آخر تحديث من GitHub
  discover.mjs      يبحث عن أدوات جديدة ويكتب تقريرًا للمراجعة
  check-links.mjs   يفحص كل الروابط ويكتب تقريرًا بالمعطّل والمنقول
  check-data.mjs    يفحص سلامة البيانات
.github/workflows/update-stars.yml  تحديث أسبوعي تلقائي

التشغيل محليًا

يحتاج Node.js 20 أو أحدث.

npm install
npm run dev        # موقع محلي على http://localhost:4321
npm run check      # فحص البيانات
npm run build      # بناء الموقع في مجلد dist

إضافة أداة جديدة

أضف كائنًا في آخر data/tools.json:

{
  "slug": "my-tool",
  "cat": "design",
  "name": "My Tool",
  "kind": "Skill",
  "gh": "https://github.com/owner/repo",
  "site": "https://example.com",
  "stars": null,
  "cmd": "npx skills add owner/repo",
  "use": ["web", "landing"],
  "desc": "وصف قصير بالعربية.",
  "desc_de": "Kurze Beschreibung auf Deutsch.",
  "desc_en": "A short description in English.",
  "pushed": null,
  "added": "2026-10-25T09:30:00Z"
}

• slug هو الاسم بأحرف صغيرة وشرطات (نفس ما يُنتجه الاسم تلقائيًا).
• cat أحد أرقام الأقسام في categories.json، وuse أرقام المشاريع في projects.json.
• تطبيق جاهز (Mac أو Windows أو iPhone أو Android أو Linux أو لكل الأنظمة): قسمه من أقسام المجموعة "group": "apps" في categories.json (macapps وwinapps وiosapps وandroidapps وlinuxapps وcrossapps)، وkind هو تطبيق (npm run check يرفض غيره). cmd أمر Homebrew لتطبيق Mac (brew install --cask …) أو winget لتطبيق Windows (winget install -e --id …) أو Flatpak لتطبيق Linux (flatpak install flathub <المعرّف>، والمعرّف موجود إن وُجد مستودع github.com/flathub/<المعرّف>)، وتأكد منه في صفحة المشروع؛ وإلا null مع site: الموقع الرسمي، أو رابط App Store لتطبيقات iPhone. بلا أمر ولا موقع تعرض صفحته رابط صفحة الإصدارات على GitHub. use غالبًا فارغة، فالتطبيقات لا ترتبط بما يبنيه الزائر (إلا ما يفيد مشروعًا فعلًا، مثل OBS للفيديو). اذكر في الوصف النظام الذي يعمل عليه.
• kind: Skill أو MCP أو مكتبة أو أداة أو تطبيق أو منصة أو موقع (للمواقع التي تُستخدم من المتصفح، مثل أقسام مواقع الكتابة والبرومبت) أو صيغة (ملف بصيغة معيارية مثل DESIGN.md) أو دليل (قائمة تجمع أدوات أخرى). نوع جديد يحتاج ترجمته وأيقونته في src/lib/data.ts.
• شارة "جديد" تُحسب تلقائيًا من added (آخر 14 يومًا)، فلا حاجة لحقل isNew.
• اترك stars وpushed على null، فسكربت التحديث يملؤهما.
• desc_de وdesc_en هما الوصف نفسه بالألمانية والإنجليزية للنسختين /de/ و/en/. مطلوبان لكل أداة وبلا حروف عربية، وnpm run check يرفض الأداة بدونهما.
• بعد الإضافة شغّل npm run check للتأكد أن كل شيء سليم.

اللغات

الموقع بثلاث لغات: العربية في الجذر (/) والألمانية تحت /de/ والإنجليزية تحت /en/، ولكل صفحة نسختها في اللغتين الأخريين، وقائمة اللغات في الشريط العلوي (وروابطها أيضًا في التذييل).

• نصوص الواجهة في src/i18n/ui.ts (وقت البناء) وsrc/i18n/client.js (السكربتات في المتصفح). أضف أي نص جديد باللغات الثلاث.
• نصوص البيانات: desc_de وdesc_en لكل أداة في data/tools.json، وname_de وname_en لكل قسم في data/categories.json، وname_* وadvice_* لكل مشروع في data/projects.json. اسم حقل كل لغة هو الحقل العربي الأصلي مع لاحقة اللغة.
• خريطة الموقع sitemap.xml تضم النسخ الثلاث مع روابط hreflang، ولكل لغة خلاصة RSS وmanifest: /feed.xml و/de/feed.xml و/en/feed.xml.
• الصفحات الألمانية تخاطب القارئ بـ "du" كما في مواقع Apple الألمانية، والإنجليزية تخاطبه بـ "you" مباشرة بنبرة هادئة موجزة.

لإضافة لغة رابعة (مثل الفرنسية fr): أضفها إلى Lang وLANGS وLANG_NAME وOG_LOCALE في src/i18n/index.ts؛ ثم قاموسًا بالمفاتيح نفسها في src/i18n/ui.ts وsrc/i18n/client.js؛ ثم KIND_L وINTL وBADGE وLANG_AR في src/lib/data.ts؛ ثم TR في scripts/check-data.mjs وحقول desc_fr وname_fr وadvice_fr في data/؛ ثم مجلد src/pages/fr/ (انسخ en/)؛ وأخيرًا home-fr.png في scripts/og-home.cjs واللغة في api/_feedback.js وscripts/check-brand.mjs. إن كانت لغة تُكتب من اليمين فعدّل أيضًا dirOf وfwdIcon.

البحث والتثبيت

• البحث الذكي (src/lib/search.js): نفس التطبيع للنص وللكلمة المكتوبة، فتتطابق «أيقونة» و«ايقونه» و«إيقونات»، و«Größe» و«grosse»، والأرقام العربية واللاتينية.
  • تُحذف «ال» وأخواتها وعلامات الجمع، فيجد «التطبيقات» نصًا فيه «تطبيق». وكذلك حرف واحد ملتصق بأول الكلمة (و ب ل ف ك) إن بقي بعده 4 أحرف على الأقل: «لفيجما» و«بشوبيفاي» و«لمتجر».
  • الأسماء التقنية المكتوبة بحروف عربية تُفهم: «فيجما» وFigma، و«شوبيفاي» وShopify، و«بي دي اف» وPDF. القائمة في TRANSLIT داخل الملف نفسه؛ أضف إليها ما يكتبه الزوار.
  • النتائج مرتبة حسب القرب: الاسم أولًا، ثم النوع والقسم، ثم الوصف. ويظهر «هل تقصد» عند خطأ إملائي («shopfy» → shopify) بالكلمة كما تُكتب («ادوت» → «أدوات»، «Übersetzng» → «übersetzung»)، وما كتبه الزائر صحيحًا يبقى كما كتبه.
• البحث بكل اللغات: فهرس /search.json (و/de/ و/en/) يُبنى من src/lib/search-index.ts فيه أوصاف الأدوات باللغات الثلاث، فيجد الزائر «invoice» في الصفحة العربية و«فاتورة» في الألمانية. يُحمَّل عند أول اقتراب من البحث فقط (حوالي 80KB مضغوطًا). الكلمات فيه بشكلها المكتوب ويطبّعها المتصفح عند التحميل (docOf في src/scripts/search-data.js).
• الرابط يحفظ العرض: البحث والقسم والمشروع والترتيب في رابط الصفحة (/?q=seo&cat=writing)، فيُشارَك كما هو. زر «مشاركة هذه النتائج» في شريط الفلاتر النشطة. الروابط القديمة بالمشروع (/#shop) ما زالت تعمل.
• البحث السريع: في صفحات الأدوات والمفضلة و404 زر بحث في الشريط العلوي، ويُفتح أيضًا بـ Ctrl/⌘+K أو /. الأسهم للتنقل وEnter للفتح، و«كل النتائج» يفتح الرئيسية مفلترة بالبحث نفسه.
• حزمة التثبيت: زر في المفضلة وفي «ابدأ بهذه» لكل مشروع وفي المقارنة ونتائج «ساعدني أختار»، يجمع أوامر عدة أدوات في نص واحد للطرفية. نافذتها (src/components/KitDialog.astro) في كل صفحة عبر Base.astro، فيكفي أي زر فيه data-kit="slug slug …".
  • تدخل الحزمة أوامر إضافات Claude Code والأدوات العامة فقط (claude mcp add وclaude plugin وnpx skills add وnpm install -g وbrew install)، و/plugin تتحول إلى claude plugin لأن أوامر الشرطة المائلة لا تعمل خارج جلسة Claude Code.
  • لا تدخلها: السكربتات من الإنترنت، والأوامر التي تحتاج قيمك، ومكتبات المشروع. تظهر في النافذة بسبب كل منها ورابط صفحتها.
  • القواعد في kitPlan داخل src/lib/install.js.
• الفحص: npm run check-search (ويعمل في CI) يختبر التطبيع والترتيب و«هل تقصد» وقراءة أوامر وقواعد الحزمة على كل الأدوات. شغّله بعد أي تعديل على أو .

السرعة على الجوال

الرئيسية ترسم أول 12 أداة فقط (FIRST في src/views/Home.astro، بعدد PAGE في src/scripts/filter.js). كل البطاقات في ملف واحد بلا صفحة حوله، /cards/ (و/de/cards/ و/en/cards/) من src/views/CardsFragment.astro، وبين كل بطاقتين <!--card-->.

• src/scripts/cards.js يجلب الملف حين تقترب القائمة من الشاشة أو عند أول عرض يحتاج ما لم يُرسم (بحث، قسم، «عرض المزيد»)، ويقرأ منه البطاقة التي ستظهر فقط. المفضلة تفعل الشيء نفسه.
• الفلترة والعدّ والترتيب لا تحتاج البطاقات: بيانات كل الأدوات في app-data (tools). والبحث من فهرس /search.json، وحتى يصل تقول القائمة «جارٍ تحميل البحث».
• أيقونات البطاقات في رسم الصفحة عبر src/components/CardIcons.astro، وnpm run check-icons يتحقق أن كل أيقونة في /cards/ مرسومة في الرئيسية والمفضلة.
• /cards/ لا يُفهرس (X-Robots-Tag: noindex في vercel.json). بلا JavaScript تظهر الأدوات الـ12 مع روابط كل الأقسام.
• القياس (جوال متوسط: معالج أبطأ 4 مرات وشبكة 4G بطيئة): ظهور المحتوى 5.2 ث ← 2.2 ث، والعناصر 17,176 ← 2,310.

محتوى صفحة الأداة

• «جرّب أن تطلب من Claude»: مثال طلب واحد لكل أداة بثلاث لغات في data/examples.json ({ "slug": { "ar", "de", "en" } })، مع زر نسخ. اختياري: أداة بلا مثال لا تظهر لها البلاطة. npm run check يتحقق أن المثال لأداة موجودة وبثلاث لغات. عند إضافة أداة أضف مثالها هنا: مهمة حقيقية محددة تحلها الأداة، في جملة واحدة أقل من 130 حرفًا.
• «ماذا تحوي»: لأدوات نوع Skill، أسماء المهارات التي تثبّتها ووصف كل منها من ملفات SKILL.md في مستودعها (data/inside.json). يحدّثه npm run update-inside، ويعمل أسبوعيًا مع تحديث النجوم. يأخذ المهارات من المجلد في رابط الأداة، أو المهارة في --skill x، أو مجلد الإضافة في plugin install x@…. والحقل "inside" في الأداة يضيّقها إلى كلمة ("inside": "germany") أو يلغيها ("inside": false).

الأمان والثقة وصفحات الأقسام

• الأمان والثقة في صفحة كل أداة (src/lib/trust.ts): ثلاث إشارات من البيانات نفسها بلا درجات مخترعة، ثم نصيحة واحدة قبل التثبيت تناسب نوع الأداة:
  • الناشر: الحساب الرسمي للجهة (من قائمة OFFICIAL لحسابات GitHub الرسمية)، أو اسم الحساب فقط، أو الموقع الرسمي للأدوات التي بلا مستودع. أضف إلى OFFICIAL حين تضيف أداة من حساب رسمي لجهة معروفة.
  • أين تعمل: على جهازك، أو خادم بعيد مع اسم من يستقبل البيانات، أو داخل Claude، أو إضافة لـ Claude Code (قد تضم hooks)، أو داخل كود مشروعك.
  • من أين تُثبَّت: سوق Anthropic الرسمي، أو سوق في مستودع، أو مستودع GitHub، أو حزمة npm وPyPI وHomebrew وpub.dev مع رابط صفحتها، أو تحذير من سكربت الإنترنت.
• «ننصح به»: ثلاث أدوات لكل قسم في data/picks.json، لكل واحدة غرضها بثلاث لغات ("for": "لترتيب النوافذ", "for_de": "Fensterverwaltung", "for_en": "window management": تُكتب العربية بلامها، والألمانية والإنجليزية بعد «für/for»). تظهر في رأس صفحة القسم («ننصح بها»)، وشارةً خضراء على بطاقة الأداة وصفحتها («ننصح به للحافظة»). اختيار تحريري بلا مقابل: أدوات نشطة ومعروفة تغطي أغراضًا مختلفة في القسم، لا الأعلى نجومًا بالضرورة. npm run check يرفض توصية مؤرشفة أو من قسم آخر، فإن أُرشفت أداة منصوح بها فاختر غيرها.
• قوائم الأفضل /best/ و/best/<id>/ (بثلاث لغات): قوائم مرتبة بنجوم GitHub لعمليات البحث الشائعة («أفضل خوادم MCP»، «أفضل تطبيقات Mac من GitHub» …). كل قائمة في data/lists.json: id وicon (من أيقونات build-icons.mjs) وcats و/أو kinds للترشيح وlimit، والعنوان والوصف بثلاث لغات. الأدوات نفسها تأتي من البيانات وتتغير مع تحديث النجوم، والمؤرشفة لا تدخل (src/lib/lists.ts). في الصفحة بيانات ItemList، وفي صفحة القسم رابط إلى قائمته، وفي التذييل رابط الفهرس، وكلها في sitemap.xml. لا تكتب في الوصف ادعاءً لا تثبته البيانات (مثل «مجانية» أو «مفتوحة المصدر» لقائمة فيها رخصة غير معروفة).
• أيقونات التطبيقات: صفحات «التطبيقات الجاهزة» وبطاقاتها تعرض أيقونة كل تطبيق الحقيقية من public/app-icons/ (data/app-icons.json يذكر مصدر كل ملف). يجلبها scripts/fetch-app-icons.mjs من مستودع التطبيق في GitHub Actions (.github/workflows/app-icons.yml: يدويًا، وكل اثنين للتطبيقات الجديدة). بعد إضافة تطبيق شغّل سير العمل ثم راجع الأيقونة بعينك: إن اختار ملفًا خاطئًا فضع في tools.json حقل "icon": "مسار الملف في المستودع" (المرشحون في سجل التشغيل)، أو "icon": false لتبقى الحروف الأولى، ثم شغّله مع واسم التطبيق.

المقارنة

• صفحة المقارنة /compare/?t=a,b,c (ومثلها /de/ و/en/): حتى ثلاث أدوات جنبًا إلى جنب، بالقسم والنجوم والوصف والناشر وأين تعمل ومصدر التثبيت والرخصة وآخر تحديث وطرق التثبيت وأمر التثبيت.
  • البيانات من /compare.json (src/lib/compare-index.ts)، والجدول يبنيه src/scripts/compare.js. الرابط يتبع الاختيار فيُشارَك.
  • الصفحة غير مفهرسة (noindex) لأن محتواها يتغير مع الرابط.
• المداخل: زر «قارن» في صفحة كل أداة (يفتح المقارنة معها ومع أقرب أداة من قسمها)، ورابط «قارن بين هذه الأدوات» تحت الأدوات المشابهة، وزر «قارن» في المفضلة (أحدث ثلاث).
• المقارنات المقترحة تظهر حين لا تختار أدوات: قائمة يدوية في SUGGESTED داخل src/lib/compare-index.ts لأدوات تحل المشكلة نفسها.

ساعدني أختار

لا يرشّح المساعد من «تطبيقات جاهزة» (أقسام المجموعة apps): أسئلته عمّا يبنيه الزائر، والتطبيقات تُتصفح من قسمها في الرئيسية وصفحات أقسامها.

نافذة تسأل الزائر ثلاثة أسئلة سريعة ثم تعرض أنسب الأدوات له، بأسمائها وروابطها وسبب ترشيح كل منها.

• الأسئلة: ما الذي يهمك (6 اهتمامات أو «كل ما سبق»)، وماذا تبني (المشاريع الاثنا عشر أو «أستكشف فقط»)، وبأي شكل (مهارة، MCP، مكتبة أو أداة، موقع جاهز، أو «لا يهم»). الاختيار ينقل إلى السؤال التالي مباشرة، والأسهم تتنقل بين الخيارات، وزر الرجوع وشريط التقدم في الأعلى.
• الترتيب (src/scripts/finder-app.js): المشروع شرط (لا تظهر إلا أدواته)، ثم ما يطابق الاهتمام والشكل معًا، ثم الاهتمام وحده، ثم الشكل وحده، فلا تفرغ النتيجة أبدًا ويقول الملخص كم أداة تطابق كل الإجابات. داخل كل درجة: الجودة (النجوم، والتحديث في آخر ستة أشهر، والناشر الرسمي، وتنقص للمستودع القديم وبلا رخصة والسكربت من الإنترنت)، وأدوات «ابدأ بهذه» للمشروع أولًا. المؤرشف لا يُرشَّح.
• معنى كل إجابة في src/lib/finder.ts: NEEDS تربط كل اهتمام بأقسام، وKINDS تربط كل شكل بأنواع الأدوات. كل قسم وكل نوع في مجموعة واحدة بالضبط، وإلا توقف البناء برسالة تقول أين تضيفه. عند إضافة قسم جديد أضفه هنا.
• النتائج: 6 أدوات ثم «عرض المزيد» حتى 12، الأولى «الأنسب لك»، ولكل أداة سطر وصف وشرائح «لماذا»: ما تطابقه من إجاباتك، و«بداية موصى بها»، والناشر الرسمي. شرائح «إجاباتك» تغيّر إجابة دون البدء من جديد. الأزرار: احفظها في المفضلة، وحزمة التثبيت، ومشاركة رابط النتيجة.
• المداخل: «ساعدني أختار» رابطًا في الواجهة، وزرًا في تذييل كل صفحة، والنافذة الصغيرة. والرابط /#finder يفتحها، و/#finder=design.web.skill (الاهتمام.المشروع.الشكل) يفتح نتيجة بعينها، وهو ما ينسخه زر المشاركة.
• النافذة الصغيرة: بطاقة داكنة عائمة في مكان نافذة «رأيك»، تظهر بعد 25 ثانية من التصفح الفعلي وتسأل السؤال الأول بست بلاطات وسطر «كل شيء»؛ البلاطة تفتح النافذة على السؤال الثاني. لا تأخذ التركيز ولا تظهر والزائر يكتب. تظهر مرة كل 30 يومًا على الأكثر (أغلقها الزائر أو تجاهلها)، وإن وصل إلى النتائج لا تعود أبدًا. نافذة تلقائية واحدة في الجلسة: إن ظهرت هي لا تظهر نافذة «رأيك» في الجلسة نفسها، والعكس (toolkit-auto-popup في sessionStorage).
• الخفة: الصفحة لا تحمل منها إلا الزر وسكربتًا صغيرًا (src/scripts/finder.js). النافذة نفسها في /finder/ (و/de/finder/ و/en/finder/، من src/views/FinderFragment.astro ومعها رسم أيقوناتها، حوالي 10KB مضغوطًا) وسكربتها يُجلبان عند الضغط، أو قبله حين يمر المؤشر على الزر. والبيانات /finder.json (حوالي 28KB مضغوطًا، أول جملة من وصف كل أداة) عند فتح النافذة. إن تأخر التحميل تظهر النافذة فورًا بـ«جارٍ التحميل» ثم تمتلئ في مكانها.
• الحفظ والعدّ: الإجابات والحالة في toolkit-finder-v1 بمتصفح الزائر، فيعود «ساعدني أختار» إلى نتيجته السابقة. وحين يصل الزائر إلى النتائج تُرسل الإجابات الثلاث وحدها بلا هوية (kind: "finder" إلى في مخزن Blob، مع من أين فُتحت: النافذة الصغيرة أو زر أو رابط مشاركة)، مرة لكل مجموعة إجابات في الصفحة، ولا تُعدّ النتيجة المحفوظة حين يعيد فتحها. يلخّصها : ما يهم الزوار، وماذا يبنون، والشكل، وأكثر المجموعات.

تحديث النجوم تلقائيًا

ملف .github/workflows/update-stars.yml يعمل كل يوم اثنين، ويجلب النجوم وتاريخ آخر تحديث من GitHub، ثم يحفظ التغييرات في المستودع. كل تغيير يعيد نشر الموقع تلقائيًا على Vercel.

• للتشغيل اليدوي: تبويب Actions ثم Update GitHub stars ثم Run workflow.
• محليًا: npm run update-stars. يعمل بدون توكن لكن بحد 60 طلبًا في الساعة، فاستخدم GITHUB_TOKEN=ghp_xxx npm run update-stars.
• أي مستودع يفشل جلبه يبقى رقمه القديم، ولا يتوقف التحديث بسببه.

اكتشاف أدوات جديدة تلقائيًا

ملف .github/workflows/discover-tools.yml يعمل كل يوم اثنين، ويبحث في GitHub عن مستودعات جديدة بموضوعات مثل claude-skills وmcp-server وagent-skills، بشرط حد أدنى من النجوم ونشاط حديث. ثم يفتح Issue فيه المرشحون الجدد مع:

• الوصف الأصلي، والنجوم، والرخصة، وآخر تحديث.
• تحذيرات: بدون رخصة، رخصة AGPL، مستودع حديث جدًا بنجوم كثيرة، مهارة قد تنفّذ أوامر.
• كتلة JSON جاهزة للنسخ إلى data/tools.json.

لا يُضاف شيء إلى الموقع تلقائيًا. للموافقة على مرشح: انسخ كتلته وأكمل desc بالعربية وdesc_de بالألمانية وdesc_en بالإنجليزية وcmd وuse، ثم npm run check. ولإخفاء مرشح تلقائيًا في المرات القادمة، أضف اسمه (مثل owner/repo) إلى ignored في data/discover-state.json.

• الإعدادات (المواضيع، الحد الأدنى للنجوم، عدد المرشحين): data/discover.config.json.
• تجربة محلية دون حفظ حالة: GITHUB_TOKEN=ghp_xxx npm run discover، فيكتب candidates-report.md.
• المرشحون الذين عُرضوا مرة لا يظهرون ثانية (محفوظون في data/discover-state.json).

الإشعارات والإخفاء والحذف

• جرس الإشعارات: أيقونة في أعلى الصفحة تعرض عدد الأدوات المضافة منذ آخر مرة قرأ فيها الزائر الإشعارات. الحساب يتم داخل متصفح الزائر بحقل added في كل أداة، فلا يحتاج الموقع إلى حسابات أو خادم. في أول زيارة لا يظهر شيء، ويبدأ العدّ من تلك اللحظة.
• المفضلة: قلب على كل أداة (في الصفحة الرئيسية وصفحة الأداة). الضغط عليه يحفظ الأداة في صفحة /favorites، وأيقونة القلب في أعلى الصفحة تفتحها وتعرض العدد. تُحفظ في متصفح الزائر فقط وتتزامن بين تبويبات المتصفح المفتوحة. صفحة المفضلة غير مفهرسة في محركات البحث.
  • مشاركة القائمة: زر «مشاركة القائمة» يصنع رابطًا /favorites/?list=a,b,c (60 أداة بحد أقصى). من يفتحه يرى القائمة نفسها، ويضيفها كلها إلى مفضلته بزر، أو يثبّتها حزمة واحدة. لا شيء يُرسل إلى خادم: القائمة في الرابط نفسه.
• تاريخ الإضافة: على كل بطاقة وصفحة أداة شارة حديثة تعرض متى أُضيفت الأداة إلى الدليل (اليوم، أمس، قبل 3 أيام...). يظهر التاريخ الكامل عند التمرير، ونقطة نابضة للأدوات المضافة قبل 3 أيام أو أقل. الحقل added في data/tools.json بصيغة YYYY-MM-DDTHH:MM:SSZ. الأدوات الأولى كلها بتاريخ 24 أكتوبر 2026.
• الأحدث إضافةً: خيار في قائمة الترتيب يعرض الأدوات من الأحدث إلى الأقدم حسب added.
• التصنيف بالنجوم: داخل كل قسم تظهر الأدوات من الأعلى نجومًا إلى الأقل. وخيار "تصنيف عام" في قائمة الترتيب يعرض كل الأدوات في قائمة واحدة برقم لكل أداة (#1 و#2 ...). الأدوات التي بلا نجوم تأتي في النهاية بدون رقم. عند اختيار نوع مشروع أو بحث يبدأ الترقيم من جديد بين النتائج المعروضة.
• شارات الحالة: يجلب سكربت النجوم أيضًا رخصة كل مستودع وحالة الأرشفة وتاريخ آخر تحديث، فتظهر على البطاقة شارات: رخصة (مثل MIT)، وتنبيه (آخر تحديث قبل أكثر من سنة، أو رخصة بشروط مثل AGPL)، وخطر (مؤرشف أو بلا رخصة). تظهر الشارات بعد أول تشغيل لسكربت التحديث.
• خلاصة RSS: الرابط /feed.xml (و/de/feed.xml بالألمانية و/en/feed.xml بالإنجليزية) فيه آخر 30 أداة مضافة، ويمكن الاشتراك فيه من أي قارئ RSS.
• إخفاء أداة: زر العين على كل بطاقة يخفيها من عرض الزائر فقط، ويحفظ ذلك في متصفحه، مع زر "استعادة المخفية". لا يغيّر الموقع للآخرين.
• حذف نهائي: npm run remove -- <slug> يحذف الأداة من data/tools.json ومن اقتراحات المشاريع، ويضيفها إلى قائمة ignored حتى لا يعيد البحث التلقائي اقتراحها. بعده شغّل npm run check ثم ارفع التغيير.
• أداة جديدة: عند إضافتها اكتب في added وقتها بصيغة 2026-10-25T09:30:00Z، فتظهر في الجرس عند الزوار.

فحص الروابط أسبوعيًا

ملف .github/workflows/check-links.yml يعمل كل يوم اثنين الساعة 07:11 UTC، ويفحص كل روابط GitHub والمواقع الرسمية في data/tools.json، ثم يفتح Issue (أو يضيف تعليقًا على الموجود) بعنوان "روابط معطلة أو منقولة في الدليل" إذا وجد مشكلة. لا يفتح شيئًا إن كانت كل الروابط سليمة، ولا يغيّر أي ملف.

• معطّلة: الصفحة غير موجودة (404 أو 410) أو النطاق لا يعمل. صحّح الرابط أو احذف الأداة بـ npm run remove -- slug.
• منقولة: الرابط يحوّل إلى مستودع أو نطاق آخر. حدّثه.
• غير مؤكدة: مهلة أو حجب للفاحص الآلي (403 و429). تظهر في قسم مطوي، ولا تُعد معطّلة حتى لا تصلك إنذارات كاذبة.
• إذا فشل أكثر من نصف الروابط فالفاحص يعتبر أن المشكلة في الاتصال ولا يكتب تقريرًا.
• تجربة محلية: npm run check-links، ويكتب links-report.md.

رأي الزوار

بعد دقيقة من التصفح الفعلي تظهر على يمين الشاشة نافذة تسأل الزائر عن رأيه في الدليل: تقييم من 1 إلى 5 نجوم ورسالة اختيارية. تظهر مرة واحدة فقط، وإن أغلقها الزائر لا تعود قبل 30 يومًا، وإن أرسل رأيه لا تعود أبدًا. ويمكن فتحها في أي وقت من رابط "رأيك في الدليل" في التذييل.

• النافذة: src/components/Feedback.astro وsrc/scripts/feedback.js.
• الاستقبال: دالة Vercel في api/feedback.js تقبل الطلبات من صفحات الموقع نفسه فقط (sameSite: عنوان Origin يطابق عنوان الطلب)، وتتحقق من البيانات (api/_feedback.js) وتحفظ كل رأي كملف JSON في مخزن Vercel Blob الخاص xskills-feedback.
• لقراءة الآراء: لوحة Vercel ثم Storage ثم xskills-feedback ثم Browser، والملفات في مجلد feedback/ مرتبة حسب التاريخ.
• لا يُحفظ اسم ولا بريد ولا عنوان IP: التقييم والرسالة واللغة والصفحة ووقت الإرسال فقط.
• المتغير BLOB_READ_WRITE_TOKEN يضيفه Vercel تلقائيًا لأن المخزن مربوط بالمشروع. بدونه ترد الدالة بخطأ 503 وتعرض النافذة "تعذّر الإرسال".
• اقترح أداة: زر في التذييل وتحت «لا نتيجة» (يأخذ ما بحث عنه الزائر اسمًا للأداة). اسم الأداة أو رابطها وسبب اختياري، بنوع suggest إلى مجلد suggestions/. النافذة في src/components/SuggestDialog.astro وsrc/scripts/suggest.js.
• البحث بلا نتيجة: كلمات البحث التي لم تجد شيئًا في الدليل كله (بعد ثانية ونصف من التوقف عن الكتابة) تُجمع أثناء الزيارة وتُرسل مرة حين يغادر الزائر الصفحة، بنوع miss إلى misses/. بلا هوية. في src/scripts/misses.js.
• صندوق الوارد: npm run inbox يلخّص آخر 30 يومًا (أو -- --days=7): متوسط التقييم وآخر الرسائل، والبلاغات لكل أداة، والاقتراحات، وأكثر عمليات البحث بلا نتيجة، واهتمامات الزوار من «ساعدني أختار». يحتاج مرة واحدة npx vercel env pull .env.local (الملف لا يُرفع: في .gitignore).
• الإبلاغ عن مشكلة في أداة: رابط «هل لاحظت مشكلة؟» تحت مواصفات كل أداة يفتح نافذة بسبب من قائمة ثابتة (رابط لا يعمل، أمر لا يعمل، معلومات قديمة، أمان، غير ذلك) ورسالة اختيارية. تصل إلى الدالة نفسها بـ kind: "report" وتُحفظ في مجلد reports/ في المخزن نفسه، ومعها اسم الأداة (slug). النافذة في src/components/ReportDialog.astro وsrc/scripts/report.js، والتحقق في parseReport داخل api/_feedback.js.

الإحصاءات والخصوصية

• الإحصاءات: Vercel Web Analytics (الزيارات والصفحات) وSpeed Insights (السرعة عند الزوار الحقيقيين)، بلا ملفات تعريف ارتباط. السكربت في src/scripts/analytics.js ويعمل على الموقع المنشور فقط. فعّلهما مرة واحدة من لوحة Vercel: المشروع ثم Analytics ثم Enable، وSpeed Insights ثم Enable. قبل التفعيل لا يُجمع شيء.
• محركات البحث: سجّل الموقع في Google Search Console وBing Webmaster Tools بعد ربط الدومين النهائي، لأن التحقق مرتبط بالرابط. اختر التحقق بوسم HTML، وانسخ قيمة content وحدها إلى data/meta.json: "verify": { "google": "…", "bing": "…" }، فيظهر الوسم في الصفحات الرئيسية الثلاث بعد النشر. ثم اضغط «تحقق»، وأرسل خريطة الموقع /sitemap.xml من قسم Sitemaps. يمكن أن يستورد Bing الموقع من Search Console مباشرة. robots.txt يشير إلى خريطة الموقع تلقائيًا.
• صفحة الخصوصية /privacy/ باللغات الثلاث (src/views/Privacy.astro، والنص في src/i18n/privacy.ts) ورابطها في التذييل. تصف ما يجمعه الموقع فعلًا؛ إن أضفت شيئًا يجمع بيانات فعدّل النص وتاريخه.
• الأكثر نسخًا هذا الأسبوع: نسخ أمر تثبيت (في بطاقة أو صفحة أداة أو المقارنة) يرسل اسم الأداة وحده إلى api/copy.js، مرة في اليوم لكل أداة في المتصفح، ولا يرسل شيئًا محليًا. العدّ أسبوعي في Upstash Redis ويُحذف بعد ثلاثة أسابيع (api/_counter.js). api/popular.js يعطي الأعلى في هذا الأسبوع والذي قبله ويُخزَّن ساعة في شبكة Vercel، والرئيسية تعرضه حين تصل 3 أدوات على الأقل (src/scripts/popular.js). للتفعيل مرة واحدة: لوحة Vercel ← المشروع ← Storage ← Create Database ← Upstash for Redis (الخطة المجانية) ← Connect. يضيف Vercel المتغيرات بنفسه؛ وقبل ذلك لا يُحفظ شيء ولا يظهر القسم.
• الراعي (إعلان): مكان واحد في الرئيسية بعد «الجديد» (src/components/Sponsor.astro)، موسوم دائمًا «إعلان/Anzeige/Sponsored» كما يطلب القانون الألماني، ونص ورابط فقط بلا صور ولا سكربتات من الراعي. أضف إلى data/meta.json إما أداة من الدليل: "sponsor": { "slug": "frontend-design", "until": "2026-12-31" }، أو منتجًا خارجيًا: "sponsor": { "name": "الاسم", "url": "https://…", "text": { "ar": "…", "de": "…", "en": "…" }, "until": "2026-12-31" } (النص حتى 140 حرفًا، والرابط الخارجي rel="sponsored"). يختفي بعد يوم في المتصفح فورًا، ومن الصفحة عند البناء التالي. الدخل من الإعلانات نشاط تجاري: سجّله قبل أول إعلان مدفوع.

المشاركة ومحركات البحث

• صورة مشاركة لكل أداة (/og/<slug>.png، 1200×630) تُرسم وقت البناء من src/lib/og.ts، فتظهر بطاقة غنية عند مشاركة الرابط في واتساب وX ولينكدإن. نصوصها لاتينية فقط فتصلح للغتين.
• صور الصفحة الرئيسية في public/og/home-ar.png وhome-de.png وhome-en.png. إن غيّرت عنوان الصفحة الرئيسية فأعد رسمهما بـ node scripts/og-home.cjs (يحتاج Playwright).
• بيانات منظمة (JSON-LD): الرئيسية فيها WebSite وقائمة أعلى 10 أدوات، وصفحة الأداة فيها مسار الصفحة BreadcrumbList وSoftwareSourceCode للأدوات التي لها مستودع.
• زر مشاركة في صفحة كل أداة: قائمة المشاركة في الجوال، ونسخ الرابط على الحاسوب.

الشعار والأيقونات

الشعار وجه شخصية الدليل: بلاطة زرقاء بعينين وابتسامة ونجمة ذهبية. رسم الشعار في مكان واحد هو src/lib/brand.js، وتستخدمه الواجهة وصور المشاركة ومجموعة الأيقونات، فلا ينسخ أحد SVG الشعار إلى ملف آخر.

• التوليد: npm run brand يكتب في public/: favicon.svg وfavicon.ico (16 و32 و48) وapple-touch-icon.png (180) وicon-192.png وicon-512.png وicon-maskable-512.png وlogo.svg، وفي public/brand/: avatar-1024.png (صورة الحساب على المنصات) وlogo-1024.png وlogo-mono.svg (لون واحد للأختام). ارفع الملفات الناتجة مع التعديل.
• التحقق: npm run check-brand بعد البناء (ويعمل في CI): الملفات موجودة بأحجامها، ووسوم <head> تشير إلى ملفات موجودة، وأيقونات manifest بأحجامها المعلنة.
• manifest لكل لغة من src/lib/manifest.ts (/manifest.webmanifest و/de/manifest.webmanifest و/en/manifest.webmanifest): يقرؤه أندرويد وChrome عند "إضافة إلى الشاشة الرئيسية".
• لماذا ملفات حقيقية وليس رابط data-URI؟ Safari على iPhone وزاحف أيقونات Google لا يقرآن أيقونة مضمّنة في الصفحة، ويطلبان /favicon.ico وapple-touch-icon.

مواد التسويق والإطلاق

• npm run build ثم npm run marketing: فيديو 9:16 وصور منشورات 1:1 و4:5 وغلاف 3:1 بالعربية والألمانية والإنجليزية في marketing/ (خارج git)، من بيانات الدليل وهويته (scripts/make-marketing.cjs). لغة أو جزء واحد: node scripts/make-marketing.cjs en video.
• فيديو قصير وصورة لأداة («أداة اليوم»): node scripts/make-marketing.cjs tool context7 maccy [--lang ar]، أو tool --latest 5 لأحدث خمس أدوات. الناتج في marketing/tools/.
• التعليق الصوتي: marketing/audio/<اللغة>.mp3 ومعه <اللغة>.json بالعدد المنطوق ({"count": 331}). إن صار الدليل أكبر من العدد المسجّل يظهر العدد المنطوق مع «+» حتى تسجّل تعليقًا جديدًا، فلا يخالف الصوت الصورة.
• نصوص Product Hunt وقوائم awesome والمنشورات في docs/launch.md.

النشر على Vercel

1. افتح vercel.com/new واستورد المستودع.
2. في Framework Preset اختر Astro. الباقي يُترك كما هو.
3. بعد النشر، ربط دومين خاص من Settings ثم Domains.

الرابط العام يُؤخذ تلقائيًا لخريطة الموقع sitemap.xml. وإن أردت تحديده يدويًا فأضف متغير البيئة SITE_URL في Vercel.

vercel.json يضيف ترويسات فقط، ولا يغيّر إعدادات البناء:

• ملفات /_astro/ (أسماؤها تتغير مع كل تعديل) تُحفظ في متصفح الزائر سنة كاملة (immutable)، فلا يعيد طلبها في الزيارة التالية.
• ترويسات أمان لكل الصفحات: X-Content-Type-Options وReferrer-Policy وX-Frame-Options: SAMEORIGIN (لا تُعرض الصفحات داخل إطار في موقع آخر) وPermissions-Policy (لا كاميرا ولا ميكروفون ولا موقع).

ملاحظات

• النجوم تتغير باستمرار، والأرقام تُحدَّث أسبوعيًا فقط.
• رخص الأدوات تختلف، وبعضها يتطلب رخصة مدفوعة في الاستخدام التجاري. اقرأ الرخصة قبل الاعتماد على أي أداة.
• أدوات المالية والضرائب تنظّم عملك ولا تغني عن مستشارك الضريبي.