>_SkillsHub▋

> angular-architecture

Standards for Angular project structure, feature modules, and lazy loading. Use when structuring Angular apps, defining feature modules, or configuring lazy loading. (triggers: angular.json, angular components, standalone, feature module, lazy loading, loadComponent, loadChildren)

fetch
$curl "https://skillshub.wtf/HoangNguyen0403/agent-skills-standard/angular-architecture?format=md"
SKILL.md•angular-architecture

Angular Architecture

Priority: P0 (CRITICAL)

Principles

  • Feature-Based: Organize by feature, not type (e.g., features/dashboard/ containing components, services, and models).
  • Standalone First: Use Standalone Components/Pipes/Directives. Eliminate NgModule unless interacting with legacy libs.
  • Core vs Shared:
    • core/: Global singletons (AuthService, Interceptors).
    • shared/: Reusable UI components, pipes, utils (Buttons, Formatters).
  • Smart vs Dumb:
    • Smart (Container): Talks to services, manages state.
    • Dumb (Presentational): Inputs/Outputs only. No logic.

Guidelines

  • Lazy Loading: All feature routes MUST be lazy loaded using loadComponent or loadChildren.
  • Flat Modules: Avoid deep nesting of modules.
  • Barrel Files: Use carefully. Prefer direct imports for better tree-shaking in some build tools (though modern bundlers handle barrels well).

Verification Checklist (Mandatory)

  • Lazy Loading: Are all feature routes using loadComponent or loadChildren?

  • Standalone: Are components, pipes, and directives standalone?

  • Core/Shared: Are global services in core/ and reusable UI in shared/?

  • Smart/Dumb: Are presentational components logic-free with only @Input/@Output?

  • Signals: Are you using Signals for local state where applicable (Angular 16+)?

  • Folder Structure

🚫 Anti-Patterns

  • Do NOT use standard patterns if specific project rules exist.
  • Do NOT ignore error handling or edge cases.

> related_skills --same-repo

> typescript-tooling

Development tools, linting, and build config for TypeScript. Use when configuring ESLint, Prettier, Jest, Vitest, tsconfig, or any TS build tooling. (triggers: tsconfig.json, .eslintrc.*, jest.config.*, package.json, eslint, prettier, jest, vitest, build, compile, lint)

> typescript-security

Secure coding practices for TypeScript. Use when validating input, handling auth tokens, sanitizing data, or managing secrets and sensitive configuration. (triggers: **/*.ts, **/*.tsx, validate, sanitize, xss, injection, auth, password, secret, token)

> typescript-language

Modern TypeScript standards for type safety and maintainability. Use when working with types, interfaces, generics, enums, unions, or tsconfig settings. (triggers: **/*.ts, **/*.tsx, tsconfig.json, type, interface, generic, enum, union, intersection, readonly, const, namespace)

> typescript-best-practices

Idiomatic TypeScript patterns for clean, maintainable code. Use when writing or refactoring TypeScript classes, functions, modules, or async logic. (triggers: **/*.ts, **/*.tsx, class, function, module, import, export, async, promise)

┌ stats

installs/wk0
░░░░░░░░░░
github stars341
██████████
first seenMar 17, 2026
└────────────

┌ repo

HoangNguyen0403/agent-skills-standard
by HoangNguyen0403
└────────────

┌ tags

#angular#web3
└────────────