angular-ui-patterns
بناء واجهات Angular قوية باستخدام أنماط مثبتة
يتطلب إنشاء واجهات Angular موثوقة معالجة متسقة لحالات التحميل والأخطاء والحالات الفارغة. يوفر هذا النمط أنماطًا مجربة في المعارك تضمن فهم المستخدمين دائمًا لما يحدث في تطبيقك.
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "angular-ui-patterns". مكون يجلب ويعرض منشورات المستخدم
Résultat attendu:
- يظهر المكون أداة تحميل هيكلية عند التحميل الأولي (لا توجد بيانات بعد)
- عند وصول البيانات فارغة، يعرض حالة فارغة مع زر 'إنشاء منشور'
- عند حدوث خطأ من واجهة برمجة التطبيقات، يعرض شريط خطأ مع خيار إعادة المحاولة مع إبقاء البيانات المخزنة مؤقتًا مرئية
- عند التحميل الناجح، يعرض قائمة المنشورات الكاملة مع سمات إمكانية الوصول المناسبة
Utilisation de "angular-ui-patterns". زر حفظ في نموذج إعدادات
Résultat attendu:
- الزر مفعل فقط عندما يكون النموذج صالحًا
- عند النقر، يصبح الزر معطلاً ويعرض عجلة تحميل مع نص 'جاري الحفظ...'
- عند النجاح، يعرض علامة صح خضراء مع 'تم الحفظ!' ثم يعود بعد ثانيتين
- عرض خطأ، يعرض علامة X حمراء مع رسالة خطأ ويعطي زر الإذن للمحاولة مرة أخرى
Audit de sécurité
SûrDocumentation-only skill containing Angular UI pattern guidance. All 63 static analysis findings are false positives: URLs are documentation references (not network calls), backticks are markdown code fencing (not shell execution), and crypto detections are text pattern misidentifications. No executable code, network requests, or command execution present.
Score de qualité
Ce que vous pouvez construire
مطور واجهة أمامية يبني لوحات معلومات تعتمد على البيانات
تنفيذ حالات تحميل وأخطاء وفارغة متسقة عبر أدوات لوحة المعلومات التي تجلب بيانات من واجهات برمجة تطبيقات متعددة بأوقات استجابة متفاوتة.
قائد فريق يضع معايير واجهة المستخدم
تحديد أنماط على مستوى المؤسسة لإدارة الحالات ومعالجة الأخطاء وملاحظات المستخدم لضمان تجربة مستخدم متسقة عبر الفرق.
مساعد الذكاء الاصطناعي يولد مكونات Angular
توجيه Claude أو Codex لإنشاء مكونات Angular التي تتبع أنماطًا مثبتة لتجنب الأخطاء الشائعة مثل الأخطاء الصامتة أو حالات التحميل المفقودة.
Essayez ces prompts
قم بإنشاء مكون Angular يعرض قائمة من العناصر. أظهر أداة تحميل هيكلية عند التحميل بدون بيانات، وحالة فارغة عندما تكون القائمة فارغة، وحالة خطأ مع إعادة المحاولة عند فشل التحميل، والبيانات الفعلية عند توفرها. استخدم إشارات Angular والتحكم الحديث في التدفق.
قم ببناء مكون نموذج Angular مع التحقق من النماذج التفاعلية. أظهر رسائل خطأ مضمنة للحقول غير الصالحة، وعطّل زر الإرسال أثناء إرسال النموذج، واعرض مؤشر تحميل على الزر، وأظهر إشعارات نجاح أو خطأ بعد اكتمال العملية غير المتزامنة.
قم بتنفيذ صفحة Angular تحميل المحتوى الحرج فورًا وتأجيل الأقسام غير الحرجة مثل التعليقات والعناصر ذات الصلة أو التحليلات باستخدام @defer.Include حالات العنصر نائب والتحميل والخطأ لكل كتلة مؤجلة مع أوقات تحميل دنيا مناسبة.
إنشاء نمط حوار تأكيد حذف يعرض حوارًا منبثقًا يطلب التأكيد، ويطبق تحديثات واجهة مستخدم متفائلة عند التأكيد، والتراجع عن التغييرات إذا فشل طلب الخادم، ويعرض ملاحظات مناسبة للمستخدم طوال العملية.
Bonnes pratiques
- دائمًا أظهر الأخطاء للمستخدمين - لا تلتقط الاستثناءات بصمت بدون ملاحظات
- عرض مؤشرات التحميل فقط عند عدم وجود بيانات موجودة لمنع وميض المحتوى
- عطّل أزرار الإجراءات أثناء العمليات غير المتزامنة لمنع الإرسال المكرر
Éviter
- عرض العجلة أثناء وجود بيانات مخزنة مؤقتًا - يتسبب في وميض غير ضروري أثناء إعادة الجلب
- ابتلاع الأخطاء في كتل الالتقاط بدون إبلاغ المستخدم عن الفشل
- السماح بالنقرات المتعددة السريعة على أزرار الإرسال بدون تعطيل أثناء المعالجة