Compétences css-development:refactor
🎨

css-development:refactor

Sûr

إعادة هيكلة CSS إلى أنماط دلالية

تحويل الأنماط المضمنة وفئات الأدوات المتناثرة إلى CSS دلالية قابلة للصيانة. إضافة دعم الوضع الداكن مع الحفاظ على السلوك البصري الحالي. ينشئ أنماط مكونات منظمة يسهل صيانتها وتحديثها.

Prend en charge: Claude Codex Code(CC)
⚠️ 65 Médiocre
1

Télécharger le ZIP du skill

2

Importer dans Claude

Allez dans Paramètres → Capacités → Skills → Importer un skill

3

Activez et commencez à utiliser

Tester

Utilisation de "css-development:refactor". استخرج الأنماط المضمنة من مكون Button الخاص بي إلى CSS الدلالي

Résultat attendu:

  • حلل مكون Button بحثًا عن الأنماط المضمنة وفئات الأدوات
  • وجد 3 أنماط متكررة عبر 5 ملفات
  • أنشأ فئة .button-primary دلالية مع حالات التحويم والانتقالات
  • أضاف متغيرات الوضع الداكن (dark:bg-indigo-600, dark:hover:bg-indigo-800)
  • حدث Button.tsx لاستخدام الفئات الدلالية
  • أضاف اختبار CSS ثابت لفئة button-primary
  • تحقق من نجاح جميع الاختبارات

Audit de sécurité

Sûr
v3 • 1/10/2026

Pure prompt-based skill with no executable code. Provides guidance for AI assistants to help refactor CSS. No network calls, file modifications, or external command execution capabilities are built into the skill itself.

1
Fichiers analysés
416
Lignes analysées
0
résultats
3
Total des audits
Aucun problème de sécurité trouvé
Audité par: claude Voir l’historique des audits →

Score de qualité

38
Architecture
100
Maintenabilité
81
Contenu
22
Communauté
100
Sécurité
61
Conformité aux spécifications

Ce que vous pouvez construire

الترحيل من الأدوات إلى CSS الدلالي

تحويل فئات أداة Tailwind المتناثرة في الترميز إلى أنماط مكونات دلالية مركزية

إضافة دعم الوضع الداكن

إضافة منهجية لمتغيرات الوضع الداكن إلى المكونات الموجودة التي تفتقر إليها

توحيد أنماط CSS

تحديد وتوحيد الأنماط المكررة عبر ملفات متعددة إلى فئات دلالية مشتركة

Essayez ces prompts

استخراج الأنماط المضمنة 
استخرج الأنماط المضمنة من هذا المكون إلى فئات CSS الدلالية باستخدام مهارة css-development:refactor
دمج الأدوات 
ابحث عن أنماط فئات الأدوات المتكررة عبر قاعدة الكود الخاصة بي ودمجها في فئات دلالية
إضافة الوضع الداكن 
أضف دعم الوضع الداكن إلى مكونات CSS الموجودة باستخدام مهارة css-development:refactor
إعادة هيكلة المكون الكامل 
أعد هيكلة قاعدة الكود هذه من الأنماط المضمنة إلى أنماط CSS الدلالية مع الوضع الداكن والاختبارات

Bonnes pratiques

  • تحقق من أنماط المكونات الموجودة قبل إنشاء فئات دلالية جديدة لتجنب التكرار
  • تضمين متغيرات الوضع الفاتح والداكن دائمًا عند إنشاء فئات CSS جديدة
  • إضافة تعليقات توثيق تشرح الاستخدام والأنماط التي تحل كل فئة محلها

Éviter

  • إنشاء فئات دلالية جديدة دون التحقق من وجود أنماط مماثلة بالفعل
  • إضافة الوضع الداكن إلى الخلفية فقط دون تحديث ألوان النص والحدود
  • إعادة الهيكلية دون إضافة اختبارات للتحقق من الحفاظ على السلوك

Foire aux questions

هل تعمل هذه المهارة مع أطر عمل أخرى غير Tailwind؟
نعم. تعمل الأنماط الدلالية مع أي إطار CSS. يمكنك تكييف تركيب @apply لإطار العمل الخاص بك.
هل ستؤدي إعادة الهيكلية إلى كسر المكونات الحالية؟
تتبع المهارة إعادة الهيكلية المحايدة للسلوك. يتم التحقق من جميع الفئات للحفاظ على المخرجات البصرية الأصلية.
هل يمكنني استخدام هذه المهارة لحلول CSS-in-JS؟
نعم. تنطبق أنماط الاستخراج على styled-components و emotion ومكتبات CSS-in-JS الأخرى.
كيف يعمل اكتشاف الوضع الداكن؟
تفحص المهارة متغيرات dark: الخاصة بـ Tailwind وتضيف المفقودة إلى خصائص الخلفية والنص والحدود.
هل تعدل هذه المهارة الملفات مباشرة؟
لا. توفر المهارة إرشادات لمساعدي الذكاء الاصطناعي. تتطلب جميع تعديلات الملفات موافقة بشرية وتنفيذها.
كيف تختلف هذه عن css-development:validate؟
إعادة الهيكلية تحول الكود الموجود. التحقق يتحقق من CSS الحالي ضد المعايير دون إجراء تغييرات.

Détails du développeur

Licence

MIT

Dépôt

https://github.com/2389-research/claude-plugins/tree/main/css-development/skills/refactor

Réf

main

Structure de fichiers

📄 SKILL.md