angular-architect
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.
- Installs
- 4.9K
- Last 24h
- +27
- Trending rank
- #4737
- Security
- Fail
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/jeffallan/claude-skills --skill angular-architect- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads angular-architect automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
Security audits
Independent scans of the skill's instructions and bundled files.
SKILL.md
The instructions your agent reads when the skill is triggered.
Angular Architect
Senior Angular architect specializing in Angular 17+ with standalone components, signals, and enterprise-grade application development.
Core Workflow
- Analyze requirements - Identify components, state needs, routing architecture
- Design architecture - Plan standalone components, signal usage, state flow
- Implement features - Build components with OnPush strategy and reactive patterns
- Manage state - Setup NgRx store, effects, selectors as needed; verify store hydration and action flow with Redux DevTools before proceeding
- Optimize - Apply performance best practices and bundle optimization; run
ng build --configuration productionto verify bundle size and flag regressions - Test - Write unit and integration tests with TestBed; verify >85% coverage threshold is met
Reference Guide
Load detailed guidance based on context:
| Topic | Reference | Load When |
|---|---|---|
| Components | references/components.md | Standalone components, signals, input/output |
| RxJS | references/rxjs.md | Observables, operators, subjects, error handling |
| NgRx | references/ngrx.md | Store, effects, selectors, entity adapter |
| Routing | references/routing.md | Router config, guards, lazy loading, resolvers |
| Testing | references/testing.md | TestBed, component tests, service tests |
Key Patterns
Standalone Component with OnPush and Signals
import { ChangeDetectionStrategy, Component, computed, input, output, signal } from '@angular/core';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-user-card',
standalone: true,
imports: [CommonModule],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<div class="user-card">
<h2>{{ fullName() }}</h2>
<button (click)="onSelect()">Select</button>
</div>
`,
})
export class UserCardComponent {
firstName = input.required<string>();
lastName = input.required<string>();
selected = output<string>();
fullName = computed(() => `${this.firstName()} ${this.lastName()}`);
onSelect(): void {
this.selected.emit(this.fullName());
}
}
RxJS Subscription Management with takeUntilDestroyed
import { Component, OnInit, inject } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { UserService } from './user.service';
@Component({ selector: 'app-users', standalone: true, template: `...` })
export class UsersComponent implements OnInit {
private userService = inject(UserService);
// DestroyRef is captured at construction time for use in ngOnInit
private destroyRef = inject(DestroyRef);
ngOnInit(): void {
this.userService.getUsers()
.pipe(takeUntilDestroyed(this.destroyRef))
.subscribe({
next: (users) => { /* handle */ },
error: (err) => console.error('Failed to load users', err),
});
}
}
NgRx Action / Reducer / Selector
// actions
export const loadUsers = createAction('[Users] Load Users');
export const loadUsersSuccess = createAction('[Users] Load Users Success', props<{ users: User[] }>());
export const loadUsersFailure = createAction('[Users] Load Users Failure', props<{ error: string }>());
// reducer
export interface UsersState { users: User[]; loading: boolean; error: string | null; }
const initialState: UsersState = { users: [], loading: false, error: null };
export const usersReducer = createReducer(
initialState,
on(loadUsers, (state) => ({ ...state, loading: true, error: null })),
on(loadUsersSuccess, (state, { users }) => ({ ...state, users, loading: false })),
on(loadUsersFailure, (state, { error }) => ({ ...state, error, loading: false })),
);
// selectors
export const selectUsersState = createFeatureSelector<UsersState>('users');
export const selectAllUsers = createSelector(selectUsersState, (s) => s.users);
export const selectUsersLoading = createSelector(selectUsersState, (s) => s.loading);
Constraints
MUST DO
- Use standalone components (Angular 17+ default)
- Use signals for reactive state where appropriate
- Use OnPush change detection strategy
- Use strict TypeScript configuration
- Implement proper error handling in RxJS streams
- Use
trackByfunctions in*ngForloops - Write tests with >85% coverage
- Follow Angular style guide
MUST NOT DO
- Use NgModule-based components (except when required for compatibility)
- Forget to unsubscribe from observables (use
takeUntilDestroyedorasyncpipe) - Use async operations without proper error handling
- Skip accessibility attributes
- Expose sensitive data in client-side code
- Use
anytype without justification - Mutate state directly in NgRx
- Skip unit tests for critical logic
Output Templates
When implementing Angular features, provide:
- Component file with standalone configuration
- Service file if business logic is involved
- State management files if using NgRx
- Test file with comprehensive test cases
- Brief explanation of architectural decisions
Maintained by @jeffallan, Principal Consultant at Synergetic Solutions
FAQ
What does the angular-architect skill do?
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.
How do I install angular-architect?
Run npx skills add https://github.com/jeffallan/claude-skills --skill angular-architect in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/angular-architect/ (personal) or .claude/skills/angular-architect/ (project).
Which AI agents can use angular-architect?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is angular-architect safe to install?
Security partners have reviewed it: Gen Agent Trust Hub flagged risks; Socket passed; Snyk passed; Runlayer passed; ZeroLeaks passed. As with any skill, read the SKILL.md and bundled scripts before installing.
Who maintains angular-architect?
It is published by jeffallan in jeffallan/claude-skills. It has 4,853 recorded installs.
More from jeffallan/claude-skills
laravel-specialist
jeffallan/claude-skills
Build and configure Laravel 10+ applications, including creating Eloquent models and relationships, implementing Sanctum authentication, configuring Horizon queues, designing RESTful APIs with API resources, and building reactive interfaces with Livewire. Use when creating Laravel models, setting up queue workers, implementing Sanctum auth flows, building Livewire components, optimising Eloquent queries, or writing Pest/PHPUnit tests for Laravel features.
golang-pro
jeffallan/claude-skills
Implements concurrent Go patterns using goroutines and channels, designs and builds microservices with gRPC or REST, optimizes Go application performance with pprof, and enforces idiomatic Go with generics, interfaces, and robust error handling. Use when building Go applications requiring concurrent programming, microservices architecture, or high-performance systems. Invoke for goroutines, channels, Go generics, gRPC integration, CLI tools, benchmarks, or table-driven testing.
php-pro
jeffallan/claude-skills
Use when building PHP applications with modern PHP 8.3+ features, Laravel, or Symfony frameworks. Invokes strict typing, PHPStan level 9, async patterns with Swoole, and PSR standards. Creates controllers, configures middleware, generates migrations, writes PHPUnit/Pest tests, defines typed DTOs and value objects, sets up dependency injection, and scaffolds REST/GraphQL APIs. Use when working with Eloquent, Doctrine, Composer, Psalm, ReactPHP, or any PHP API development.
flutter-expert
jeffallan/claude-skills
Use when building cross-platform applications with Flutter 3+ and Dart. Invoke for widget development, Riverpod/Bloc state management, GoRouter navigation, platform-specific implementations, performance optimization.
typescript-pro
jeffallan/claude-skills
Implements advanced TypeScript type systems, creates custom type guards, utility types, and branded types, and configures tRPC for end-to-end type safety. Use when building TypeScript applications requiring advanced generics, conditional or mapped types, discriminated unions, monorepo setup, or full-stack type safety with tRPC.
kubernetes-specialist
jeffallan/claude-skills
Use when deploying or managing Kubernetes workloads. Invoke to create deployment manifests, configure pod security policies, set up service accounts, define network isolation rules, debug pod crashes, analyze resource limits, inspect container logs, or right-size workloads. Use for Helm charts, RBAC policies, NetworkPolicies, storage configuration, performance optimization, GitOps pipelines, and multi-cluster management.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.