taiga-ui-setup

Taiga UI のセットアップ

1. インストール済みか確認する

grep '@taiga-ui/' package.json

パッケージが見つかった場合 → 手順 3 に進みます。何も見つからなかった場合 → 手順 2 に進みます。

2. インストールする

npx ng add taiga-ui --defaults --skip-confirmation

サポートされているインストール方法はこれだけです。@taiga-ui/* パッケージを手作業で package.json に追加しないでください。スキーマティックで追加するパッケージ（core、 kit、icons、layout、アドオン）を尋ねられるので、タスクに必要なものを選択します。通常は core + kit を選択します。また、スタイル、プロバイダー、インポートも自動で設定されます。

3. 設定を確認する

通常、スキーマティックが以下のすべてを設定します。不足している項目だけを確認して修正してください。

• スタイル — angular.json → architect.build.options.styles に @taiga-ui/core/styles/taiga-ui-theme.less と @taiga-ui/core/styles/taiga-ui-fonts.less が含まれている
• プロバイダー — provideTaiga() がアプリケーションのプロバイダーに含まれている：

  import {provideTaiga} from '@taiga-ui/core';
  // ...
  
  bootstrapApplication(App, {
    providers: [
      provideTaiga(),
      // ...
    ],
  }).catch(console.error);
  

  デフォルトの CLI レイアウトでは、プロバイダー配列は app.config.ts にあります。
• ルートラッパー — ルートテンプレート（app.html）ですべてが <tui-root>...</tui-root> で囲まれており、ルートコンポーネントが @taiga-ui/core から TuiRoot をインポートしている。これがないと、ポータル、ダイアログ、ヒント、アラートが機能しません。

4. 確認する

npx ng build

5. MCP（クライアントがサポートしている場合）

npx @taiga-ui/mcp init --client claude    # writes .mcp.json
npx @taiga-ui/mcp init --client cursor    # writes .cursor/mcp.json
npx @taiga-ui/mcp init --client vscode    # writes .vscode/mcp.json
npx @taiga-ui/mcp init --client windsurf  # writes ~/.codeium/windsurf/mcp_config.json (global only)
npx @taiga-ui/mcp init --client opencode  # writes opencode.json
npx @taiga-ui/mcp init --client codex     # writes .codex/config.toml

ビルドが成功すれば、セットアップは完了です。