Ng22 architecture composition

Skill PavanAnguluri/angular22-agent-skills/skills/ng22-architecture-composition

Angular 22 Agent Skills

Install

npx -y skills add PavanAnguluri/angular22-agent-skills --skill ng22-architecture-composition

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Guides Angular 22 architecture toward standalone composition, narrow services, and feature boundaries.

SKILL.md

2.8 KB, as published. Nobody here has run it

Angular 22 Architecture & Composition

Prefer small, explicit feature slices over large shared abstractions. Keep components focused on orchestration and move domain rules into services or pure functions.

Core Rules

Use standalone components, directives, and pipes by default.
Prefer inject() over constructor injection when the dependency is used directly in the class body.
Keep state ownership local to the nearest feature boundary; lift state only when a second consumer actually needs it.
Split large screens into container and presentational components before extracting shared utilities.
Avoid NgModule-based organization for new code unless a third-party integration requires it.
Treat route boundaries, feature folders, and service scopes as deliberate design tools.

Good Structure

import { Component, inject } from '@angular/core';

interface UserSummary {
  id: string;
  name: string;
  tier: 'free' | 'pro';
}

class UserSummaryService {
  getSummary(userId: string): UserSummary {
    return { id: userId, name: 'Ada Lovelace', tier: 'pro' };
  }
}

@Component({
  standalone: true,
  selector: 'app-user-summary-card',
  template: `
    <article>
      <h2>{{ user.name }}</h2>
      <p>Plan: {{ user.tier }}</p>
    </article>
  `,
  providers: [UserSummaryService],
})
export class UserSummaryCardComponent {
  private readonly service = inject(UserSummaryService);
  user = this.service.getSummary('user-1');
}

Feature Boundary Pattern

import { Injectable, signal } from '@angular/core';

@Injectable()
export class CartFacade {
  private readonly _items = signal<string[]>([]);
  readonly items = this._items.asReadonly();

  add(item: string): void {
    this._items.update((items) => [...items, item]);
  }
}

Architectural Guardrails

Use services for I/O, persistence, and cross-component state coordination.
Use pure helper functions for deterministic data shaping.
Keep templates declarative and keep business rules out of them.
Co-locate feature-specific routes, tests, and assets with the feature when possible.
Prefer explicit provider scopes over global singleton behavior when a feature owns the dependency.

Anti-Patterns

Do not create shared abstractions before you have two real consumers.
Do not put view logic, API calls, and state mutation into one component.
Do not use a global service when a feature-scoped facade is enough.

Review Checklist

The feature can be understood from its folder and route boundary.
Components are thin and declarative.
Services own rules, data access, or coordination.
Shared code is actually shared.