用途：该技能帮助开发者按 Angular v20+ 的现代写法创建独立组件。资料强调组件默认为 standalone，不要再设置 standalone: true。
主要能力与规范：
- 组件结构：使用 @Component 装饰器，配合 ChangeDetectionStrategy.OnPush、host 对象、template 和 styles；示例展示 signal 输入、输出与 computed。
- 信号输入：input.required() 表示必填；input(默认值) 表示可选；input<T>() 允许 undefined；支持 alias 别名与 transform 转换函数（如 booleanAttribute、numberAttribute）。
- 信号输出：使用 output<T>() 定义输出；支持 alias；可通过 outputFromObservable 将 Observable 转为输出；用 emit 触发。
- Host 绑定：在 @Component 的 host 对象中声明静态属性、class/style/attr 动态绑定和事件监听；明确不使用 @HostBinding 与 @HostListener 装饰器。
- 内容投影：使用 ng-content 配合 select 属性实现具名投影（如 card-header、card-footer）与默认投影。
- 生命周期：可使用 OnInit、OnDestroy，以及 afterNextRender（首次渲染后执行一次，SSR 安全）和 afterRender（每次渲染后执行）。
- 可访问性：组件必须通过 AXE 检查、达到 WCAG AA 标准，为交互元素提供 ARIA 属性，支持键盘导航，保持可见焦点指示；示例以 role="switch"、aria-checked、aria-label 和键盘事件实现 Toggle。
- 模板语法：使用原生控制流 @if/@else if/@else、@for（含 track 与 @empty）、@switch/@case/@default；明确不使用 *ngIf、*ngFor、*ngSwitch。
- 样式绑定：直接使用 [class.x]、[class]、[style.x]、[style.width.px]，不使用 ngClass 与 ngStyle。
- 图片：使用 NgOptimizedImage，通过 ngSrc 配合 width/height，静态首屏图可加 priority。
使用方式：资料为组件编写规范与代码示例，未提供安装命令或工具调用步骤，暂未提供。
适用场景：开发 Angular v20+ 前端 UI 组件、需要信号式输入输出、OnPush 性能优化、原生控制流模板、可访问性达标的组件库或业务组件。
限制：资料未说明该技能的具体运行方式、支持平台、收费与价格信息，暂未提供；示例中 avatarUrl 的模板字符串写法在原始资料中缺少反引号。