Angular Expert
Moderne Angular-Anwendungen mit Signals entwickeln
Kämpfen Sie mit veralteten Angular-Mustern und komplexen NgModules? Dieser Skill bietet Expertenberatung zu modernem Angular (v20+) mit Signals, Standalone Components und Zoneless-Architektur.
تنزيل 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.
درجة الجودة
ماذا يمكنك بناءه
Neues Angular-Projekt einrichten
Erhalten Sie Expertenberatung zur Initialisierung einer modernen Angular-Anwendung mit Signals, Standalone Components und optimaler Konfiguration von Anfang an.
Legacy-Angular-Modernisierung
Planen und führen Sie eine schrittweise Migration von NgModules zu Standalone Components durch, wobei Sie Signals und Zoneless-Muster inkrementell einführen.
Leistungsoptimierung
Implementieren Sie fortgeschrittene Muster wie deferred Loading, inkrementelle Hydration und OnPush-Change-Detection für maximale Leistung.
جرّب هذه الموجهات
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.
أفضل الممارسات
- Verwenden Sie Signals für lokalen Component-Zustand und RxJS für Async-Streams wie HTTP-Anfragen
- Aktivieren Sie OnPush-Change-Detection und lassen Sie Signals Updates automatisch auslösen
- Bevorzugen Sie Standalone Components mit direkten Imports gegenüber SharedModules für besseres Tree-Shaking
تجنب
- Verwendung von RxJS BehaviorSubject für einfachen lokalen Zustand, wenn Signals ausreichen
- Laden gesamter Feature-Modules eager, anstatt loadComponent und defer-Blöcke zu verwenden
- Mischen von Legacy-Dekorator-Mustern mit Signals, was zu inkonsistenter Change-Detection führt