إن إنشاء أنظمة تصميم متسقة أمر معقد ويستغرق وقتًا طويلاً. توفر هذه المهارة أنماطًا مجربة لبناء مكتبات مكونات قابلة للتطوير مع رموز تصميم مدمجة وإمكانية وصول مدمجة باستخدام Tailwind CSS.
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「tailwind-design-system」。 إنشاء زر باستخدام Tailwind CSS
預期結果:
- تم إنشاء مكون Button مع متغيرات CVA
- يتضمن: متغيرات default و destructive و outline و secondary و ghost و link
- خيارات الحجم: default و sm و lg و icon
- ميزات إمكانية الوصول: حلقة focus-visible وحالة المعطل
- آمن النوعية مع واجهات TypeScript
正在使用「tailwind-design-system」。 إعداد الوضع الداكن لتطبيقي
預期結果:
- مكون ThemeProvider مع اكتشاف تفضيل النظام
- تم إعداد متغيرات CSS في globals.css
- تم توسيع إعدادات Tailwind باستخدام darkMode: class
- مكون ThemeToggle مع أيقونات الشمس/القمر
- استمرارية localStorage لتفضيل المستخدم
安全審計
安全Static analysis detected 78 potential issues, all confirmed as false positives. The 'backtick execution' patterns are Markdown code fences (```) for code samples. URLs are documentation references. localStorage usage is standard theme persistence. No executable code or security risks present.
品質評分
你能建構什麼
مكتبة مكونات للشركات الناشئة
بناء مكتبة مكونات كاملة من الصفر لمنتج جديد، بما في ذلك الأزرار والبطاقات والنماذج والنوافذ المنبثقة مع تنسيق متسق.
ترحيل نظام التصميم
ترحيل قاعدة أكواد CSS أو styled-components الموجودة إلى Tailwind CSS مع بنية رموز تصميم مناسبة وأنماط مكونات.
تنفيذ نماذج يمكن الوصول إليها
إنشاء مكونات نماذج يمكن الوصول إليها مع التحقق من الصحة المناسب وحالات الأخطاء وتنقل لوحة المفاتيح وفقًا لإرشادات WCAG.
試試這些提示
إنشاء مكون Button قابل لإعادة الاستخدام باستخدام Tailwind CSS و CVA. تضمين متغيرات للأنماط primary و secondary و outline و ghost. إضافة متغيرات الحجم (sm, md, lg) وحالة معطل.
إنشاء ملف إعدادات Tailwind CSS مع رموز ألوان دلالية. تضمين ألوان primary و secondary و destructive و muted و accent و background و foreground و border. دعم كل من الوضع الفاتح والداكن باستخدام متغيرات CSS.
بناء مكون Card باستخدام نمط المكون المركب. إنشاء المكونات الفرعية Card و CardHeader و CardTitle و CardDescription و CardContent و CardFooter. استخدام forwardRef لتركيب React المناسب.
تنفيذ حل كامل للوضع الداكن مع مكون ThemeProvider. دعم اكتشاف تفضيل النظام والاستمرارية في localStorage والتبديل اليدوي. تضمين مكون زر ThemeToggle مع أيقونات الشمس/القمر.
最佳實務
- استخدام متغيرات CSS للسمات أثناء التشغيل ورموز التصميم
- تأليف المتغيرات مع CVA لواجهات مكونات آمنة النوعية
- تضمين حالات focus-visible دائمًا لإمكانية الوصول بلوحة المفاتيح
避免
- استخدام قيم تعسفية مثل h-[500px] بدلاً من توسيع السمة
- تضمين الألوان مباشرة في المكونات بدلاً من رموز التصميم الدلالية
- تخطي أنماط الوضع الداكن عند بناء مكونات جديدة