تنفيذ React View Transitions
من السهل وضع انتقالات عرض React في المكان غير المناسب، مما يؤدي إلى رسوم متحركة صامتة أو مزعجة. ترشد هذه المهارة اختيارات الرسوم المتحركة للمسارات وSuspense والقوائم والعناصر المشتركة.
انسخ هذا الطلب إلى Agent لديك. يتضمن صفحة Skill المعتمدة وملف manifest.
Review the Skillstore skill "vercel-react-view-transitions" from https://skillstore.io/skills/vercel-labs-vercel-react-view-transitions.md and its manifest at https://skillstore.io/api/skills/vercel-labs-vercel-react-view-transitions/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.يجب أن يواصل Agent عرض خطته وطلب أي تأكيد تفرضه سياسة الأمان.
استخدم هذه الروابط عندما يحتاج AI Agent أو crawler أو script إلى سياق نظيف بدلًا من قراءة الصفحة كاملة.
جارٍ استخدام "vercel-react-view-transitions". أضف رسما متحركا لصفحة التفاصيل من بطاقة معرض.
النتيجة المتوقعة:
خريطة مسارات، وسلوك nav-forward وnav-back، واسم صورة مشتركة، وملاحظة لإبقاء الرأس معزولا.
جارٍ استخدام "vercel-react-view-transitions". حسن رسوم حالة التحميل المتحركة لشبكة معروضة من الخادم.
النتيجة المتوقعة:
خطة إظهار Suspense مع خروج fallback، ودخول المحتوى، وتعطيل الافتراضي، وتغطية تقليل الحركة.
جارٍ استخدام "vercel-react-view-transitions". راجع الانتقالات الحالية بحثا عن تعارضات.
النتيجة المتوقعة:
نتائج حول الحدود على مستوى التخطيط، وأسماء العناصر المشتركة المكررة، والمواضع التي يجب أن تتحول فيها الانزلاقات الاتجاهية إلى تلاشيات.
AI adjudication found no executable command behavior, keylogging, system reconnaissance, data exfiltration, or prompt injection. The static hits are false positives from markdown examples, JSX template literals, UI wording, and reference URLs.
شارك تقرير التقييم المرتبط بالإصدار والشارة المحايدة وبطاقة التضمين والاستشهادات. تعرض Skillstore الأدلة من دون أن تقرر ما إذا كانت هذه المهارة آمنة.
https://skillstore.io/skills/vercel-labs-vercel-react-view-transitions/audits/6?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/vercel-labs-vercel-react-view-transitions?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/vercel-labs-vercel-react-view-transitions?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/vercel-labs-vercel-react-view-transitions/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/vercel-labs-vercel-react-view-transitions.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>vercel-labs. (2026). vercel-react-view-transitions security audit report (audit version 6) [Author version 1.0.0]. Skillstore. https://skillstore.io/skills/vercel-labs-vercel-react-view-transitions/audits/6@techreport{vercel-labs-vercel-labs-vercel-react-view-transitions-2026,
author = {vercel-labs},
title = {vercel-react-view-transitions security audit report (audit version 6)},
institution = {Skillstore},
year = {2026},
number = {6},
url = {https://skillstore.io/skills/vercel-labs-vercel-react-view-transitions/audits/6},
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: "vercel-react-view-transitions security audit report (audit version 6)"
version: "1.0.0"
type: report
authors:
- name: "vercel-labs"
date-released: "2026-07-09"
url: "https://skillstore.io/skills/vercel-labs-vercel-react-view-transitions/audits/6"
identifiers:
- type: other
value: "skillstore:vercel-labs-vercel-react-view-transitions:audit:6"
description: "Skillstore immutable audit report identifier"
خطط ونفذ انتقالات اتجاهية بين صفحات القائمة والتفاصيل والتسلسل المرتب.
طبق أنماط انتقال العرض في App Router عبر الصفحات والروابط وحالات التحميل والعناصر المشتركة.
أنشئ إرشادات متسقة للتلاشي والانزلاق والعناصر المشتركة وتقليل الحركة وحدود الرسوم المتحركة.
أضف رسوم دخول وخروج متحركة أساسية إلى مكون React هذا. استخدم إرشادات المهارة واشرح أين تنتمي حدود ViewTransition.
دقق تدفق تغيير المسار هذا وأضف انتقالات تنقل اتجاهية فقط حيث يكون العمق المكاني واضحا.
أنشئ انتقالات عناصر مشتركة بين عرض القائمة هذا وعرض التفاصيل. أبق الأسماء فريدة وضمّن سلوك fallback.
راجع مشروع Next.js App Router هذا من حيث انتقالات المسارات وإظهارات Suspense والعناصر المستمرة ودعم تقليل الحركة.
المؤلف
vercel-labsالترخيص
MIT
إصدار المؤلف
v1.0.0
مراجعة Skillstore
r1
مرجع
26421118b848d9f1efc0aa169d8a7a9e7e0a877e
حداثة الصيانة
١٨/٧/٢٠٢٦
الاستخدام
7 تنزيلات · 92 مشاهدات
بنية الملفات
📄 SKILL.md
إنشاء مهارات ذكاء اصطناعي قابلة لإعادة الاستخدام
تحتاج الفرق إلى طرق متسقة لحزم معرفة الوكلاء وسير العمل القابلين لإعادة الاستخدام. ترشد هذه المهارة Claude وCodex وClaude Code خلال تخطيط المهارات وتأليفها والتحقق منها وحزمها.
تحسين أداء React و Next.js
غالبا ما تفقد تطبيقات React و Next.js سرعتها بسبب waterfalls، والحزم الكبيرة، وعمليات إعادة التصيير التي يمكن تجنبها. تمنح هذه المهارة الوكلاء قواعد ملموسة لإجراء تغييرات أكثر أمانا تركز على الأداء.
تطبيق أنماط التركيب في React
تصبح مكونات React التي تحتوي على العديد من الخصائص المنطقية صعبة الصيانة والمراجعة. تمنح هذه المهارة الوكلاء أنماطًا واضحة للمكونات المركبة، والمتغيرات الصريحة، والحالة القائمة على المزوّد.
تحسين تطبيقات React Native
قد تعاني تطبيقات React Native من قوائم بطيئة، وحركات متقطعة، وأخطاء خاصة بالمنصات. تمنح هذه المهارة Codex وClaude وClaude Code قواعد موجزة للعمل عالي الأداء في Expo وReact Native.
تطبيق أفضل ممارسات Next.js
غالبا ما تفشل مشاريع Next.js بسبب الحدود غير الواضحة، وبطء جلب البيانات، وأخطاء النشر. تمنح هذه المهارة Claude وCodex وClaude Code قواعد مركزة للعمل الحديث باستخدام App Router.
بناء Next.js Cache Components بشكل صحيح
قد يكون اعتماد Cache Components بأمان أثناء عمليات ترحيل Next.js صعبا. تمنحك هذه المهارة إرشادات مركزة حول PPR وتوجيهات cache والمدد الزمنية والعلامات والإبطال.
إنشاء ميزات واجهة أمامية جاهزة للإنتاج
بواسطة davila7
تحتاج فرق الواجهة الأمامية إلى إرشادات متسقة حول React وNext.js عبر المشاريع. توفر هذه المهارة سير عمل مرجعيًا وممارسات للجودة وبرامج نصية مساعدة لتحليل الواجهة الأمامية.
أنشئ تطبيقات Fullstack بإرشاد خبير
بواسطة alirezarezvani
غالبًا ما تحتاج مشاريع Fullstack إلى إعداد متسق، وخيارات معمارية، وفحوصات جودة. توفر هذه المهارة سكربتات ومراجع للعمل على React وNext.js وNode.js وGraphQL وPostgreSQL.
تحسين أداء Next.js
بواسطة Atman36
قد تصبح تطبيقات Next.js بطيئة بسبب الحِزم الكبيرة، والتخزين المؤقت الضعيف، والوسائط غير المحسّنة. ترشد هذه المهارة Claude وCodex وClaude Code عبر تحسينات أداء مركّزة لتطبيقات الإنتاج.
أتمتة توطين تطبيقات الويب
بواسطة DNYoussef
غالبا ما تؤدي إضافة دعم متعدد اللغات إلى تشتيت النصوص، والتوجيه، والبيانات الوصفية، وملفات اللغات عبر قاعدة الشيفرة. تخطط هذه المهارة لإعداد i18n وتنفذه مع الترجمات، والتحقق، والتوثيق.
بناء مكونات React آمنة الأنواع
بواسطة softaworks
غالبا ما يتطلب العمل على React TypeScript أنواعا دقيقة للأحداث والـ hooks والمسارات. توفر هذه المهارة أنماطا مركزة للمكونات المكتوبة الأنواع، وواجهات React 19 API، والتوجيه.
إنشاء قوالب React Email باستخدام Resend
بواسطة resend
إنشاء قوالب بريد إلكتروني جاهزة للإنتاج أمر صعب لأن عملاء البريد الإلكتروني يختلفون. ترشد هذه المهارة Claude وCodex وClaude Code خلال مكونات React Email والإرسال والتنسيق والتوطين وسير عمل المحرر.