Creating Reusable Angular Components for Consistent UI

{
  "title": "Creating Reusable Angular Components for Consistent UI",
  "description": "Learn how to design reusable components that maintain a consistent look and feel across your Angular application, improving both development speed and user experience.",
  "category": "Angular Cursor Rules",
  "rules": [
    {
      "name": "Component Naming Convention",
      "description": "Ensure all component selectors are prefixed with a unique identifier to prevent conflicts and enhance readability.",
      "pattern": "selector: 'app-(\\w+)'",
      "replacement": "selector: 'myapp-$1'",
      "message": "Component selectors should be prefixed with 'myapp-' to maintain consistency and avoid conflicts."
    },
    {
      "name": "Single Responsibility Principle",
      "description": "Each component should have a single, well-defined responsibility to enhance maintainability and reusability.",
      "pattern": "class (\\w+)Component \\{[^}]*\\}",
      "replacement": "class $1Component { // Ensure this component adheres to the Single Responsibility Principle }",
      "message": "Review this component to ensure it has a single, well-defined responsibility."
    },
    {
      "name": "Use of Input and Output Decorators",
      "description": "Utilize @Input and @Output decorators for component communication to promote reusability and modularity.",
      "pattern": "@Component\\({[^}]*\\})\\s*export class (\\w+)Component \\{",
      "replacement": "@Component({ /* component metadata */ })\nexport class $1Component {\n  @Input() inputProperty: type;\n  @Output() outputEvent = new EventEmitter<type>();\n  // Component logic\n}",
      "message": "Consider using @Input and @Output decorators for effective component communication."
    },
    {
      "name": "Avoid Logic in Templates",
      "description": "Move complex logic from templates to component classes to improve readability and maintainability.",
      "pattern": "\\*ngIf=\"[^\"]*\\?[^:]*:[^\"]*\"",
      "replacement": "*ngIf=\"condition\"",
      "message": "Avoid using ternary operators in templates; move logic to the component class."
    },
    {
      "name": "Use of Lifecycle Hooks",
      "description": "Implement appropriate lifecycle hooks to manage component behavior effectively.",
      "pattern": "export class (\\w+)Component \\{",
      "replacement": "export class $1Component implements OnInit, OnDestroy {\n  ngOnInit() {\n    // Initialization logic\n  }\n  ngOnDestroy() {\n    // Cleanup logic\n  }\n  // Component logic\n}",
      "message": "Implement OnInit and OnDestroy lifecycle hooks to manage component initialization and cleanup."
    },
    {
      "name": "CSS Encapsulation",
      "description": "Encapsulate component styles to prevent unintended side effects on other components.",
      "pattern": "@Component\\({[^}]*\\})",
      "replacement": "@Component({ /* component metadata */ encapsulation: ViewEncapsulation.Emulated })",
      "message": "Use ViewEncapsulation.Emulated to encapsulate component styles."
    },
    {
      "name": "Dependency Injection",
      "description": "Use Angular's dependency injection to manage service dependencies, enhancing testability and modularity.",
      "pattern": "constructor\\(\\)",
      "replacement": "constructor(private serviceName: ServiceType) { }",
      "message": "Inject necessary services through the constructor to utilize Angular's dependency injection."
    },
    {
      "name": "Avoid Direct DOM Manipulation",
      "description": "Use Angular's templating and data-binding features instead of direct DOM manipulation to ensure compatibility and maintainability.",
      "pattern": "document\\.querySelector\\(.*\\)",
      "replacement": "// Avoid direct DOM manipulation; use Angular's templating features instead",
      "message": "Avoid using document.querySelector; utilize Angular's templating and data-binding features."
    },
    {
      "name": "Implement OnPush Change Detection",
      "description": "Use OnPush change detection strategy to optimize performance by reducing unnecessary checks.",
      "pattern": "@Component\\({[^}]*\\})",
      "replacement": "@Component({ /* component metadata */ changeDetection: ChangeDetectionStrategy.OnPush })",
      "message": "Set changeDetection to ChangeDetectionStrategy.OnPush to optimize performance."
    },
    {
      "name": "Use TrackBy with ngFor",
      "description": "Implement trackBy function with ngFor to improve rendering performance for dynamic lists.",
      "pattern": "\\*ngFor=\"let item of items\"",
      "replacement": "*ngFor=\"let item of items; trackBy: trackByFn\"",
      "message": "Use trackBy function with ngFor to enhance performance when rendering lists."
    }
  ]
}