تصميم أنظمة التخطيط والواجهات سريعة الاستجابة بما في ذلك أنظمة الشبكة وأنماط flexbox وتخطيطات الشريط الجانبي ونقاط التوقف سريعة الاستجابة. يُستخدم عند تنظيم تخطيطات التطبيق، أو إنشاء تصميمات سريعة الاستجابة، أو إنشاء هياكل صفحات معقدة.
ثبّت مهارة الذكاء الاصطناعي designing-layouts بسرعة في بيئة التطوير لديك عبر سطر الأوامر
المصدر: ancoleman/ai-design-components.
This skill provides comprehensive guidance for creating responsive layout systems using modern CSS techniques. It covers grid systems, flexbox patterns, container queries, spacing systems, and mobile-first design strategies to build flexible, accessible interfaces that adapt seamlessly across devices.
For structured, two-dimensional layouts, use CSS Grid with design tokens.
For complex grid layouts and advanced patterns, see references/layout-patterns.md.
تصميم أنظمة التخطيط والواجهات سريعة الاستجابة بما في ذلك أنظمة الشبكة وأنماط flexbox وتخطيطات الشريط الجانبي ونقاط التوقف سريعة الاستجابة. يُستخدم عند تنظيم تخطيطات التطبيق، أو إنشاء تصميمات سريعة الاستجابة، أو إنشاء هياكل صفحات معقدة. المصدر: ancoleman/ai-design-components.
حقول وأوامر مستقرة للاقتباس في أنظمة الذكاء الاصطناعي والبحث.
npx skills add https://github.com/ancoleman/ai-design-components --skill designing-layoutsتصميم أنظمة التخطيط والواجهات سريعة الاستجابة بما في ذلك أنظمة الشبكة وأنماط flexbox وتخطيطات الشريط الجانبي ونقاط التوقف سريعة الاستجابة. يُستخدم عند تنظيم تخطيطات التطبيق، أو إنشاء تصميمات سريعة الاستجابة، أو إنشاء هياكل صفحات معقدة. المصدر: ancoleman/ai-design-components.
افتح الطرفية أو أداة سطر الأوامر لديك مثل Terminal أو iTerm أو Windows Terminal انسخ ونفّذ هذا الأمر: npx skills add https://github.com/ancoleman/ai-design-components --skill designing-layouts بعد التثبيت، سيتم إعداد المهارة تلقائيا في بيئة البرمجة بالذكاء الاصطناعي لديك وتصبح جاهزة للاستخدام في Claude Code أو Cursor أو OpenClaw
https://github.com/ancoleman/ai-design-components