Run any Skill in Manus with one click

angular-architecture

Stars2

Forks1

UpdatedApril 9, 2026 at 13:29

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)

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

li-lance

li-lance/android-seraphim-framework

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Software DevelopersComputer and Mathematical Occupations·SOC 15-1252

File Explorer

3 files

SKILL.md

readonly

name	angular-architecture
description	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)

Angular Architecture

Priority: P0 (CRITICAL)

Principles

Feature-Based: Organize by feature folder (e.g., features/dashboard/) containing components, services, and models. Apply LIFT: Locate, Identify, Flat structure, * Try DRY*.
Standalone First: Use standalone components, Pipes, and Directives. Eliminate NgModule for new code; use standalone: true (or default in Angular 20+).
Core vs Shared:
- core/: Global singletons (AuthService, Interceptors). **Never put singletons in shared/ **.
- 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. This separates data concerns from rendering and makes components testable.

Guidelines

Lazy Loading: All feature routes MUST be lazy loaded using loadComponent or **loadChildren **.
- Example: { path: 'dashboard', loadComponent: () => import('./features/dashboard/dashboard.component').then(m => m.DashboardComponent) }
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+)?

Anti-Patterns

No NgModule: Eliminate NgModule for new code; use standalone components.
No eager feature imports: Lazy load all features with loadComponent or loadChildren.
No type-based folders: Organize by feature, not by /components, /services top-level dirs.

References

Folder Structure

More from this repository

same repository

android-architecture

li-lance/android-seraphim-framework

Apply Clean Architecture layering, modularization, and Unidirectional Data Flow in Android projects. Use when setting up Android project structure, placing code in Clean Architecture layers, configuring feature/core modules, or implementing UDF patterns. (triggers: build.gradle.kts, settings.gradle.kts, clean-architecture, module, layers, domain, UDF, unidirectional, feature module, core module, presentation layer, data layer)

2026-04-092

android-background-work

li-lance/android-seraphim-framework

Implement WorkManager and Background Processing correctly on Android. Use when creating Worker classes, scheduling tasks with WorkManager, choosing between WorkManager and Foreground Services, or setting up Hilt in workers. (triggers: **/*Worker.kt, CoroutineWorker, WorkManager, doWork, PeriodicWorkRequest, OneTimeWorkRequest, @HiltWorker)

2026-04-092

android-compose

li-lance/android-seraphim-framework

Build high-performance declarative UI with Jetpack Compose state hoisting and recomposition optimization. Use when writing @Composable functions, Screen files, LazyColumn, state hoisting, LaunchedEffect, or diagnosing excessive recomposition. (triggers: **/*Screen.kt, **/*Composable*.kt, **/*Content.kt, @Composable, Modifier, Column, Row, LazyColumn, setContent, recompose, remember, derivedStateOf, LaunchedEffect)

2026-04-092

android-concurrency

li-lance/android-seraphim-framework

Standards for Coroutines, Flow, and Threading. Use when writing suspend functions, choosing coroutine scopes, switching between StateFlow and SharedFlow, injecting Dispatchers for testability, or debugging threading issues in Android. (triggers: **/*ViewModel.kt, **/*UseCase.kt, **/*Repository.kt, suspend, viewModelScope, lifecycleScope, Flow, coroutine, Dispatcher, DispatcherProvider, GlobalScope)

2026-04-092

android-deployment

li-lance/android-seraphim-framework

Configure App Distribution — Signing, Obfuscation, and App Bundles for Android. Use when configuring Release build types, setting up signing configs, enabling R8/ProGuard minification, adding ProGuard keep rules, or preparing an .aab for Play Store submission. (triggers: build.gradle.kts, proguard-rules.pro, signingConfigs, proguard, minifyEnabled, isMinifyEnabled, isShrinkResources, .aab, releaseKeystore)

2026-04-092

android-design-system

li-lance/android-seraphim-framework

Enforce Material Design 3 and design token usage in Jetpack Compose apps. Use when implementing M3 components, color schemes, or design tokens in Android. (triggers: **/*Screen.kt, **/ui/theme/**, **/compose/**, MaterialTheme, Color, Typography, Modifier, Composable)

2026-04-092

name	angular-architecture
description	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)

Angular Architecture

Priority: P0 (CRITICAL)

Principles

Feature-Based: Organize by feature folder (e.g., features/dashboard/) containing components, services, and models. Apply LIFT: Locate, Identify, Flat structure, * Try DRY*.
Standalone First: Use standalone components, Pipes, and Directives. Eliminate NgModule for new code; use standalone: true (or default in Angular 20+).
Core vs Shared:
- core/: Global singletons (AuthService, Interceptors). **Never put singletons in shared/ **.
- 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. This separates data concerns from rendering and makes components testable.

Guidelines

Lazy Loading: All feature routes MUST be lazy loaded using loadComponent or **loadChildren **.
- Example: { path: 'dashboard', loadComponent: () => import('./features/dashboard/dashboard.component').then(m => m.DashboardComponent) }
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+)?

Anti-Patterns

No NgModule: Eliminate NgModule for new code; use standalone components.
No eager feature imports: Lazy load all features with loadComponent or loadChildren.
No type-based folders: Organize by feature, not by /components, /services top-level dirs.

References

Folder Structure