🎯

angular-development

🎯Skill

from mindrally/skills

VibeIndex|
What it does

Provides expert Angular and TypeScript development guidance for building scalable, high-performance web applications with best practices and performance optimization techniques.

πŸ“¦

Part of

mindrally/skills(240 items)

angular-development

Installation

git cloneClone repository
git clone https://github.com/YOUR_USERNAME/skills.git ~/.claude/skills
πŸ“– Extracted from docs: mindrally/skills
14Installs
-
AddedFeb 4, 2026

Skill Details

SKILL.md

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

Overview

# 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