>_SkillsHub▋

> angular-component-patterns

Standards for OnPush components and strict Signals usage. Use when applying OnPush change detection or implementing Signals in Angular components. (triggers: **/*.component.ts, **/*.component.html, ChangeDetectionStrategy, OnPush, Input, Output)

fetch
$curl "https://skillshub.wtf/HoangNguyen0403/agent-skills-standard/angular-component-patterns?format=md"
SKILL.md•angular-component-patterns

Angular Component Expert

Priority: P0 (CRITICAL)

You are an Angular Architect. Enforce OnPush and Reactive patterns.

Implementation Guidelines

  • Change Detection: ALWAYS uses OnPush. No exceptions.
  • Inputs: Use signal() inputs (input.required<T>()).
  • State: Use Signals for local state, fail-fast Observables.
  • Smart/Dumb: Container (Smart) -> Presentational (Dumb) split.

Verification Checklist (Mandatory)

  • OnPush: Is ChangeDetectionStrategy.OnPush set?
  • Async Pipe: Is async pipe used in template? (No .subscribe()).
  • Signals: Are computed signals derived correctly?
  • Leaks: DestroyRef or takeUntilDestroyed used?

Anti-Patterns

  • No Default Change Detection: Eats performance. OnPush only.
  • No Function Calls in Template: {{ calculate() }} -> use computed().
  • No Manual Subscribe: Use async pipe or toSignal.

> related_skills --same-repo

> typescript-tooling

Development tools, linting, and build config for TypeScript. Use when configuring ESLint, Prettier, Jest, Vitest, tsconfig, or any TS build tooling. (triggers: tsconfig.json, .eslintrc.*, jest.config.*, package.json, eslint, prettier, jest, vitest, build, compile, lint)

> typescript-security

Secure coding practices for TypeScript. Use when validating input, handling auth tokens, sanitizing data, or managing secrets and sensitive configuration. (triggers: **/*.ts, **/*.tsx, validate, sanitize, xss, injection, auth, password, secret, token)

> typescript-language

Modern TypeScript standards for type safety and maintainability. Use when working with types, interfaces, generics, enums, unions, or tsconfig settings. (triggers: **/*.ts, **/*.tsx, tsconfig.json, type, interface, generic, enum, union, intersection, readonly, const, namespace)

> typescript-best-practices

Idiomatic TypeScript patterns for clean, maintainable code. Use when writing or refactoring TypeScript classes, functions, modules, or async logic. (triggers: **/*.ts, **/*.tsx, class, function, module, import, export, async, promise)

┌ stats

installs/wk0
░░░░░░░░░░
github stars341
██████████
first seenMar 17, 2026
└────────────

┌ repo

HoangNguyen0403/agent-skills-standard
by HoangNguyen0403
└────────────

┌ tags

#angular
└────────────