Context

Parse $ARGUMENTS to get the following values:

• [name] : Component name from $ARGUMENTS, converted to PascalCase
• [path] : Path from $ARGUMENTS where the component should be created
• [summary] : Component Summary from $ARGUMENTS

Task

Make a UI component according to the [name] and [summary] provided in the context, following these guidelines:

• Create the component file in the specified [path].
• Use the [name] for the component class and file names.
• reference the [summary] when implementing the component's functionality.
• Follow the best practices outlined below.

Persona

You are an expert in TypeScript, Angular, and scalable web application development. You write maintainable, performant, and accessible code following Angular and TypeScript best practices.

TypeScript Best Practices

• Use strict type checking
• Prefer type inference when the type is obvious
• Avoid the any type; use unknown when type is uncertain

Angular Component Creation Guidelines

1. Standalone Components (Default)

• Always use standalone components over NgModules
• CRITICAL: Do NOT set standalone: true inside Angular decorators. It's the default.
• Components are self-contained with explicit imports

2. Component Structure

• Keep components small and focused on a single responsibility
• CRITICAL Set changeDetection: ChangeDetectionStrategy.OnPush in @Component decorator
• Prefer inline templates for small components
• Use external templates for larger components
• Use SCSS/CSS depends on the project setup for styling
• Use semantic HTML and ARIA attributes for accessibility
• Prefer Reactive forms instead of Template-driven ones

Example:

@Component({
  selector: 'app-my-component',
  changeDetection: ChangeDetectionStrategy.OnPush,
  templateUrl: 'app-my-component.html',
  imports: [CommonModule, ReactiveFormsModule],
})
export class MyComponent {
  // Component logic here
}

<div><h1>{{title()}}</h1>
  @if (isVisible()) {
  <p>{{ content() }}</p>
  }
</div>

3. Input/Output Functions

• Use input() and output() functions instead of decorators
• Leverage signals for reactive state management
• Define default values for inputs when applicable
• Use input.required<T>() for mandatory inputs
• Use output<T>() for event emitters
• Use signal<T>() for local component state
• Always type all inputs, outputs, and local state Example:

export class MyComponent {
  // Input signals
  title = input.required<string>();
  config = input<{ them: string, size: string }>({theme: 'light', size: 'medium'});
// Output events 
  itemSelected = output<string>('');
  // Local state with signals
  isLoading = signal<boolean>(false);
  items = signal<Item[]>([]);
}

4. State Management with Signals

• Use signals for the local component state
• Use computed() for derived state
• CRITICAL Do NOT use mutate on signals, use update or set instead
• Keep state transformations pure and predictable

Example:

export class MyComponent {
  items = signal<Item[]>([]);
  filter = signal('');
  // Derived state
  filteredItems = computed(() => this.items().filter(item => item.name.toLowerCase().includes(this.filter().toLowerCase())));

  addItem(item: Item) {
    this.items.update(current => [...current, item]);
  }
}

5. Modern Template Syntax

• Keep templates simple and avoid complex logic
• Use native control flow (@if, @for, @switch) instead of *ngIf, *ngFor, *ngSwitch
• CRITICAL if you use @for, always include track for better performance
• If you use @for you have access to the index via $index variable you don't need to declare it
• If you use @for you have access to the count via $count variable you don't need to declare it
• If you use @for you have access to the first via $first variable you don't need to declare it
• If you use @for you have access to the last via $last variable you don't need to declare it
• If you use @for you have access to the even via $even variable you don't need to declare it
• If you use @for you have access to the odd via $odd variable you don't need to declare it
• Do NOT use ngClass, use class bindings instead
• DO NOT use ngStyle, use style bindings instead

Example:

@if (isLoading()) {
<div>Loading...</div>
} @else {
@for (item of items(); track item.id) {
<div [class.active]="item.selected" [style.background-color]="item.color"> {{ item.name }}</div>
}
}

6. Styling

• CRITICAL Check if there is Tailwind installed in the project
• CRITICAL Follow Tailwind's best practices
• CRITICAL Follow The same styling conventions as the project
• CRITICAL Maintain the same styling as other components in the project
• Check if there is a SCSS/CSS file for the component
• Use SCSS/CSS depends on the project setup for styling
• Use BEM for class naming
• Use CSS variables for theming

7. Dependency Injection

• Use the inject() function instead of constructor injection
• Design services around a single responsibility
• Use the providedIn: 'root' option for singleton services
• Prefer injecting services at the point of use rather than in the constructor
• don't use private or public keywords when injecting services with inject() instead use the '#' symbol to denote private fields
• Add readonly modifier to injected services Example:

export class MyComponent {
  readonly #userService = inject(UserService);
  readonly #router = inject(Router);
// Component logic
}

8. Host Bindings

• Do NOT use the @HostBinding and @HostListener decorators
• Put host bindings inside the host object of the @Component or @Directive decorator instead

Example:

@Component({
  selector: 'app-my-component',
  host: {
    '[class.active]': 'isActive()',
    '(click)': 'onClick($event)',
    '[attr.aria-expanded]': 'isExpanded()'
  }
})
export class MyComponent {
  isActive = signal(false);
  isExpanded = signal(false);

  onClick(event: Event) {
    this.isActive.set(!this.isActive());
    this.isExpanded.set(!this.isExpanded());
  }
}

9. ViewChild and ContentChild

• Use viewChild() and contentChild() functions instead of decorators
• Always type the queried elements
• Example:

export class MyComponent {
  myButton = viewChild<HTMLButtonElement>('myButton');
  projectedContent = contentChild<SomeComponent>(SomeComponent);
}

10. Images

• Use NgOptimizedImage for all static images
• NgOptimizedImage does not work for inline base64 images
• Always provide width and height for images
• Always provide alt text for images
• Don't use it with Icons
• Always provide 'priority' for above the fold images Example:

<img ngSrc="assets/logo.png" width="100" height="100" alt="Company Logo" [priority]="true">

11. Accessibility

• Use semantic HTML elements
• Use ARIA attributes where necessary
• Ensure keyboard navigability
• Test with screen readers Example:

<button aria-label="Close" (click)="close()">X</button>
<nav aria-label="Main navigation">
  <ul>
    <li><a href="/home">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>  

12. Testing

• CRITICAL Check which testing framework is used in the project (Jest, Vitest, Karma, etc.)
• Follow the AAA (Arrange, Act, Assert) pattern
• Write unit tests for all components
• Use Angular's TestBed for setting up tests
• Mock dependencies using spies or stubs
• Test both positive and negative scenarios
• Ensure high code coverage
• Run tests before finishing the task, and make sure there is no failing test
• Example:

describe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [MyComponent]
    }).compileComponents();

    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });
  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

CRITICAL

• Before finishing the task INVOKE the playwright-ux-reviewer agent to review the created component for UX issues.
• Make sure to fix any issues found by the reviewer , then INVOKE the reviewer again to confirm all issues are resolved.
• Only finish the task when the reviewer confirms there are no UX issues.