home / skills / hoangnguyen0403 / agent-skills-standard / style-guide

style-guide skill

Q: Should interfaces use an I prefix?

No. Use plain PascalCase for interfaces (User, Hero) instead of prefixing with I.

Q: When are barrels (index.ts) appropriate?

Use index.ts only to expose a feature or library's public API. Avoid using barrels for deep, intra-feature imports that obscure origins.

safe

/skills/angular/style-guide

This skill enforces Angular naming, file structure, and style guide best practices to improve code consistency and maintainability.

npx playbooks add skill hoangnguyen0403/agent-skills-standard --skill style-guide

Review the files below or copy the command above to add this skill to your agents.

Files (2)

SKILL.md

1.3 KB

---
name: Angular Style Guide
description: Naming conventions, file structure, and coding standards for Angular projects.
metadata:
  labels: [angular, style, naming, structure]
  triggers:
    files: ['**/*.ts']
    keywords: [angular style, naming convention, file structure]
---

# 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)

Overview

This skill provides a concise, enforceable Angular style guide focusing on naming conventions, file structure, and coding standards to keep TypeScript Angular projects consistent and maintainable. It emphasizes single responsibility, clear naming patterns, size limits, and practical anti-patterns that cause long-term friction. The guidance is framework-focused and designed to be actionable for teams and automated agents enforcing style rules.

How this skill works

The skill inspects file names, class and symbol names, folder depth, and file size to validate conformance to the guide. It flags deviations such as incorrect casing, missing type suffixes, deep nesting, large files, and disallowed interface prefixes. The outputs are simple recommendations and suggested refactors (e.g., rename to kebab-case, extract logic into a service or signal).

When to use it

On pull requests to enforce naming and file-structure rules automatically.
During codebase audits to identify large files or single-file responsibility violations.
While onboarding new contributors to ensure consistent project layout and patterns.
When setting up CI linters or code style bots for Angular TypeScript projects.

Best practices

One component or service per file; keep functions small (prefer <75 lines).
Name files in kebab-case and include a type suffix: feature.type.ts (hero-list.component.ts).
Use PascalCase for classes with clear suffixes (Component, Service, Pipe) and avoid interface prefixes (use User, not IUser).
Keep files under ~400 lines; refactor into smaller units when approaching the limit.
Use index.ts barrels only for a feature's public API; avoid deep barrel indirection within the same feature.
Prefer flat folder structures and avoid more than three nested folder levels (LIFT: Locate, Identify, Flat, Try DRY).

Example use cases

Agent validates a PR and suggests renaming files from camelCase to kebab-case and adding missing type suffixes.
Automated audit detects a 900-line component and recommends extracting subcomponents or services.
Onboarding checklist enforces class suffixes and selector naming for directives and pipes.
CI pipeline rejects deep folder structures and asks to flatten or modularize the feature.
Refactor task where template logic is moved into the component class or a computed signal to remove complexity from templates.

FAQ

Should interfaces use an I prefix?

No. Use plain PascalCase for interfaces (User, Hero) instead of prefixing with I.

When are barrels (index.ts) appropriate?

Use index.ts only to expose a feature or library's public API. Avoid using barrels for deep, intra-feature imports that obscure origins.