/ الدليل / الملعب / Addy Osmani Agent Skills
← كل الخوادم ↗ GitHub
● مجتمع addyosmani ⚡ فوري

Addy Osmani Agent Skills

بواسطة addyosmani · addyosmani/agent-skills

مهارات هندسية مستوى الإنتاج لوكلاء البرمجة — أداء وإمكانية وصول وأمان وتصحيح — منتقاة من قِبل Addy Osmani (فريق Google Chrome، مؤلف Learning JavaScript Design Patterns).

حزمة من المهارات الهندسية المدروسة والمُختبَرة ميدانياً لوكلاء AI البرمجية. كل مهارة تُرمّز ممارسة هندسية محددة (تحسين Core Web Vitals، تدقيق a11y بـ axe-core، مراجعة OWASP الآمنة افتراضياً، تصحيح الأداء). المهارات غير مرتبطة بوكيل بعينه وتعمل مع Claude Code وCursor وCodex وGemini CLI. تُحدَّث بانتظام بملاحظات من ميدان frontend.

▶ شاهد العرض 📦 التثبيت 💡 حالات الاستخدام

لماذا تستخدمه

الميزات الأساسية

عرض مباشر

كيف يبدو في الممارسة

جاهز

التثبيت

اختر العميل

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "addyosmani-agent-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/addyosmani/agent-skills",
        "~/.claude/skills/addyosmani-agent-skills"
      ],
      "_inferred": true
    }
  }
}

افتح Claude Desktop → Settings → Developer → Edit Config. أعد التشغيل بعد الحفظ.

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "addyosmani-agent-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/addyosmani/agent-skills",
        "~/.claude/skills/addyosmani-agent-skills"
      ],
      "_inferred": true
    }
  }
}

يستخدم Cursor نفس مخطط mcpServers مثل Claude Desktop. إعدادات المشروع أولى من الإعدادات العامة.

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "addyosmani-agent-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/addyosmani/agent-skills",
        "~/.claude/skills/addyosmani-agent-skills"
      ],
      "_inferred": true
    }
  }
}

انقر على أيقونة MCP Servers في شريط Cline الجانبي، ثم "Edit Configuration".

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "addyosmani-agent-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/addyosmani/agent-skills",
        "~/.claude/skills/addyosmani-agent-skills"
      ],
      "_inferred": true
    }
  }
}

نفس الصيغة مثل Claude Desktop. أعد تشغيل Windsurf لتطبيق التغييرات.

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "addyosmani-agent-skills",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/addyosmani/agent-skills",
        "~/.claude/skills/addyosmani-agent-skills"
      ]
    }
  ]
}

يستخدم Continue مصفوفة من كائنات الخادم بدلاً من خريطة.

~/.config/zed/settings.json
{
  "context_servers": {
    "addyosmani-agent-skills": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/addyosmani/agent-skills",
          "~/.claude/skills/addyosmani-agent-skills"
        ]
      }
    }
  }
}

أضف إلى context_servers. يعيد Zed التحميل تلقائيًا عند الحفظ.

claude mcp add addyosmani-agent-skills -- git clone https://github.com/addyosmani/agent-skills ~/.claude/skills/addyosmani-agent-skills

أمر من سطر واحد. تحقق باستخدام claude mcp list. احذف باستخدام claude mcp remove.

حالات الاستخدام

استخدامات عملية: Addy Osmani Agent Skills

كيفية إصلاح إخفاقات Core Web Vitals مع Claude يقوم بالعمل الثقيل

👤 مهندسو frontend والفرق المهتمة بالأداء ⏱ ~90 min intermediate

متى تستخدمه: انخفض PageSpeed، تراجع LCP عن 2.5 ثانية، الإدارة تسأل لماذا.

المتطلبات الأساسية
  • المهارة مثبّتة — git clone https://github.com/addyosmani/agent-skills ~/.claude/skills/addyosmani-agent-skills
  • URL أو مستودع للفحص — URL عام أو خادم تطوير محلي
الخطوات
  1. التشخيص
    Use the perf skill on https://mysite.com. Pull a CrUX report, run a Lighthouse trace, and identify the top 3 LCP and INP culprits.✓ تم النسخ
    → قائمة مُرتَّبة بالمسبّبات مع مراجع الملفات، لا نصائح عامة 'حسّن الصور'
  2. الإصلاح
    For the top LCP culprit, apply the fix. For images, prefer fetchpriority + AVIF/WebP fallback. Show diff and rationale.✓ تم النسخ
    → تغيير الكود + التأثير المتوقع على المقياس قبل/بعد
  3. التحقق
    Re-run Lighthouse locally. Compare to previous run.✓ تم النسخ
    → الأرقام تحسّنت؛ وإلا كانت الفرضية خاطئة — العودة للخطوة 1

النتيجة: تحسينات LCP/INP قابلة للقياس مع سجل مكتوب.

المزالق
  • Claude يتسارع نحو إعادة هيكلة framework ثقيلة — المهارة تتضمن قاعدة 'أدنى تغيير ممكن' — ألصقها مجدداً إن انحرف الوكيل
اجمعها مع: filesystem

تدقيق صفحة لمشكلات إمكانية الوصول على مستوى Claude Code

👤 مطورو frontend الذين يشحنون مواقع B2C ⏱ ~60 min intermediate

متى تستخدمه: ورثت واجهة بحالة a11y مجهولة وتحتاج تدقيقاً حقيقياً لا مجرد تحديد خانة.

