Skip to content
Back to skills

Angular Style Guide

ASecurity

Naming conventions, file structure, and coding standards for Angular projects. Use when naming Angular files, organizing project structure, or following Angular style guide. (triggers: angular style, naming convention, file structure, angular-style-guide)

  • 43 stars
  • 0 votes
  • 0 copies
  • 1 view
  • Added May 30, 2026
developmentangularapi

Works with

  • api

Security analysis

A100/100

Scanned May 30, 2026

npx -y skills add ComeOnOliver/skillshub --skill angular-style-guide --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of Angular Style Guide?

Add the live security badge to your README. It updates with every re-scan.

Security grade badge for Angular Style Guide
[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/comeonoliver-angular-style-guide/badge)](https://www.skillsdirectory.com/skills/comeonoliver-angular-style-guide)

More formats (shields.io, HTML) on the badges page. Keep it an A: scan every change in CI with Pro.

Download with Pro
SKILL.md
---
name: angular-style-guide
description: 'Naming conventions, file structure, and coding standards for Angular projects. Use when naming Angular files, organizing project structure, or following Angular style guide. (triggers: angular style, naming convention, file structure, 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**: **kebab-case** with **type suffix** (e.g., **hero-list.component.ts**, **auth.service.ts**, **user.pipe.ts**, **app.routes.ts**).
- **Barrels**: Use **index.ts** only for **public APIs** of specific features/libraries. Avoid deep barrel imports within the same feature — import directly. Incorrect barrel placement prevents **tree-shaking**.
- **LIFT**: **Locate** code quickly, **Identify** files by name, keep the **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` or `IHero`. Name interfaces as **nouns** (e.g., `User`, `Hero`). This 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 features**). Keep folder **depth ≤3 levels**.

## Anti-Patterns

- **No logic in templates**: Move to the component class or a `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)

Attribution

Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.

Comments

Loading comments…