web-styling
تنسيق واجهات React بشكل أسرع
غالبا ما تكرر فرق React قرارات التنسيق عبر المكونات والتخطيطات. توفر هذه المهارة أنماطا قابلة لإعادة الاستخدام لـ Tailwind وCSS Modules وCSS-in-JS والسمات والحركة والتخطيط.
التثبيت باستخدام Agent لدي
انسخ هذا الطلب إلى Agent لديك. يتضمن صفحة Skill المعتمدة وملف manifest.
Review the Skillstore skill "web-styling" from https://skillstore.io/skills/cjharmath-web-styling.md and its manifest at https://skillstore.io/api/skills/cjharmath-web-styling/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.يجب أن يواصل Agent عرض خطته وطلب أي تأكيد تفرضه سياسة الأمان.
موارد مهيّأة لـ Agents
استخدم هذه الروابط عندما يحتاج AI Agent أو crawler أو script إلى سياق نظيف بدلًا من قراءة الصفحة كاملة.
اختبرها
جارٍ استخدام "web-styling". نسق بطاقة منتج متجاوبة باستخدام Tailwind CSS.
النتيجة المتوقعة:
خطة تنسيق تبدأ من الهاتف المحمول تشمل المسافات والطباعة وحالات hover وألوان الوضع الداكن ومجموعات فئات قابلة لإعادة الاستخدام.
جارٍ استخدام "web-styling". أنشئ تنويعات أزرار primary وsecondary وoutline وdanger.
النتيجة المتوقعة:
مصفوفة تنويعات تغطي الأحجام والحالات وسلوك التعطيل ودمج الفئات وتنسيق التفاعل المتسق.
جارٍ استخدام "web-styling". خطط نظام سمات للوحة معلومات React.
النتيجة المتوقعة:
استراتيجية رموز موجزة للألوان والمسافات ومتغيرات CSS وتعيين الوضع الداكن وتنظيم ملفات المكونات.
التدقيق الأمني
آمنAll static findings are false positives caused by Markdown code fences, JavaScript template literals, styled-components CSS templates, inline code formatting, and CSS Grid terminology. No evidence found of prompt injection, data exfiltration, command execution, filesystem access, network access, or system reconnaissance intent in SKILL.md.
عوامل الخطر
⚙️ الأوامر الخارجية (42)
شارك واستشهد بهذا التقرير
شارك تقرير التقييم المرتبط بالإصدار والشارة المحايدة وبطاقة التضمين والاستشهادات. تعرض Skillstore الأدلة من دون أن تقرر ما إذا كانت هذه المهارة آمنة.
نسخ رابط التقرير
https://skillstore.io/skills/cjharmath-web-styling/audits/7?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportشارة Markdown
[](https://skillstore.io/skills/cjharmath-web-styling?utm_source=security_passport_badge)شارة HTML
<a href="https://skillstore.io/skills/cjharmath-web-styling?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/cjharmath-web-styling/security.svg" alt="Skillstore security assessment" loading="lazy"></a>بطاقة قابلة للتضمين
<iframe src="https://skillstore.io/embed/skills/cjharmath-web-styling.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
CJHarmath. (2026). web-styling security audit report (audit version 7) [Author version unspecified]. Skillstore. https://skillstore.io/skills/cjharmath-web-styling/audits/7اقتباس BibTeX
@techreport{cjharmath-cjharmath-web-styling-2026,
author = {CJHarmath},
title = {web-styling security audit report (audit version 7)},
institution = {Skillstore},
year = {2026},
number = {7},
url = {https://skillstore.io/skills/cjharmath-web-styling/audits/7},
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: "web-styling security audit report (audit version 7)"
version: "unspecified"
type: report
authors:
- name: "CJHarmath"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/cjharmath-web-styling/audits/7"
identifiers:
- type: other
value: "skillstore:cjharmath-web-styling:audit:7"
description: "Skillstore immutable audit report identifier"
تقييم Skillstore
سبب هذا التقييم موثوقية الأدلة: مرتفعما الذي يمكنك بناؤه
بناء مكونات React قابلة لإعادة الاستخدام
أنشئ أزرارا وبطاقات ونوافذ منبثقة وأساسيات تخطيط بتنويعات متسقة وفئات متجاوبة.
توثيق نظام تصميم
وحّد المسافات ورموز الألوان وقيم الوضع الداكن واتفاقيات تنسيق المكونات.
إطلاق شاشات منتج مصقولة
طبق أنماط تنسيق مثبتة بسرعة دون إنشاء معمارية تنسيق مخصصة من الصفر.
جرّب هذه الموجّهات
أنشئ إرشادات تنسيق لمكون React باسم [component]. استخدم Tailwind CSS والمسافات المتجاوبة وحالات hover ودعم الوضع الداكن.
راجع متطلبات تنسيق React هذه واقترح نمط تنويعات قابلا لإعادة الاستخدام باستخدام clsx أو tailwind-merge أو cva. اشرح متى يناسب كل خيار.
صمم نهجا للسمات في React من أجل [product]. ضمّن رموز الألوان ورموز المسافات ومتغيرات CSS وسلوك الوضع الداكن وتنظيم الملفات.
دقق نهج تنسيق React هذا من حيث قابلية الصيانة. حدد الأنماط المكررة وفجوات الرموز ومشكلات التجاوب ومخاوف الحركة وخطوات الترحيل.
أفضل الممارسات
- استخدم قواعد تجاوب تبدأ من الهاتف المحمول واجعل قيود التخطيط صريحة.
- مركز رموز التصميم وتعريفات التنويعات وقيم الوضع الداكن.
- استخدم مساعدات دمج الفئات عندما تقبل المكونات تجاوزات خارجية للفئات.
تجنب
- تكرار سلاسل فئات التنويعات الطويلة عبر مكونات متعددة.
- خلط ألوان ومسافات عشوائية دون رموز تصميم مشتركة.
- إضافة حركات دون قواعد حالة أو حدود للحركة أو سلوك بديل.