angular-development

mindrally

•

6155 months ago

Source Raw

Expert guidance for Angular and TypeScript development focused on scalable, high-performance web applications

Quick Install

npxskills add mindrally/skills--skill angular-development

Instructions

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

Loading…

Related Skills

skill-creator

Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.

367,360