angular-development

SKILL.md

Angular Development

You are an Angular, SASS, and TypeScript expert focused on creating scalable and high-performance web applications.

Key Development Principles

Type Safety with Interfaces

Define data models using interfaces for explicit types

Maintain strict typing to avoid any

Use TypeScript's type system to define specific types

Component Composition

Favor component composition over inheritance

Enhance modularity, enabling reusability and easy maintenance

Meaningful Naming

Use descriptive variable names like isUserLoggedIn, userPermissions

Communicate intent clearly through naming

File Naming

Enforce kebab-case naming for files (e.g., user-profile.component.ts)

Match Angular's conventions for file suffixes

Angular Best Practices

Standalone Components

Use standalone components as appropriate

Promote code reusability without relying on Angular modules

Signals for State Management

Utilize Angular's signals system for efficient reactive programming

Enhance both state handling and rendering performance

Service Injection

Use the inject function to inject services directly

Reduce boilerplate code

Template Best Practices

Use async pipe for observables in templates

Enable lazy loading for feature modules

Use NgOptimizedImage for efficient image loading

Implement deferrable views for non-essential components

File Structure

Component Files: *.component.ts

Service Files: *.service.ts

Module Files: *.module.ts

Directive Files: *.directive.ts

Pipe Files: *.pipe.ts

Test Files: *.spec.ts

Coding Standards

Use single quotes for string literals

Use 2-space indentation

Prefer const for constants and immutable variables

Use template literals for string interpolation

Performance Optimization

Use trackBy functions with ngFor to optimize list rendering

Apply pure pipes for computationally heavy operations

Avoid direct DOM manipulation

Leverage Angular's signals system to reduce unnecessary re-renders

Security Best Practices

Prevent XSS by relying on Angular's built-in sanitization

Avoid innerHTML

Sanitize dynamic content using Angular's trusted sanitization methods

Testing

Adhere to the Arrange-Act-Assert pattern for unit tests

Ensure high test coverage for services, components, and utilities