Angular Expert
بناء تطبيقات Angular الحديثة مع الإشارات
هل تواجه صعوبات مع أنماط Angular القديمة ووحدات NgModules المعقدة؟ يوفر هذا الدليل إرشادات خبيرة حول Angular الحديثة (v20+) مع الإشارات والمكونات المستقلة وهندسة Zoneless.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "Angular Expert". Create a user card component with signal inputs
النتيجة المتوقعة:
A standalone UserCardComponent using input() for id, name, and role properties with defaults, output() for select events, and a computed signal for display formatting.
استخدام "Angular Expert". How do I migrate from @Input() to signal inputs?
النتيجة المتوقعة:
Replace @Input() decorator with input() function. For required inputs use input.required<T>(), for optional use input<T>(defaultValue). Update template references to call signals as functions: {{ name() }} instead of {{ name }}.
التدقيق الأمني
آمنAll static analysis findings were false positives. The skill contains documentation-only content (markdown and JSON configuration) with no executable code. URL references point to official Angular documentation. Markdown code formatting was incorrectly flagged as shell execution. No actual security risks detected.
درجة الجودة
ماذا يمكنك بناءه
إعداد مشروع Angular جديد
احصل على إرشادات خبيرة حول إعداد تطبيق Angular حديث مع الإشارات والمكونات المستقلة والتكوين الأمثل من البداية.
تحديث Angular القديم
خطط ونفذ الترحيل التدريجي من NgModules إلى المكونات المستقلة، مع تبني أنماط الإشارات وZoneless تدريجياً.
تحسين الأداء
نفذ أنماط متقدمة مثل التحميل المؤجل وhydration التزايدي وكشف التغيير OnPush لأقصى أداء.
جرّب هذه الموجهات
Create a new Angular component using Signals for state management. The component should display a counter with increment and decrement buttons, using signal inputs for initial value and signal outputs for events.
Help me convert this existing NgModule-based Angular component to a Standalone Component. Update all imports, remove module dependencies, and ensure the component uses modern signal-based inputs and outputs.
Guide me through converting an existing Angular application to Zoneless mode. Explain the configuration changes needed, how to handle change detection triggers, and what patterns to use for async operations without zone.js.
Set up server-side rendering with incremental hydration for an Angular application. Configure defer blocks with appropriate triggers (on viewport, on interaction, on idle) for optimal Core Web Vitals scores.
أفضل الممارسات
- Use Signals for local component state and RxJS for async streams like HTTP requests
- Enable OnPush change detection and let Signals trigger updates automatically
- Prefer Standalone Components with direct imports over SharedModules for better tree-shaking
تجنب
- Using RxJS BehaviorSubject for simple local state when Signals are sufficient
- Loading entire feature modules eagerly instead of using loadComponent and defer blocks
- Mixing legacy decorator patterns with Signals causing inconsistent change detection