angular-best-practices

Curated Angular best practices for building performant, maintainable applications. Library-specific rules available as optional skills.

الانتقال إلى التثبيت

المستودع: diegosouzapw/awesome-omni-skill
آخر نشاط في المصدر: ٢٨ فبراير ٢٠٢٦ في ٠٤:٣٠
لغة SKILL.md المكتشفة: الإنجليزية
النجوم: ٥٠
التفرعات: ١٩

خيارات التثبيت

يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.

التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.

يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.

npx skills add https://github.com/diegosouzapw/awesome-omni-skill --skill angular-best-practices

يبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.

تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.

مراجعة ملفات المصدر

اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.

مستكشف الملفات

2 ملفات

SKILL.md

تعليمات المصدر · معاينة للقراءة فقط

العودة إلى البحث العودة إلى التثبيت

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`

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({
  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>();
}

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

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

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

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

name	angular-best-practices
description	Curated Angular best practices for building performant, maintainable applications. Library-specific rules available as optional skills.
version	1.0.0
author	alfredoperez
tags	["angular","typescript","signals","performance","testing","state-management"]
globs	["*/.ts","*/.html","*/.component.ts","*/.service.ts"]

name	angular-best-practices
description	Curated Angular best practices for building performant, maintainable applications. Library-specific rules available as optional skills.
version	1.0.0
author	alfredoperez
tags	["angular","typescript","signals","performance","testing","state-management"]
globs	["*/.ts","*/.html","*/.component.ts","*/.service.ts"]

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

angular-best-practices

خيارات التثبيت

مراجعة ملفات المصدر