ui-design-system

Before generating any UI code, check the project for existing tokens:

If no design tokens exist, generate a starter set and ask the user to confirm before proceeding (see Edge Cases).

Define colors as CSS custom properties consumed by Tailwind. Never use hardcoded hex/rgb values in components.

ينشئ مكونات وتخطيطات ورموز تصميم متسقة لواجهة المستخدم باتباع نظام التصميم. يفرض معايير التباعد واللون والطباعة وإمكانية الوصول عبر مشاريع React/TypeScript. يُستخدم عند إنشاء مكونات واجهة مستخدم جديدة، أو إنشاء تخطيطات للصفحة، أو اختيار الألوان أو الطباعة، أو إعداد رموز التصميم المميزة، أو مراجعة كود واجهة المستخدم للتأكد من اتساق التصميم. يغطي شبكة تباعد تبلغ 8 نقاط، واستخدام رمز Tailwind CSS، وأوليات shadcn/ui، والتوافق مع WCAG 2.1 AA، ونقاط التوقف سريعة الاستجابة، وبنية HTML الدلالية، وواجهات مكونات TypeScript. لا يغطي تنفيذ الواجهة الخلفية (استخدم python-backend-expert)، أو الاختبار (استخدم أنماط اختبار التفاعل)، أو النشر (استخدم خط أنابيب النشر). المصدر: hieutrtr/ai1-skills.