بناء تخطيطات ويب متجاوبة
غالبا ما تتعطل الواجهات المتجاوبة عبر الأجهزة والحاويات وأحجام المحتوى المختلفة. توفر هذه المهارة أنماط CSS ومكونات عملية للتخطيطات التكيفية.
انسخ هذا الطلب إلى Agent لديك. يتضمن صفحة Skill المعتمدة وملف manifest.
Review the Skillstore skill "responsive-design" from https://skillstore.io/skills/wshobson-responsive-design.md and its manifest at https://skillstore.io/api/skills/wshobson-responsive-design/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.يجب أن يواصل Agent عرض خطته وطلب أي تأكيد تفرضه سياسة الأمان.
استخدم هذه الروابط عندما يحتاج AI Agent أو crawler أو script إلى سياق نظيف بدلًا من قراءة الصفحة كاملة.
جارٍ استخدام "responsive-design". شبكة لوحة معلومات تنهار بشكل سيئ على الهواتف.
النتيجة المتوقعة:
خطة تخطيط تعطي الأولوية للجوال مع إعدادات افتراضية بعمود واحد، وتجميع للأجهزة اللوحية، وسلوك شبكة لسطح المكتب، وفحوصات للتجاوز.
جارٍ استخدام "responsive-design". مكون بطاقة يظهر في أشرطة جانبية ضيقة ومناطق محتوى واسعة.
النتيجة المتوقعة:
نهج قائم على استعلامات الحاوية يغير موضع صورة البطاقة، ومقياس النص، والتباعد بناء على عرض العنصر الأب.
جارٍ استخدام "responsive-design". صفحة تسويقية تحتوي على طباعة ثابتة تبدو كبيرة جدا على الجوال.
النتيجة المتوقعة:
مقياس خط سلس مع أحجام دنيا قابلة للقراءة، وأحجام قصوى مضبوطة، وإرشادات تباعد متوافقة.
AI review found the static matches to be false positives in documentation examples. The skill contains responsive design guidance, CSS and TSX snippets, and resource links, with no evidence of command execution, credential material, network behavior, reconnaissance, prompt injection, or malicious intent.
شارك تقرير التقييم المرتبط بالإصدار والشارة المحايدة وبطاقة التضمين والاستشهادات. تعرض Skillstore الأدلة من دون أن تقرر ما إذا كانت هذه المهارة آمنة.
https://skillstore.io/skills/wshobson-responsive-design/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/wshobson-responsive-design?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/wshobson-responsive-design?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/wshobson-responsive-design/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/wshobson-responsive-design.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>wshobson. (2026). responsive-design security audit report (audit version 5) [Author version unspecified]. Skillstore. https://skillstore.io/skills/wshobson-responsive-design/audits/5@techreport{wshobson-wshobson-responsive-design-2026,
author = {wshobson},
title = {responsive-design security audit report (audit version 5)},
institution = {Skillstore},
year = {2026},
number = {5},
url = {https://skillstore.io/skills/wshobson-responsive-design/audits/5},
note = {Author version unspecified}
}cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "responsive-design security audit report (audit version 5)"
version: "unspecified"
type: report
authors:
- name: "wshobson"
date-released: "2026-07-08"
url: "https://skillstore.io/skills/wshobson-responsive-design/audits/5"
identifiers:
- type: other
value: "skillstore:wshobson-responsive-design:audit:5"
description: "Skillstore immutable audit report identifier"
تبقى مهارة كل مؤلف عنصراً مستقلاً قابلاً للتثبيت. يُرتب المتغير الموصى به وفق أدلة Skillstore.
سبب تصدر هذا المتغير
supercent-io-responsive-design
2026-09-09
wshobson-responsive-design
2026-09-09
استخدم استعلامات الحاوية حتى تتكيف البطاقات داخل الشبكات والأشرطة الجانبية والعروض الضيقة على الجوال.
أنشئ مقاييس سلسة للخطوط والتباعد ونقاط التوقف يمكن للفرق إعادة استخدامها عبر المنتجات.
حوّل الجداول الكثيفة والتنقل إلى تخطيطات تظل قابلة للاستخدام على الشاشات الصغيرة.
استخدم مهارة responsive-design لجعل هذه الصفحة تعمل على الجوال والجهاز اللوحي وسطح المكتب. حافظ على النمط البصري الحالي.
استخدم مهارة responsive-design لاستبدال أحجام الخطوط والتباعد الثابتة بقيم سلسة محدودة النطاق. اشرح الأحجام الدنيا والقصوى المختارة.
استخدم مهارة responsive-design لإعادة هيكلة هذه المكونات باستخدام استعلامات الحاوية بدلا من نقاط التوقف المعتمدة على إطار العرض فقط.
استخدم مهارة responsive-design لاقتراح رموز نقاط التوقف، وقواعد استعلامات الحاوية، وقواعد الوسائط المتجاوبة، وخطوات التحقق لنظام التصميم هذا.
المؤلف
wshobsonالترخيص
MIT
مراجعة Skillstore
r1
تنبيه الإصدار
لم يعلن المؤلف عن إصدار.
مرجع
64ca8af0f54a325752f08bd54e52151061ea659a
حداثة الصيانة
٢٢/٧/٢٠٢٦
الاستخدام
12 تنزيلات · 201 مشاهدات
بنية الملفات
تحسين مطالبات LLM للإنتاج
غالبًا ما تفشل مطالبات LLM لأن التعليمات والأمثلة ومعايير التقييم تكون غير واضحة. توفر هذه المهارة قوالب وسير عمل لتحسين المطالبات في Claude وCodex وClaude Code والأدوات المشابهة.
إدارة التطوير المعتمد على السياق
تفقد المشاريع المدعومة بالذكاء الاصطناعي اتساقها عندما تكون أهداف المنتج، وخيارات الحزمة التقنية، وقواعد سير العمل مبعثرة. ترشد هذه المهارة Claude وCodex وClaude Code عبر عناصر سياق Conductor.
بناء نماذج مالية للشركات الناشئة
تحتاج فرق الشركات الناشئة إلى توقعات واضحة قبل أن تتمكن من تخطيط التوظيف وجمع التمويل واستخدام النقد. تنظم هذه المهارة الإيرادات والتكاليف ومدى كفاية النقد والسيناريوهات في مخرجات عملية للتخطيط المالي.
تصميم لوحات مؤشرات أداء رئيسية تقود القرارات
غالبا ما تبني الفرق لوحات معلومات تعرض الكثير من الأرقام لكنها لا توجه إلى اتخاذ إجراء. تساعد هذه المهارة Claude وCodex وClaude Code على اختيار مؤشرات أداء رئيسية ذات معنى، وتنظيم طرق العرض، وعرض المقاييس بوضوح.
كتابة تقارير ما بعد الحوادث بلا لوم
غالبا ما تصبح مراجعات الحوادث غير متسقة، أو مركزة على اللوم، أو صعبة التنفيذ. تساعد هذه المهارة Claude وCodex وClaude Code على صياغة تقارير منظمة لما بعد الحوادث مع جداول زمنية واضحة، وأسباب جذرية، ومالكين محددين.
بناء قصص بيانات واضحة
غالبا ما تفشل المقاييس الخام في إقناع أصحاب المصلحة أو دعم القرارات. تساعد هذه المهارة Claude وCodex وClaude Code على تحويل التحليل إلى سرديات واضحة ومرئيات وتوصيات.
Build Accessible Tailwind Interfaces
بواسطة nextlevelbuilder
Building consistent, responsive interfaces requires many component, styling, and accessibility decisions. This skill provides shadcn/ui patterns, Tailwind guidance, and focused automation.
تصميم صفحات هبوط مميزة
بواسطة 2389-research
تفشل صفحات الهبوط العامة في كسب الثقة أو جذب الانتباه. ترشد هذه المهارة Claude وCodex وClaude Code خلال الاكتشاف، والبنية، والاتجاه البصري، والحركة، والصقل الموجه نحو التحويل.
تحسين عمليات تصميم UI/UX
بواسطة A-Genno
غالبًا ما ينحرف عمل UI/UX عندما تفتقر الفرق إلى مبادئ مشتركة وعادات مراجعة. تمنح هذه المهارة Claude وCodex وClaude Code قائمة تحقق موجزة لاتخاذ قرارات التصميم.
تحسين تخطيط واجهة المستخدم والإيقاع البصري
بواسطة pbakaus
تجعل الواجهات المزدحمة والشبكات المتكررة المنتجات أصعب في التصفح السريع والثقة. ترشد هذه المهارة Claude وCodex وClaude Code نحو تباعد أقوى، وتسلسل هرمي أوضح، وتركيب متجاوب أفضل.
إنشاء واجهات بصرية راقية
بواسطة leonxlnx
غالبًا ما تبدو تخطيطات الذكاء الاصطناعي العامة مسطحة وقائمة على القوالب. توجه هذه المهارة Claude وCodex وClaude Code نحو أنظمة بصرية راقية، وقواعد حركة، وصقل واجهات مستخدم متجاوبة.
صقل واجهة المستخدم وتجربة المستخدم لتطبيقات الويب
بواسطة Dicklesworthstone
لا تزال العديد من تطبيقات الويب العاملة تبدو غير متسقة على سطح المكتب والجوال. تمنح هذه المهارة الوكلاء سير عمل تكراريًا للصقل من أجل تخطيطات وحالات وتفاصيل استجابة أكثر دقة.