tailwind-design-system
أنظمة تصميم Tailwind
تميل أنظمة التصميم غالباً دون وجود رموز وأنماط واضحة. توفر هذه المهارة هياكل Tailwind لتوحيد المكونات والموضوعات والتخطيطات المتجاوبة عبر قاعدة الشفرة الخاصة بك.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "tailwind-design-system". إعداد نظام تصميم Tailwind مع رموز ونمط زر
النتيجة المتوقعة:
- تعريف رموز الألوان الدلالية ومتغيرات نصف القطر للموضوعات الفاتحة والداكنة
- تحديد زر CVA مع المتغيرات والأحجام وسلوك الحلقة البؤرية
- تضمين ملاحظات إمكانية الوصول للتنقل بلوحة المفاتيح وحالات الخطأ
استخدام "tailwind-design-system". إنشاء تنفيذ الوضع الداكن لتطبيق React
النتيجة المتوقعة:
- توفير ThemeProvider باستخدام متغيرات CSS وlocalStorage
- عرض مكون تبديل السمة مع تبديل الأيقونة
- تضمين اكتشاف تفضيلات النظام باستخدام matchMedia
استخدام "tailwind-design-system". بناء مكونات نموذج متاحة مع حالات الخطأ
النتيجة المتوقعة:
- إنشاء مكون Input مع aria-invalid ورسائل الخطأ
- إضافة مكون Label مع ارتباط htmlFor المناسب
- تضمين أدوات الحلقة البؤرية للتنقل بلوحة المفاتيح
التدقيق الأمني
آمنPure documentation skill with no executable code. Contains only markdown guidance and code examples for Tailwind CSS design systems. The static analyzer's 100/100 risk score is a false positive caused by misinterpreting Tailwind CSS opacity syntax (e.g., bg-primary/90) as cryptographic algorithms, and TypeScript template literals as shell backticks. The skill-report.json already contains a completed security audit confirming this skill is safe.
عوامل الخطر
🌐 الوصول إلى الشبكة (5)
⚙️ الأوامر الخارجية (25)
درجة الجودة
ماذا يمكنك بناءه
توحيد مكونات الفريق
إنشاء رموز Tailwind ومكونات أساسية مشتركة لمحاذاة فرق المنتجات المتعددة.
بناء بنية الرموز
تعيين ألوان العلامة التجارية للرموز الدلالية وتوصيلها بتكوين سمة Tailwind.
شحن التخطيطات المتجاوبة
استخدام أنماط الشبكة والحاوية لتوسيع التخطيطات بشكل متسق عبر نقاط التوقف.
جرّب هذه الموجهات
إنشاء إعداد رموز Tailwind مع الألوان الدلالية ومتغيرات نصف القطر للموضوعات الفاتحة والداكنة.
تصميم متغيرات زر CVA مع الأحجام والحالات وملاحظات إمكانية الوصول لمكتبة مكونات مشتركة.
توفير أنماط مكونات الإدخال والتسمية مع معالجة الأخطاء وتوجيه ARIA.
تعريف نمط أداة الشبكة والحاوية المتجاوبة لبطاقات المنتج عبر نقاط التوقف.
أفضل الممارسات
- استخدام الرموز الدلالية وتعيينها لمتغيرات CSS لموضوعات وقت التشغيل
- توثيق متغيرات المكونات والحالات الافتراضية بوضوح لاستهلاك الفريق
- اختبار حالات التركيز والتنقل بلوحة المفاتيح على جميع المكونات التفاعلية
تجنب
- ترميز ألوان العلامة التجارية مباشرة في فئات المكونات بدلاً من استخدام الرموز
- تخطي تعريفات رموز الوضع الداكن والاختبار
- استخدام القيم التعسفية مثل bg-[#123456] بدلاً من توسيع السمة