CtrlK
BlogDocsLog inGet started
Tessl Logo

angular-architecture

Angular architecture: Scope Rule, project structure, file naming, style guide. Trigger: When structuring Angular projects or deciding where to place components.

Install with Tessl CLI

npx tessl i github:Yoizen/dev-ai-workflow --skill angular-architecture
What are skills?

86

Review — 83%

Does it follow best practices?

Validation — 11 / 11 Passed

Validation for skill structure

SKILL.md
Review
Evals

The Scope Rule (REQUIRED)

"Scope determines structure" - Where a component lives depends on its usage.

UsagePlacement
Used by 1 featurefeatures/[feature]/components/
Used by 2+ featuresfeatures/shared/components/

Example

features/
  shopping-cart/
    shopping-cart.ts          # Main component = feature name
    components/
      cart-item.ts            # Used ONLY by shopping-cart
      cart-summary.ts         # Used ONLY by shopping-cart
  checkout/
    checkout.ts
    components/
      payment-form.ts         # Used ONLY by checkout
  shared/
    components/
      button.ts               # Used by shopping-cart AND checkout
      modal.ts                # Used by multiple features

Project Structure

src/app/
  features/
    [feature-name]/
      [feature-name].ts       # Main component (same name as folder)
      components/             # Feature-specific components
      services/               # Feature-specific services
      models/                 # Feature-specific types
    shared/                   # ONLY for 2+ feature usage
      components/
      services/
      pipes/
  core/                       # App-wide singletons
    services/
    interceptors/
    guards/
  app.ts
  app.config.ts
  routes.ts
  main.ts

File Naming (REQUIRED)

No .component, .service, .model suffixes. The folder tells you what it is.

✅ user-profile.ts
❌ user-profile.component.ts

✅ cart.ts
❌ cart.service.ts

✅ user.ts
❌ user.model.ts

Style Guide

What We Follow (from official docs)

  • inject() over constructor injection
  • class and style bindings over ngClass/ngStyle
  • protected for template-only members
  • readonly for inputs, outputs, queries
  • Name handlers for action (saveUser) not event (handleClick)
  • Keep lifecycle hooks simple - delegate to well-named methods
  • One concept per file
@Component({...})
export class UserProfileComponent {
  // 1. Injected dependencies
  private readonly userService = inject(UserService);
  
  // 2. Inputs/Outputs
  readonly userId = input.required<string>();
  readonly userSaved = output<User>();
  
  // 3. Internal state
  private readonly _loading = signal(false);
  readonly loading = this._loading.asReadonly();
  
  // 4. Computed
  protected readonly displayName = computed(() => ...);
  
  // 5. Methods
  save(): void { ... }
}

What We Override

Official SaysWe DoWhy
user-profile.component.tsuser-profile.tsRedundant - folder tells context
user.service.tsuser.tsSame

Commands

# New project
ng new my-app --style=scss --ssr=false

# Component in feature
ng g c features/products/components/product-card --flat

# Service in feature  
ng g s features/products/services/product --flat

# Guard in core
ng g g core/guards/auth --functional

Resources

  • https://angular.dev/style-guide
Repository
Yoizen/dev-ai-workflow
Commit

78a194d

Last updated
Created

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.

Claim skill