UX/UI Agent Skills: خلي Claude Code يولّد UI احترافي بـ 50 Gate تلقائي

🔗 رابط المشروع على GitHub: https://github.com/plugin87/ux-ui-agent-skills

---

الـ UI اللي الـ AI بيولّده دائماً بيكون فيه مشاكل: ألوان مش متناسقة، contrast ضعيف، touch targets صغيرة، inconsistent spacing. UX/UI Agent Skills من plugin87 بيحوّل Claude Code لـ design architect حقيقي يراعي كل القواعد دي.

2.3 ألف نجمة، MIT License. مكتبة من 25 skill + MCP server + 50 gate تلقائي.

الفكرة في جملة

بدل ما Claude Code يولّد UI “generic” وتسيبه يعدي بدون مراجعة، UX/UI Skills بيضيف قواعد مكتوبة + gates تلقائية بتفحص الـ output في browser حقيقي، وبترفض الـ build لو في مشكلة.

الـ Features

• DTCG Design Tokens — 3 طبقات: primitive، semantic، component
• Atomic Design Components — specs + states + accessibility notes
• Framework Adapters — React، Vue، Svelte، SwiftUI، Flutter وغيرهم
• Design System Mapping — Material 3، shadcn/ui، و138 design system جاهزين
• WCAG 2.2 AA/AAA Audits — contrast، keyboard navigation، screen readers
• Real Browser Gates — Playwright بيفحص الـ render الفعلي
• Design Critic Agent — بيراجع الشغل كـ designer حقيقي

الـ Skills (25)

• design-tokens — توليد وإدارة الـ tokens
• design-component — بناء components
• design-code — توليد كود من specs
• design-review — مراجعة شاملة
• a11y-audit — فحص accessibility
• /gate — تشغيل كل الـ gates
• /critique — نقد تصميمي
• /grill-me — أسئلة صعبة قبل الـ ship
• /ship — gate نهائي قبل الـ production

التثبيت

Claude Code (الطريقة الأسهل)

/plugin marketplace add plugin87/ux-ui-agent-skills
/plugin install ux-ui-agent-skills@ux-ui-agent-skills

MCP Server

claude mcp add ux-ui-gates -- npx -y --package=ux-ui-agent-skills ux-ui-mcp

تجربة بدون تثبيت

npx ux-ui-agent-skills demo

Homebrew (Mac)

brew install plugin87/tap/ux-ui-agent-skills

Codex أو AGENTS.md tools

npx ux-ui-agent-skills init --agent codex

الـ Gates — ليه ده مهم

الفلسفة: fail the build، مش تمشي على unverified work. 34 من 50 gate بتحتاج Playwright + Chrome عشان تفحص الـ render الفعلي:

• Contrast ratios — AA/AAA compliance
• Target sizes — min 44×44 للـ touch
• Keyboard navigation — كل عنصر accessible بالـ keyboard
• Focus states — واضحة ومرئية
• Dark mode consistency
• Semantic HTML

سيناريوهات Ibrahim

• faahm UI redesign — Playwright gates هتضمن الـ RTL support والـ accessibility للـ Arabic UI
• Vibe Coding course — module عن “ازاي تخلي الـ AI يولّد UI احترافي” — hook قوي لأن ده الـ gap الأكبر عند الطلاب
• DSE agency work — عملاء العيادات محتاجين websites accessible (legal requirement في كتير من البلاد). ده بيديلك validation تلقائي
• bond web app — لو هتبني dashboard للـ reels creation، الـ design-tokens هيضمن consistency
• n8nar blog — تحسين الـ UI بشكل automated

فرصة Service

“Design System Setup + Audit” — تثبيت UX/UI Skills + onboarding design tokens للعميل + audit للـ accessibility. سعر: 5-12 ألف جنيه. مناسب جداً لعملاء العيادات والـ e-commerce.

تحذيرات

• الـ 50 gate self-reported — جرّب بنفسك
• Playwright + Chrome lazem للـ 34 gate من الـ 50
• External contributions غير مقبولة (المالك بيقبل gate gaps فقط)

📎 رابط المشروع: github.com/plugin87/ux-ui-agent-skills