skills.rest
CamiloAndresGTRUniandes
CamiloAndresGTRUniandesCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

angular-architecture

Enforce Angular project structure by placing components by usage scope.

19|2|Updated Apr 28, 2026
Search Tags:#architecture#project structure#components#angular#style guide#signals#file naming
One-click install
npx skills add https://github.com/CamiloAndresGTRUniandes/lucy-ai --skill angular-architecture-camiloandresgtruniandes
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: angular-architecture
Source: https://github.com/CamiloAndresGTRUniandes/lucy-ai/tree/main/skills/angular-architecture
Command: npx skills add https://github.com/CamiloAndresGTRUniandes/lucy-ai --skill angular-architecture-camiloandresgtruniandes

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill prevents scattered Angular code by giving clear rules for where components, services, and shared logic should live and how they should be named.

Core Features & Use Cases

  • Scope-based project structure: Places components under feature folders when used by a single feature, and under shared folders when used by multiple features.
  • Angular-aligned file naming: Enforces naming without redundant suffixes like .component.ts, .service.ts, or .model.ts so folders define intent.
  • Practical style guidance: Recommends modern Angular patterns like inject() usage, signal-based reactivity, and clear method naming to keep code consistent.
  • Concrete project layout reference: Provides a template for src/app/ features, shared, core singletons, and routing/bootstrap files.

Quick Start

Tell your AI to apply the angular-architecture rules to your proposed folder tree and component/service filenames for a new Angular app so it outputs the corrected structure.

Frequently Asked Questions about angular-architecture

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

FAQPage Schema
How do I structure an Angular project to keep components and services organized?▼

Structure Angular apps by placing components under feature folders when scoped to a single feature, and under shared folders when used by multiple features, keeping services and models consistently organized.

What is the best way to name Angular component and service files?▼

Name Angular files without redundant suffixes like .component.ts, .service.ts, or .model.ts so folder names define intent, keeping file paths clean and readable.

How do I apply modern Angular style guide patterns for signals and inject()?▼

Apply modern Angular style guide patterns by using inject() for dependencies, signal-based reactivity, and clear method naming to ensure consistent lifecycle handling across the application.

When should I refactor an Angular application's folder structure?▼

Refactor Angular applications when components, services, and routing files become scattered across src/app, using scope rules to relocate feature-specific and shared code into their correct respective folders.

Can I use this Angular architecture approach for both new apps and existing refactoring?▼

Yes, you can use these scope rules and folder-based naming conventions for both new Angular apps and existing refactoring, providing a concrete layout template for src/app routing and bootstrap files.

Related Skills

Explore More Software Engineering Skills→
tneztnez

bootstrap

Initialize the .docent directory structure and configuration for new projects.

Community
Basic
shaprisshapris

angular-testing

Generate unit and integration tests for Angular v20+ applications.

Community
Intermediate
RzyfrontRzyfront
5

vendix-frontend-component

Codify folder-based Angular component patterns with standardized naming conventions.

Community
Basic
statick88statick88
1

angular-architecture

Enforce Angular project structure, component placement, and file naming conventions.

Community
Intermediate