يُستخدم عند إنشاء واجهات مستخدم React باستخدام مكتبات المكونات أو تنفيذ النماذج أو مربعات الحوار أو التنقل أو عرض البيانات. يُستخدم عندما يذكر المستخدم shadcn، أو Radix UI، أو Base UI، أو يسأل عن مكونات React التي يمكن الوصول إليها. اقترح بشكل استباقي عند إنشاء واجهة مستخدم يمكنها الاستفادة من المكونات التي يمكن الوصول إليها والتي تم إنشاؤها مسبقًا باستخدام تصميم Tailwind CSS.
ثبّت مهارة الذكاء الاصطناعي shadcn-ui بسرعة في بيئة التطوير لديك عبر سطر الأوامر
المصدر: akornmeier/claude-config.
ShadCN/UI is a collection of beautifully-designed, accessible components built with TypeScript, Tailwind CSS, and headless UI primitives (Base UI or Radix UI). Unlike traditional component libraries, ShadCN uses a copy-paste model - components are copied into YOUR project, giving you full ownership and customization control.
Core Principle: You own the code. Components live in your project (typically src/components/ui/), not in nodemodules. This fundamentally changes how you think about customization - edit the source directly.
| Base UI | Prefer MUI ecosystem, need unstyled primitives with strong React patterns | | Radix UI | Want extensive primitive catalog, strong accessibility defaults |
يُستخدم عند إنشاء واجهات مستخدم React باستخدام مكتبات المكونات أو تنفيذ النماذج أو مربعات الحوار أو التنقل أو عرض البيانات. يُستخدم عندما يذكر المستخدم shadcn، أو Radix UI، أو Base UI، أو يسأل عن مكونات React التي يمكن الوصول إليها. اقترح بشكل استباقي عند إنشاء واجهة مستخدم يمكنها الاستفادة من المكونات التي يمكن الوصول إليها والتي تم إنشاؤها مسبقًا باستخدام تصميم Tailwind CSS. المصدر: akornmeier/claude-config.
حقول وأوامر مستقرة للاقتباس في أنظمة الذكاء الاصطناعي والبحث.
npx skills add https://github.com/akornmeier/claude-config --skill shadcn-uiيُستخدم عند إنشاء واجهات مستخدم React باستخدام مكتبات المكونات أو تنفيذ النماذج أو مربعات الحوار أو التنقل أو عرض البيانات. يُستخدم عندما يذكر المستخدم shadcn، أو Radix UI، أو Base UI، أو يسأل عن مكونات React التي يمكن الوصول إليها. اقترح بشكل استباقي عند إنشاء واجهة مستخدم يمكنها الاستفادة من المكونات التي يمكن الوصول إليها والتي تم إنشاؤها مسبقًا باستخدام تصميم Tailwind CSS. المصدر: akornmeier/claude-config.
افتح الطرفية أو أداة سطر الأوامر لديك مثل Terminal أو iTerm أو Windows Terminal انسخ ونفّذ هذا الأمر: npx skills add https://github.com/akornmeier/claude-config --skill shadcn-ui بعد التثبيت، سيتم إعداد المهارة تلقائيا في بيئة البرمجة بالذكاء الاصطناعي لديك وتصبح جاهزة للاستخدام في Claude Code أو Cursor أو OpenClaw
https://github.com/akornmeier/claude-config