Zum Hauptinhalt springen
Dieser Inhalt ist noch nicht in Ihrer Sprache verfügbar und wird auf Englisch angezeigt.

Angular Architect

Skill Verifiziert Aktiv
Teil von:Fullstack Dev Skills

Generates Angular 17+ standalone components, configures advanced routing with lazy loading and guards, implements NgRx state management, applies RxJS patterns, and optimizes bundle performance. Use when building Angular 17+ applications with standalone components or signals, setting up NgRx stores, establishing RxJS reactive patterns, performance tuning, or writing Angular tests for enterprise apps.

Zweck

To act as a senior Angular architect, guiding the implementation of modern Angular applications with best practices for components, state, routing, and performance.

Funktionen

  • Generates Angular 17+ standalone components and signals.
  • Configures advanced routing with lazy loading and guards.
  • Implements NgRx state management.
  • Applies RxJS patterns and error handling.
  • Optimizes bundle performance and tests enterprise applications.

Anwendungsfälle

  • Building new Angular 17+ applications with standalone components or signals.
  • Setting up NgRx stores and managing state effectively.
  • Establishing robust RxJS reactive patterns and error handling.
  • Performance tuning and optimization of Angular applications.
  • Writing comprehensive unit and integration tests for enterprise apps.

Nicht-Ziele

  • Using NgModule-based components (except for compatibility).
  • Forgetting to unsubscribe from observables or using async operations without error handling.
  • Skipping accessibility attributes or exposing sensitive data in client-side code.
  • Using 'any' type without justification or mutating state directly in NgRx.

Workflow

  1. Analyze requirements for components, state, and routing.
  2. Design architecture focusing on standalone components, signals, and state flow.
  3. Implement features using OnPush strategy and reactive patterns.
  4. Setup NgRx store, effects, and selectors, verifying store hydration.
  5. Optimize performance and bundle size, verifying production builds.
  6. Write unit and integration tests aiming for >85% coverage.

Praktiken

  • Component Design
  • State Management
  • Reactive Programming
  • Routing
  • Performance Optimization
  • Testing Strategies

Voraussetzungen

  • Angular 17+ environment
  • Node.js and npm/yarn/pnpm
  • IDE with TypeScript support (e.g., VS Code)

Installation

Zuerst Marketplace hinzufügen

/plugin marketplace add jeffallan/claude-skills
/plugin install claude-skills@fullstack-dev-skills

Qualitätspunktzahl

Verifiziert
99 /100
Analysiert about 21 hours ago

Vertrauenssignale

Letzter Commit13 days ago
GitHub-Inhaber jeffallan (opens in new tab)
Sterne9k
LizenzMIT
Status
Quellcode ansehen

Ähnliche Erweiterungen

Angular Developer

100

Generiert Angular-Code und bietet architektonische Anleitungen. Auslösen bei der Erstellung von Projekten, Komponenten oder Diensten oder für Best Practices zur Reaktionsfähigkeit (Signale, linkedSignal, Ressource), Formulare, Dependency Injection, Routing, SSR, Barrierefreiheit (ARIA), Animationen, Styling (Komponentenstile, Tailwind CSS), Tests oder CLI-Tools.

Skill
angular

Testing Clickup Cli

100

Führen Sie Tests für clickup-cli aus und verwalten Sie diese. Umfasst Unit-Tests, E2E-Tests gegen einen echten ClickUp-Workspace und die Einrichtung von Testdaten. Verwenden Sie dies beim Ausführen von Tests, Hinzufügen von Testabdeckung, Debuggen von Testfehlern oder Einrichten von Test-Fixtures.

Skill
krodak

Playwright Best Practices

100

Verwenden Sie dies beim Schreiben von Playwright-Tests, Beheben von flackernden Tests, Debuggen von Fehlern, Implementieren des Page Object Model, Konfigurieren von CI/CD, Optimieren der Leistung, Mocken von APIs, Verwalten von Authentifizierung oder OAuth, Testen der Barrierefreiheit (axe-core), Hoch- und Herunterladen von Dateien, Mocken von Datums-/Uhrzeitangaben, WebSockets, Geolokalisierung, Berechtigungen, Multi-Tab-/Popup-Flows, mobilen/responsiven Layouts, Touch-Gesten, GraphQL, Fehlerbehandlung, Offline-Modus, Multi-User-Kollaboration, Drittanbieterdiensten (Zahlungen, E-Mail-Verifizierung), Überwachung von Konsolenfehlern, globalem Setup/Teardown, Testannotationen (skip, fixme, slow), Test-Tags (@smoke, @fast, @critical, Filterung mit --grep), Projekt­abhängigkeiten, Sicherheitstests (XSS, CSRF, Auth), Leistungsbudgets (Web Vitals, Lighthouse), iFrames, Komponententests, Canvas/WebGL, Service Workers/PWA, Testabdeckung, i18n/Lokalisierung, Electron-Apps oder Tests für Browser­erweiterungen. Deckt E2E-, Komponenten-, API-, visuelle, Barrierefreiheits-, Sicherheits-, Electron- und Erweiterungstests ab.

Skill
currents-dev

Senior Backend Engineer

100

Designs and implements backend systems including REST APIs, microservices, database architectures, authentication flows, and security hardening. Use when the user asks to "design REST APIs", "optimize database queries", "implement authentication", "build microservices", "review backend code", "set up GraphQL", "handle database migrations", or "load test APIs". Covers Node.js/Express/Fastify development, PostgreSQL optimization, API security, and backend architecture patterns.

Skill
alirezarezvani

Ui Ux Pro Max

100

UI/UX design intelligence with searchable style, palette, typography, and chart databases. Use when designing UI components, choosing colors/fonts, reviewing code for UX issues, building landing pages, or implementing responsive layouts.

Skill
spartan-stratos

Fixing Accessibility

100

Prüft und behebt HTML-Barrierefreiheitsprobleme, einschließlich ARIA-Labels, Tastaturnavigation, Fokusverwaltung, Farbkontrast und Formularfehlern. Verwenden Sie dies beim Hinzufügen interaktiver Steuerelemente, Formulare, Dialogfelder oder bei der Überprüfung der WCAG-Konformität.

Skill
ibelick