mcpField
T
taiga-ui-setup

taiga-ui-setup

github.com/taiga-family开发453 次安装3 周前更新
代码仓库

关于 taiga-ui-setup

用于在 Angular 项目中添加 Taiga UI 并检查配置的技能，介绍通过官方原理图安装的路径及可选的 MCP 客户端配置。

主要功能

  1. 01检查是否已有 Taiga UI 包
  2. 02通过 ng add 原理图安装
  3. 03核对样式、提供者和根包装器
  4. 04构建项目确认配置
  5. 05初始化 MCP 客户端配置

适用场景

  1. 01在新的 Angular 项目中配置 Taiga UI
  2. 02检查现有配置是否缺少样式或提供者
  3. 03为受支持的客户端配置 Taiga UI MCP

MCP 相关

该技能列出为受支持的客户端初始化 Taiga UI MCP 配置文件的命令。

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/taiga-family/skills --skill taiga-ui-setup

安装后在 Claude Code 中输入/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、addons）；根据任务需要选择，通常选择 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。缺少它会导致 portals、对话框、提示和警报无法工作。

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

构建通过 → 设置完成。

评论

支持 Markdown