قم بمعاينة مكونات React باستخدام تصميم Mantine + Tailwind الحقيقي باستخدام Ladle. يُستخدم عند تعديل مكونات واجهة المستخدم، أو إصلاح الأخطاء المرئية، أو عندما يطلب المستخدم رؤية الشكل الذي يبدو عليه أحد المكونات. يقوم بإنشاء قصص Ladle، ويلتقط لقطات شاشة في الوضع الداكن/الفاتح، ويقدمها للمراجعة. استخدم بشكل استباقي بعد تغييرات واجهة المستخدم.
ثبّت مهارة الذكاء الاصطناعي component-preview بسرعة في بيئة التطوير لديك عبر سطر الأوامر
المصدر: civitai/civitai.
Preview React components in isolation using Ladle (lightweight Storybook alternative) with real Mantine v7 + Tailwind styling. No dev server needed.
If these don't exist in the current worktree, copy them from main or create them. See Setup Reference below.
Use the browser-automation skill to capture cropped, padded screenshots:
قم بمعاينة مكونات React باستخدام تصميم Mantine + Tailwind الحقيقي باستخدام Ladle. يُستخدم عند تعديل مكونات واجهة المستخدم، أو إصلاح الأخطاء المرئية، أو عندما يطلب المستخدم رؤية الشكل الذي يبدو عليه أحد المكونات. يقوم بإنشاء قصص Ladle، ويلتقط لقطات شاشة في الوضع الداكن/الفاتح، ويقدمها للمراجعة. استخدم بشكل استباقي بعد تغييرات واجهة المستخدم. المصدر: civitai/civitai.
حقول وأوامر مستقرة للاقتباس في أنظمة الذكاء الاصطناعي والبحث.
npx skills add https://github.com/civitai/civitai --skill component-previewقم بمعاينة مكونات React باستخدام تصميم Mantine + Tailwind الحقيقي باستخدام Ladle. يُستخدم عند تعديل مكونات واجهة المستخدم، أو إصلاح الأخطاء المرئية، أو عندما يطلب المستخدم رؤية الشكل الذي يبدو عليه أحد المكونات. يقوم بإنشاء قصص Ladle، ويلتقط لقطات شاشة في الوضع الداكن/الفاتح، ويقدمها للمراجعة. استخدم بشكل استباقي بعد تغييرات واجهة المستخدم. المصدر: civitai/civitai.
افتح الطرفية أو أداة سطر الأوامر لديك مثل Terminal أو iTerm أو Windows Terminal انسخ ونفّذ هذا الأمر: npx skills add https://github.com/civitai/civitai --skill component-preview بعد التثبيت، سيتم إعداد المهارة تلقائيا في بيئة البرمجة بالذكاء الاصطناعي لديك وتصبح جاهزة للاستخدام في Claude Code أو Cursor أو OpenClaw
https://github.com/civitai/civitai