responsive_design

Rule: Mobile-first development with consistent breakpoints, fluid layouts, relative units, and touch-friendly targets.

This Skill provides Claude Code with specific guidance on how to adhere to coding standards as they relate to how it should handle frontend responsive.

Always start with mobile layout, then enhance for larger screens.

أنشئ تخطيطات سريعة الاستجابة ومتوافقة مع الأجهزة المحمولة أولاً باستخدام الحاويات المرنة والوحدات المرنة واستعلامات الوسائط والتصميم سهل الاستخدام الذي يعمل عبر جميع أحجام الشاشات. استخدم هذه المهارة عند إنشاء أو تعديل تخطيطات واجهة المستخدم، أو الشبكات المستجيبة، أو أنماط نقاط التوقف، أو التنقل عبر الهاتف المحمول، أو أي واجهة تحتاج إلى التكيف مع أحجام الشاشات المختلفة. يتم تطبيقه عند العمل باستخدام CSS سريع الاستجابة، واستعلامات الوسائط، وإعدادات إطار العرض، وتخطيطات flexbox/الشبكة، وتصميم الهاتف المحمول أولاً، وتعريفات نقاط التوقف (الهاتف المحمول، والكمبيوتر اللوحي، وسطح المكتب)، وحجم هدف اللمس، والوحدات النسبية (rem، em، %)، وتحسين الصورة لشاشات مختلفة، أو اختبار التخطيطات عبر أجهزة متعددة. يُستخدم في أي مهمة تتضمن دعمًا متعدد الأجهزة، أو أنماط تصميم سريعة الاستجابة، أو تخطيطات قابلة للتكيف. المصدر: vuralserhat86/antigravity-agentic-skills.