taiga-ui

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Building with Taiga UI

使用 Taiga UI 构建

The method for building with Taiga UI: the library's shape, how to pick components, and the mistakes to avoid. It holds no exhaustive API — that lives in the live source you consult per task; the depth lives in

references/

The #1 failure is writing Taiga code from memory that reflects an older major or an invented API. Everything here exists to prevent that.

Authority order: the live source > this skill > the surrounding code. If the live source and this skill disagree, the live source wins. And "it matches the rest of the repo" is not a quality bar — a project mid-upgrade is full of exactly the patterns this skill exists to remove, so never take a neighbouring file as proof that an API is current.

使用 Taiga UI 构建的方法：介绍该库的结构、如何选择组件，以及应避免的错误。它不包含完整的 API——这些内容应按具体任务查阅实时源码；深入说明位于

references/

中。

首要失败原因是凭记忆编写 Taiga 代码，而所用 API 反映的是旧的大版本，或本身就是虚构的。这里的一切都是为了防止这种情况。

权威性顺序：实时源码 > 本 skill > 周边代码。 如果实时源码与本 skill 存在冲突，以实时源码为准。而“它与仓库中的其他代码一致”并不是质量标准——一个正在升级中的项目，恰恰充满了本 skill 要消除的那些模式，因此绝不要把相邻文件当作 API 仍为最新版本的证据。

Step 0 — before writing any markup

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

Is Taiga installed and wired? If
```
package.json
```
has no
```
@taiga-ui/*
```
, or the app has no
```
<tui-root>
```
/
```
provideTaiga()
```
, stop — that is setup, not development. Run the taiga-ui-setup
skill first, then come back here.
Open the live source. Prefer the Taiga UI MCP —
```
get_overview
```
(import map, checklist, common mistakes) once, then
```
get_component_example
```
per component you use. Otherwise
```
https://taiga-ui.dev/llms-full.txt
```
. Confirm the owning package for every symbol before importing — never guess one. No MCP configured? Setting it up is step 5 of the taiga-ui-setup
skill; until then use
```
llms-full.txt
```
, and facts.md if nothing is reachable.

Taiga 是否已安装并接入？ 如果
```
package.json
```
中没有
```
@taiga-ui/*
```
，或者应用中缺少
```
<tui-root>
```
/
```
provideTaiga()
```
，请停止——这属于安装配置，而不是开发。先运行 taiga-ui-setup
skill，然后返回这里。
打开实时源码。 优先使用 Taiga UI MCP——先调用一次
```
get_overview
```
（import map、检查清单、常见错误），然后针对使用的每个组件调用
```
get_component_example
```
。否则使用
```
https://taiga-ui.dev/llms-full.txt
```
。导入前确认每个符号所属的包——绝不要猜测。 尚未配置 MCP？配置它是 taiga-ui-setup
skill 的第 5 步；在此之前使用
```
llms-full.txt
```
，如果仍无法访问任何资源，则使用 facts.md。

Core rules

核心规则

Pick by behaviour, then confirm the exact symbol live. Map a need to a primitive in capabilities.md — it also lists the habit each need tempts you into — then get the real selector/import from the live source.
Controls are directives on native elements inside a textfield wrapper — not custom
```
<tui-*>
```
tags.
Configure through DI, not ad-hoc markup: providers and injected services (dialogs, notifications).
Compiles ≠ works. Some wrong choices type-check and fail only at runtime — an unprovided service is a blank page, an unbound control renders inert. Run the app before you claim it's done.

先按行为选择，再通过实时源码确认准确的符号。 将需求映射到 capabilities.md 中的基础原语——该文件还列出了每种需求容易诱发的错误习惯——然后从实时源码获取真正的选择器/import。
控件是 textfield 包装器内原生元素上的指令，而不是自定义的
<tui-*>
标签。
通过 DI 配置，而不是临时在标记中硬编码： 使用 providers 和注入式服务（对话框、通知）。
能够编译 ≠ 能够正常工作。 一些错误选择可以通过类型检查，却只在运行时失败——未提供的服务会表现为空白页面，未绑定的控件则会渲染为无交互状态。在声称完成之前运行应用。

Reference files — read when

参考文件——何时阅读

Read	When
architecture.md	starting anything — the library's shape and the DI-first mental model
capabilities.md	choosing what to reach for — need → the wrong reflex → the primitive
forms.md	building any form, input, validation, or submit flow
overlays.md	dialogs, confirms, notifications / toasts, dropdowns, hints
styling.md	about to write CSS — the escalation ladder that usually removes the need
pitfalls.md	before finishing — the anti-hallucination self-review
platform.md	event modifiers, custom controls, DI helpers, masking, Polymorpheus, platform tokens
facts.md	offline / no MCP — concrete symbols, stale-recall table (safety net)

阅读	何时
architecture.md	开始任何工作之前——了解库的结构以及 DI 优先的思维模式
capabilities.md	选择该使用什么时——需求 → 错误直觉 → 基础原语
forms.md	构建任何表单、输入、验证或提交流程时
overlays.md	处理对话框、确认框、通知/toast、下拉菜单或提示时
styling.md	准备编写 CSS 时——逐级处理方法，通常可以避免编写 CSS
pitfalls.md	完成之前——进行防止幻觉的自我审查
platform.md	处理事件修饰符、自定义控件、DI 辅助工具、掩码、Polymorpheus 或 platform tokens 时
facts.md	离线/无 MCP——具体符号、凭记忆使用过时 API 的对照表（安全网）

Angular fundamentals (compose, don't re-teach)

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

Assumes idiomatic modern Angular: standalone components,

ChangeDetectionStrategy.OnPush

, reactive forms, signals for local state and

computed

for derived, logic in

.ts

/ template in

.html

/ styles in the stylesheet, and

[class.x]

[style.p]

over

ngClass

ngStyle

. This skill does not re-teach these — pair it with a general Angular skill.

假定你已经使用惯用的现代 Angular：standalone 组件、

ChangeDetectionStrategy.OnPush

、响应式表单、用于本地状态的 signals 和用于派生状态的

computed

，逻辑写在

.ts

中、模板写在

.html

中、样式写在样式表中，并优先使用

[class.x]

[style.p]

，而不是

ngClass

ngStyle

。本 skill 不会重新教授这些内容——请与通用 Angular skill 配合使用。