architecture_skill

Overview

This skill codifies a pragmatic Angular architecture: scope-based placement, a clear project layout, concise file naming, and a focused style guide. It helps teams decide where components, services, and models belong and how to name and implement them. Use it to keep projects predictable, modular, and easy to navigate.

How this skill works

The skill inspects component usage and recommends placement based on the Scope Rule: if a component is used by a single feature, it belongs in that feature's components folder; if reused across two or more features, it moves to features/shared/components. It provides a canonical src/app project layout, enforces no-redundant suffixes in filenames, and offers style conventions for dependency injection, bindings, member visibility, and method naming.

When to use it

• When starting a new Angular project or defining repository layout.
• When deciding where to place a new component, service, pipe, or model.
• When reviewing code to reduce duplication and improve reuse boundaries.
• When establishing team-wide Angular style rules.
• When generating files with schematics or CLI and mapping them to feature folders.

Best practices

• Apply the Scope Rule consistently: feature-only items live under features/[feature]/components, cross-feature items go to features/shared/.
• Name files without technical suffixes — the folder signals the role (e.g., user-profile.ts, cart.ts, user.ts).
• Keep one concept per file and a single main file per feature named to match the folder (feature/feature.ts).
• Prefer inject() for dependencies, use class/style bindings, mark template-only members protected, and use readonly for inputs/outputs/queries.
• Keep lifecycle hooks thin; delegate to well-named methods and keep internal state encapsulated with private signals and readonly accessors.

Example use cases

• Creating a product card used only by the products feature: features/products/components/product-card.ts.
• Building a button used across checkout and shopping-cart: features/shared/components/button.ts.
• Adding a feature-specific service: features/orders/services/order.ts (no .service suffix).
• Setting up core singletons like an auth guard in core/guards/auth.ts.
• Generating files with CLI and mapping them to feature or core folders using the provided commands.