ما هي css-container-queries؟
تطبيق استعلامات حاوية CSS للتصميم سريع الاستجابة القائم على المكونات. يُستخدم عند تنفيذ مكونات سريعة الاستجابة تتكيف مع حجم الحاوية الخاصة بها بدلاً من حجم إطار العرض. المصدر: flpbalada/my-opencode-config.
·css-container-queries
</>
css-container-queries
✓flpbalada/my-opencode-configGitHub: flpbalada/my-opencode-configالمصدر: flpbalada/my-opencode-config
تطبيق استعلامات حاوية CSS للتصميم سريع الاستجابة القائم على المكونات. يُستخدم عند تنفيذ مكونات سريعة الاستجابة تتكيف مع حجم الحاوية الخاصة بها بدلاً من حجم إطار العرض.
كيفية تثبيت css-container-queries
ثبّت مهارة الذكاء الاصطناعي css-container-queries بسرعة في بيئة التطوير لديك عبر سطر الأوامر
- افتح الطرفية: افتح الطرفية أو أداة سطر الأوامر لديك مثل Terminal أو iTerm أو Windows Terminal
- نفّذ أمر التثبيت: انسخ ونفّذ هذا الأمر: npx skills add https://github.com/flpbalada/my-opencode-config --skill css-container-queries
- تحقق من التثبيت: بعد التثبيت، سيتم إعداد المهارة تلقائيا في بيئة البرمجة بالذكاء الاصطناعي لديك وتصبح جاهزة للاستخدام في Claude Code أو Cursor أو OpenClaw
المصدر: flpbalada/my-opencode-config.
SKILL.md
عرض النص الخامA guide for implementing container-based responsive design using CSS container queries and Tailwind CSS.
Container queries enable styling elements based on their container's size rather than the viewport size. Unlike media queries that respond to the browser window, container queries make components self-contained and truly reusable.
| Responds to | Viewport size | Container size | | Reusability | Layout-dependent | Fully portable | | Use case | Page layouts | Component styling | | Syntax | @media | @container |
تطبيق استعلامات حاوية CSS للتصميم سريع الاستجابة القائم على المكونات. يُستخدم عند تنفيذ مكونات سريعة الاستجابة تتكيف مع حجم الحاوية الخاصة بها بدلاً من حجم إطار العرض. المصدر: flpbalada/my-opencode-config.
حقائق جاهزة للاقتباس
حقول وأوامر مستقرة للاقتباس في أنظمة الذكاء الاصطناعي والبحث.
- أمر التثبيت
npx skills add https://github.com/flpbalada/my-opencode-config --skill css-container-queries- الفئة
- </>أدوات التطوير
- موثق
- ✓
- أول ظهور
- 2026-02-01
- آخر تحديث
- 2026-03-10
إجابات سريعة
كيف أثبّت css-container-queries؟
افتح الطرفية أو أداة سطر الأوامر لديك مثل Terminal أو iTerm أو Windows Terminal انسخ ونفّذ هذا الأمر: npx skills add https://github.com/flpbalada/my-opencode-config --skill css-container-queries بعد التثبيت، سيتم إعداد المهارة تلقائيا في بيئة البرمجة بالذكاء الاصطناعي لديك وتصبح جاهزة للاستخدام في Claude Code أو Cursor أو OpenClaw
أين مستودع المصدر؟
https://github.com/flpbalada/my-opencode-config
التفاصيل
- الفئة
- </>أدوات التطوير
- المصدر
- skills.sh
- أول ظهور
- 2026-02-01