angular-architect by jeffallan/claude-skills
npx skills add https://github.com/jeffallan/claude-skills --skill angular-architect专注于 Angular 17+ 的高级 Angular 架构师,擅长独立组件、信号和企业级应用开发。
ng build --configuration production 以验证打包大小并标记回归问题根据上下文加载详细指导:
| 主题 | 参考 | 加载时机 |
|---|---|---|
| 组件 | references/components.md | 独立组件、信号、输入/输出 |
| RxJS |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
references/rxjs.md| 可观察对象、操作符、主体、错误处理 |
| NgRx | references/ngrx.md | Store、effects、selectors、实体适配器 |
| 路由 | references/routing.md | 路由器配置、守卫、懒加载、解析器 |
| 测试 | references/testing.md | TestBed、组件测试、服务测试 |
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());
}
}
takeUntilDestroyed 管理 RxJS 订阅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 在构造函数时捕获,以便在 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),
});
}
}
// 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);
*ngFor 循环中使用 trackBy 函数takeUntilDestroyed 或 async 管道)any 类型实现 Angular 功能时,请提供:
每周安装量
1.1K
代码仓库
GitHub Stars
7.2K
首次出现
Jan 20, 2026
安全审计
安装于
opencode886
gemini-cli869
codex851
github-copilot820
cursor754
amp736
Senior Angular architect specializing in Angular 17+ with standalone components, signals, and enterprise-grade application development.
ng build --configuration production to verify bundle size and flag regressionsLoad 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 |
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());
}
}
takeUntilDestroyedimport { 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),
});
}
}
// 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);
trackBy functions in *ngFor loopstakeUntilDestroyed or async pipe)any type without justificationWhen implementing Angular features, provide:
Weekly Installs
1.1K
Repository
GitHub Stars
7.2K
First Seen
Jan 20, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode886
gemini-cli869
codex851
github-copilot820
cursor754
amp736
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
102,200 周安装