---
name: hoangnguyen0403-angular-style-guide
description: "Naming conventions, file structure, and coding standards for Angular projects. Use for Angular-specific naming and organization; defer language-only TypeScript naming questions."
license: "Apache-2.0"
metadata:
  decimalai-skill-id: "d5ff156d-cc25-4969-a543-045e3651dbde"
  decimalai-version-id: "f7020a76-b34e-4e23-9e38-6dda1c17836d"
  decimalai-version: "1"
  decimalai-body-sha256: "396d63fbccb7ecf8cfc229d3e8b442c97c4b0e781e36dcdf0b0d62a4ac5431cc"
  decimalai-name: "hoangnguyen0403/angular-style-guide"
  decimalai-format: "1"
  decimalai-invocation: "model"
  decimalai-category: "frontend"
  decimalai-source: "https://app.decimal.ai/s/hoangnguyen0403-angular-style-guide@1/SKILL.md"
---
# Angular Style Guide

## **Priority: P0 (CRITICAL)**

## Principles

- **Single Responsibility**: 1 component/service per file. Functions < 75 lines.
- **Size Limits**: Files < **400 lines**. Refactor if larger.
- **Strict Naming**: **kebab-case** with **type suffix** (e.g., **hero-list.component.ts**, **auth.service.ts**, **user.pipe.ts**, **app.routes.ts**).
- **Barrels**: `index.ts` for public APIs only. No deep barrel imports within same feature — import directly. Wrong barrel placement breaks **tree-shaking**.
- **LIFT**: **Locate** code quickly, **Identify files** by name, keep **Flattest structure** possible, **Try** to be **DRY**.

## Naming Standards

- **Files**: `kebab-case.type.ts`
- **Classes**: **PascalCase** + **type suffix** (**HeroListComponent**, **AuthService**)
- **Directives**: **camelCase** selector with **app prefix** (e.g., `appHighlight`)
- **Pipes**: **camelCase** name (e.g., `truncate`)
- **Services**: **PascalCase** + **Service** suffix (`HeroService`)
- **Interfaces**: No — do not use `IUser`/`IHero`. Name as nouns: `User`, `Hero`. The I-prefix is not recommended by Angular style guide.

## Folder Structure

- **Core**: `src/app/core/` (**singletons** and global state).
- **Shared**: `src/app/shared/` (**reusable UI** and pipes).
- **Features**: `src/app/features/` (**lazy-loaded**). Folder **depth ≤ 3 levels** — no deeper nesting.

## Anti-Patterns

- **No logic in templates**: Move to component class or `computed()` signal.
- **No deep nesting**: Keep folder depth ≤3 levels.
- **No I-prefix on interfaces**: Name interfaces `User`, not `IUser`.

## References

- [Naming Conventions](references/naming-convention.md)

## Canonical response anchors

When this skill applies, preserve the following domain terminology or equivalent concrete examples in the answer when relevant:
- app prefix,appHighlight,appFocusTrap
- Flattest structure
- do not use I,avoid the I-prefix,no I-prefix,do not prefix,No. Do not