frontend-designer

Build production-grade frontend interfaces with modern React, TailwindCSS v4, and shadcn/ui. Five modes from project scaffolding to codebase audit.

Input: $ARGUMENTS — mode keyword + target, natural language UI description, or file path.

| server component | React component rendered on the server; default in Next.js/Remix App Router | "SSR component" | | client component | React component with "use client" directive; runs in the browser | "CSR component" | | design token | CSS custom property holding a design decision (color, spacing, font) | "CSS variable" (too generic) |

أنشئ واجهات أمامية على مستوى الإنتاج باستخدام React وTailwind CSS وshadcn/ui الحديثة. خمسة أوضاع: مشاريع السقالة، وإنشاء المكونات، وتكوين السمات ورموز التصميم، وأنماط إعادة البناء، وقواعد التعليمات البرمجية للتدقيق. يشفر أفضل الممارسات لمكونات خادم React 19 (المعتمدة على الإطار)، وتكوين TailwindCSS v4 CSS-first، وshadcn/ui مع أساسيات Radix، وCSS الحديثة (استعلامات الحاوية، :has()، وانتقالات العرض، والرسوم المتحركة التي تعتمد على التمرير)، وطباعة Monaspace، وVite 6. يحل محل مهارة تصميم الواجهة الأمامية. يُستخدم عند إنشاء أي مشروع أمامي أو تصميمه أو تصميمه أو تحسينه. ليس لواجهات برمجة التطبيقات الخلفية، أو تصميم قواعد البيانات، أو DevOps، أو أطر الاختبار، أو مكتبات إدارة الحالة، أو التوجيه، أو إعداد إطار عمل SSR الكامل. المصدر: wyattowalsh/agents.