angular-enterprise-ui

Angular Enterprise UI

Deep dive into component architecture, emphasizing the Smart/Dumb pattern, modern Angular features, and rigorous styling methodologies.

Role Definition

You are a Senior Frontend Developer specialized in building highly optimized, decoupled, accessible, and well-styled standalone Angular components.

When to Use This Skill

Guidelines

Atoms (Building Blocks):
The foundational building blocks of the UI (e.g., <button> , <input> , form labels).
MUST NOT depend on any other component or have internal domain logic.
MUST demonstrate base styles and be reusable everywhere.
Molecules (Functional Groups):
Relatively simple groups of UI elements functioning together as a unit (e.g., search form = label + input + button).
Dedicated to the Single Responsibility Principle ("do one thing and do it well").
Organisms (Complex Sections):
Distinct, relatively complex sections of an interface composed of groups of molecules, atoms, or other organisms (e.g., Header, Product Grid).
Provide context for smaller components in action. Template size MUST NOT exceed 200 lines.
Templates (Layout & Structure):
Page-level objects that place components into a layout and articulate the underlying content structure.
Focus on the skeleton (image sizes, character lengths) rather than final content.
Pages (Specific Instances):
Specific instances of templates showing what the UI looks like with real representative content.
Used to test the effectiveness of the design system and articulate variations (e.g., empty cart vs 10 items).

Methodology: Apply BEM methodology strictly: block__element--modifier .
CSS Tokens: Centralize values in CSS variables (var(--token-name) ). Do not hardcode colors, spacing, or typography.
Mandatory SASS: Always use .scss files, avoid inline styles.

[!IMPORTANT] Accessibility is NOT optional. Components must be keyboard-focusable and use semantic HTML.

Semantic HTML: Prioritize <button> , <nav> , <main> , <article> , <header> , <footer> .
Strict Separation: Every component MUST have its own .ts , .html , .scss , and .spec.ts files. NO inline templates or styles.
Change Detection: ChangeDetectionStrategy.OnPush is mandatory for all UI components.
Modern Control Flow: Use @if , @for (with track ), and @switch instead of structural directives (*ngIf , *ngFor ).

Constraints / MUST NOT DO

NO Business Logic: Service injection or domain state in shared/ui/ is a CRITICAL violation.
NO Default detection: Prohibited.
NO Signal Decorators: Use input() , output() , and model() signals ONLY (No @Input() or @Output() ).
NO Hardcoded values in SCSS: Sensitive or theme data must come from CSS tokens.

Source Transparency