الخطوات
  1. تشغيل المجموعة
    Use the a11y skill on /app/components/. Run axe rules + heuristic checks for focus management and keyboard traps.✓ تم النسخ
    → المشكلات مُجمَّعة حسب الخطورة؛ معرّفات القواعد مضمّنة
  2. الفرز
    Group issues by component. Rank by user impact, not raw count.✓ تم النسخ
    → أفضل 10 مكوّنات للإصلاح
  3. الإصلاح
    Pick the highest-impact item. Apply the fix; don't break existing tests.✓ تم النسخ
    → الإصلاح شُحن؛ الاختبارات خضراء

النتيجة: تحسينات a11y حقيقية، لا 'شغّلنا axe ونظرنا أننا انتهينا'.

المزالق
  • الإصلاح التلقائي يكسر قصد التصميم (مثل إجبار تسمية على زر أيقونة فقط) — المهارة تُفضّل النهج المكافئ بصرياً مثل aria-label على التسمية المرئية

إجراء مراجعة آمنة-افتراضياً على قاعدة كود TypeScript

👤 المطورون بدون فريق أمان مخصص ⏱ ~75 min advanced

متى تستخدمه: قبل الإطلاق، تريد مسحاً عاقلاً — ليس اختبار اختراق، لكن أفضل من لا شيء.

الخطوات
  1. الفحص
    Use the security skill. Scan src/ for: hardcoded secrets, unsafe SQL/NoSQL queries, missing rate limits on POST handlers, JWT misuse.✓ تم النسخ
    → جدول النتائج مع file:line والخطورة
  2. إصلاح أفضل 5
    Fix the highest-severity items. Add tests where feasible.✓ تم النسخ
    → 5 إصلاحات مُطبَّقة

النتيجة: قاعدة كود لن تفشل في مراجعة أمنية أساسية.

المزالق
  • إيجابيات زائفة على تركيبات الاختبار — المهارة تحترم /tests/ و/__fixtures__/ افتراضياً — مرّر --include-tests للإلغاء
اجمعها مع: github

استخدام مهارة التصحيح المنظّم على regression

👤 أي مطوّر مع خطأ 'كان يعمل بالأمس' ⏱ ~60 min intermediate

متى تستخدمه: مضت 30 دقيقة على التخمين — انتقل إلى سير عمل السبب الجذري المنظّم.

الخطوات
  1. الإعادة
    Use the debug skill. First step: get a minimal reproduction.✓ تم النسخ
    → خطوات إعادة الظهور + اختبار فاشل واحد
  2. الثنائي
    Bisect git history with the failing test as oracle.✓ تم النسخ
    → الالتزام المذنب محدّد
  3. الإصلاح
    Surgical fix — preserve the intended behavior of the offending commit.✓ تم النسخ
    → الإصلاح مُلتزَم به مع شرح

النتيجة: إصلاح قابل للتكرار مدعوم باختبار، لا مجرد حدس.

المزالق
  • المهارة تُفرط في تطبيق bisect عندما الخطأ ليس في الكود (البيئة/البيانات) — المهارة تتحقق من البيئة/البيانات أولاً حسب قائمة تحققها — اتّبع الترتيب
اجمعها مع: github

التركيبات

اجمعها مع خوادم MCP أخرى لتحقيق نتائج x10

addyosmani-agent-skills + github

فتح PRs من مخرجات المهارة

After perf fixes, open a PR titled 'perf(LCP): -300ms via image priority hints'.✓ تم النسخ
addyosmani-agent-skills + filesystem

حفظ تقارير تدقيق المهارات

Save audit reports to /reports/$(date +%F)/ for trend tracking.✓ تم النسخ

الأدوات

ما يوفره هذا الـ MCP

الأداةالمدخلاتمتى تستدعيهاالتكلفة
perf.audit url_or_path regression الأداء 0
a11y.audit path فحص a11y قبل الشحن 0
security.scan path مسح أمني قبل الإطلاق 0
debug.bisect failing_test, search_window Regression مع خط أساس معروف صالح 0

التكلفة والحدود

تكلفة التشغيل

حصة API
غير ذي صلة — مهارة محلية
الرموز لكل استدعاء
المراجعات الثقيلة يمكن أن تكون عالية؛ قواعد الكود الكبيرة تستخدم 50 ألف+ token
التكلفة المالية
مجاني (MIT)
نصيحة
شغّل perf/a11y لكل مسار على حدة، لا الموقع كله دفعة واحدة، للإبقاء على التكاليف محدودة

الأمان

الصلاحيات والأسرار ونطاق الأثر

الحد الأدنى من الصلاحيات: filesystem-read
تخزين بيانات الاعتماد: لا شيء
نقل البيانات الخارجي: Lighthouse يعمل محلياً؛ يُجلب فقط الـ URLs المُدقَّقة

استكشاف الأخطاء

الأخطاء الشائعة وحلولها

Lighthouse يفشل في التشغيل

ثبّت Node 18+ وChrome؛ المهارة تتوقعهما في PATH

تحقق: `npx lighthouse https://example.com` يعمل منفرداً
قواعد axe قديمة

المهارة تشحن مع إصدار axe مثبّت؛ حدّث بـ git pull بانتظام

bisect يعمل إلى الأبد على اختبار غير محدد النتائج

مرّر --repeat 3 حتى يُختبر كل الالتزامات 3 مرات — الاختبارات المتقلقلة تُصفَّى

البدائل

Addy Osmani Agent Skills مقابل البدائل

البديلمتى تستخدمهاالمقايضة
wshobson/agentsتريد تغطية أدوار أوسع (باك-إند / بيانات / DevOps)wshobson أوسع؛ حزمة Addy أعمق في web-perf/a11y
مهارات Anthropic الرسميةمكوّنات عامة معتمدة رسمياًأقل رأياً؛ أقل تشكيلاً من ممارس

المزيد

الموارد

📖 اقرأ ملف README الرسمي على GitHub

🐙 تصفح القضايا المفتوحة

🔍 تصفح أكثر من 400 خادم MCP و Skills