Skills DirectorySkills Directory
SkillsLearnSecurityCategoriesDocsBlogPro
Sign InSubmit Skill
Skills Directory

Security-tested agent skills for Claude, coding agents, and AI workflows.

Directory

  • Browse Skills
  • All Skills A–Z
  • Claude Skills
  • Claude Code Skills
  • Agent Skills
  • Categories
  • Authors
  • Submit a Skill

Learn

  • Learn Hub
  • Install Claude Skills
  • Write SKILL.md
  • Skills vs MCP
  • Directories Compared

Security

  • Security
  • Methodology
  • Secure Claude Skills
  • Security Badges
  • Chrome Extension
  • Skill Manager

Company

  • About
  • Community
  • Blog
  • API Docs
  • Advertise

2026 Skills Directory. All rights reserved.

ProTermsPrivacyRefunds
Back to skills

Angular Architecture Angular Patterns Senior

ASecurity

Orchestrates senior Angular architecture review by selecting focused patterns for container/presentational components, facades, state boundaries, service responsibility, and reactive contracts.

4 stars
0 votes
0 copies
0 views
Added 10/2/2026
developmentgoreactangulartestingrefactoringapifrontend

Works with

api

Security Analysis

A100/100

Scanned 10/2/2026

$npx -y skills add janpereira-dev/ngAutoPilot --skill angular-architecture-angular-patterns-senior --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of Angular Architecture Angular Patterns Senior?

Add the live security badge to your README — it updates automatically with every re-scan.

Security grade badge for Angular Architecture Angular Patterns Senior
[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/janpereira-dev-angular-architecture-angular-patterns-senior/badge)](https://www.skillsdirectory.com/skills/janpereira-dev-angular-architecture-angular-patterns-senior)

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

Download with Pro
Files
SKILL.md
---
name: angular-architecture-angular-patterns-senior
description: "Orchestrates senior Angular architecture review by selecting focused patterns for container/presentational components, facades, state boundaries, service responsibility, and reactive contracts."
license: MIT
metadata:
  ngautopilot-id: "angular.architecture.angular-patterns-senior"
  ngautopilot-source: "skills/angular/architecture/angular-patterns-senior/SKILL.md"
  ngautopilot-version: "0.10.0"
---


# Angular Senior Architecture Patterns

## Purpose

Use this skill to route an Angular architecture task to the smallest applicable architecture skill. The goal is to improve structure, testability, and maintainability without turning every component into a ceremony-heavy architecture exercise.

This is a coordinator skill. It should select focused micro-skills instead of applying every architecture pattern at once.

## When to Use

Use this skill when:

- A component fetches data, maps DTOs, manages state, handles navigation, renders complex UI, and owns permissions at the same time.
- A service has unrelated responsibilities or a generic name such as `CommonService`, `ManagerService`, or `UtilsService`.
- A feature has unclear ownership between UI, API, state, and orchestration.
- Components depend on many low-level services directly.
- Mutable state is exposed through public subjects or writable signals.
- The user asks whether to use RxJS, Signals, facades, or container/presentational split.
- A shared library, microfrontend, or reusable feature needs cleaner public contracts.

## Do

Select the smallest matching architecture skill:

```txt
component orchestration vs UI rendering -> angular.components.container-presentational
Signals vs RxJS decision -> angular.state.signals-vs-rxjs
feature API and service coordination -> angular.architecture.facade-pattern
god service or generic service -> angular.services.single-responsibility-services
public reactive contracts -> angular.rxjs.observable-contracts
version-gated Angular APIs -> angular.versioning.angular-version-gates
providers, injectors, InjectionToken, or NullInjectorError -> angular.dependency-injection
```

Before recommending code, identify:

```txt
Angular version
project style: NgModules, standalone, or mixed
state model: RxJS, Signals, store, facade, or custom service state
file role: app, feature, shared library, data-access, UI, or microfrontend boundary
testing stack: Jest, Jasmine/Karma, Vitest, or unknown
compatibility constraints: legacy support, modern-only, or shared package
```

Prefer incremental refactoring:

```txt
1. Identify responsibilities.
2. Split the highest-risk responsibility first.
3. Define a narrow public contract.
4. Protect mutable internals.
5. Add tests around behavior before deeper restructuring.
```

## Do Not

Avoid applying patterns just because they sound senior:

```txt
Create a facade, store, mapper, state service, UI library, and signal model for a trivial component.
```

Avoid recommending Signals for Angular versions that do not support them.

Avoid replacing RxJS with Signals for asynchronous workflows by default.

Avoid creating a facade that only forwards one method and adds no useful boundary.

Avoid turning containers into business-rule monoliths.

## Review Checklist

- [ ] Angular version is identified before recommending version-specific APIs.
- [ ] The current file responsibilities are listed.
- [ ] The selected pattern solves a real maintainability or testing problem.
- [ ] Presentational components do not fetch data.
- [ ] Services have bounded responsibilities.
- [ ] Mutable subjects or writable signals are not exposed publicly.
- [ ] RxJS remains the default for cancellation, retries, streams, and async orchestration.
- [ ] Signals are limited to compatible versions and appropriate local synchronous state.
- [ ] The proposed split reduces coupling instead of adding ceremony.

## Expected Output

1. Diagnose the current architecture problem.
2. Select the smallest relevant micro-skill.
3. Explain version compatibility and APIs to avoid.
4. Propose an incremental target structure.
5. Include testing guidance and overengineering risks.

Attribution

janpereira-devjanpereira-dev
View sourceSee grades on GitHubMore from janpereira-dev →
SSkills DirectorySkills Directory

Ship a skill? Prove it's safe.

Free 120-pattern security scan, letter grade, and an embeddable README badge.

Submit a skill

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 (0)

No comments yet. Be the first to comment!

SSkills DirectorySkills Directory

Ship a skill? Prove it's safe.

Free 120-pattern security scan, letter grade, and an embeddable README badge.

Submit a skill

Related Skills

Clean Code

Pragmatic coding standards - concise, direct, no over-engineering, no unnecessary comments

304955 votes

Browser Extension Developer

Use this skill when developing or maintaining browser extension code in the `browser/` directory, including Chrome/Firefox/Edge compatibility, content scripts, background scripts, or i18n updates.

286712 votes

Seo Optimizer

SEO optimization with keyword analysis, readability assessment, technical validation, content quality. Use for search rankings, blog posts, content audits, or encountering keyword density, readability scores, meta tags, schema markup errors.

2222 votes

Google Official Seo Guide

Official Google SEO guide covering search optimization, best practices, Search Console, crawling, indexing, and improving website search visibility based on official Google documentation

1862 votes

Writing Plans

Use when you have a spec or requirements for a multi-step task, before touching code

2927051 votes
View all in development →