igniteui-wc-customize-component-theme

Ignite UI Web Components — Theming Skill

Description

This skill teaches AI agents how to theme Ignite UI Web Components (and React via igniteui-react) applications. Two approaches are supported:

• CSS custom properties — works in any project without additional build tooling
• Sass — available when the project has Sass configured; provides the full palette/typography/elevation API

The skill also covers component-level theming, layout controls (spacing, sizing, roundness), and how to use the Ignite UI Theming MCP server for AI-assisted code generation.

Prerequisites

• A project with igniteui-webcomponents (or igniteui-react) installed
• The Ignite UI Theming MCP server (igniteui-theming) available as a tool provider
• Optional: Sass configured in the project (enables the Sass-based theming API)

AGENT INSTRUCTION — MCP Server Setup (REQUIRED)

Before using any theming tools, you MUST verify the MCP server is available by calling detect_platform. If the tool is not available or the call fails, you MUST automatically configure it by following the setup process steps described below.

After writing the file, inform the user that the MCP server has been configured and they may need to reload the editor for the tools to activate. Start the MCP server and wait for that MCP server to start before continuing the theming related work. Do NOT skip this step or ask the user to do it manually.

Setting Up the Theming MCP Server

The Ignite UI Theming MCP server enables AI assistants to generate production-ready theming code. It must be configured in your editor before the theming tools become available.

VS Code

Create or edit .vscode/mcp.json in your project:

{
  "servers": {
    "igniteui-theming": {
      "command": "npx",
      "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"]
    }
  }
}

This works whether igniteui-theming is installed locally in node_modules or needs to be pulled from the npm registry — npx -y handles both cases.