📦

responsive-design

Name: responsive-design
Author: supercent-io

مراجعة المحتوى r1 آمن ⚙️ الأوامر الخارجية🌐 الوصول إلى الشبكة📁 الوصول إلى نظام الملفات

بناء تخطيطات ويب متجاوبة

تفشل التخطيطات الثابتة على الهواتف والأجهزة اللوحية والشاشات العريضة. ترشد هذه المهارة إلى CSS بمنهجية الجوال أولاً، ونقاط التوقف، والصور، وأنماط التخطيط.

يدعم: Claude Codex Code(CC)

🥉 77 برونزي

التثبيت باستخدام Agent لدي

انسخ هذا الطلب إلى Agent لديك. يتضمن صفحة Skill المعتمدة وملف manifest.

طلب الوكيل

Review the Skillstore skill "responsive-design" from https://skillstore.io/skills/supercent-io-responsive-design.md and its manifest at https://skillstore.io/api/skills/supercent-io-responsive-design/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

يجب أن يواصل Agent عرض خطته وطلب أي تأكيد تفرضه سياسة الأمان.

موارد مهيّأة لـ Agents

استخدم هذه الروابط عندما يحتاج AI Agent أو crawler أو script إلى سياق نظيف بدلًا من قراءة الصفحة كاملة.

تفاصيل Markdown GET /skills/supercent-io-responsive-design.md manifest موقَّع GET /api/skills/supercent-io-responsive-design/manifest lockfile موقَّع GET /api/skills/supercent-io-responsive-design/lockfile

اختبرها

جارٍ استخدام "responsive-design". تحتاج صفحة عرض منتجات إلى العمل على الجوال والجهاز اللوحي وسطح المكتب والشاشات الكبيرة.

النتيجة المتوقعة:

خطة شبكة بمنهجية الجوال أولاً مع حالات عمود واحد وعمودين وثلاثة أعمدة وأربعة أعمدة، بالإضافة إلى إرشادات للتباعد وتحجيم الصور.

جارٍ استخدام "responsive-design". يحتاج شريط تنقل سطح المكتب إلى قائمة للجوال.

النتيجة المتوقعة:

نهج تنقل متجاوب يتضمن زر تبديل للجوال، وتسميات حالة قابلة للوصول، وروابط أفقية على الشاشات الأوسع.

جارٍ استخدام "responsive-design". تستخدم صفحة قديمة عروضاً ثابتة وصوراً كبيرة.

النتيجة المتوقعة:

قائمة تحقق لإعادة الهيكلة تغطي حاويات max-width، والوحدات النسبية، والصور المتجاوبة، وخطوات اختبار منفذ العرض.

التدقيق الأمني

آمن

v5 • ٧‏/٧‏/٢٠٢٦ فتح التقرير المرتبط بالإصدار

All static findings were false positives caused by Markdown code fences, CSS examples, reference links, and related-skill documentation links. No prompt injection, malware intent, credential access, data exfiltration, runtime command execution, or filesystem access was found in SKILL.md or SKILL.toon.

الملفات التي تم فحصها

529

الأسطر التي تم تحليلها

عناصر المراجعة

تم تجاهل الإيجابيات الكاذبة

عوامل الخطر

⚙️ الأوامر الخارجية (36)

🌐 الوصول إلى الشبكة (4)

SKILL.md:496 SKILL.md:497 SKILL.md:498 SKILL.md:499

📁 الوصول إلى نظام الملفات (2)

SKILL.md:509 SKILL.md:510

لم يكتشف أحدث تدقيق ثابت ودلالي مكتمل أي نتائج أمنية مؤكدة. ولا يثبت ذلك أن المهارة خالية من الآثار الجانبية.

دقّقه: codex عرض سجل التدقيق →

شارك واستشهد بهذا التقرير

شارك تقرير التقييم المرتبط بالإصدار والشارة المحايدة وبطاقة التضمين والاستشهادات. تعرض Skillstore الأدلة من دون أن تقرر ما إذا كانت هذه المهارة آمنة.

فتح التقرير المرتبط بالإصدار

نسخ رابط التقرير

https://skillstore.io/skills/supercent-io-responsive-design/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

شارة Markdown

