angular-style-guide
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)
Best use case
angular-style-guide is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
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)
Teams using angular-style-guide should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/angular-style-guide/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How angular-style-guide Compares
| Feature / Agent | angular-style-guide | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
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)
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# 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)
Related Skills
angular-tooling
Angular CLI usage, code generation, build configuration, and bundle optimization. Use when creating Angular projects, generating components/services/guards, configuring builds, running tests, or analyzing bundles. (triggers: angular.json, ng generate, ng build, ng serve, ng test, ng add, angular cli, bundle analysis)
angular-testing
Write Angular component tests using TestBed, ComponentHarness, and HttpTestingController with proper signal input handling. Use when writing component tests, mocking HTTP calls, or testing signal inputs. (triggers: **/*.spec.ts, TestBed, ComponentFixture, TestHarness, provideHttpClientTesting)
angular-state-management
Implement application state with Angular Signals, computed derivations, and NgRx Signal Store. Use when implementing reactive state with signal(), computed(), effect(), or @ngrx/signals in Angular. (triggers: **/*.store.ts, **/state/**, angular signals, signal store, computed, effect, linkedSignal)
angular-ssr
Implement Angular SSR with hydration, TransferState caching, and per-route render modes. Use when configuring Angular Universal SSR, client hydration, static prerendering, or preventing double-fetching. (triggers: **/*.server.ts, server.ts, hydration, transferState, afterNextRender, isPlatformServer, RenderMode)
angular-security
Harden Angular apps against XSS, CSP violations, and unauthorized access. Use when implementing XSS protection, Content Security Policy, or auth guards in Angular. (triggers: DomSanitizer, innerHTML, bypassSecurityTrust, CSP, angular security, route guard)
angular-rxjs-interop
Bridge Observables and Signals using toSignal and toObservable in Angular. Use when converting between RxJS Observables and Angular Signals. (triggers: toSignal, toObservable, takeUntilDestroyed, rxjs angular)
angular-routing
Configure Angular Router with lazy-loaded routes, functional guards, and component input binding. Use when defining routes, lazy-loading features, creating route guards, or setting up resolvers. (triggers: *.routes.ts, angular router, loadComponent, canActivate, resolver)
angular-performance
Optimization techniques including OnPush, @defer, and Image Optimization. Use when optimizing Angular rendering, deferring blocks, or improving Core Web Vitals. (triggers: ChangeDetectionStrategy.OnPush, @defer, NgOptimizedImage, runOutsideAngular, OnPush)
angular-http-client
Integrate HttpClient, Interceptors, and API interactions in Angular. Use when integrating HttpClient, writing interceptors, or handling API calls in Angular. (triggers: **/*.service.ts, **/*.interceptor.ts, HttpClient, HttpInterceptorFn, withInterceptors, httpResource, resource)
angular-forms
Build typed reactive forms with strict FormGroup typing, custom validators, and nonNullable controls in Angular. Use when implementing typed reactive forms, custom validators, or form control patterns. (triggers: FormBuilder, FormGroup, FormControl, Validators, reactive forms, typed forms)
angular-directives-pipes
Compose HostDirectives and Pure Pipes in Angular. Use when creating attribute directives with HostDirectives or writing pure pipes in Angular. (triggers: **/*.directive.ts, **/*.pipe.ts, hostDirectives, PipeTransform, pure)
angular-dependency-injection
Configure DI, inject() usage, and providers in Angular. Use when configuring Angular dependency injection, using inject(), or defining providers. (triggers: **/*.service.ts, angular inject, providedIn, injection token, provideAppInitializer)