المهارات web-performance-seo
📦

web-performance-seo

آمن

إصلاح أخطاء تباين الألوان في أداة Lighthouse للتAccessibility

تقوم هذه المهارة بإصلاح أخطاء Accessibility في PageSpeed Insights وLighthouse الناتجة عن فشل تباين الألوان. تقوم بفحص أنماط CSS التي تؤدي إلى فشل تدقيقات Accessibility وتوفر أنماط إصلاح مثبتة لتحسين أداء SEO الخاص بك.

يدعم: Claude Codex Code(CC)
🥉 74 برونزي
1

تنزيل ZIP المهارة

2

رفع في Claude

اذهب إلى Settings → Capabilities → Skills → Upload skill

3

فعّل وابدأ الاستخدام

اختبرها

استخدام "web-performance-seo". يعرض موقعي '!' في Accessibility في Lighthouse بدلاً من درجة

النتيجة المتوقعة:

يشير '!' إلى فشل كامل في التدقيق ولم يتم حساب درجة. الأسباب الشائعة تشمل: CSS backdrop-blur أو filters، ألوان OKLCH/OKLAB، خلفية شفافية منخفضة (< 0.4)، نص متدرج بلون شفاف، أو نص فوق صور بدون طبقات. أوصي بفحص قاعدة البيانات الخاصة بك باستخدام: `rg -n "backdrop-blur|filter:|mix-blend-mode" .` وأوامر مماثلة لتحديد الأنماط المشكلة.

استخدام "web-performance-seo". كيف أصلح ألوان OKLCH في CSS الخاص بي لـ Accessibility؟

النتيجة المتوقعة:

حوّل OKLCH إلى HSL أو RGB. على سبيل المثال، `--primary: oklch(0.55 0.22 264);` يصبح `--primary: hsl(250, 60%, 50%);`. استخدم منتقي الألوان أو أداة لمطابقة المظهر المرئي مع استخدام مساحة لونية قياسية يمكن لـ Lighthouse تحليلها بشكل صحيح.

التدقيق الأمني

آمن
v1 • 2/24/2026

Static analysis detected external_commands patterns and weak cryptographic algorithms. Evaluation reveals these are FALSE POSITIVES. The 'external_commands' are CLI command examples in markdown documentation (ripgrep commands for code scanning), not executable code. The 'weak cryptographic algorithm' detections are OKLCH/OKLAB CSS color space specifications misidentified as crypto algorithms. This skill provides documentation and code patterns for fixing accessibility contrast issues - no security risks present.

1
الملفات التي تم فحصها
93
الأسطر التي تم تحليلها
2
النتائج
1
إجمالي عمليات التدقيق
مشكلات متوسطة المخاطر (1)
SKILL.md:32-37SKILL.md:37-41SKILL.md:41-46SKILL.md:46-49SKILL.md:49-54SKILL.md:54-61SKILL.md:61-74SKILL.md:74-77SKILL.md:77-83
Documentation CLI Commands Detected
Static scanner detected 'external_commands' patterns in markdown code blocks. These are CLI command examples (ripgrep) shown as documentation for users to run on their own code, not executable code within the skill itself.
مشكلات منخفضة المخاطر (1)
SKILL.md:3SKILL.md:23
OKLCH/OKLAB Color Space Misidentified as Crypto
Static scanner flagged 'weak cryptographic algorithm' at lines 3 and 23. This is a FALSE POSITIVE - OKLCH/OKLAB are CSS color space specifications (CSS Color Level 4), not cryptographic algorithms.
تم تدقيقه بواسطة: claude

درجة الجودة

38
الهندسة المعمارية
100
قابلية الصيانة
87
المحتوى
50
المجتمع
98
الأمان
91
الامتثال للمواصفات

ماذا يمكنك بناءه

إصلاح عمليات التدقيق الفاشلة في Accessibility

عندما يعرض Lighthouse '!' بدلاً من درجة في قسم Accessibility، استخدم هذه المهارة لتحديد وإصلاح أنماط CSS التي تسبب الفشل.

تحسين SEO من خلال Accessibility

