بناء واجهات مستخدم قابلة للوصول باستخدام Tailwind و shadcn
تحتاج الفرق إلى إرشادات واجهات متسقة تغطي المكونات، والتنسيق، وإمكانية الوصول، والسلوك المتجاوب. توفر هذه المهارة مراجع shadcn/ui و Tailwind CSS والتصميم المرئي لسير عمل Claude و Codex و Claude Code.
توقف واطلب التأكيد قبل التثبيت.
راجع الخطة واحصل على موافقة صريحة من المستخدم قبل تغيير الملفات.
انسخ هذا الطلب إلى Agent لديك. يتضمن صفحة Skill المعتمدة وملف manifest.
Review the Skillstore skill "ckm-ui-styling" from https://skillstore.io/skills/nextlevelbuilder-ckm-ui-styling.md and its manifest at https://skillstore.io/api/skills/nextlevelbuilder-ckm-ui-styling/manifest. Verify the artifact. Stop and obtain explicit user consent before installing or changing files.يجب أن يواصل Agent عرض خطته وطلب أي تأكيد تفرضه سياسة الأمان.
استخدم هذه الروابط عندما يحتاج AI Agent أو crawler أو script إلى سياق نظيف بدلًا من قراءة الصفحة كاملة.
جارٍ استخدام "ckm-ui-styling". تحتاج صفحة إعدادات إلى بطاقات متجاوبة، ووضع داكن، وإجراءات نماذج واضحة.
النتيجة المتوقعة:
جارٍ استخدام "ckm-ui-styling". يفشل مربع حوار موجود في مراجعة لوحة المفاتيح وقارئ الشاشة.
النتيجة المتوقعة:
جارٍ استخدام "ckm-ui-styling". يريد فريق رموز Tailwind متسقة عبر صفحات المنتج.
النتيجة المتوقعة:
Most static hits are false positives in documentation, license text, tests, and coverage data. Real issues remain around unpinned npx execution in a helper script and numerous bundled binary font assets that need manual verification.
هذه قدرات محلية حقيقية قد يُتوقع وجودها لهذه المهارة، لذا فهي تتطلب مراجعة ولكن لا تُحتسب كسلوك خبيث مؤكد.
شارك تقرير التقييم المرتبط بالإصدار والشارة المحايدة وبطاقة التضمين والاستشهادات. تعرض Skillstore الأدلة من دون أن تقرر ما إذا كانت هذه المهارة آمنة.
https://skillstore.io/skills/nextlevelbuilder-ckm-ui-styling/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/nextlevelbuilder-ckm-ui-styling?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/nextlevelbuilder-ckm-ui-styling?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/nextlevelbuilder-ckm-ui-styling/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/nextlevelbuilder-ckm-ui-styling.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>nextlevelbuilder. (2026). ckm-ui-styling security audit report (audit version 4) [Author version 1.0.0]. Skillstore. https://skillstore.io/skills/nextlevelbuilder-ckm-ui-styling/audits/4@techreport{nextlevelbuilder-nextlevelbuilder-ckm-ui-styling-2026,
author = {nextlevelbuilder},
title = {ckm-ui-styling security audit report (audit version 4)},
institution = {Skillstore},
year = {2026},
number = {4},
url = {https://skillstore.io/skills/nextlevelbuilder-ckm-ui-styling/audits/4},
note = {Author version 1.0.0}
}cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "ckm-ui-styling security audit report (audit version 4)"
version: "1.0.0"
type: report
authors:
- name: "nextlevelbuilder"
date-released: "2026-07-05"
url: "https://skillstore.io/skills/nextlevelbuilder-ckm-ui-styling/audits/4"
identifiers:
- type: other
value: "skillstore:nextlevelbuilder-ckm-ui-styling:audit:4"
description: "Skillstore immutable audit report identifier"
إنشاء صفحة تعتمد نهج الجوال أولًا باستخدام بطاقات shadcn، والنماذج، ومربعات الحوار، وقواعد التباعد في Tailwind.
تعريف الرموز، وسلوك الوضع الداكن، ومتغيرات المكونات، وحالات التفاعل القابلة للوصول لنظام واجهة مستخدم مشترك.
مراجعة إدارة التركيز، وسلوك لوحة المفاتيح، وأخطاء النماذج، وتباين الألوان، وإعلانات قارئ الشاشة.
استخدم ckm-ui-styling لتنسيق زر وبطاقة shadcn متجاوبين لشاشة تسجيل بسيطة.
أنشئ مربع حوار إعدادات قابلًا للوصول مع تنقل بلوحة المفاتيح، وحالات تركيز، ورسائل نماذج، وأنماط الوضع الداكن في Tailwind.
عرّف سمة Tailwind و shadcn للوحة معلومات مالية، بما في ذلك الرموز، والمتغيرات، وإرشادات التخطيط المتجاوب.
راجع واجهة React هذه من حيث إمكانية الوصول، واتساق التخطيط، والوضع الداكن، وتركيب shadcn. قدم تغييرات دقيقة وخطوات تحقق.
المؤلف
nextlevelbuilderالترخيص
MIT
إصدار المؤلف
v1.0.0
مراجعة Skillstore
r1
المستودع
https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/tree/main/.claude/skills/ui-styling/مرجع
62e2a730c5cd74eab4c7164309d810de660fcea3
حداثة الصيانة
٢٢/٧/٢٠٢٦
الاستخدام
9 تنزيلات · 15 مشاهدات
Build Accessible Tailwind Interfaces
Building consistent, responsive interfaces requires many component, styling, and accessibility decisions. This skill provides shadcn/ui patterns, Tailwind guidance, and focused automation.
Build Consistent Design Systems and Slides
Inconsistent tokens and components make design handoffs difficult. This skill structures tokens, validates usage, and generates brand-aligned presentation assets.
Create Strategic HTML Presentations
Building persuasive, responsive presentations requires coordinated structure, design, copy, and data visualization. This skill turns a topic and audience brief into a complete HTML deck.
تحسين سير عمل تصميم واجهة المستخدم وتجربة المستخدم
غالبا ما يحتاج عمل الواجهات إلى أسلوب متسق، وإتاحة وصول، وإرشادات مخصصة للتقنية المستخدمة. تمنح هذه المهارة Claude وCodex وClaude Code مرجعا قابلا للبحث في واجهة المستخدم وتجربة المستخدم لتخطيط التصاميم وبنائها ومراجعتها.
بناء إرشادات العلامة التجارية وسير عمل الأصول
غالبًا ما يتشتت عمل العلامة التجارية بين النبرة والمرئيات والأصول ورموز التصميم. تساعد هذه المهارة Claude وCodex وClaude Code على إنشاء أنظمة علامات تجارية متسقة ومراجعتها وتطبيقها.
Build consistent brand guidelines and assets
Brand work can become inconsistent across content, assets, and interfaces. This skill provides structured guidance, validation, and token synchronization to keep brand decisions aligned.
تدقيق إمكانية الوصول إلى الويب للامتثال لمعايير WCAG
بواسطة 89jobrien
يمكن أن تمنع فجوات إمكانية الوصول المستخدمين من الاستفادة من الخدمة وأن تخلق مخاطر امتثال. ترشد هذه المهارة عمليات تدقيق WCAG، وفحوصات قارئ الشاشة، واختبار لوحة المفاتيح، وتخطيط المعالجة.
تخطيط تجربة المستخدم قبل البناء
بواسطة pbakaus
غالبًا ما تبني الفرق الواجهات قبل توضيح أهداف المستخدمين والحالات والقيود. توجه هذه المهارة عملية الاكتشاف وتنتج موجز تصميم للتنفيذ.
حسّن تجربة المستخدم بإرشادات تصميم قائمة على البحث
بواسطة shubhamsaboo
غالبًا ما تصمم الفرق المسارات بناءً على افتراضات وتفوتها مشكلات إمكانية الوصول. ترشد هذه المهارة البحث، والبنية، وتصميم التفاعل، والمراجعة باستخدام أفضل ممارسات تجربة المستخدم.
تصميم نماذج أولية مميزة لواجهات المستخدم
بواسطة tencentcloudbase
غالبا ما تفتقر واجهات الذكاء الاصطناعي العامة إلى اتجاه بصري وتفاصيل واعية بالمنصة. ترشد هذه المهارة 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.
بناء واجهات shadcn/ui في Next.js
بواسطة Asmayaseen
تحتاج فرق React إلى أنماط واجهة مستخدم متسقة تعمل مع Next.js الحديث. توفر هذه المهارة إرشادات إعداد shadcn/ui، وأمثلة على المكوّنات، والتحقق من النماذج، والجداول، والأشرطة الجانبية، وأنماط الوضع الداكن.