إعداد Tailwind v4 مع shadcn/ui
قد يفشل إعداد Tailwind v4 و shadcn/ui لأن v4 يغيّر طريقة التعامل مع الإعدادات والإضافات والسمات. ترشد هذه المهارة Claude أو Codex أو Claude Code عبر قوالب مختبرة وخطوات لاستكشاف الأخطاء وإصلاحها.
انسخ هذا الطلب إلى Agent لديك. يتضمن صفحة Skill المعتمدة وملف manifest.
Review the Skillstore skill "tailwind-v4-shadcn" from https://skillstore.io/skills/jezweb-tailwind-v4-shadcn.md and its manifest at https://skillstore.io/api/skills/jezweb-tailwind-v4-shadcn/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.يجب أن يواصل Agent عرض خطته وطلب أي تأكيد تفرضه سياسة الأمان.
استخدم هذه الروابط عندما يحتاج AI Agent أو crawler أو script إلى سياق نظيف بدلًا من قراءة الصفحة كاملة.
جارٍ استخدام "tailwind-v4-shadcn". Set up Tailwind v4 and shadcn/ui in a fresh Vite React project.
النتيجة المتوقعة:
جارٍ استخدام "tailwind-v4-shadcn". bg-primary does not apply styles after upgrading to Tailwind v4.
النتيجة المتوقعة:
جارٍ استخدام "tailwind-v4-shadcn". Migrate a Tailwind v3 app that uses config-based colors and animation plugins.
النتيجة المتوقعة:
Static analysis flagged many patterns, but review found documentation snippets, setup examples, source links, and normal configuration values. No prompt injection, malware intent, credential access, or data exfiltration behavior was found. The remaining operational risk is ordinary package installation and file changes when a user applies the setup guidance.
شارك تقرير التقييم المرتبط بالإصدار والشارة المحايدة وبطاقة التضمين والاستشهادات. تعرض Skillstore الأدلة من دون أن تقرر ما إذا كانت هذه المهارة آمنة.
https://skillstore.io/skills/jezweb-tailwind-v4-shadcn/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/jezweb-tailwind-v4-shadcn?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/jezweb-tailwind-v4-shadcn?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/jezweb-tailwind-v4-shadcn/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/jezweb-tailwind-v4-shadcn.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>jezweb. (2026). tailwind-v4-shadcn security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/jezweb-tailwind-v4-shadcn/audits/4@techreport{jezweb-jezweb-tailwind-v4-shadcn-2026,
author = {jezweb},
title = {tailwind-v4-shadcn security audit report (audit version 4)},
institution = {Skillstore},
year = {2026},
number = {4},
url = {https://skillstore.io/skills/jezweb-tailwind-v4-shadcn/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: "tailwind-v4-shadcn security audit report (audit version 4)"
version: "unspecified"
type: report
authors:
- name: "jezweb"
date-released: "2026-07-05"
url: "https://skillstore.io/skills/jezweb-tailwind-v4-shadcn/audits/4"
identifiers:
- type: other
value: "skillstore:jezweb-tailwind-v4-shadcn:audit:4"
description: "Skillstore immutable audit report identifier"
إنشاء مشروع Vite React جديد مع Tailwind v4 و shadcn/ui وأسماء المسارات المستعارة ودعم الوضع الداكن.
حل مشكلات أدوات bg-primary المعطلة والطبقات الأساسية المكررة وأعطال الوضع الداكن وأخطاء استيراد الرسوم المتحركة.
نقل إعدادات السمات من ملفات الإعداد إلى متغيرات CSS وتحديث الإضافات من أجل Tailwind v4.
Set up Tailwind v4 with shadcn/ui in my Vite React project. Use the skill templates and explain each file change before applying it.
Review my existing Vite React project and add Tailwind v4 with shadcn/ui. Preserve current app code and list any conflicting files first.
Use the Tailwind v4 shadcn guidance to diagnose why my semantic colors or dark mode are not working. Show the likely cause and a fix plan.
Audit my Tailwind v3 setup and create a migration plan for Tailwind v4 and shadcn/ui. Include risks, file changes, and verification steps.
المؤلف
jezwebالترخيص
MIT
مراجعة Skillstore
r1
تنبيه الإصدار
لم يعلن المؤلف عن إصدار.
مرجع
a25199bc7d6b82598536822d1738eb5d5f54025b
حداثة الصيانة
١٨/٧/٢٠٢٦
الاستخدام
10 تنزيلات · 173 مشاهدات
بنية الملفات
ابنِ واجهات shadcn/ui بسرعة أكبر
بواسطة google-labs-code
تحتاج فرق React الحديثة إلى مكونات shadcn/ui متسقة من دون تكرار البحث في الإعداد. ترشد هذه المهارة اختيار المكونات، والتثبيت، وتخصيص السمات، والترحيل، وفحوصات الجودة.
أنشئ تطبيقات Fullstack بإرشاد خبير
بواسطة alirezarezvani
غالبًا ما تحتاج مشاريع Fullstack إلى إعداد متسق، وخيارات معمارية، وفحوصات جودة. توفر هذه المهارة سكربتات ومراجع للعمل على React وNext.js وNode.js وGraphQL وPostgreSQL.
تنفيذ React View Transitions
بواسطة vercel-labs
من السهل وضع انتقالات عرض React في المكان غير المناسب، مما يؤدي إلى رسوم متحركة صامتة أو مزعجة. ترشد هذه المهارة اختيارات الرسوم المتحركة للمسارات وSuspense والقوائم والعناصر المشتركة.
بناء مكونات React آمنة الأنواع
بواسطة softaworks
غالبا ما يتطلب العمل على React TypeScript أنواعا دقيقة للأحداث والـ hooks والمسارات. توفر هذه المهارة أنماطا مركزة للمكونات المكتوبة الأنواع، وواجهات React 19 API، والتوجيه.
إنشاء ميزات واجهة أمامية جاهزة للإنتاج
بواسطة davila7
تحتاج فرق الواجهة الأمامية إلى إرشادات متسقة حول React وNext.js عبر المشاريع. توفر هذه المهارة سير عمل مرجعيًا وممارسات للجودة وبرامج نصية مساعدة لتحليل الواجهة الأمامية.
تحسين أداء Next.js
بواسطة Atman36
قد تصبح تطبيقات Next.js بطيئة بسبب الحِزم الكبيرة، والتخزين المؤقت الضعيف، والوسائط غير المحسّنة. ترشد هذه المهارة Claude وCodex وClaude Code عبر تحسينات أداء مركّزة لتطبيقات الإنتاج.