Standalone: standalone: true. Import dependencies directly in imports array.
Signal Inputs: Use input() and input.required() instead of @Input().
Signal Outputs: Use output() (from v17.3+) instead of @Output() EventEmitter.
Control Flow: Use @if, @for, @switch block syntax instead of *ngIf, *ngFor.
View Encapsulation: Default Emulated. Use None carefully.
Signals Integration
Use computed() for derived state.
Use effect() strictly for side effects (logging, manual DOM manipulation), NEVER for state propagation.
Anti-Patterns
Complex Logic in Template: Call a method or use a computed signal.
Direct DOM Access: Avoid ElementRef.nativeElement modification. Use Directives or Renderer2.
Component Inheritance: Prefer Composition (Directives, Services) over Class Inheritance.
References
Standalone Pattern
Control Flow
1---2name: components3description: Angular Components4---56# Angular Components78## **Priority: P0 (CRITICAL)**910## Principles1112- **Standalone**: `standalone: true`. Import dependencies directly in `imports` array.13- **Signal Inputs**: Use `input()` and `input.required()` instead of `@Input()`.14- **Signal Outputs**: Use `output()` (from v17.3+) instead of `@Output() EventEmitter`.15- **Control Flow**: Use `@if`, `@for`, `@switch` block syntax instead of `*ngIf`, `*ngFor`.16- **View Encapsulation**: Default `Emulated`. Use `None` carefully.1718## Signals Integration1920- Use `computed()` for derived state.21- Use `effect()` strictly for side effects (logging, manual DOM manipulation), NEVER for state propagation.2223## Anti-Patterns2425- **Complex Logic in Template**: Call a method or use a `computed` signal.26- **Direct DOM Access**: Avoid `ElementRef.nativeElement` modification. Use Directives or Renderer2.27- **Component Inheritance**: Prefer Composition (Directives, Services) over Class Inheritance.2829## References3031- [Standalone Pattern](references/standalone-pattern.md)32- [Control Flow](references/control-flow.md)
Run npx skillmds@latest add fierzone/components in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
Angular Components It is listed under Coding & Dev Tools on SkillMD.
This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
fierzone (@fierzone) published this skill. Their other Agent Skills are listed on their SkillMD profile.
fierzone