taiga-ui

使用 Taiga UI 构建

使用 Taiga UI 的方法：了解库的结构、如何选择组件，以及需要避免的错误。本文不包含完整的 API——相关内容在实时源码中，需按任务查阅；详细资料请见 references/。

最大的失败原因，是凭记忆编写 Taiga 代码，结果用上了旧主版本的写法或臆造的 API。 本文的所有内容都是为避免这种情况而设。

权威顺序：实时源码 > 本技能 > 周边代码。 如果实时源码与本技能不一致，以实时源码为准。而且，“与仓库中的其他代码一致”并不代表质量过关——处于升级过程中的项目里，恰好充斥着本技能旨在清除的模式，因此切勿以相邻文件作为 API 仍然有效的依据。

第 0 步——编写任何标记之前

1. 是否已安装并接入 Taiga？ 如果 package.json 中没有 @taiga-ui/*，或者应用中没有 <tui-root> / provideTaiga()，请停下——这是配置工作，不是开发工作。先运行 taiga-ui-setup 技能，然后再回到这里。
2. 打开实时源码。 优先使用 Taiga UI MCP——先调用一次 get_overview（导入映射、检查清单、常见错误），然后对每个要使用的组件调用 get_component_example。否则请访问 https://taiga-ui.dev/llms-full.txt。导入前，确认每个符号所属的包——切勿猜测。 尚未配置 MCP？配置步骤位于 taiga-ui-setup 技能的第 5 步；在配置完成前，请使用 llms-full.txt，如果无法访问任何内容，再查阅 facts.md。

核心规则

• 先按行为选择，再从实时源码确认确切符号。 在 capabilities.md 中找到需求对应的基础组件——其中也列出了每种需求容易诱发的习惯——然后从实时源码获取实际的选择器和导入信息。
• 控件是文本字段包装器内原生元素上的指令，不是自定义的 <tui-*> 标签。
• 通过 DI 配置，不要用临时标记实现：使用提供程序和注入的服务（对话框、通知）。
• 能编译 ≠ 能运行。 有些错误选择可以通过类型检查，却只会在运行时失败——未提供的服务会导致页面空白，未绑定的控件则会失去作用。声称完成之前，请先运行应用。

参考文件——何时阅读

阅读	何时
architecture.md	开始任何工作时——了解库的结构和 DI 优先的思维模式
capabilities.md	选择要使用的内容时——需求 → 错误的惯性做法 → 基础组件
forms.md	构建任何表单、输入、验证或提交流程时
overlays.md	使用对话框、确认框、通知 / toast、下拉菜单、提示时
styling.md	准备编写 CSS 时——通常可以省去编写 CSS 的逐级处理方法
pitfalls.md	完成前——防止幻觉的自查清单
platform.md	事件修饰符、自定义控件、DI 助手、掩码、Polymorpheus、平台令牌
facts.md	离线 / 没有 MCP 时——具体符号、过时记忆对照表（安全网）

Angular 基础（组合使用，不重复讲解）

假定你采用惯用的现代 Angular 写法：独立组件、ChangeDetectionStrategy.OnPush、响应式表单、使用信号管理本地状态并用 computed 派生数据、将逻辑写在 .ts / 模板写在 .html / 样式写在样式表中，并优先使用 [class.x] / [style.p] 而非 ngClass / ngStyle。本技能不会重复讲解这些内容——请搭配通用的 Angular 技能使用。