angular-ui-patterns
بناء واجهات Angular قوية باستخدام أنماط مثبتة
يتطلب إنشاء واجهات Angular موثوقة معالجة متسقة لحالات التحميل والأخطاء والحالات الفارغة. يوفر هذا النمط أنماطًا مجربة في المعارك تضمن فهم المستخدمين دائمًا لما يحدث في تطبيقك.
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“angular-ui-patterns”。 مكون يجلب ويعرض منشورات المستخدم
预期结果:
- يظهر المكون أداة تحميل هيكلية عند التحميل الأولي (لا توجد بيانات بعد)
- عند وصول البيانات فارغة، يعرض حالة فارغة مع زر 'إنشاء منشور'
- عند حدوث خطأ من واجهة برمجة التطبيقات، يعرض شريط خطأ مع خيار إعادة المحاولة مع إبقاء البيانات المخزنة مؤقتًا مرئية
- عند التحميل الناجح، يعرض قائمة المنشورات الكاملة مع سمات إمكانية الوصول المناسبة
正在使用“angular-ui-patterns”。 زر حفظ في نموذج إعدادات
预期结果:
- الزر مفعل فقط عندما يكون النموذج صالحًا
- عند النقر، يصبح الزر معطلاً ويعرض عجلة تحميل مع نص 'جاري الحفظ...'
- عند النجاح، يعرض علامة صح خضراء مع 'تم الحفظ!' ثم يعود بعد ثانيتين
- عرض خطأ، يعرض علامة X حمراء مع رسالة خطأ ويعطي زر الإذن للمحاولة مرة أخرى
安全审计
安全Documentation-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.
质量评分
你能构建什么
مطور واجهة أمامية يبني لوحات معلومات تعتمد على البيانات
تنفيذ حالات تحميل وأخطاء وفارغة متسقة عبر أدوات لوحة المعلومات التي تجلب بيانات من واجهات برمجة تطبيقات متعددة بأوقات استجابة متفاوتة.
قائد فريق يضع معايير واجهة المستخدم
تحديد أنماط على مستوى المؤسسة لإدارة الحالات ومعالجة الأخطاء وملاحظات المستخدم لضمان تجربة مستخدم متسقة عبر الفرق.
مساعد الذكاء الاصطناعي يولد مكونات Angular
توجيه Claude أو Codex لإنشاء مكونات Angular التي تتبع أنماطًا مثبتة لتجنب الأخطاء الشائعة مثل الأخطاء الصامتة أو حالات التحميل المفقودة.
试试这些提示
قم بإنشاء مكون Angular يعرض قائمة من العناصر. أظهر أداة تحميل هيكلية عند التحميل بدون بيانات، وحالة فارغة عندما تكون القائمة فارغة، وحالة خطأ مع إعادة المحاولة عند فشل التحميل، والبيانات الفعلية عند توفرها. استخدم إشارات Angular والتحكم الحديث في التدفق.
قم ببناء مكون نموذج Angular مع التحقق من النماذج التفاعلية. أظهر رسائل خطأ مضمنة للحقول غير الصالحة، وعطّل زر الإرسال أثناء إرسال النموذج، واعرض مؤشر تحميل على الزر، وأظهر إشعارات نجاح أو خطأ بعد اكتمال العملية غير المتزامنة.
قم بتنفيذ صفحة Angular تحميل المحتوى الحرج فورًا وتأجيل الأقسام غير الحرجة مثل التعليقات والعناصر ذات الصلة أو التحليلات باستخدام @defer.Include حالات العنصر نائب والتحميل والخطأ لكل كتلة مؤجلة مع أوقات تحميل دنيا مناسبة.
إنشاء نمط حوار تأكيد حذف يعرض حوارًا منبثقًا يطلب التأكيد، ويطبق تحديثات واجهة مستخدم متفائلة عند التأكيد، والتراجع عن التغييرات إذا فشل طلب الخادم، ويعرض ملاحظات مناسبة للمستخدم طوال العملية.
最佳实践
- دائمًا أظهر الأخطاء للمستخدمين - لا تلتقط الاستثناءات بصمت بدون ملاحظات
- عرض مؤشرات التحميل فقط عند عدم وجود بيانات موجودة لمنع وميض المحتوى
- عطّل أزرار الإجراءات أثناء العمليات غير المتزامنة لمنع الإرسال المكرر
避免
- عرض العجلة أثناء وجود بيانات مخزنة مؤقتًا - يتسبب في وميض غير ضروري أثناء إعادة الجلب
- ابتلاع الأخطاء في كتل الالتقاط بدون إبلاغ المستخدم عن الفشل
- السماح بالنقرات المتعددة السريعة على أزرار الإرسال بدون تعطيل أثناء المعالجة