بناء أسس التصميم المرئي
إن عدم اتساق الخطوط، والألوان، والمسافات، والأيقونات يجعل الواجهات أصعب في الاستخدام والصيانة. تساعد هذه المهارة Claude وCodex وClaude Code على تحديد أنظمة مرئية عملية باستخدام رموز ميسّرة وأنماط قابلة لإعادة الاستخدام.
انسخ هذا الطلب إلى Agent لديك. يتضمن صفحة Skill المعتمدة وملف manifest.
Review the Skillstore skill "visual-design-foundations" from https://skillstore.io/skills/wshobson-visual-design-foundations.md and its manifest at https://skillstore.io/api/skills/wshobson-visual-design-foundations/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.يجب أن يواصل Agent عرض خطته وطلب أي تأكيد تفرضه سياسة الأمان.
استخدم هذه الروابط عندما يحتاج AI Agent أو crawler أو script إلى سياق نظيف بدلًا من قراءة الصفحة كاملة.
جارٍ استخدام "visual-design-foundations". يحتاج فريق إلى أساس تصميم للوحة معلومات تحليلات جديدة.
النتيجة المتوقعة:
جارٍ استخدام "visual-design-foundations". يعاني منتج موجود من مسافات غير متسقة وتسلسل هرمي غير واضح.
النتيجة المتوقعة:
جارٍ استخدام "visual-design-foundations". يريد مصمم إرشادات للوضع الداكن للرموز الحالية.
النتيجة المتوقعة:
The static findings are false positives from Markdown fences, JavaScript template literals, regular expression matching, and resource links. No prompt injection, credential handling, process execution, or malicious network intent was found in the reviewed files.
شارك تقرير التقييم المرتبط بالإصدار والشارة المحايدة وبطاقة التضمين والاستشهادات. تعرض Skillstore الأدلة من دون أن تقرر ما إذا كانت هذه المهارة آمنة.
https://skillstore.io/skills/wshobson-visual-design-foundations/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/wshobson-visual-design-foundations?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/wshobson-visual-design-foundations?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/wshobson-visual-design-foundations/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/wshobson-visual-design-foundations.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). visual-design-foundations security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/wshobson-visual-design-foundations/audits/4@techreport{wshobson-wshobson-visual-design-foundations-2026,
author = {wshobson},
title = {visual-design-foundations security audit report (audit version 4)},
institution = {Skillstore},
year = {2026},
number = {4},
url = {https://skillstore.io/skills/wshobson-visual-design-foundations/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: "visual-design-foundations security audit report (audit version 4)"
version: "unspecified"
type: report
authors:
- name: "wshobson"
date-released: "2026-07-08"
url: "https://skillstore.io/skills/wshobson-visual-design-foundations/audits/4"
identifiers:
- type: other
value: "skillstore:wshobson-visual-design-foundations:audit:4"
description: "Skillstore immutable audit report identifier"
تحديد رموز عملية للخطوط، والمسافات، والألوان، والأيقونات قبل بناء واجهة جديدة.
تدقيق الشاشات الحالية بحثًا عن التسلسل الهرمي المرئي، وانحراف المسافات، وسوء استخدام الألوان، والمعالجة غير المتسقة للأيقونات.
تحويل قرارات التصميم إلى قواعد استخدام واضحة يمكن للمطورين تطبيقها عبر المكونات.
راجع هذه الواجهة من حيث الخطوط، وتباين الألوان، والمسافات، واتساق الأيقونات. قدّم إصلاحات مرتبة حسب الأولوية مع اقتراحات بسيطة لرموز التصميم.
أنشئ نظام تصميم مرئي أولي للوحة معلومات SaaS. ضمّن مقياس الخطوط، ورموز الألوان، ومقياس المسافات، وأحجام الأيقونات، وقواعد الاستخدام.
ترجم ألوان العلامة التجارية وخيارات الخطوط هذه إلى رموز تصميم جاهزة لـ Tailwind. ضمّن ملاحظات الإتاحة واعتبارات الوضع الداكن.
دقق مكتبة المكونات هذه بحثًا عن فجوات في النظام المرئي. حدد انحراف الرموز، ومشكلات التسلسل الهرمي، ومخاطر التباين، وعدم اتساق الأيقونات، وخطوات الترحيل.
المؤلف
wshobsonالترخيص
MIT
مراجعة Skillstore
r1
تنبيه الإصدار
لم يعلن المؤلف عن إصدار.
المستودع
https://github.com/wshobson/agents/tree/main/plugins/ui-design/skills/visual-design-foundations/مرجع
64ca8af0f54a325752f08bd54e52151061ea659a
حداثة الصيانة
٢٢/٧/٢٠٢٦
الاستخدام
17 تنزيلات · 173 مشاهدات
بنية الملفات
تحسين مطالبات LLM للإنتاج
غالبًا ما تفشل مطالبات LLM لأن التعليمات والأمثلة ومعايير التقييم تكون غير واضحة. توفر هذه المهارة قوالب وسير عمل لتحسين المطالبات في Claude وCodex وClaude Code والأدوات المشابهة.
إدارة التطوير المعتمد على السياق
تفقد المشاريع المدعومة بالذكاء الاصطناعي اتساقها عندما تكون أهداف المنتج، وخيارات الحزمة التقنية، وقواعد سير العمل مبعثرة. ترشد هذه المهارة Claude وCodex وClaude Code عبر عناصر سياق Conductor.
بناء نماذج مالية للشركات الناشئة
تحتاج فرق الشركات الناشئة إلى توقعات واضحة قبل أن تتمكن من تخطيط التوظيف وجمع التمويل واستخدام النقد. تنظم هذه المهارة الإيرادات والتكاليف ومدى كفاية النقد والسيناريوهات في مخرجات عملية للتخطيط المالي.
تصميم لوحات مؤشرات أداء رئيسية تقود القرارات
غالبا ما تبني الفرق لوحات معلومات تعرض الكثير من الأرقام لكنها لا توجه إلى اتخاذ إجراء. تساعد هذه المهارة Claude وCodex وClaude Code على اختيار مؤشرات أداء رئيسية ذات معنى، وتنظيم طرق العرض، وعرض المقاييس بوضوح.
كتابة تقارير ما بعد الحوادث بلا لوم
غالبا ما تصبح مراجعات الحوادث غير متسقة، أو مركزة على اللوم، أو صعبة التنفيذ. تساعد هذه المهارة Claude وCodex وClaude Code على صياغة تقارير منظمة لما بعد الحوادث مع جداول زمنية واضحة، وأسباب جذرية، ومالكين محددين.
بناء قصص بيانات واضحة
غالبا ما تفشل المقاييس الخام في إقناع أصحاب المصلحة أو دعم القرارات. تساعد هذه المهارة Claude وCodex وClaude Code على تحويل التحليل إلى سرديات واضحة ومرئيات وتوصيات.
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.
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.
تدقيق إمكانية الوصول إلى الويب للامتثال لمعايير WCAG
بواسطة 89jobrien
يمكن أن تمنع فجوات إمكانية الوصول المستخدمين من الاستفادة من الخدمة وأن تخلق مخاطر امتثال. ترشد هذه المهارة عمليات تدقيق WCAG، وفحوصات قارئ الشاشة، واختبار لوحة المفاتيح، وتخطيط المعالجة.
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
غالبًا ما تصمم الفرق المسارات بناءً على افتراضات وتفوتها مشكلات إمكانية الوصول. ترشد هذه المهارة البحث، والبنية، وتصميم التفاعل، والمراجعة باستخدام أفضل ممارسات تجربة المستخدم.
تطبيق تنسيق علامة Anthropic التجارية
بواسطة ZhanlinCui
تحتاج الفرق غالبا إلى عناصر مرئية متسقة بأسلوب Anthropic عبر المستندات والعروض التقديمية. توفر هذه المهارة إرشادات عملية للألوان والطباعة واللمسات البصرية لإنشاء مواد مصقولة تحمل طابعا متوافقا مع العلامة.