إتقان مشاريع Tailwind CSS V4
يغيّر Tailwind CSS V4 أسلوب التكوين وخطوات الترحيل وخيارات الأداء. تمنح هذه المهارة Claude وCodex وClaude Code إرشادات منظمة لترقيات أكثر أمانًا وبنية CSS أفضل.
انسخ هذا الطلب إلى Agent لديك. يتضمن صفحة Skill المعتمدة وملف manifest.
Review the Skillstore skill "Tailwind CSS V4 Mastery" from https://skillstore.io/skills/calel33-tailwind-css-v4-mastery.md and its manifest at https://skillstore.io/api/skills/calel33-tailwind-css-v4-mastery/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.يجب أن يواصل Agent عرض خطته وطلب أي تأكيد تفرضه سياسة الأمان.
استخدم هذه الروابط عندما يحتاج AI Agent أو crawler أو script إلى سياق نظيف بدلًا من قراءة الصفحة كاملة.
جارٍ استخدام "Tailwind CSS V4 Mastery". أحتاج إلى ترحيل تطبيق Tailwind v3 يستخدم ألوانًا مخصصة وأدوات شفافية مساعدة.
النتيجة المتوقعة:
قائمة تحقق للترحيل تغطي تحديثات الاعتماديات، وتغييرات استيراد CSS، وتحويل متغيرات الثيم، واستبدالات الشفافية، وفحوصات الانحدار البصري.
جارٍ استخدام "Tailwind CSS V4 Mastery". ساعدني في إنشاء نظام مكونات Tailwind V4 متعدد العلامات التجارية.
النتيجة المتوقعة:
خطة تصميم تتضمن رموز العلامة التجارية، وحدود الثيم، واتفاقيات فئات المكونات، ومعالجة dark mode، ومهام التوثيق.
جارٍ استخدام "Tailwind CSS V4 Mastery". بناء Tailwind V4 لدي أبطأ من المتوقع.
النتيجة المتوقعة:
خطة مراجعة أداء تفحص اختيار المكون الإضافي، وحجم الثيم، وعدد نقاط التوقف، وsource maps، والقياسات الأساسية.
All 97 static alerts are false positives tied to documentation formatting, CSS patterns, official URLs, a production literal, or expected Bash syntax. Two semantic risks remain: unpinned package installation and broad in-place project rewrites without confirmation. No prompt injection or exfiltration intent was found.
شارك تقرير التقييم المرتبط بالإصدار والشارة المحايدة وبطاقة التضمين والاستشهادات. تعرض Skillstore الأدلة من دون أن تقرر ما إذا كانت هذه المهارة آمنة.
https://skillstore.io/skills/calel33-tailwind-css-v4-mastery/audits/10?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/calel33-tailwind-css-v4-mastery?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/calel33-tailwind-css-v4-mastery?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/calel33-tailwind-css-v4-mastery/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/calel33-tailwind-css-v4-mastery.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>Calel33. (2026). Tailwind CSS V4 Mastery security audit report (audit version 10) [Author version 1.0.0]. Skillstore. https://skillstore.io/skills/calel33-tailwind-css-v4-mastery/audits/10@techreport{calel33-calel33-tailwind-css-v4-mastery-2026,
author = {Calel33},
title = {Tailwind CSS V4 Mastery security audit report (audit version 10)},
institution = {Skillstore},
year = {2026},
number = {10},
url = {https://skillstore.io/skills/calel33-tailwind-css-v4-mastery/audits/10},
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: "Tailwind CSS V4 Mastery security audit report (audit version 10)"
version: "1.0.0"
type: report
authors:
- name: "Calel33"
date-released: "2026-07-19"
url: "https://skillstore.io/skills/calel33-tailwind-css-v4-mastery/audits/10"
identifiers:
- type: other
value: "skillstore:calel33-tailwind-css-v4-mastery:audit:10"
description: "Skillstore immutable audit report identifier"
خطط لترقية من Tailwind v3 إلى v4، وحدد التغييرات الكاسرة، وعرّف خطوات التحقق.
أنشئ متغيرات ثيم بنهج CSS-first، واتفاقيات للمكونات، وأنماط تنسيق تراعي العلامة التجارية.
اختر تكامل Tailwind V4 المناسب وقِس تحسينات البناء وإعادة التحميل وحجم CSS.
اشرح أهم تغييرات Tailwind CSS V4 لمشروعي. غطِّ تكوين CSS-first، ومتطلبات المتصفح، ومخاطر الترحيل الشائعة.
ساعدني في تخطيط ترحيل من Tailwind v3 إلى v4. اسأل عن أداة البناء، والتكوين المخصص، وأهداف المتصفحات، والمكونات قبل تقديم الخطوات.
صمم نظام ثيم Tailwind CSS V4 لمكتبة مكونات. ضمّن استراتيجية المتغيرات، وتسمية المكونات، وdark mode، وخطوات التحقق.
راجع إعداد أداء Tailwind CSS V4 لدي. قارن بين خيارات Vite وPostCSS وCLI، ثم اقترح خطوات للقياس والتحسين.
المؤلف
Calel33الترخيص
MIT
إصدار المؤلف
v1.0.0
مراجعة Skillstore
r1
مرجع
67e6747f5b57a33ea8c62a0043d8f2ef310189ab
حداثة الصيانة
٢٣/٧/٢٠٢٦
الاستخدام
15 تنزيلات · 197 مشاهدات
بنية الملفات
بحث الويب وسياق الكود باستخدام Exa
غالبا ما يحتاج البحث التقني إلى مقالات حالية ووثائق وأمثلة عملية من مصادر متعددة. توفر هذه المهارة مسارات عمل قائمة على Exa للبحث عبر الويب، واكتشاف الكود، والمقارنة، وتحسين الاستعلامات.
إدارة مكدسات Graphite CLI
قد تكون طلبات السحب المتراصة صعبة الإدارة باستخدام أوامر Git العادية. تمنح هذه المهارة سير عمل مباشرًا عبر Graphite CLI لإنشاء المكدسات وإرسالها ومزامنتها وإعادة هيكلتها.
بناء تطبيقات Next.js 16
تتضمن عمليات الترحيل إلى Next.js 16 تغييرات كاسرة في التوجيه والتخزين المؤقت والأدوات. توفر هذه المهارة سير عمل مركزة وموارد بداية وقوائم مراجعة لمشاريع App Router الحديثة.
أنشئ تطبيقات React 19
يغيّر React 19 النماذج، والحالة غير المتزامنة، وrefs، وحدود الخادم. تمنح هذه المهارة Claude وCodex وClaude Code أنماطًا عملية للترقيات وعمليات البناء الجديدة.
تنفيذ React View Transitions
بواسطة vercel-labs
من السهل وضع انتقالات عرض React في المكان غير المناسب، مما يؤدي إلى رسوم متحركة صامتة أو مزعجة. ترشد هذه المهارة اختيارات الرسوم المتحركة للمسارات وSuspense والقوائم والعناصر المشتركة.
إنشاء قوالب React Email باستخدام Resend
بواسطة resend
إنشاء قوالب بريد إلكتروني جاهزة للإنتاج أمر صعب لأن عملاء البريد الإلكتروني يختلفون. ترشد هذه المهارة Claude وCodex وClaude Code خلال مكونات React Email والإرسال والتنسيق والتوطين وسير عمل المحرر.
تحسين ممارسات Vue 3 TypeScript
بواسطة hyf0
غالبا ما تواجه مشاريع Vue TypeScript أخطاء مربكة في القوالب وrouter وVolar. تمنح هذه المهارة إصلاحات Vue 3 موجهة لكل من Codex وClaude وClaude Code.
تحسين مكونات Vue Options API
بواسطة vuejs-ai
يمكن لمشاريع Vue Options API أن تفقد أمان الأنواع والربط الصحيح لـ this. توفر هذه المهارة أنماطًا مباشرة لمكونات Vue أكثر أمانًا.
إنشاء ميزات واجهة أمامية جاهزة للإنتاج
بواسطة davila7
تحتاج فرق الواجهة الأمامية إلى إرشادات متسقة حول React وNext.js عبر المشاريع. توفر هذه المهارة سير عمل مرجعيًا وممارسات للجودة وبرامج نصية مساعدة لتحليل الواجهة الأمامية.
تحسين أداء React و Next.js
بواسطة vercel-labs
غالبا ما تفقد تطبيقات React و Next.js سرعتها بسبب waterfalls، والحزم الكبيرة، وعمليات إعادة التصيير التي يمكن تجنبها. تمنح هذه المهارة الوكلاء قواعد ملموسة لإجراء تغييرات أكثر أمانا تركز على الأداء.