mcpField
T
taiga-ui-setup

taiga-ui-setup

github.com/taiga-familyDevelopment453 installsUpdated 3w ago
Repository

About taiga-ui-setup

A setup skill for adding Taiga UI to Angular projects and checking its configuration. It covers the supported schematic-based installation path and optional MCP client setup.

Key features

  1. 01Check for existing Taiga UI packages
  2. 02Install through the ng add schematic
  3. 03Verify styles, providers, and root wrapper
  4. 04Build the project to confirm setup
  5. 05Initialize MCP client configuration

Use cases

  1. 01Set up Taiga UI in a new Angular project
  2. 02Check missing styles or providers in an existing setup
  3. 03Configure Taiga UI MCP for a supported client

MCP support

The skill documents commands for initializing Taiga UI MCP configuration files for supported clients.

Install

Copy the command and run it in a terminal.

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

After installing, type/taiga-ui-setupin Claude Code to confirm it loaded.

Details

From the project README

Taiga UI setup

1. Check if installed

grep '@taiga-ui/' package.json

Packages present → skip to step 3. Nothing found → step 2.

2. Install

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

This is the only supported install path — do not add @taiga-ui/* packages to package.json by hand. The schematic asks which packages to add (core, kit, icons, layout, addons); pick what the task needs, core + kit is the usual answer. It also wires up styles, providers and imports itself.

3. Verify the wiring

The schematic normally does all of this; check it and fix only what is missing.

  • Styles — angular.json → architect.build.options.styles contains @taiga-ui/core/styles/taiga-ui-theme.less and @taiga-ui/core/styles/taiga-ui-fonts.less
  • Providers — provideTaiga() is in the application providers: 
    import {provideTaiga} from '@taiga-ui/core';
// ...

bootstrapApplication(App, {
  providers: [
    provideTaiga(),
    // ...
  ],
}).catch(console.error);
    In the default CLI layout the providers array lives in app.config.ts.
  • Root wrapper — the root template (app.html) wraps everything in <tui-root>...</tui-root>, and the root component imports TuiRoot from @taiga-ui/core. Without it portals, dialogs, hints and alerts do not work.

4. Confirm

npx ng build

5. MCP (if the client is supported)

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

Build passes → setup is done.

Comments

Markdown supported