بناء أنظمة تصميم Tailwind
تحتاج الفرق إلى أنماط UI متسقة تبقى مرنة عبر المنتجات وأحجام الشاشات. توفر هذه المهارة أنماط Tailwind CSS للرموز، والمكونات، والمتغيرات، والوضع الداكن، وإمكانية الوصول لبناء أنظمة تصميم قابلة للتوسع.
انسخ هذا الطلب إلى Agent لديك. يتضمن صفحة Skill المعتمدة وملف manifest.
Review the Skillstore skill "tailwind-design-system" from https://skillstore.io/skills/wshobson-tailwind-design-system.md and its manifest at https://skillstore.io/api/skills/wshobson-tailwind-design-system/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.يجب أن يواصل Agent عرض خطته وطلب أي تأكيد تفرضه سياسة الأمان.
استخدم هذه الروابط عندما يحتاج AI Agent أو crawler أو script إلى سياق نظيف بدلًا من قراءة الصفحة كاملة.
جارٍ استخدام "tailwind-design-system". أنشئ نظام أزرار للوحة تحكم SaaS.
النتيجة المتوقعة:
جارٍ استخدام "tailwind-design-system". أضف الوضع الداكن إلى تطبيق Tailwind موجود.
النتيجة المتوقعة:
جارٍ استخدام "tailwind-design-system". اجعل شبكات المنتجات متجاوبة ومتسقة.
النتيجة المتوقعة:
All static findings are false positives caused by Markdown fences, JSX template literals, Tailwind class examples, and passive documentation links. No prompt injection, data exfiltration intent, or executable command behavior was found in SKILL.md.
شارك تقرير التقييم المرتبط بالإصدار والشارة المحايدة وبطاقة التضمين والاستشهادات. تعرض Skillstore الأدلة من دون أن تقرر ما إذا كانت هذه المهارة آمنة.
https://skillstore.io/skills/wshobson-tailwind-design-system/audits/7?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/wshobson-tailwind-design-system?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/wshobson-tailwind-design-system?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/wshobson-tailwind-design-system/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/wshobson-tailwind-design-system.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). tailwind-design-system security audit report (audit version 7) [Author version unspecified]. Skillstore. https://skillstore.io/skills/wshobson-tailwind-design-system/audits/7@techreport{wshobson-wshobson-tailwind-design-system-2026,
author = {wshobson},
title = {tailwind-design-system security audit report (audit version 7)},
institution = {Skillstore},
year = {2026},
number = {7},
url = {https://skillstore.io/skills/wshobson-tailwind-design-system/audits/7},
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: "tailwind-design-system security audit report (audit version 7)"
version: "unspecified"
type: report
authors:
- name: "wshobson"
date-released: "2026-07-08"
url: "https://skillstore.io/skills/wshobson-tailwind-design-system/audits/7"
identifiers:
- type: other
value: "skillstore:wshobson-tailwind-design-system:audit:7"
description: "Skillstore immutable audit report identifier"
تبقى مهارة كل مؤلف عنصراً مستقلاً قابلاً للتثبيت. يُرتب المتغير الموصى به وفق أدلة Skillstore.
سبب تصدر هذا المتغير
sickn33-tailwind-design-system
2026-09-09
wshobson-tailwind-design-system
2026-09-09
ابنِ مكونات Tailwind قابلة لإعادة الاستخدام مع متغيرات typed، وتباعد متسق، وحالات متوقعة.
استبدل الأصناف المخصصة لمرة واحدة برموز دلالية وأنماط تخطيط مشتركة عبر قاعدة التعليمات البرمجية.
نفذ سلوك الوضع الفاتح، والوضع الداكن، وسمة النظام باستخدام CSS variables وأصناف Tailwind.
أنشئ خطة رموز تصميم Tailwind لتطبيقي. ضمّن ألواناً دلالية، وإرشادات للتباعد، وقيم radius، ومتغيرات الوضع الداكن.
صمم مكونات Button وCard وInput وLabel باستخدام Tailwind CSS وCVA. ضمّن المتغيرات، والأحجام، وحالات التركيز، وملاحظات إمكانية الوصول.
راجع مكونات Tailwind هذه واقترح إعادة هيكلة لنظام التصميم. أعطِ الأولوية للرموز الدلالية، والمتغيرات المشتركة، وتقليل تكرار الأصناف.
أنشئ بنية سمات Tailwind قابلة للتوسع للسمات الفاتحة والداكنة وسمات العلامة التجارية. ضمّن تدرج الرموز، وعقود المكونات، وخطوات الترحيل.
المؤلف
wshobsonالترخيص
MIT
مراجعة Skillstore
r1
تنبيه الإصدار
لم يعلن المؤلف عن إصدار.
مرجع
64ca8af0f54a325752f08bd54e52151061ea659a
حداثة الصيانة
٢٢/٧/٢٠٢٦
الاستخدام
17 تنزيلات · 288 مشاهدات
بنية الملفات
📄 SKILL.md
تحسين مطالبات LLM للإنتاج
غالبًا ما تفشل مطالبات LLM لأن التعليمات والأمثلة ومعايير التقييم تكون غير واضحة. توفر هذه المهارة قوالب وسير عمل لتحسين المطالبات في Claude وCodex وClaude Code والأدوات المشابهة.
إدارة التطوير المعتمد على السياق
تفقد المشاريع المدعومة بالذكاء الاصطناعي اتساقها عندما تكون أهداف المنتج، وخيارات الحزمة التقنية، وقواعد سير العمل مبعثرة. ترشد هذه المهارة Claude وCodex وClaude Code عبر عناصر سياق Conductor.
بناء نماذج مالية للشركات الناشئة
تحتاج فرق الشركات الناشئة إلى توقعات واضحة قبل أن تتمكن من تخطيط التوظيف وجمع التمويل واستخدام النقد. تنظم هذه المهارة الإيرادات والتكاليف ومدى كفاية النقد والسيناريوهات في مخرجات عملية للتخطيط المالي.
تصميم لوحات مؤشرات أداء رئيسية تقود القرارات
غالبا ما تبني الفرق لوحات معلومات تعرض الكثير من الأرقام لكنها لا توجه إلى اتخاذ إجراء. تساعد هذه المهارة Claude وCodex وClaude Code على اختيار مؤشرات أداء رئيسية ذات معنى، وتنظيم طرق العرض، وعرض المقاييس بوضوح.
كتابة تقارير ما بعد الحوادث بلا لوم
غالبا ما تصبح مراجعات الحوادث غير متسقة، أو مركزة على اللوم، أو صعبة التنفيذ. تساعد هذه المهارة Claude وCodex وClaude Code على صياغة تقارير منظمة لما بعد الحوادث مع جداول زمنية واضحة، وأسباب جذرية، ومالكين محددين.
بناء قصص بيانات واضحة
غالبا ما تفشل المقاييس الخام في إقناع أصحاب المصلحة أو دعم القرارات. تساعد هذه المهارة 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.
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
قد ينحرف عمل واجهة المستخدم نحو مسافات وألوان ومكونات منصة خام مكتوبة بشكل ثابت. ترشد هذه المهارة Claude وCodex وClaude Code نحو المكونات الأساسية والرموز والتخطيطات القابلة لإعادة الاستخدام.
تدقيق إمكانية الوصول إلى الويب للامتثال لمعايير 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
غالبًا ما تصمم الفرق المسارات بناءً على افتراضات وتفوتها مشكلات إمكانية الوصول. ترشد هذه المهارة البحث، والبنية، وتصميم التفاعل، والمراجعة باستخدام أفضل ممارسات تجربة المستخدم.