docs: add self-closing tags guideline to components reference

(cherry picked from commit 719e1ada74)

skills/dev-skills/angular-developer/SKILL.md

@@ -45,7 +45,7 @@ When asked to create a new Angular project, you must determine the correct execu
 
 When working with Angular components, consult the following references based on the task:
 
-- **Fundamentals**: Anatomy, metadata, core concepts, and template control flow (@if, @for, @switch). Read [components.md](references/components.md)
+- **Fundamentals**: Anatomy, metadata, core concepts, self-closing tags, and template control flow (@if, @for, @switch). Read [components.md](references/components.md)
 - **Inputs**: Signal-based inputs, transforms, and model inputs. Read [inputs.md](references/inputs.md)
 - **Outputs**: Signal-based outputs and custom event best practices. Read [outputs.md](references/outputs.md)
 - **Host Elements**: Host bindings and attribute injection. Read [host-elements.md](references/host-elements.md)

skills/dev-skills/angular-developer/references/components.md

@@ -48,6 +48,24 @@ To use a component, add it to the `imports` array of the consuming component and
 export class App {}
 ```
 
+### Self-Closing Tags
+
+Angular supports self-closing tags for custom components.
+
+**Rule:** Always use self-closing tags when a component does not contain projected content or child nodes:
+
+```html
+<!-- Preferred: concise and modern -->
+<app-profile />
+<app-user-card [user]="currentUser()" />
+<router-outlet />
+
+<!-- Avoid: redundant closing tags for empty elements -->
+<app-profile></app-profile>
+<app-user-card [user]="currentUser()"></app-user-card>
+<router-outlet></router-outlet>
+```
+
 ## Template Control Flow
 
 Angular uses built-in blocks for conditional rendering and loops.