Angular Coding Practices
Application skill for angular.dev Style Guide (2025) ingest (awesome-guidelines). TypeScript style: typescript-coding-practices; domain modeling: typescript-coding-standards. SPA compare: vue-coding-practices.
Core Principle
Use the installed Angular version and project conventions. The 2025 guide offers
feature-first layout, colocated files, injection, and signal patterns; it does not
require an unrelated app to migrate its layout or working constructor injection.
Treat the review prompts below as contextual checks, not automatic defects.
When to Use / NOT
- Angular 17+ application components, directives, project layout.
- Migrating from legacy suffix-heavy style guide to 2025 conventions.
- PR review on
.ts/.html in src/.
NOT when:
- Generic TypeScript style only,
typescript-coding-practices.
- AngularJS 1.x, archived style guide.
- Framework package contributions, Angular repo CONTRIBUTING.
Workflow
- Naming/files, kebab-case, specs, triplets (
angular-style-naming-files.md).
- Structure, src, features, one concept (
angular-style-project-structure.md).
- Components, inject, templates, lifecycle (
angular-style-components-templates.md).
- Selectors/verify, selectors, I/O, lint (
angular-style-selectors-verify.md).
Red Flags
- PascalCase or camelCase source filenames
- Tests isolated in global
tests/ away from feature
- Type-based folders (
components/, services/)
- Bootstrap entry not
src/main.ts
- Constructor injection in new signal-era code without reason
- Public members only used in template
- Reassigning readonly input/model properties
- ngClass/ngStyle for simple static class/style toggles
- Long inlined ngOnInit logic
- Missing lifecycle interface (OnInit, etc.)
- Selector without hyphen or using
ng- prefix
- Output prefixed with
on or colliding with DOM event
- Generic utils/helpers files accumulating unrelated code
- Ignoring file-local consistency when bulk-reformatting
Verification
ng lint / @angular-eslint on changed pathsng test for colocated .spec.tsng build or tsc strict template check- Selector hyphen + app prefix audit on new components
- Capsule probes in review notes
References
awesome-guidelines/references/angular-style-learning-note.mdawesome-guidelines/references/angular-style-naming-files.mdawesome-guidelines/references/angular-style-project-structure.mdawesome-guidelines/references/angular-style-components-templates.mdawesome-guidelines/references/angular-style-selectors-verify.md
Related skills
typescript-coding-practices, project TS style and optional Google baselinetypescript-coding-standards, domain-modeling choiceswcag-accessibility-practices, accessible templatesjavascript-project-practices, wider JS repo workflow
1---2name: angular-coding-practices3description: Use when authoring or reviewing Angular apps, kebab-case files, feature folders, inject(), readonly inputs, protected template members, class/style bindings, selector prefixes, and angular-eslint verification.4---56# Angular Coding Practices78Application skill for angular.dev Style Guide (2025) ingest (`awesome-guidelines`). TypeScript style: `typescript-coding-practices`; domain modeling: `typescript-coding-standards`. SPA compare: `vue-coding-practices`.910## Core Principle1112Use the installed Angular version and project conventions. The 2025 guide offers13feature-first layout, colocated files, injection, and signal patterns; it does not14require an unrelated app to migrate its layout or working constructor injection.15Treat the review prompts below as contextual checks, not automatic defects.1617## When to Use / NOT1819- Angular 17+ application components, directives, project layout.20- Migrating from legacy suffix-heavy style guide to 2025 conventions.21- PR review on `.ts`/`.html` in `src/`.2223**NOT when:**2425- Generic TypeScript style only, `typescript-coding-practices`.26- AngularJS 1.x, archived style guide.27- Framework package contributions, Angular repo CONTRIBUTING.2829## Workflow30311. **Naming/files**, kebab-case, specs, triplets (`angular-style-naming-files.md`).322. **Structure**, src, features, one concept (`angular-style-project-structure.md`).333. **Components**, inject, templates, lifecycle (`angular-style-components-templates.md`).344. **Selectors/verify**, selectors, I/O, lint (`angular-style-selectors-verify.md`).3536## Red Flags3738- PascalCase or camelCase source filenames39- Tests isolated in global `tests/` away from feature40- Type-based folders (`components/`, `services/`)41- Bootstrap entry not `src/main.ts`42- Constructor injection in new signal-era code without reason43- Public members only used in template44- Reassigning readonly input/model properties45- ngClass/ngStyle for simple static class/style toggles46- Long inlined ngOnInit logic47- Missing lifecycle interface (OnInit, etc.)48- Selector without hyphen or using `ng-` prefix49- Output prefixed with `on` or colliding with DOM event50- Generic utils/helpers files accumulating unrelated code51- Ignoring file-local consistency when bulk-reformatting5253## Verification5455- `ng lint` / @angular-eslint on changed paths56- `ng test` for colocated `.spec.ts`57- `ng build` or `tsc` strict template check58- Selector hyphen + app prefix audit on new components59- Capsule probes in review notes606162## References6364- `awesome-guidelines/references/angular-style-learning-note.md`65- `awesome-guidelines/references/angular-style-naming-files.md`66- `awesome-guidelines/references/angular-style-project-structure.md`67- `awesome-guidelines/references/angular-style-components-templates.md`68- `awesome-guidelines/references/angular-style-selectors-verify.md`6970## Related skills7172- `typescript-coding-practices`, project TS style and optional Google baseline73- `typescript-coding-standards`, domain-modeling choices74- `wcag-accessibility-practices`, accessible templates75- `javascript-project-practices`, wider JS repo workflow
ryan-brosas