develop-frontend
إنشاء واجهات أمامية بـ Next.js و React
يتطلب تطوير الواجهة الأمامية اتباع اتفاقيات محددة للمشروع، ومعايير الاختبار، وعمليات البناء. توفر هذه المهارة إرشادات خطوة بخطوة لتنفيذ ميزات Next.js/React مع بنية المكونات المناسبة، ودمج واجهات البرمجة، وتغطية الاختبارات.
Die Skill-ZIP herunterladen
In Claude hochladen
Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen
Einschalten und loslegen
Teste es
Verwendung von "develop-frontend". إنشاء صفحة تسجيل دخول مع نموذج البريد الإلكتروني وكلمة المرور
Erwartetes Ergebnis:
- ✓ تم إنشاء views/login/LoginView.tsx (مكون Container)
- ✓ تم إنشاء components/LoginForm/index.tsx (مكون Presentational)
- ✓ تم تنفيذ React Hook Form مع التحقق من Zod
- ✓ تمت إضافة مكونات نموذج shadcn/ui (Input, Button, Label)
- ✓ تم إنشاء hook مخصص useLogin مع iron-session
- ✓ تم كتابة 5 حالات اختبار بنسبة تغطية 92%
- ✓ اجتاز فحص Biome lint (0 أخطاء)
- ✓ نجح البناء
- ✓ الخادم يعمل على http://localhost:3000
Sicherheitsaudit
SicherPure markdown documentation skill containing only frontend development guidance. No executable code, scripts, or dangerous capabilities. All static findings are false positives: cryptographic hash references in metadata were misidentified as weak crypto, shell command examples in documentation were flagged as backtick execution, and standard YAML frontmatter was flagged as obfuscation. This is a guidance-only skill that instructs AI agents on development workflows.
Risikofaktoren
🌐 Netzwerkzugriff (4)
📁 Dateisystemzugriff (1)
⚙️ Externe Befehle (62)
Qualitätsbewertung
Was du bauen kannst
إنشاء ميزات جديدة
تنفيذ صفحات ومكونات جديدة وفق اتفاقيات المشروع مع الاختبار المناسب
إنشاء مكونات واجهة المستخدم
تطوير مكونات Presentational القابلة لإعادة الاستخدام مع Storybook والاختبار
تطبيق تغطية الاختبار
كتابة اختبارات الوحدة والتكامل لمكونات React باستخدام Vitest
Probiere diese Prompts
إنشاء صفحة لوحة معلومات جديدة في views/dashboard/ مع عرض إحصائيات المستخدم. تضمين مكون Container الذي يجلب البيانات باستخدام عميل Orval API ومكونات Presentational للواجهة. كتابة اختبارات Vitest بنسبة تغطية 80%.
بناء مكون UserCard قابل لإعادة الاستخدام باستخدام shadcn/ui Card. إنشاء المكون في components/UserCard/ مع index.tsx و index.test.tsx و index.stories.tsx. تطبيق تصميم متجاوب يعتمد على الجهاز اللوحي.
تنفيذ نموذج اتصال باستخدام React Hook Form و Zod validation. استخدام مكونات نموذج shadcn/ui. تضمين معالجة حالات الخطأ والتحميل. كتابة اختبارات للتحقق والنموذج.
دمج واجهة برمجة ملف المستخدم. إنشاء hook مخصص useUserProfile الذي يعالج حالات التحميل والخطأ والنجاح. استخدام العميل المولد من Orval. كتابة اختبارات مع معالجات MSW mock.
Bewährte Verfahren
- تحقق دائماً من مكونات shadcn/ui الموجودة قبل إنشاء جديدة
- فصل واضح بين مكونات Presentational (الواجهة) و Container (المنطق)
- تشغيل lint والاختبارات والبناء محلياً قبل الإبلاغ عن الاكتمال
Vermeiden
- استخدام any type بدلاً من unknown للأمان النوعي
- خلط من��ق الأعمال مع عرض الواجهة في نفس المكون
- تجاوز متطلبات تغطية الاختبار لتسريع التسليم