frontend-css
اكتب CSS متسقة وقابلة للصيانة باستخدام Tailwind
也可從以下取得: EIS-ITS
كتابة CSS بدون معايير تؤدي إلى تصميم غير متسق، وأوراق أنماط منتفخة، وتحديات في الصيانة عبر قاعدة الأكواد. تساعد هذه المهارة مساعدي الذكاء الاصطناعي على استخدام فئات Tailwind المساعدة، واتباع رموز نظام التصميم، والحفاظ على اتساق التصميم عبر جميع المكونات.
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「frontend-css」。 صمم مكون بطاقة مع عنوان ووصف وزر إجراء باستخدام Tailwind.
預期結果:
- الحاوية: bg-white rounded-lg shadow-md p-6
- العنوان: text-xl font-semibold text-gray-900 mb-2
- الوصف: text-gray-600 mb-4 leading-relaxed
- الزر: bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition-colors
正在使用「frontend-css」。 أضف نقاط توقف متجاوبة لمكون التنقل.
預期結果:
- الهاتف المحمول أولاً: flex-col على الهاتف المحمول
- الكمبيوتر اللوحي: md:flex-row لتخطيطات الكمبيوتر اللوحي
- سطح المكتب: lg:px-8 للمسافات على سطح المكتب
- عناصر التنقل: تضمين حالات hover وحلقات التركيز
正在使用「frontend-css」。 قم بتكوين ألوان العلامة التجارية المخصصة في سمة Tailwind.
預期結果:
- الأساسي: #3B82F6 (blue-500)
- الثانوي: #10B981 (emerald-500)
- التمييز: #F59E0B (amber-500)
- الداكن: #1F2937 (gray-800)
安全審計
安全Pure documentation skill containing only markdown guidance for AI code generation. No executable code, network calls, filesystem access, or external commands detected. All 46 static findings are false positives: GitHub URL in metadata flagged as 'Hardcoded URL', SHA-256 hash strings flagged as 'Weak cryptographic algorithm', Tailwind CSS @theme directive flagged as 'Ruby backtick execution', and documentation path references flagged as 'Path traversal'. This skill provides CSS coding standards and Tailwind methodology guidance only.
風險因素
🌐 網路存取 (1)
📁 檔案系統存取 (4)
⚙️ 外部命令 (1)
品質評分
你能建構什麼
تصميم مكونات React
تطبيق فئات Tailwind المساعدة المتسقة عند بناء أو تحرير مكونات React في ملفات .tsx أو .jsx.
تنفيذ رموز التصميم
تكوين وتوسيع سمات Tailwind باستخدام توجيه @theme مع الحفاظ على اتساق نظام التصميم.
تحسين أداء CSS
تحسين حجم حزمة CSS من خلال tree-shaking المناسب، وإزالة الأنماط غير المستخدمة، وتجنب التجاوزات الزائدة للإطار.
試試這些提示
صمم مكون React هذا باستخدام فئات Tailwind المساعدة. استخدم رموز نظام التصميم للألوان والمسافات.
أضف نقاط توقف متجاوبة لهذا التخطيط باستخدام بادئات Tailwind مثل sm: و md: و lg: و xl:.
قم بتكوين امتداد سمة Tailwind باستخدام توجيه @theme لألوان العلامة التجارية المخصصة والطباعة.
راجع هذا الكود CSS وحدد أي انتهاكات لمنهجية Tailwind. اقترح تحسينات باستخدام فئات مساعدة بدلاً من CSS المخصصة.
最佳實務
- استخدم فئات المساعدة بدلاً من CSS المخصصة كلما أمكن للحفاظ على الاتساق وتمكين tree-shaking
- استخدم رموز نظام التصميم للألوان والمسافات والطباعة بدلاً من القيم المشفرة
- قم بتجميع فئات المساعدة ذات الصلة منطقياً واستخدم ترتيباً متسقاً عبر المكونات
避免
- كتابة CSS مخصصة عندما تحقق فئات Tailwind المساعدة نفس النتيجة
- استخدام قيم عشوائية مثل bg-[#ff0000] بدلاً من ألوان رموز التصميم
- تجاوز أنماط الإطار باستخدام !important بدلاً من استخدام فئات المساعدة المناسبة