angular-best-practices

📁 alfredoperez/angular-best-practices 📅 6 days ago

132

总安装量

周安装量

#3396

全站排名

安装命令

npx skills add https://github.com/alfredoperez/angular-best-practices --skill angular-best-practices

Agent 安装分布

opencode 19

codex 19

github-copilot 19

amp 18

kimi-cli 18

Skill 文档

Angular Best Practices

Curated rules for building performant, maintainable Angular applications. Library-specific rules (NgRx, SignalStore, TanStack Query) available as optional skills.

When to Use

Apply these practices when:

Creating components, services, and directives
Setting up state management with Signals
Writing unit, component, and E2E tests
Optimizing bundle size and runtime performance
Implementing forms, routing, and SSR

Category	Rules	Impact
Bundle Optimization	5	CRITICAL
Signals & Reactivity	5	HIGH
Change Detection	5	HIGH
Component Patterns	4	HIGH
RxJS Patterns	5	HIGH
Testing	6	HIGH
TypeScript	14	MEDIUM

Optional Library Skills

Install library-specific rules alongside this core skill:

Library	Install Command
NgRx	`npx skills add alfredoperez/angular-best-practices/skills/angular-best-practices-ngrx`
SignalStore	`npx skills add alfredoperez/angular-best-practices/skills/angular-best-practices-signalstore`
TanStack Query	`npx skills add alfredoperez/angular-best-practices/skills/angular-best-practices-tanstack`

Quick Reference

Modern Angular Patterns

Pattern	Use	Avoid
Signal inputs	`input<T>()`	`@Input()`
Signal outputs	`output<T>()`	`@Output()`
Dependency injection	`inject()`	Constructor injection
Control flow	`@if`, `@for`, `@switch`	`ngIf`, `ngFor`
Class binding	`[class.active]`	`[ngClass]`
Change detection	`OnPush`	Default
Derived state	`computed()`	Getters

Component Template

@Component({
  selector: 'app-user-card',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    @if (user(); as u) {
      <h2>{{ u.name }}</h2>
      <button (click)="selected.emit(u)">Select</button>
    }
  `,
})
export class UserCardComponent {
  user = input.required<User>();
  selected = output<User>();
}

Service Template

@Injectable({ providedIn: 'root' })
export class UserService {
  private http = inject(HttpClient);

  getUsers(): Observable<User[]> {
    return this.http.get<User[]>('/api/users');
  }
}

State with Signals

export class CounterComponent {
  count = signal(0);
  doubled = computed(() => this.count() * 2);

  increment() {
    this.count.update(c => c + 1);
  }
}

License

MIT

GitHub 仓库 ↗ ← 返回陌讯 Skills 聚合平台