/ الدليل / الملعب / web-quality-skills
● مجتمع addyosmani ⚡ فوري

web-quality-skills

بواسطة addyosmani · addyosmani/web-quality-skills

6 مهارات تجسد أكثر من 150 عملية تدقيق Lighthouse وأنماط Core Web Vitals — يقوم Claude بتشخيص ومعالجة مشاكل LCP و INP و CLS والوصول

حزمة مهارات مركزة من addyosmani تغطي web-quality-audit وperformance وcore-web-vitals والوصول (WCAG 2.2) وseo وbest-practices. تتفعل المهارات تلقائياً عند الطلبات ذات الصلة (على سبيل المثال، 'سرّع موقعي' يحمل مهارة الأداء). غير مرتبطة بالإطار — تعمل مع React و Vue و Svelte و Next و Astro و HTML العادي

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

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

عرض مباشر

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

web-quality-skill.replay ▶ جاهز
0/0

التثبيت

اختر العميل

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

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

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

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

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

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

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

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

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

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

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

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

claude mcp add web-quality-skill -- git clone https://github.com/addyosmani/web-quality-skills ~/.claude/skills/web-quality-skills

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

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

استخدامات عملية: web-quality-skills

إصلاح LCP بطيء على صفحة هبوط المنتج

👤 مهندسو الواجهة الأمامية الذين يحاولون الحصول على Core Web Vitals أخضر ⏱ ~40 min intermediate

متى تستخدمه: CrUX يظهر LCP بـ 3.8s ولا تعرف من أين تبدأ

المتطلبات الأساسية
  • عنوان URL الهدف — عنوان URL مباشر أو عنوان URL المرحلة — ليس محلياً فقط
الخطوات
  1. قم بتشغيل مهارة core-web-vitals
    استخدم مهارة core-web-vitals على https://site.com. ركز على LCP✓ تم النسخ
    → تشخيص عنصر LCP (الصورة الرئيسية، خط الويب، استجابة الخادم) مع إصلاح محدد
  2. طبق الإصلاح
    طبق تلميحات الأولوية الموصى بها وتغيير تنسيق الصورة✓ تم النسخ
    → تغييرات HTML ملموسة
  3. إعادة القياس
    كيف أتحقق من التحسن؟✓ تم النسخ
    → إعادة قياس موجهة عبر Lighthouse أو web-vitals JS

النتيجة: LCP أقل من الهدف 2.5s مع مسار إصلاح موثق

المزالق
  • إصلاح LCP في المختبر ولكن ليس LCP في الحقل (CrUX) — تحقق دائماً في CrUX، وليس في Lighthouse المحلي فقط

تشغيل تدقيق الوصول WCAG 2.2 على عملية الدفع

👤 المهندسون يستعدون لمراجعة الوصول ⏱ ~45 min intermediate

متى تستخدمه: يسأل القسم القانوني عن التوافق مع WCAG للدفع

الخطوات
  1. قم بتشغيل مهارة الوصول
    استخدم مهارة الوصول على عملية الدفع لدينا. ما المشاكل في WCAG 2.2 الموجودة؟✓ تم النسخ
    → النتائج المنظمة لكل معيار نجاح WCAG مع درجة الخطورة
  2. حدد أولويات الإصلاحات
    جمّع حسب جهد الإصلاح مقابل تأثير المستخدم✓ تم النسخ
    → قائمة انتظار مرتبة

النتيجة: قائمة انتظار الوصول الفعلية، وليس قائمة مراجعة لا يمكنك العمل عليها

المزالق
  • الفحوصات الآلية تلتقط فقط حوالي 30% من المشاكل — أكمل باختبار يدوي باستخدام لوحة المفاتيح فقط وقارئ الشاشة
اجمعها مع: playwright-skill

تشغيل تدقيق web-quality-audit الكامل قبل حملة تسويقية

👤 الفرق على وشك بدء حركة مرور مدفوعة ⏱ ~30 min intermediate

متى تستخدمه: تبدأ الحملة الكبيرة يوم الاثنين وتريد عدم وجود مفاجآت سيئة

الخطوات
  1. قم بتشغيل التدقيق المدمج
    استخدم web-quality-audit على صفحة هبوط الحملة لدينا✓ تم النسخ
    → تقرير يغطي الأداء و Core Web Vitals والوصول و SEO وأفضل الممارسات
  2. فرز للإطلاق
    ما الذي يجب إصلاحه قبل الإطلاق مقابل ما يمكن الانتظار؟✓ تم النسخ
    → فرز الذهاب / عدم الذهاب

النتيجة: صفحة جاهزة للإطلاق وقائمة انتظار للأسبوع الثاني

المزالق
  • معاملة كل النتيجة كعائق — تحدد المهارة الأولويات — ثق في قائمة يجب إصلاحها

التركيبات

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

web-quality-skill + chrome-devtools

استخدم chrome-devtools MCP للحصول على تتبعات الأداء المباشرة بينما تفسرها المهارة

التقط تتبع الأداء عبر chrome-devtools، ثم اطلب من مهارة performance تحليله✓ تم النسخ
web-quality-skill + playwright-skill

يقوم playwright بتشغيل الموقع عبر تدفقات المستخدم الحقيقية، وتقيّم مهارات جودة الويب كل خطوة

استخدم playwright للمشي عبر عملية الدفع، والتقط المقاييس في كل خطوة، ثم قيّم الوصول لكل شاشة✓ تم النسخ
web-quality-skill + claude-seo-skill

SEO التقني من claude-seo + Core Web Vitals من هذه المهارة

قم بتشغيل /seo audit لمشاكل الارتباط/المخطط، ثم web-quality-audit لـ Core Web Vitals✓ تم النسخ

الأدوات

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

الأداةالمدخلاتمتى تستدعيهاالتكلفة
web-quality-audit URL قبل الإطلاق أو كل ربع سنة 0
performance URL صفحة بطيئة 0
core-web-vitals URL Core Web Vitals فاشل 0
accessibility URL / component مراجعة الوصول 0
seo URL فحص نظافة SEO 0
best-practices URL مراجعة التصلب 0

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

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

حصة API
بلا
الرموز لكل استدعاء
2-5k لكل مهارة محملة
التكلفة المالية
مجاني — المهارة محلية
نصيحة
قيّم عنوان URL واحد في المرة؛ التدقيقات الدفعية تتضخم السياق

الأمان

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

تخزين بيانات الاعتماد: بلا بيانات اعتماد — المهارة هي الطلبات
نقل البيانات الخارجي: بلا من المهارة نفسها

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

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

تعطي المهارة نصائح عامة

أدخل Lighthouse JSON حقيقي أو سجل CrUX للنتائج المحددة

التوصيات لا تنطبق على إطارك

سمِّ الإطار ('Next.js 15 app router') حتى تخصص المهارة الاقتراحات

البدائل

web-quality-skills مقابل البدائل

البديلمتى تستخدمهاالمقايضة
Lighthouse CI مباشرةتريد بوابات CI آلية، وليس إرشادات تفاعليةقابل للتوسع لـ CI؛ أقل شرحاً
claude-seo-skillتحتاج SEO أولاً مع سطح تدقيق أوسعنطاق أوسع لكن أقل عمقاً في Core Web Vitals

المزيد

الموارد

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

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

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