component-architecture

This skill guides you through designing and implementing UI components using GoodVibes precision and analysis tools. Use this workflow when building React, Vue, or Svelte components with proper composition, state management, and performance optimization.

Trigger phrases: "build component", "create UI", "component structure", "render optimization", "state lifting", "component composition".

Before building components, understand existing patterns in the codebase.

قم بالتحميل بشكل استباقي عندما تتضمن المهمة تصميم أو بناء مكونات واجهة المستخدم. يُستخدم عندما يقول المستخدم "إنشاء مكون"، أو "إنشاء نموذج"، أو "إضافة نموذج"، أو "تصميم التخطيط"، أو "إعادة بناء هذه الصفحة". يغطي تكوين المكونات وتسلسلها الهرمي، وتصميم الدعامات وكتابتها، وتحسين العرض (المذكرة، وuseMemo، وuseCallback)، وأنماط المكونات المركبة، والنماذج الخاضعة للرقابة مقابل النماذج غير الخاضعة للرقابة، وتنظيم الملفات، وإمكانية الوصول إلى React وVue وSvelte. المصدر: mgd34msu/goodvibes-plugin.