Angular Architect
Skill Verified ActiveGenerates 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.
To act as a senior Angular architect, guiding the implementation of modern Angular applications with best practices for components, state, routing, and performance.
Features
- 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.
Use Cases
- 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.
Non-Goals
- 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
- Analyze requirements for components, state, and routing.
- Design architecture focusing on standalone components, signals, and state flow.
- Implement features using OnPush strategy and reactive patterns.
- Setup NgRx store, effects, and selectors, verifying store hydration.
- Optimize performance and bundle size, verifying production builds.
- Write unit and integration tests aiming for >85% coverage.
Practices
- Component Design
- State Management
- Reactive Programming
- Routing
- Performance Optimization
- Testing Strategies
Prerequisites
- Angular 17+ environment
- Node.js and npm/yarn/pnpm
- IDE with TypeScript support (e.g., VS Code)
Installation
First, add the marketplace
/plugin marketplace add jeffallan/claude-skills/plugin install claude-skills@fullstack-dev-skillsQuality Score
VerifiedSimilar Extensions
Angular Developer
100Generates Angular code and provides architectural guidance. Trigger when creating projects, components, or services, or for best practices on reactivity (signals, linkedSignal, resource), forms, dependency injection, routing, SSR, accessibility (ARIA), animations, styling (component styles, Tailwind CSS), testing, or CLI tooling.
Testing Clickup Cli
100Run and manage tests for clickup-cli. Covers unit tests, e2e tests against a real ClickUp workspace, and the test data setup. Use when running tests, adding test coverage, debugging test failures, or setting up test fixtures.
Playwright Best Practices
100Use when writing Playwright tests, fixing flaky tests, debugging failures, implementing Page Object Model, configuring CI/CD, optimizing performance, mocking APIs, handling authentication or OAuth, testing accessibility (axe-core), file uploads/downloads, date/time mocking, WebSockets, geolocation, permissions, multi-tab/popup flows, mobile/responsive layouts, touch gestures, GraphQL, error handling, offline mode, multi-user collaboration, third-party services (payments, email verification), console error monitoring, global setup/teardown, test annotations (skip, fixme, slow), test tags (@smoke, @fast, @critical, filtering with --grep), project dependencies, security testing (XSS, CSRF, auth), performance budgets (Web Vitals, Lighthouse), iframes, component testing, canvas/WebGL, service workers/PWA, test coverage, i18n/localization, Electron apps, or browser extension testing. Covers E2E, component, API, visual, accessibility, security, Electron, and extension testing.
Senior Backend Engineer
100Designs 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.
Ui Ux Pro Max
100UI/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.
Fixing Accessibility
100Audit and fix HTML accessibility issues including ARIA labels, keyboard navigation, focus management, color contrast, and form errors. Use when adding interactive controls, forms, dialogs, or reviewing WCAG compliance.