Accessibility هي عامل ترتيب. استخدم هذه المهارة لإصلاح مشاكل التباين التي تؤثر سلبًا على ترتيب محركات البحث.

مراجعة كود Accessibility

مراجعة CSS والمكونات لمشاكل Accessibility قبل النشر لاكتشاف مشاكل التباين مبكرًا.

جرّب هذه الموجهات

طلب إصلاح التباين الأساسي 
يُظهر تدقيق Accessibility في Lighthouse لدي '' بدلاً من درجة. تدقيق color-contrast يفشل. ساعدني في تحديد وإصلاح أنماط CSS التي تسبب هذه المشكلة.
تحويل ألوان OKLCH 
أستخدم ألوان OKLCH في CSS الخاص بي وهي تسبب مشاكل في Accessibility في Lighthouse. أرني كيفية تحويل OKLCH إلى بدائل HSL أو RGB سهلة الوصول.
Accessibility النص المتدرج 
يستخدم موقعي النص المتدرج لكن Lighthouse يميز مشاكل color-contrast.وفر نمطًا للنص المتدرج مع احتياطيات الألوان المناسبة التي تجتاز تدقيقات Accessibility.
النص فوق الصور 
لدي نص فوق الصور والتباين يفشل في تدقيقات Accessibility. أرني النمط الصحيح لإضافة الطبقات لضمان نسب تباين كافية.

أفضل الممارسات

  • قم دائمًا بالاختبار محليًا باستخدام Lighthouse أو axe قبل النشر
  • ارفع شفافية الخلفية إلى 0.4 أو أعلى (يفضل 0.6+)
  • استخدم استعلام الوسائط forced-colors لدعم الوضع عالي التباين في Windows
  • تحقق من أن نسب التباين تستوفي 4.5:1 للنص العادي و3:1 للنص الكبير

تجنب

  • استخدام CSS filters أو backdrop-blur دون التحقق من تأثير Accessibility
  • استخدام ألوان OKLCH/OKLAB دون الاختبار في Lighthouse
  • تعيين لون النص إلى شفاف فوق خلفيات متدرجة
  • وضع النص مباشرة فوق صور بدون طبقة overlay مناسبة

الأسئلة المتكررة

ماذا تعني '!' في Accessibility في Lighthouse؟
يشير '!' إلى فشل كامل في تدقيق Accessibility ولم يتم حساب درجة. يحدث هذا عادةً عندما لا يستطيع Lighthouse تحليل أنماط CSS معينة مثل filters أو مساحات الألوان.
هل يمكن لهذه المهارة تشغيل اختبارات Lighthouse لي؟
لا. توفر هذه المهارة إرشادات وأنماط كود. تحتاج إلى تشغيل Lighthouse أو PageSpeed Insights بنفسك للتحقق من الإصلاحات.
لماذا تسبب ألوان OKLCH مشاكل؟
يستخدم Lighthouse getImageData لتحليل الألوان، والتي تدعم محدود لمساحات الألوان الجديدة مثل OKLCH وOKLAB. التحويل إلى HSL أو RGB يضمن تحليلاً دقيقًا.
ما مستوى الشفافية الآمن لـ Accessibility؟
استخدم شفافية خلفية 0.4 أو أعلى. يفضل 0.6 أو أعلى للحصول على تباين أفضل. Tailwind classes مثل /10 و /20 منخفضة جدًا؛ استخدم /40 أو /60 أو أعلى.
هل إصلاح Accessibility يساعد حقًا في SEO؟
نعم. Accessibility هي عامل ترتيب في Google. قد تحقق المواقع ذات درجات Accessibility الأفضل نتائج أفضل في نتائج البحث.
كيف أختبر الإصلاحات محليًا قبل النشر؟
استخدم Lighthouse في Chrome DevTools أو امتداد axe browser. شغل الاختبارات محليًا للتحقق من الإصلاحات قبل النشر للإنتاج.

تفاصيل المطور

المؤلف

ZhanlinCui

الترخيص

MIT

المستودع

https://github.com/ZhanlinCui/Ultimate-Agent-Skills-Collection/tree/main/web-performance-seo

مرجع

main

بنية الملفات

📄 SKILL.md