القيود المبدئية لبناء واجهات أفضل مع الوكلاء. يُستخدم عند إنشاء مكونات واجهة المستخدم، أو تنفيذ الرسوم المتحركة، أو تصميم التخطيطات، أو مراجعة إمكانية الوصول إلى الواجهة الأمامية، أو العمل مع Tailwind CSS، أو الحركة/التفاعل، أو العناصر الأولية التي يمكن الوصول إليها مثل Radix/Base UI.
ثبّت مهارة الذكاء الاصطناعي ui-design بسرعة في بيئة التطوير لديك عبر سطر الأوامر
المصدر: ckorhonen/claude-skills.
| Tailwind CSS | MUST use defaults (spacing, radius, shadows) before custom values | | Animation library | MUST use motion/react (formerly framer-motion) for JS animation | | CSS animation | SHOULD use tw-animate-css for entrance and micro-animations | | Class logic | MUST use cn utility (clsx + tailwind-merge) |
| Interactive primitives | MUST use accessible primitives (Base UI, React Aria, Radix) for keyboard/focus behavior | | Existing components | MUST use project's existing primitives first | | Consistency | NEVER mix primitive systems within the same interaction surface | | New primitives | SHOULD prefer Base UI if compatible with stack |
| Icon buttons | MUST add aria-label to icon-only buttons | | Custom behavior | NEVER rebuild keyboard or focus behavior by hand unless explicitly requested |
حقول وأوامر مستقرة للاقتباس في أنظمة الذكاء الاصطناعي والبحث.
npx skills add https://github.com/ckorhonen/claude-skills --skill ui-designالقيود المبدئية لبناء واجهات أفضل مع الوكلاء. يُستخدم عند إنشاء مكونات واجهة المستخدم، أو تنفيذ الرسوم المتحركة، أو تصميم التخطيطات، أو مراجعة إمكانية الوصول إلى الواجهة الأمامية، أو العمل مع Tailwind CSS، أو الحركة/التفاعل، أو العناصر الأولية التي يمكن الوصول إليها مثل Radix/Base UI. المصدر: ckorhonen/claude-skills.
افتح الطرفية أو أداة سطر الأوامر لديك مثل Terminal أو iTerm أو Windows Terminal انسخ ونفّذ هذا الأمر: npx skills add https://github.com/ckorhonen/claude-skills --skill ui-design بعد التثبيت، سيتم إعداد المهارة تلقائيا في بيئة البرمجة بالذكاء الاصطناعي لديك وتصبح جاهزة للاستخدام في Claude Code أو Cursor أو OpenClaw
https://github.com/ckorhonen/claude-skills