بناء أنظمة تصميم قابلة للتوسع
غالبا ما تصبح أنظمة التصميم غير متسقة عندما تنمو الرموز، والسمات، والمكونات بشكل منفصل. توفر هذه المهارة أنماطا لتسلسلات الرموز الهرمية، وتبديل السمات، وواجهات API للمكونات، والحوكمة.
انسخ هذا الطلب إلى Agent لديك. يتضمن صفحة Skill المعتمدة وملف manifest.
Review the Skillstore skill "design-system-patterns" from https://skillstore.io/skills/wshobson-design-system-patterns.md and its manifest at https://skillstore.io/api/skills/wshobson-design-system-patterns/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.يجب أن يواصل Agent عرض خطته وطلب أي تأكيد تفرضه سياسة الأمان.
استخدم هذه الروابط عندما يحتاج AI Agent أو crawler أو script إلى سياق نظيف بدلًا من قراءة الصفحة كاملة.
جارٍ استخدام "design-system-patterns". خطط لرموز التصميم للوحة معلومات SaaS.
النتيجة المتوقعة:
جارٍ استخدام "design-system-patterns". راجع تنفيذ الوضع الداكن.
النتيجة المتوقعة:
جارٍ استخدام "design-system-patterns". صمم نهجا لمكتبة مكونات قابلة لإعادة الاستخدام.
النتيجة المتوقعة:
All static findings are false positives. The content is documentation examples and public links. No prompt injection, command execution, exfiltration, or malicious intent was found.
شارك تقرير التقييم المرتبط بالإصدار والشارة المحايدة وبطاقة التضمين والاستشهادات. تعرض Skillstore الأدلة من دون أن تقرر ما إذا كانت هذه المهارة آمنة.
https://skillstore.io/skills/wshobson-design-system-patterns/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/wshobson-design-system-patterns?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/wshobson-design-system-patterns?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/wshobson-design-system-patterns/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/wshobson-design-system-patterns.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). design-system-patterns security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/wshobson-design-system-patterns/audits/4@techreport{wshobson-wshobson-design-system-patterns-2026,
author = {wshobson},
title = {design-system-patterns security audit report (audit version 4)},
institution = {Skillstore},
year = {2026},
number = {4},
url = {https://skillstore.io/skills/wshobson-design-system-patterns/audits/4},
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: "design-system-patterns security audit report (audit version 4)"
version: "unspecified"
type: report
authors:
- name: "wshobson"
date-released: "2026-07-07"
url: "https://skillstore.io/skills/wshobson-design-system-patterns/audits/4"
identifiers:
- type: other
value: "skillstore:wshobson-design-system-patterns:audit:4"
description: "Skillstore immutable audit report identifier"
حدد فئات الرموز، وقواعد التسمية، ومخرجات المنصات قبل بناء مكتبة UI مشتركة.
نفذ السمات الفاتحة، والداكنة، وعالية التباين، وسمات النظام باستخدام عقود CSS custom property مستقرة.
استخدم المكونات المركبة، وأنظمة المتغيرات، وأنماط الإتاحة لجعل المكونات القابلة لإعادة الاستخدام قابلة للتنبؤ.
استخدم هذه المهارة لتصميم تسلسل هرمي أساسي للرموز للألوان، والطباعة، والتباعد، وأنصاف الأقطار في تطبيق ويب جديد.
استخدم هذه المهارة لمراجعة CSS variables الحالية لدي واقتراح معمارية سمة فاتحة وداكنة باستخدام رموز دلالية.
استخدم هذه المهارة لتصميم أنماط API للمكونات للأزرار، والأكورديونات، والشارات، وعناصر التحكم في النماذج مع المتغيرات وحالات الإتاحة.
استخدم هذه المهارة لتعريف مسار رموز متعدد العلامات التجارية مع مخرجات Style Dictionary، وقواعد الحوكمة، وإرشادات الترحيل.
المؤلف
wshobsonالترخيص
MIT
مراجعة Skillstore
r1
تنبيه الإصدار
لم يعلن المؤلف عن إصدار.
المستودع
https://github.com/wshobson/agents/tree/main/plugins/ui-design/skills/design-system-patterns/مرجع
36e07d5e13068e5be64447e8f20b427cf2cbd21a
حداثة الصيانة
٢٧/٧/٢٠٢٦
الاستخدام
9 تنزيلات · 290 مشاهدات
بنية الملفات
تحسين مطالبات LLM للإنتاج
غالبًا ما تفشل مطالبات LLM لأن التعليمات والأمثلة ومعايير التقييم تكون غير واضحة. توفر هذه المهارة قوالب وسير عمل لتحسين المطالبات في Claude وCodex وClaude Code والأدوات المشابهة.
إدارة التطوير المعتمد على السياق
تفقد المشاريع المدعومة بالذكاء الاصطناعي اتساقها عندما تكون أهداف المنتج، وخيارات الحزمة التقنية، وقواعد سير العمل مبعثرة. ترشد هذه المهارة Claude وCodex وClaude Code عبر عناصر سياق Conductor.
بناء نماذج مالية للشركات الناشئة
تحتاج فرق الشركات الناشئة إلى توقعات واضحة قبل أن تتمكن من تخطيط التوظيف وجمع التمويل واستخدام النقد. تنظم هذه المهارة الإيرادات والتكاليف ومدى كفاية النقد والسيناريوهات في مخرجات عملية للتخطيط المالي.
تصميم لوحات مؤشرات أداء رئيسية تقود القرارات
غالبا ما تبني الفرق لوحات معلومات تعرض الكثير من الأرقام لكنها لا توجه إلى اتخاذ إجراء. تساعد هذه المهارة Claude وCodex وClaude Code على اختيار مؤشرات أداء رئيسية ذات معنى، وتنظيم طرق العرض، وعرض المقاييس بوضوح.
كتابة تقارير ما بعد الحوادث بلا لوم
غالبا ما تصبح مراجعات الحوادث غير متسقة، أو مركزة على اللوم، أو صعبة التنفيذ. تساعد هذه المهارة Claude وCodex وClaude Code على صياغة تقارير منظمة لما بعد الحوادث مع جداول زمنية واضحة، وأسباب جذرية، ومالكين محددين.
بناء قصص بيانات واضحة
غالبا ما تفشل المقاييس الخام في إقناع أصحاب المصلحة أو دعم القرارات. تساعد هذه المهارة Claude وCodex وClaude Code على تحويل التحليل إلى سرديات واضحة ومرئيات وتوصيات.
Build Consistent Design Systems and Slides
بواسطة nextlevelbuilder
Inconsistent tokens and components make design handoffs difficult. This skill structures tokens, validates usage, and generates brand-aligned presentation assets.
حسّن تجربة المستخدم بإرشادات تصميم قائمة على البحث
بواسطة shubhamsaboo
غالبًا ما تصمم الفرق المسارات بناءً على افتراضات وتفوتها مشكلات إمكانية الوصول. ترشد هذه المهارة البحث، والبنية، وتصميم التفاعل، والمراجعة باستخدام أفضل ممارسات تجربة المستخدم.
Check designs with deterministic CSS rules
بواسطة cubha
Design reviews can vary between reviewers and slow down delivery. This skill applies repeatable checks to HTML and CSS so teams can catch token, layout, and accessibility issues before release.
تصميم واجهات منتجات ميسّرة الوصول
بواسطة sickn33
غالبًا ما تواجه الفرق صعوبة في تحويل احتياجات المستخدمين إلى واجهات متسقة وميسّرة الوصول. ترشد هذه المهارة البحث، والتدفقات، وأنظمة التصميم، ورموز التصميم، والتسليم.
استخراج أنماط نظام تصميم قابلة لإعادة الاستخدام
بواسطة pbakaus
غالبًا ما تكرر الفرق مكونات UI والرموز وأنماط التخطيط عبر التطبيق. تساعد هذه المهارة 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.