frontend-css
Appliquer les normes et méthodologies de codage CSS
متاح أيضًا من: DevanB
Écrire du CSS sans méthodologie cohérente entraîne des problèmes de maintenabilité et un style incohérent entre les projets. Cette compétence fournit des conseils structurés sur l'application d'approches standardisées comme Tailwind, BEM et CSS Modules pour garantir des feuilles de style propres, maintenables et évolutives.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "frontend-css". Styler un composant de navigation avec des menus déroulants utilisant un design responsive
النتيجة المتوقعة:
- Nommage BEM : .nav, .nav__item, .nav__link, .nav__dropdown
- Approche Tailwind : flex, effets hover, points de rupture responsives avec le préfixe md:
- Media queries mobile-first pour le menu hamburger sur les petits écrans
استخدام "frontend-css". Créer un composant carte avec une ombre et un effet lift au hover
النتيجة المتوقعة:
- Approche CSS : classe card avec la propriété box-shadow et transition transform
- Approche Tailwind : shadow-lg, hover:shadow-xl, hover:-translate-y-1
- Suggestion de tokens de design : extraire les valeurs d'ombre dans un ensemble de tokens sémantiques
استخدام "frontend-css". Définir une échelle d'espacement pour un système de design
النتيجة المتوقعة:
- Définir les tokens d'espacement : space-1 à space-8 avec une unité de base de 4px
- Config Tailwind : étendre theme.spacing avec des noms sémantiques
- Appliquer de manière cohérente avec les utilitaires margin/padding ou les propriétés CSS personnalisées
التدقيق الأمني
آمنThis is a pure documentation skill containing only YAML frontmatter and markdown files. No executable code, scripts, network calls, or filesystem access beyond reading its own documentation files. All 37 static findings are false positives triggered by URL strings in metadata, relative path references in documentation, and hex strings in hash identifiers.
عوامل الخطر
🌐 الوصول إلى الشبكة (1)
📁 الوصول إلى نظام الملفات (4)
درجة الجودة
ماذا يمكنك بناءه
Maintenir un style cohérent
Appliquer la méthodologie BEM ou utilitaire lors de l'écriture de nouveaux composants CSS pour des projets React, Vue ou vanilla.
Définir des tokens de design
Créer des palettes de couleurs cohérentes, des échelles d'espacement et des systèmes de typographie en utilisant des patterns de tokens de design.
Configurer Tailwind CSS
Configurer et personnaliser les fichiers de configuration Tailwind avec des couleurs personnalisées, des points de rupture et des classes utilitaires.
جرّب هذه الموجهات
Écrire le CSS pour un composant bouton en utilisant la méthodologie BEM avec les états hover et focus.
Convertir cette mise en page flexbox en classes utilitaires Tailwind CSS avec des points de rupture responsives.
Créer une structure de tokens de design pour un système de couleurs avec des couleurs primaires, secondaires et sémantiques.
Examiner ce fichier CSS et le refactoriser pour suivre les principes utility-first, puis suggérer comment l'optimiser pour la production.
أفضل الممارسات
- Utiliser des noms de classes sémantiques qui décrivent le but, pas l'apparence
- Commencer par les styles mobile-first et ajouter les points de rupture responsives
- Extraire les valeurs répétées dans des tokens de design pour la cohérence
تجنب
- Utiliser des styles inline au lieu de classes utilitaires ou de classes CSS
- Des sélecteurs trop imbriqués qui créent des guerres de spécificité
- Coder en dur des nombres magiques au lieu d'utiliser des tokens de design