📦
landing-page-design
79تصميم صفحات هبوط مميزة
تفشل صفحات الهبوط العامة في كسب الثقة أو جذب الانتباه. ترشد هذه المهارة Claude وCodex وClaude Code خلال الاكتشاف، والبنية، والاتجاه البصري، والحركة، والصقل الموجه نحو التحويل.
التصميم والإبداع عرض
المهارات css-development-refactor
📦
css-development-refactor
مراجعة المحتوى r1 آمن ⚙️ الأوامر الخارجية📁 الوصول إلى نظام الملفات
إعادة هيكلة CSS إلى مكوّنات دلالية
تجعل فئات الأدوات المكررة والأنماط المضمنة كود الواجهة الأمامية أصعب في الصيانة. ترشد هذه المهارة Claude وCodex وClaude Code خلال إعادة هيكلة CSS دلالية مع الاختبارات.
يدعم: Claude Codex Code(CC)
التثبيت باستخدام Agent لدي
انسخ هذا الطلب إلى Agent لديك. يتضمن صفحة Skill المعتمدة وملف manifest.
طلب الوكيل
Review the Skillstore skill "css-development-refactor" from https://skillstore.io/skills/2389-research-css-development-refactor.md and its manifest at https://skillstore.io/api/skills/2389-research-css-development-refactor/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.يجب أن يواصل Agent عرض خطته وطلب أي تأكيد تفرضه سياسة الأمان.
موارد مهيّأة لـ Agents
استخدم هذه الروابط عندما يحتاج AI Agent أو crawler أو script إلى سياق نظيف بدلًا من قراءة الصفحة كاملة.
اختبرها
جارٍ استخدام "css-development-refactor". يكرر مكوّن فئات أدوات الزر الطويلة نفسها في العديد من الملفات.
النتيجة المتوقعة:
تحدد المهارة النمط المتكرر، وتقترح فئة زر دلالية، وتحدّث الترميز، وتوصي باختبارات للمحدد الجديد.
جارٍ استخدام "css-development-refactor". يحتوي تخطيط بطاقة على أنماط السمة الفاتحة ولكنه لا يدعم الوضع الداكن.
النتيجة المتوقعة:
تضيف المهارة متغيرات وضع داكن مطابقة، وتوثّق غرض الفئة الدلالية، وتطلب تحققًا بصريًا في كلتا السمتين.
جارٍ استخدام "css-development-refactor". يحتاج فريق إلى ملخص بعد فرع تنظيف CSS.
النتيجة المتوقعة:
تقدم المهارة تقريرًا عن الفئات المنشأة والملفات المحدّثة وتغطية الاختبارات وفحوصات السلوك والخطوات التالية العملية للمراجعة.
التدقيق الأمني
آمنv7 • ٦/٧/٢٠٢٦ فتح التقرير المرتبط بالإصدار
The static findings are false positives caused by Markdown backticks, fenced examples, hardcoded local grep and npm test commands, and test-only file reads. No prompt injection, data exfiltration, unauthorized network activity, or dangerous execution intent was found in SKILL.md.
1
الملفات التي تم فحصها
416
الأسطر التي تم تحليلها
0
عناصر المراجعة
0
تم تجاهل الإيجابيات الكاذبة
عوامل الخطر
⚙️ الأوامر الخارجية (53)
SKILL.md:12 SKILL.md:17 SKILL.md:30 SKILL.md:32 SKILL.md:33 SKILL.md:34 SKILL.md:50-61 SKILL.md:61-78 SKILL.md:78-95 SKILL.md:95-112 SKILL.md:112-116 SKILL.md:116-134 SKILL.md:134-142 SKILL.md:142-146 SKILL.md:146-160 SKILL.md:160-165 SKILL.md:165-172 SKILL.md:172-176 SKILL.md:176-179 SKILL.md:179-187 SKILL.md:187-197 SKILL.md:197-200 SKILL.md:200-201 SKILL.md:201-202 SKILL.md:202-206 SKILL.md:206-212 SKILL.md:212-231 SKILL.md:231-235 SKILL.md:235-238 SKILL.md:238-242 SKILL.md:242-245 SKILL.md:245-250 SKILL.md:250-265 SKILL.md:265-266 SKILL.md:266-276 SKILL.md:276-279 SKILL.md:279-284 SKILL.md:284-287 SKILL.md:287-289 SKILL.md:289-305 SKILL.md:305-314 SKILL.md:314-327 SKILL.md:327-329 SKILL.md:329-359 SKILL.md:359-365 SKILL.md:365-366 SKILL.md:366-367 SKILL.md:367-370 SKILL.md:370-371 SKILL.md:371-372 SKILL.md:372-373 SKILL.md:373-374 SKILL.md:374-405
📁 الوصول إلى نظام الملفات (2)
لم يكتشف أحدث تدقيق ثابت ودلالي مكتمل أي نتائج أمنية مؤكدة. ولا يثبت ذلك أن المهارة خالية من الآثار الجانبية.
دقّقه: codex عرض سجل التدقيق →
شارك واستشهد بهذا التقرير
شارك تقرير التقييم المرتبط بالإصدار والشارة المحايدة وبطاقة التضمين والاستشهادات. تعرض Skillstore الأدلة من دون أن تقرر ما إذا كانت هذه المهارة آمنة.
نسخ رابط التقرير
https://skillstore.io/skills/2389-research-css-development-refactor/audits/7?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportشارة Markdown
[](https://skillstore.io/skills/2389-research-css-development-refactor?utm_source=security_passport_badge)شارة HTML
<a href="https://skillstore.io/skills/2389-research-css-development-refactor?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/2389-research-css-development-refactor/security.svg" alt="Skillstore security assessment" loading="lazy"></a>بطاقة قابلة للتضمين
<iframe src="https://skillstore.io/embed/skills/2389-research-css-development-refactor.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
2389-research. (2026). css-development-refactor security audit report (audit version 7) [Author version unspecified]. Skillstore. https://skillstore.io/skills/2389-research-css-development-refactor/audits/7اقتباس BibTeX
@techreport{2389-research-2389-research-css-development-refactor-2026,
author = {2389-research},
title = {css-development-refactor security audit report (audit version 7)},
institution = {Skillstore},
year = {2026},
number = {7},
url = {https://skillstore.io/skills/2389-research-css-development-refactor/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: "css-development-refactor security audit report (audit version 7)"
version: "unspecified"
type: report
authors:
- name: "2389-research"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/2389-research-css-development-refactor/audits/7"
identifiers:
- type: other
value: "skillstore:2389-research-css-development-refactor:audit:7"
description: "Skillstore immutable audit report identifier"
تقييم Skillstore
سبب هذا التقييم موثوقية الأدلة: مرتفع 55
الهندسة المعمارية
85
قابلية الصيانة
87
المحتوى
69
المجتمع
83
الامتثال للمواصفات
ما الذي يمكنك بناؤه
تنظيف المكوّنات كثيفة فئات الأدوات
حوّل سلاسل فئات الأدوات المتكررة إلى فئات دلالية قابلة لإعادة الاستخدام لتسهيل الصيانة.
إضافة الوضع الداكن أثناء إعادة الهيكلة
وسّع الفئات المعاد هيكلتها بمتغيرات الوضع الداكن مع الحفاظ على السمة الفاتحة الحالية.
تحضير عمليات ترحيل أنماط أكثر أمانًا
وثّق المحددات المتغيرة، وأضف اختبارات، وتحقق من السلوك قبل دمج عمل تنظيف CSS.
جرّب هذه الموجّهات
العثور على أهداف إعادة هيكلة CSS
استخدم هذه المهارة لفحص مكوّناتي وسرد الأنماط المضمنة أو مجموعات فئات الأدوات المتكررة التي يجب أن تصبح فئات CSS دلالية.
استخراج الفئات الدلالية
أعد هيكلة فئات أدوات الأزرار والبطاقات المتكررة إلى فئات CSS دلالية. أعد استخدام أنماط components.css الحالية قبل إنشاء فئات جديدة.
إضافة تغطية الوضع الداكن
راجع فئات CSS الدلالية الجديدة وأضف متغيرات الوضع الداكن للخلفيات والحدود والنص وحالات hover وfocus عند الحاجة.
إكمال ترحيل موثق بالتحقق
أعد هيكلة أنماط CSS المحددة، وحدّث الترميز، وأضف اختبارات CSS ثابتة واختبارات تصيير، ثم لخّص الملفات المتغيرة ونتائج التحقق من السلوك.
أفضل الممارسات
- ابدأ بالأنماط المتكررة وحافظ على فئات الأدوات المستخدمة مرة واحدة ما لم يحسّن الاستخراج قابلية الصيانة.
- افحص أنماط المكوّنات الحالية قبل إضافة فئات أو متغيرات جديدة.
- تحقق من الأنماط المعاد هيكلتها بالاختبارات والمراجعة البصرية في الوضعين الفاتح والداكن.
تجنب
- لا تعد تسمية الفئات دون تحديث كل مكوّن واختبار متأثر.
- لا تنشئ فئات دلالية تغلف فقط نمطًا منفردًا غير مرتبط ومستخدمًا مرة واحدة.
- لا تدّع أن السلوك لم يتغير دون تشغيل الاختبارات المتاحة أو مراجعة واجهة المستخدم.
الأسئلة المتكررة
هل تتطلب هذه المهارة Tailwind CSS؟
هي مكتوبة لتركيب @apply بأسلوب Tailwind، لكن سير العمل يمكن أن يرشد عمليات إعادة هيكلة CSS دلالية أخرى.
هل يمكنها إزالة جميع فئات الأدوات؟
لا. توصي بالإبقاء على الأدوات المستخدمة مرة واحدة عندما تضيف الفئة الدلالية تجريدًا غير ضروري.
هل تعدّل ملفات المشروع تلقائيًا؟
توجه الوكيل إلى قراءة الملفات، وتطبيق تعديلات مركزة، وإضافة اختبارات، والتحقق من السلوك عند توفر الأدوات.
كيف تتعامل مع الوضع الداكن؟
تطلب من الوكيل إضافة متغيرات داكنة للخلفيات والنص والحدود والحالات التفاعلية في الفئات الجديدة.
ما الاختبارات التي تقترحها؟
تقترح اختبارات CSS ثابتة للمحددات واختبارات تصيير تؤكد أن المكوّنات تستخدم الفئات الدلالية الجديدة.
هل هي آمنة لعمليات إعادة الهيكلة الكبيرة؟
يمكنها إرشاد عمليات إعادة هيكلة كبيرة، لكن يجب تقسيم التغييرات واختبارها ومراجعتها بصريًا قبل الدمج.
تفاصيل المطور
المؤلف
2389-researchالترخيص
MIT
مراجعة Skillstore
r1
تنبيه الإصدار
لم يعلن المؤلف عن إصدار.
مرجع
c1fdca50ff516318f65fed0d7f9e82797c5171dc
حداثة الصيانة
١٨/٧/٢٠٢٦
الاستخدام
16 تنزيلات · 158 مشاهدات
بنية الملفات
📄 SKILL.md
المزيد من 2389-research
عرض الكل📦
fresh-eyes-review
79مراجعة الكود قبل Commit
تطلق الفرق أخطاء عندما تُوثق التغييرات النهائية بسرعة زائدة. تضيف هذه المهارة مراجعة مركزة قبل Commit للأمان، والمنطق، وقواعد العمل، والأداء.
البرمجة والتطوير عرض
📦
css-development-create-component
79إنشاء مكونات CSS مختبرة
غالبًا ما تضيف الفرق مكونات CSS بدون تسمية متسقة أو دعم للوضع الداكن أو اختبارات. ترشد هذه المهارة إلى إعادة الاستخدام، وتركيب Tailwind، والتوثيق، والتحقق.
البرمجة والتطوير عرض
📦
css-development
78بناء مكونات CSS متسقة
غالبا ما تنحرف أنماط CSS بين المكونات وفئات الأدوات المساعدة. ترشد هذه المهارة إلى إنشاء الفئات الدلالية، وتركيب Tailwind، وتغطية الوضع الداكن، والاختبارات، وإعادة الهيكلة.
البرمجة والتطوير عرض
📦
using-xtool
78بناء تطبيقات iOS باستخدام xtool
قد يكون إعداد مشاريع SwiftPM iOS صعبا دون Xcode. تمنح هذه المهارة إرشادات لإعداد مشاريع xtool، وتوسيعها، وإدارة الموارد والاستحقاقات، واستكشاف الأخطاء وإصلاحها.
البرمجة والتطوير عرض
📦
css-development-validate
78التحقق من جودة CSS مقابل أنماط المشروع
قد تفوّت مراجعات CSS فجوات في التسمية، والوضع الداكن، والتركيب، والاختبارات. توجّه هذه المهارة عملية تحقق منهجية مع نتائج وإصلاحات منظمة.
البرمجة والتطوير عرض
مهارات ذات صلة
عرض الكل📦
analyzing-patterns
86تحليل أنماط الكود والمعمارية
بواسطة C0ntr0lledCha0s
تخفي قواعد الكود الكبيرة بُنى متكررة وخيارات معمارية غير واضحة. تعثر هذه المهارة على الأنماط، وتشرح الهدف منها، وتبرز فرص إعادة الهيكلة العملية.
البرمجة والتطوير عرض
📦
structural-search
85البحث في الشيفرة حسب بنية AST
بواسطة 0xDarkMatter
تُغفل عمليات البحث النصي العلاقات الدلالية وتنتج تطابقات كثيرة غير دقيقة. تستخدم هذه المهارة أنماط ast-grep لتحديد بُنى الشيفرة والتحضير لعمليات إعادة هيكلة مركزة.
البرمجة والتطوير عرض
📦
testing
85بناء أتمتة اختبارات موثوقة
بواسطة 89jobrien
تؤدي الاختبارات الضعيفة إلى إبطاء الإصدارات وإخفاء حالات التراجع. ترشد هذه المهارة استراتيجية الاختبار، وTDD، والأتمتة، ومراجعة التغطية، وفحوصات الويب باستخدام Playwright.
البرمجة والتطوير عرض
📦
code-context-finder
83العثور على سياق الكود بشكل أسرع
بواسطة 89jobrien
غالبًا ما يضيع المطورون وقتًا في تتبع سبب وجود الكود وما الذي يعتمد عليه. توجه هذه المهارة Claude أو Codex أو Claude Code إلى جمع معرفة الرسم البياني ذات الصلة، والمستدعين، والاستيرادات، والاختبارات قبل إجراء التغييرات.
البرمجة والتطوير عرض
📦
vercel-react-view-transitions
82تنفيذ React View Transitions
بواسطة vercel-labs
من السهل وضع انتقالات عرض React في المكان غير المناسب، مما يؤدي إلى رسوم متحركة صامتة أو مزعجة. ترشد هذه المهارة اختيارات الرسوم المتحركة للمسارات وSuspense والقوائم والعناصر المشتركة.
البرمجة والتطوير عرض
📦
react-email
82إنشاء قوالب React Email باستخدام Resend
بواسطة resend
إنشاء قوالب بريد إلكتروني جاهزة للإنتاج أمر صعب لأن عملاء البريد الإلكتروني يختلفون. ترشد هذه المهارة Claude وCodex وClaude Code خلال مكونات React Email والإرسال والتنسيق والتوطين وسير عمل المحرر.
البرمجة والتطوير عرض