إن إنشاء أنظمة تصميم متسقة أمر معقد ويستغرق وقتًا طويلاً. توفر هذه المهارة أنماطًا مجربة لبناء مكتبات مكونات قابلة للتطوير مع رموز تصميم مدمجة وإمكانية وصول مدمجة باستخدام 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] بدلاً من توسيع السمة
- تضمين الألوان مباشرة في المكونات بدلاً من رموز التصميم الدلالية
- تخطي أنماط الوضع الداكن عند بناء مكونات جديدة