diff --git a/skills/igniteui-react-components/SKILL.md b/skills/igniteui-react-components/SKILL.md index e9d662e..60ead52 100644 --- a/skills/igniteui-react-components/SKILL.md +++ b/skills/igniteui-react-components/SKILL.md @@ -6,14 +6,24 @@ user-invocable: true # Ignite UI for React Components -This skill covers everything from identifying the right component for a UI requirement to installing, setting up, and using Ignite UI for React components — including JSX patterns, event handling, refs, controlled/uncontrolled form components, and TypeScript. +## Prerequisites -## Before You Answer +- The **Ignite UI CLI MCP server** (`igniteui-cli`) available as a tool provider -- Do not guess package names or import paths from memory. -- First identify the component family, then read the relevant reference files from the Content Guide below. -- Check `package.json` and keep public or licensed package names consistent. -- If the required package is not present in `package.json`, add or install the correct Ignite UI dependency first. Absence from `package.json` does not mean the package is invalid. +> **AGENT INSTRUCTION — MCP Server Setup (REQUIRED)** +> +> Before using the Ignite UI CLI MCP tools, you MUST verify the MCP server is available +> by calling `list_components`. 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 component-related work. +> Do NOT skip this step or ask the user to do it manually. + +## Setting Up the Ignite UI CLI MCP Server + +> **Full setup instructions for VS Code, Cursor, Claude Desktop, and JetBrains IDEs are in [`reference/MCP-SERVER.md`](./reference/MCP-SERVER.md).** Read that file for editor-specific configuration steps and verification. ### Package Routing @@ -76,11 +86,9 @@ This skill is organized into focused reference files. Load the appropriate file --- -## Quick Start (Core UI Example) - -This example uses the core UI package `igniteui-react`. For grids, Grid Lite, charts, gauges, and maps, use the package routing table above first. +## Quick Start -### 1. Install Core UI Package +### 1. Install ```bash npm install igniteui-react @@ -163,7 +171,7 @@ Use [COMPONENT-CATALOGUE.md](./reference/COMPONENT-CATALOGUE.md) to map any UI n ## Best Practices -1. **Use the package routing table first** +1. **Start with the MIT package** (`igniteui-react`) — it covers most common UI needs 2. **Import theme CSS first** — components need it to render correctly 3. **Register chart/gauge/map modules** — call `.register()` at module level 4. **Wrap charts/gauges/maps in sized containers** — they need explicit dimensions diff --git a/skills/igniteui-react-components/reference/CHARTS-GRIDS.md b/skills/igniteui-react-components/reference/CHARTS-GRIDS.md index 7d3aadb..9b80141 100644 --- a/skills/igniteui-react-components/reference/CHARTS-GRIDS.md +++ b/skills/igniteui-react-components/reference/CHARTS-GRIDS.md @@ -1,5 +1,8 @@ # Charts, Gauges, Maps & Grid Lite +## Overview +This reference gives high-level guidance on charts and grids, their key features, and common API members. For detailed documentation, call `get_doc` and `get_api_reference` from `igniteui-cli` with the specific chart, or grid component, or feature you're interested in. + ## Module Registration > **⚠️ IMPORTANT:** Unlike core UI components (from `igniteui-react`), chart, gauge, and map components from `igniteui-react-charts`, `igniteui-react-gauges`, and `igniteui-react-maps` **require explicit module registration** before use. You must import the corresponding `*Module` class and call `.register()` at the module level (outside the component function). diff --git a/skills/igniteui-react-components/reference/COMPONENT-CATALOGUE.md b/skills/igniteui-react-components/reference/COMPONENT-CATALOGUE.md index 862b99c..498e587 100644 --- a/skills/igniteui-react-components/reference/COMPONENT-CATALOGUE.md +++ b/skills/igniteui-react-components/reference/COMPONENT-CATALOGUE.md @@ -1,5 +1,8 @@ # Component Catalogue +## Overview +This reference gives high-level guidance on Ignite UI for React components, their key features, and common use cases. For a full list of components, call `list_components` from `igniteui-cli` with the specific chart, or grid component, or feature you're interested in. + ## Available Packages Ignite UI for React is distributed across several packages depending on your needs: diff --git a/skills/igniteui-react-components/reference/MCP-SERVER.md b/skills/igniteui-react-components/reference/MCP-SERVER.md new file mode 100644 index 0000000..3c05b17 --- /dev/null +++ b/skills/igniteui-react-components/reference/MCP-SERVER.md @@ -0,0 +1,77 @@ +# Setting Up the Ignite UI CLI MCP Server + +> **Part of the [`igniteui-react-components`](../SKILL.md) skill hub.** + +## Contents + +- [VS Code](#vs-code) +- [Cursor](#cursor) +- [Claude Desktop](#claude-desktop) +- [WebStorm / JetBrains IDEs](#webstorm--jetbrains-ides) +- [Verifying the Setup](#verifying-the-setup) + +The Ignite UI CLI 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: + +```json +{ + "servers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli@next", "mcp"] + } + } +} +``` + +This works whether `igniteui-cli` is installed locally in `node_modules` or needs to be pulled from the npm registry — `npx -y` handles both cases. + +## Cursor + +Create or edit `.cursor/mcp.json`: + +```json +{ + "mcpServers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli@next", "mcp"] + } + } +} +``` + +## Claude Desktop + +Edit the Claude Desktop config file: +- **macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json` +- **Windows**: `%APPDATA%\Claude\claude_desktop_config.json` + +```json +{ + "mcpServers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli@next", "mcp"] + } + } +} +``` + +## WebStorm / JetBrains IDEs + +1. Go to **Settings → Tools → AI Assistant → MCP Servers** +2. Click **+ Add MCP Server** +3. Set Command to `npx` and Arguments to `igniteui-cli@next mcp` +4. Click OK and restart the AI Assistant + +## Verifying the Setup + +After configuring the MCP server, ask your AI assistant: + +> "List all available Ignite UI components" + +If the MCP server is running, the `list_components` tool will return all available components for the detected framework. diff --git a/skills/igniteui-react-customize-theme/SKILL.md b/skills/igniteui-react-customize-theme/SKILL.md index 084c06c..9f59d35 100644 --- a/skills/igniteui-react-customize-theme/SKILL.md +++ b/skills/igniteui-react-customize-theme/SKILL.md @@ -1,17 +1,33 @@ --- name: igniteui-react-customize-theme -description: This skill customizes Ignite UI for React component styling using CSS custom properties, Sass, and the full theming system and should be used when applying brand colors, dark mode, component-level overrides, or scoped themes in a React application +description: This skill customizes Ignite UI for React component styling using CSS custom properties and the full theming system and should be used when applying brand colors, dark mode, component-level overrides, or scoped themes in a React application user-invocable: true --- # Ignite UI for React — Theming Skill +## Prerequisites + +- A React project with `igniteui-react` installed +- A theme CSS file imported in your entry point (see [igniteui-react-components](../igniteui-react-components/SKILL.md)) +- The **Ignite UI Theming MCP server** (`igniteui-theming`) + +> **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. + ## Description -This skill teaches AI agents how to theme Ignite UI for React applications. Two approaches are supported: +This skill teaches AI agents how to theme Ignite UI for React applications. One approach is 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 — all in a React application context. @@ -23,12 +39,9 @@ The skill also covers component-level theming, layout controls (spacing, sizing, - "How do I scope a theme to a specific section of my React app?" - "Set up Material Design theming for Ignite UI components" -## Prerequisites +## Setting Up the Theming MCP Server -- A React project with `igniteui-react` installed -- A theme CSS file imported in your entry point (see [igniteui-react-components](../igniteui-react-components/SKILL.md)) -- **Optional**: Sass configured in the project (enables the Sass-based theming API) -- **Optional**: The **Ignite UI Theming MCP server** (`igniteui-theming`) for AI-assisted code generation +> **Full setup instructions for VS Code, Cursor, Claude Desktop, and JetBrains IDEs are in [`reference/MCP-SERVER.md`](./reference/MCP-SERVER.md).** Read that file for editor-specific configuration steps and verification. ## Related Skills @@ -52,7 +65,6 @@ This skill is organized into focused sections. Refer to the appropriate file for | Topic | File | When to Use | |---|---|---| | CSS Theming | [CSS-THEMING.md](./reference/CSS-THEMING.md) | Pre-built themes, CSS custom properties, scoped overrides, layout controls, light/dark switching | -| Sass Theming | [SASS-THEMING.md](./reference/SASS-THEMING.md) | Sass-based theming with palette(), component theme functions | | MCP Server | [MCP-SERVER.md](./reference/MCP-SERVER.md) | AI-assisted theming code generation | | Troubleshooting | [TROUBLESHOOTING.md](./reference/TROUBLESHOOTING.md) | Common issues and solutions | @@ -169,9 +181,7 @@ See [CSS-THEMING.md](./reference/CSS-THEMING.md) for approaches: class toggle, m 3. **Always call `get_component_design_tokens` before `create_component_theme`** 4. **Palette shades**: 50 = lightest, 900 = darkest 5. **Surface color must match variant** — light color for `light`, dark for `dark` -6. **Sass**: Use `@use 'igniteui-theming'` — not `igniteui-angular/theming` -7. **Sass**: Component themes use `@include tokens($theme)` inside a selector -8. **Never hardcode colors after palette generation** +6. **Never hardcode colors after palette generation** ## Additional Resources diff --git a/skills/igniteui-react-customize-theme/reference/SASS-THEMING.md b/skills/igniteui-react-customize-theme/reference/SASS-THEMING.md deleted file mode 100644 index 2ce76fd..0000000 --- a/skills/igniteui-react-customize-theme/reference/SASS-THEMING.md +++ /dev/null @@ -1,125 +0,0 @@ -# Sass Theming - -> Requires Sass configured in the project (e.g., `sass` in `devDependencies` and Vite/webpack configured to handle `.scss` files). - -## Basic Setup - -```scss -// src/styles.scss -@use 'igniteui-theming' as *; - -// 1. Define a palette -$my-palette: palette( - $primary: #1976D2, - $secondary: #FF9800, - $surface: #FAFAFA -); - -// 2. Apply the palette -@include palette($my-palette); - -// 3. Optional: Typography -@include typography($font-family: "'Roboto', sans-serif"); - -// 4. Optional: Elevations -@include elevations(); - -// 5. Optional: Spacing -@include spacing(); -``` - -Import in your React entry point: - -```tsx -// main.tsx -import './styles.scss'; -``` - -## Dark Theme - -For dark themes, use a dark surface color and a dark schema: - -```scss -@use 'igniteui-theming' as *; - -$dark-palette: palette( - $primary: #90CAF9, - $secondary: #FFB74D, - $surface: #121212 -); - -@include palette($dark-palette, $schema: $dark-material-schema); -``` - -> **Important:** Use `@use 'igniteui-theming'` — not `igniteui-angular/theming` or Angular-specific `core()` / `theme()` mixins. - -## Component-Level Theming with Sass - -When Sass is configured, use component theme functions and the `tokens` mixin: - -```scss -@use 'igniteui-theming' as *; - -$custom-avatar: avatar-theme( - $schema: $light-material-schema, - $background: var(--ig-primary-500), - $color: var(--ig-primary-500-contrast) -); - -igc-avatar { - @include tokens($custom-avatar); -} -``` - -## Light/Dark Toggle with Sass - -```scss -@use 'igniteui-theming' as *; - -$light-palette: palette($primary: #1976D2, $secondary: #FF9800, $surface: #FAFAFA); -$dark-palette: palette($primary: #90CAF9, $secondary: #FFB74D, $surface: #121212); - -@include typography($font-family: "'Roboto', sans-serif"); -@include elevations(); - -// Light is default -@include palette($light-palette, $schema: $light-material-schema); - -// Dark via class on a container or -.dark-theme { - @include palette($dark-palette, $schema: $dark-material-schema); -} -``` - -## Theming Architecture - -The Ignite UI theming system is built on four pillars: - -| Concept | Purpose | -|---|---| -| **Palette** | Color system with primary, secondary, surface, gray, info, success, warn, error families, each with shades 50–900 + accents A100–A700 | -| **Typography** | Font family, type scale (h1–h6, subtitle, body, button, caption, overline) | -| **Elevations** | Box-shadow levels 0–24 for visual depth | -| **Schema** | Per-component recipes mapping palette colors to component tokens | - -### Design Systems - -Four built-in design systems are available: - -- **Material** (default) — Material Design 3 -- **Bootstrap** — Bootstrap-inspired -- **Fluent** — Microsoft Fluent Design -- **Indigo** — Infragistics Indigo Design - -Each has light and dark variants (e.g., `$light-material-schema`, `$dark-fluent-schema`). - -### Palette Shades - -- Shades 50 = lightest, 900 = darkest for all chromatic colors -- Surface color must match the variant — light color for `light`, dark color for `dark` - -## Key Rules - -1. **Sass**: Use `@use 'igniteui-theming'` — not `igniteui-angular/theming` -2. **Sass**: Component themes use `@include tokens($theme)` inside a selector -3. **Never hardcode colors after palette generation** — use `var(--ig--)` palette tokens everywhere