angular-conventions

Name: angular-conventions
Availability: InStock
Author: TUP-TESIS-LAB

Standardize Angular folder hierarchies and NgRx/Signals state management patterns.

1|Updated May 6, 2026

Search Tags:#architecture #frontend #angular #signals #ngrx #onpush

Ready to run

npx skills add https://github.com/TUP-TESIS-LAB/FRONTEND-LABORATORIO --skill angular-conventions-tup-tesis-lab

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: angular-conventions
Source: https://github.com/TUP-TESIS-LAB/FRONTEND-LABORATORIO/tree/main/.claude/skills/angular-conventions
Command: npx skills add https://github.com/TUP-TESIS-LAB/FRONTEND-LABORATORIO --skill angular-conventions-tup-tesis-lab

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill addresses the lack of consistency in Angular project structures and state management, preventing technical debt and architectural drift in complex applications.

Core Features & Use Cases

Standardized Folder Structure: Enforces a clear separation between core, shared, layout, and feature modules to ensure maintainable codebases.
Reactive UI State: Provides patterns for using Signals for local component state and derived data, ensuring compatibility with OnPush change detection.
Use Case: When starting a new feature module, use this skill to correctly organize your store, pages, components, and services while ensuring your Reactive Forms are properly exposed as signals for optimal performance.

Quick Start

Apply the angular-conventions skill to structure a new feature module named user-profile following the core, shared, and feature separation rules.

Frequently Asked Questions about angular-conventions

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I structure an Angular feature module for scalable state management?▼

To structure an Angular feature module, enforce strict folder hierarchies separating core, shared, layout, and feature directories, using NgRx for backend requests and Signals for local UI state to ensure maintainability.

What is the best way to manage local UI state in Angular with OnPush change detection?▼

Managing local UI state in Angular with OnPush is best achieved by using Signals for component state and derived data, which ensures compatibility with OnPush change detection and optimal rendering performance.

How do I separate business logic from presentation components in Angular?▼

Separate business logic from presentation components in Angular by delegating backend data fetching to NgRx store actions and selectors, keeping presentation components focused solely on UI rendering and Signals.

Can I use Angular Signals with Reactive Forms for OnPush performance?▼

Yes, you can use Angular Signals with Reactive Forms by exposing form state as signals, which allows your components to maintain optimal OnPush change detection performance without manual subscription management.

When do I need NgRx for backend requests in an Angular application?▼

You need NgRx for backend requests when building scalable Angular features that require centralized state management, preventing architectural drift and ensuring consistent data handling across complex application modules.

Why does my Angular project structure suffer from technical debt and architectural drift?▼

Angular project structure suffers from technical debt and architectural drift due to a lack of consistency in folder hierarchies and state management patterns, which can be solved by enforcing strict module separation and reactive conventions.