[![Skillstore security assessment](https://skillstore.io/badges/skills/supercent-io-responsive-design/security.svg)](https://skillstore.io/skills/supercent-io-responsive-design?utm_source=security_passport_badge)

شارة HTML

<a href="https://skillstore.io/skills/supercent-io-responsive-design?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/supercent-io-responsive-design/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

بطاقة قابلة للتضمين

<iframe src="https://skillstore.io/embed/skills/supercent-io-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>

الاستشهادات الأكاديمية (APA · BibTeX · CFF)

اقتباس APA

supercent-io. (2026). responsive-design security audit report (audit version 5) [Author version unspecified]. Skillstore. https://skillstore.io/skills/supercent-io-responsive-design/audits/5

اقتباس BibTeX

@techreport{supercent-io-supercent-io-responsive-design-2026,
  author = {supercent-io},
  title = {responsive-design security audit report (audit version 5)},
  institution = {Skillstore},
  year = {2026},
  number = {5},
  url = {https://skillstore.io/skills/supercent-io-responsive-design/audits/5},
  note = {Author version unspecified}
}

CITATION.cff

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: "supercent-io"
date-released: "2026-07-07"
url: "https://skillstore.io/skills/supercent-io-responsive-design/audits/5"
identifiers:
  - type: other
    value: "skillstore:supercent-io-responsive-design:audit:5"
    description: "Skillstore immutable audit report identifier"

مقارنة المتغيرات

2 متغيرات قابلة للتثبيت

تبقى مهارة كل مؤلف عنصراً مستقلاً قابلاً للتثبيت. يُرتب المتغير الموصى به وفق أدلة Skillstore.

سبب تصدر هذا المتغير

أعلى تقييم في Skillstore

المؤلف / المصدر تقييم Skillstore موثوقية الأدلة استخدام Skillstore تم التحديث

supercent-io موصى به الحالي

supercent-io-responsive-design

تقييم Skillstore 77

موثوقية الأدلة مرتفع

استخدام Skillstore 31

تم التحديث

2026-09-09

wshobson

wshobson-responsive-design

تقييم Skillstore 75

موثوقية الأدلة مرتفع

استخدام Skillstore 19

تم التحديث

2026-09-09

تقييم Skillstore

سبب هذا التقييم موثوقية الأدلة: مرتفع

الهندسة المعمارية

قابلية الصيانة

المحتوى

المجتمع

الامتثال للمواصفات

ما الذي يمكنك بناؤه

إطلاق صفحة بمنهجية الجوال أولاً

أنشئ تخطيطاً يبدأ بعرض الهاتف ويتوسع بسلاسة لشاشات الأجهزة اللوحية وسطح المكتب.

تحديث تخطيط ثابت

استبدل العروض الثابتة بشبكات مرنة، وتباعد نسبي، وتعديلات قائمة على نقاط التوقف.

إعداد متطلبات واجهة مستخدم متجاوبة

وثق سلوك نقاط التوقف، ومعالجة الصور، وتوقعات التخطيط لواجهة ويب جديدة.

جرّب هذه الموجّهات

إنشاء تخطيط متجاوب أساسي

استخدم مهارة responsive-design لإنشاء تخطيط بمنهجية الجوال أولاً لصفحة هبوط بسيطة تحتوي على أقسام للرأس والمحتوى والتذييل.

تحويل CSS ثابت

استخدم مهارة responsive-design لتحويل هذا التخطيط ذي العرض الثابت إلى تخطيط متجاوب بمنهجية الجوال أولاً مع نقاط توقف واضحة.

تصميم بطاقات متجاوبة

استخدم مهارة responsive-design لتصميم شبكة بطاقات تتغير من عمود واحد على الجوال إلى أربعة أعمدة على الشاشات الكبيرة.

تدقيق السلوك المتجاوب

استخدم مهارة responsive-design لتدقيق هذه الواجهة بحثاً عن تجاوز التخطيط، وتكرار نقاط التوقف، وتحجيم الصور، ومشكلات الطباعة.

أفضل الممارسات

ابدأ بأصغر شاشة مدعومة وأضف التعقيد عند نقاط التوقف الأوسع.
استخدم Grid للتخطيطات ثنائية الأبعاد وFlexbox للمحاذاة أحادية البعد.
اختبر المحتوى الحقيقي عند كل نقطة توقف قبل إنهاء التباعد وسلوك الصور.

تجنب

لا تعتمد على عروض صفحات ثابتة لحاويات التخطيط الأساسية.
لا تكرر الأنماط نفسها عبر كل نقطة توقف.
لا تتعامل مع الصور المتجاوبة كأمر اختياري عندما يكون أداء الصفحة مهماً.

الأسئلة المتكررة

هل تكتب هذه المهارة CSS جاهزاً للإنتاج؟

توفر أنماطاً وأمثلة موجهة للإنتاج، لكن يجب أن يطابق الكود النهائي اصطلاحات مشروعك.

هل يمكنها المساعدة في التخطيطات الحالية؟

نعم. يمكنها إرشاد التحويل من تخطيطات سطح مكتب ثابتة إلى تخطيطات مرنة بمنهجية الجوال أولاً.

هل تدعم CSS Grid وFlexbox؟

نعم. تشرح متى تكون كل طريقة تخطيط مفيدة وتتضمن أمثلة لكلتيهما.

هل تتضمن إرشادات للصور المتجاوبة؟

نعم. تغطي استخدام srcset وsizes وعناصر picture وخلفيات CSS واستخدام image-set.

هل تحل محل اختبار إمكانية الوصول؟

لا. تذكر مخاوف إمكانية الوصول ذات الصلة، لكنها لا تجري تدقيقاً كاملاً لإمكانية الوصول.

ما الأدوات التي يمكنها استخدام هذه المهارة؟

يسرد التقرير التوافق مع Claude وCodex وClaude Code.

تفاصيل المطور

المؤلف

supercent-io

الترخيص

MIT

مراجعة Skillstore

تنبيه الإصدار

لم يعلن المؤلف عن إصدار.

المستودع

https://github.com/supercent-io/skills-template/tree/main/.agent-skills/responsive-design/

مرجع

f93e9bb0daca99badb6a7e574b97737155d57cb3

حداثة الصيانة

٢٢‏/٧‏/٢٠٢٦

الاستخدام

23 تنزيلات · 139 مشاهدات

بنية الملفات

📄 SKILL.md

📄 SKILL.toon

responsive-design

التثبيت باستخدام Agent لدي

موارد مهيّأة لـ Agents

اختبرها

التدقيق الأمني

عوامل الخطر

نسخ رابط التقرير

شارة Markdown

شارة HTML

بطاقة قابلة للتضمين

اقتباس APA

اقتباس BibTeX

CITATION.cff

مقارنة المتغيرات

تقييم Skillstore

ما الذي يمكنك بناؤه

إطلاق صفحة بمنهجية الجوال أولاً

تحديث تخطيط ثابت

إعداد متطلبات واجهة مستخدم متجاوبة

جرّب هذه الموجّهات

أفضل الممارسات

تجنب

الأسئلة المتكررة

تفاصيل المطور

المزيد من supercent-io

prompt-repetition

api-design

code-refactoring

user-guide-writing

debugging

task-planning

frontend-design

ui-design

extract

vercel-react-view-transitions

react-email

vue-best-practices

responsive-design

التثبيت باستخدام Agent لدي

موارد مهيّأة لـ Agents

اختبرها

التدقيق الأمني

عوامل الخطر

نسخ رابط التقرير

شارة Markdown

شارة HTML

بطاقة قابلة للتضمين

اقتباس APA

اقتباس BibTeX

CITATION.cff

مقارنة المتغيرات

تقييم Skillstore

ما الذي يمكنك بناؤه

إطلاق صفحة بمنهجية الجوال أولاً

تحديث تخطيط ثابت

إعداد متطلبات واجهة مستخدم متجاوبة

جرّب هذه الموجّهات

أفضل الممارسات

تجنب

الأسئلة المتكررة

تفاصيل المطور

المزيد من supercent-io

prompt-repetition

api-design

code-refactoring

user-guide-writing

debugging

task-planning

مهارات ذات صلة

frontend-design

ui-design

extract

vercel-react-view-transitions

react-email

vue-best-practices