الواجهات والتصميم

Frontend UI Engineering

بواسطة Addy Osmani 78k نجوم GitHub

بناء واجهات بمستوى إنتاجي، متاحة وresponsive — هندسة الكومبوننتس وأنظمة التصميم وإدارة الـ state والالتزام بالـ WCAG.

#ui#accessibility#components#engineering

Claude Code Codex

نظرة عامة

جزء من مجموعة agent-skills الإنتاجية بتاعة Addy Osmani، والسكيل ده مركّز على بناء واجهات شكلها وإحساسها إنتاجي مش طالع من AI. بيغطي هندسة الكومبوننتس وأنظمة التصميم وإدارة الـ state والالتزام بمتطلبات سهولة الوصول WCAG. بيشتغل أوتوماتيك ساعة ما تبني أو تعدّل UI.

بتنفع في إيه

هيكلة هندسة الكومبوننتس
تنفيذ عناصر تحكم تفاعلية متاحة
إدارة الـ UI state بنظافة
خلي اللياوت responsive

التثبيت

التثبيت في Claude Code

# ضيف الـ marketplace وبعدين ثبّت المهارة في Claude Code:
/plugin marketplace add addyosmani/agent-skills
/plugin install frontend-ui-engineering

# أو ثبّتها يدويًا في ~/.claude/skills:
git clone https://github.com/addyosmani/agent-skills.git
cp -r agent-skills/frontend-ui-engineering ~/.claude/skills/frontend-ui-engineering

التثبيت في Codex

# Codex بيقرأ مهارات SKILL.md من ~/.codex/skills (اكتشاف تلقائي):
git clone https://github.com/addyosmani/agent-skills.git
cp -r agent-skills/frontend-ui-engineering ~/.codex/skills/frontend-ui-engineering

# وبعدين استخدم المهارة في Codex — بتتحمّل وقت الحاجة.

زيارة المصدر (GitHub)

استكشف أدوات AI

أدوات AI تكمل شغلك — للمصممين والمطورين

اقرأ مقالات عن AI

نصايح عملية في التصميم والذكاء الاصطناعي

أدوات مشابهة

الواجهات والتصميم

Frontend Design

عمل واجهات frontend مميزة بمستوى إنتاجي بعيداً عن جمالية الـ AI العامة — صفحات وكومبوننتس وartifacts وبوسترات.

Claude Code Codex

الواجهات والتصميم

Web Artifacts Builder

بناء artifacts HTML معقدة ومتعددة الكومبوننتس لـ Claude.ai باستخدام React وTailwind.

Claude Code Codex

الواجهات والتصميم

Animation Systems

حركة ويب بمستوى المنتجات زي Stripe وLinear وApple وVercel — إعدادات الـ easing والمدة والتناسق والأداء ووضع تقليل الحركة.

Claude Code Codex