# Angular Style Guide

> Naming conventions, file structure, and coding standards for Angular projects.

- Skill: `majiayu000/angular-style-guide` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/angular-style-guide`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/angular-style-guide/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: AI & ML
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/angular-style-guide

---


# Angular Style Guide

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

## Principles

- **Single Responsibility**: One component/service per file. Small functions (< 75 lines).
- **Size Limits**: Keep files under 400 lines. Refactor if larger.
- **Strict Naming**: `feature.type.ts` (e.g., `hero-list.component.ts`).
- **Barrels**: Use `index.ts` only for public APIs of specific features/libraries. Avoid deep barrel imports within the same feature.
- **LIFT**: **L**ocate, **I**dentify, **F**lat structure, **T**ry DRY.

## Naming Standards

- **Files**: `kebab-case.type.ts`
- **Classes**: `PascalCase` + `Type` suffix (`HeroListComponent`)
- **Directives**: `camelCase` selector (`appHighlight`)
- **Pipes**: `camelCase` name (`truncate`)
- **Services**: `PascalCase` + `Service` suffix (`HeroService`)

## Anti-Patterns

- **Logic in Templates**: Move complex logic to the component class or a computed signal.
- **Deep Nesting**: Avoid $>3$ levels of folder nesting.
- **Prefixing interfaces**: No `IUser`. Use `User`.

## References

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