taiga-ui

Taiga UI での開発

Taiga UI で開発するための方法を説明します。ライブラリの構成、コンポーネントの選び方、避けるべきミスを扱います。網羅的な API は含みません。API はタスクごとに参照する最新のソースにあり、詳細は references/ にあります。

最大の失敗は、古いメジャーバージョンや、実在しない API を反映した記憶を頼りに Taiga のコードを書くことです。 ここに書かれていることは、すべてそれを防ぐためのものです。

情報の優先順位は、最新のソース > このスキル > 周辺のコードです。 最新のソースとこのスキルの記述が食い違う場合は、最新のソースを優先してください。また、「リポジトリのほかの部分と一致している」は品質の基準になりません。アップグレードの途中にあるプロジェクトには、このスキルが取り除こうとしているパターンがまさに数多く含まれているため、近くのファイルを 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	ダイアログ、確認、通知／トースト、ドロップダウン、ヒント
styling.md	CSS を書こうとしているとき — たいてい CSS を不要にできる段階的な方法
pitfalls.md	作業を終える前 — 幻覚を防ぐためのセルフレビュー
platform.md	イベント修飾子、カスタムコントロール、DI ヘルパー、マスキング、Polymorpheus、プラットフォームトークン
facts.md	オフライン／MCP なし — 具体的なシンボルと、古い記憶を見分ける表（安全策）

Angular の基本（再説明せずに組み合わせる）

現代的で標準的な Angular の使い方を前提としています。スタンドアロンコンポーネント、ChangeDetectionStrategy.OnPush、リアクティブフォーム、ローカル状態には signals、派生値には computed を使用し、ロジックは .ts、テンプレートは .html、スタイルはスタイルシートに記述します。また、ngClass / ngStyle より [class.x] / [style.p] を優先します。このスキルでは、これらを再説明しません。一般的な Angular スキルと併用してください。