·ui-design-system
*

ui-design-system

✓
samhvw8/dot-claudeGitHub: samhvw8/dot-claudeالمصدر: samhvw8/dot-claude

تفاعل مع أنظمة مكونات واجهة المستخدم باستخدام TailwindCSS + Radix + shadcn/ui. المكدس: TailwindCSS (التصميم)، Radix UI (البدائيات)، shadcn/ui (المكونات)، React/Next.js. القدرات: تصميم بنية النظام، والمكونات التي يمكن الوصول إليها، والتخطيطات سريعة الاستجابة، والسمات، والوضع المظلم، وتكوين المكونات. الإجراءات: مراجعة مكونات واجهة المستخدم وتصميمها وإنشائها وتحسينها وإعادة هيكلتها. الكلمات الرئيسية: TailwindCSS، Radix UI، shadcn/ui، نظام التصميم، مكتبة المكونات، إمكانية الوصول، ARIA، الاستجابة، الوضع المظلم، السمات، متغيرات CSS، بنية المكونات، التصميم الذري، رموز التصميم، البديل، الفتحة، التكوين. يُستخدم عندما: إنشاء مكتبات المكونات، وتنفيذ shadcn/ui، وإنشاء واجهات مستخدم يمكن الوصول إليها، وإعداد أنظمة التصميم، وإضافة الوضع المظلم/السمات، ومراجعة بنية مكونات واجهة المستخدم.

samhvw8·ui·design·system
1.9Kالتثبيتات·19الرائج·@samhvw8

التثبيت

GitHub: samhvw8/dot-claude
$npx skills add https://github.com/samhvw8/dot-claude --skill ui-design-system

كيفية تثبيت ui-design-system

ثبّت مهارة الذكاء الاصطناعي ui-design-system بسرعة في بيئة التطوير لديك عبر سطر الأوامر

  1. افتح الطرفية: افتح الطرفية أو أداة سطر الأوامر لديك مثل Terminal أو iTerm أو Windows Terminal
  2. نفّذ أمر التثبيت: انسخ ونفّذ هذا الأمر: npx skills add https://github.com/samhvw8/dot-claude --skill ui-design-system
  3. تحقق من التثبيت: بعد التثبيت، سيتم إعداد المهارة تلقائيا في بيئة البرمجة بالذكاء الاصطناعي لديك وتصبح جاهزة للاستخدام في Claude Code أو Cursor أو OpenClaw

المصدر: samhvw8/dot-claude.

SKILL.md

عرض النص الخام

Comprehensive UI/UX design, review, and improvement for modern web applications.

Production-ready implementations with TailwindCSS + Radix UI + shadcn/ui and modern React patterns.

Key Principle: Each layer enhances the one below. Start with Tailwind for styling, add Radix for accessible behavior, use shadcn/ui for complete components.

تفاعل مع أنظمة مكونات واجهة المستخدم باستخدام TailwindCSS + Radix + shadcn/ui. المكدس: TailwindCSS (التصميم)، Radix UI (البدائيات)، shadcn/ui (المكونات)، React/Next.js. القدرات: تصميم بنية النظام، والمكونات التي يمكن الوصول إليها، والتخطيطات سريعة الاستجابة، والسمات، والوضع المظلم، وتكوين المكونات. الإجراءات: مراجعة مكونات واجهة المستخدم وتصميمها وإنشائها وتحسينها وإعادة هيكلتها. الكلمات الرئيسية: TailwindCSS، Radix UI، shadcn/ui، نظام التصميم، مكتبة المكونات، إمكانية الوصول، ARIA، الاستجابة، الوضع المظلم، السمات، متغيرات CSS، بنية المكونات، التصميم الذري، رموز التصميم، البديل، الفتحة، التكوين. يُستخدم عندما: إنشاء مكتبات المكونات، وتنفيذ shadcn/ui، وإنشاء واجهات مستخدم يمكن الوصول إليها، وإعداد أنظمة التصميم، وإضافة الوضع المظلم/السمات، ومراجعة بنية مكونات واجهة المستخدم. المصدر: samhvw8/dot-claude.

حقائق جاهزة للاقتباس

حقول وأوامر مستقرة للاقتباس في أنظمة الذكاء الاصطناعي والبحث.

أمر التثبيت
npx skills add https://github.com/samhvw8/dot-claude --skill ui-design-system
المصدر
samhvw8/dot-claude
الفئة
*وسائط إبداعية
موثق
✓
أول ظهور
2026-02-01
آخر تحديث
2026-03-10
الرابط
https://www.learn-skills.dev/ar/skills/samhvw8/dot-claude/ui-design-system

Browse more skills from samhvw8/dot-claude

إجابات سريعة

ما هي ui-design-system؟

تفاعل مع أنظمة مكونات واجهة المستخدم باستخدام TailwindCSS + Radix + shadcn/ui. المكدس: TailwindCSS (التصميم)، Radix UI (البدائيات)، shadcn/ui (المكونات)، React/Next.js. القدرات: تصميم بنية النظام، والمكونات التي يمكن الوصول إليها، والتخطيطات سريعة الاستجابة، والسمات، والوضع المظلم، وتكوين المكونات. الإجراءات: مراجعة مكونات واجهة المستخدم وتصميمها وإنشائها وتحسينها وإعادة هيكلتها. الكلمات الرئيسية: TailwindCSS، Radix UI، shadcn/ui، نظام التصميم، مكتبة المكونات، إمكانية الوصول، ARIA، الاستجابة، الوضع المظلم، السمات، متغيرات CSS، بنية المكونات، التصميم الذري، رموز التصميم، البديل، الفتحة، التكوين. يُستخدم عندما: إنشاء مكتبات المكونات، وتنفيذ shadcn/ui، وإنشاء واجهات مستخدم يمكن الوصول إليها، وإعداد أنظمة التصميم، وإضافة الوضع المظلم/السمات، ومراجعة بنية مكونات واجهة المستخدم. المصدر: samhvw8/dot-claude.

كيف أثبّت ui-design-system؟

افتح الطرفية أو أداة سطر الأوامر لديك مثل Terminal أو iTerm أو Windows Terminal انسخ ونفّذ هذا الأمر: npx skills add https://github.com/samhvw8/dot-claude --skill ui-design-system بعد التثبيت، سيتم إعداد المهارة تلقائيا في بيئة البرمجة بالذكاء الاصطناعي لديك وتصبح جاهزة للاستخدام في Claude Code أو Cursor أو OpenClaw

أين مستودع المصدر؟

https://github.com/samhvw8/dot-claude

التفاصيل

الفئة
*وسائط إبداعية
المصدر
skills.sh
أول ظهور
2026-02-01

مهارات ذات صلة

ui-ux-design
118 التثبيتات
claude-md-architect
84 التثبيتات
nextjs-turborepo
78 التثبيتات
project-planner
56 التثبيتات
google-adk-python
50 التثبيتات
mobile-development
41 التثبيتات