·atomic-design
*

atomic-design

التصميم الذري لبراد فروست للتسلسل الهرمي لمكونات واجهة المستخدم: الذرات والجزيئات والكائنات الحية والقوالب. يتم التنشيط عند إنشاء واجهات المستخدم، أو إنشاء أنظمة التصميم، أو تنظيم المكونات، أو هيكلة كود الواجهة الأمامية. ينطبق على أي إطار عمل لواجهة المستخدم (React، Vue، SwiftUI، وما إلى ذلك).

72التثبيتات·2الرائج·@jwilger

التثبيت

$npx skills add https://github.com/jwilger/agent-skills --skill atomic-design

كيفية تثبيت atomic-design

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

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

المصدر: jwilger/agent-skills.

Value: Simplicity and communication. Building UI from small, named, composable pieces makes the interface understandable to everyone on the team and prevents the complexity that comes from monolithic components.

Teaches how to organize UI components into a hierarchy of increasing complexity: atoms, molecules, organisms, and templates. Each level has clear responsibilities and composition rules. The outcome is a component system where every piece is reusable, testable in isolation, and named in a shared vocabulary.

Start with the smallest reusable elements and compose upward. Never skip a level.

التصميم الذري لبراد فروست للتسلسل الهرمي لمكونات واجهة المستخدم: الذرات والجزيئات والكائنات الحية والقوالب. يتم التنشيط عند إنشاء واجهات المستخدم، أو إنشاء أنظمة التصميم، أو تنظيم المكونات، أو هيكلة كود الواجهة الأمامية. ينطبق على أي إطار عمل لواجهة المستخدم (React، Vue، SwiftUI، وما إلى ذلك). المصدر: jwilger/agent-skills.

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

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

أمر التثبيت
npx skills add https://github.com/jwilger/agent-skills --skill atomic-design
الفئة
*وسائط إبداعية
موثق
أول ظهور
2026-02-20
آخر تحديث
2026-03-11

Browse more skills from jwilger/agent-skills

إجابات سريعة

ما هي atomic-design؟

التصميم الذري لبراد فروست للتسلسل الهرمي لمكونات واجهة المستخدم: الذرات والجزيئات والكائنات الحية والقوالب. يتم التنشيط عند إنشاء واجهات المستخدم، أو إنشاء أنظمة التصميم، أو تنظيم المكونات، أو هيكلة كود الواجهة الأمامية. ينطبق على أي إطار عمل لواجهة المستخدم (React، Vue، SwiftUI، وما إلى ذلك). المصدر: jwilger/agent-skills.

كيف أثبّت atomic-design؟

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

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

https://github.com/jwilger/agent-skills

التفاصيل

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