You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Jun 8, 2026. It is now read-only.
Copy file name to clipboardExpand all lines: en/components/ai/skills.md
+13-13Lines changed: 13 additions & 13 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -12,11 +12,11 @@ Ignite UI for Angular ships with **Agent Skills** — structured knowledge files
12
12
13
13
The skill files live in the [`skills/`](https://github.com/IgniteUI/igniteui-angular/tree/master/skills) directory of the Ignite UI for Angular repository:
> **Note:** Starting with Ignite UI for Angular **21.1.0**, these skills are automatically discovered when placed in your agent's skills path (e.g., `.claude/skills`, `.agents/skills`, `.cursor/rules/`). This release ships with an optional `ng update` migration to add these skills to your project automatically when updating to `igniteui-angular` 21.1.0 or later.
22
22
@@ -240,14 +240,14 @@ Once complete, the skills are ready to use — no manual file copying required.
240
240
241
241
Once you have the files, open them and load them into your AI assistant:
242
242
243
-
| IDE / Tool | How to load |
244
-
|:-----------|:------------|
245
-
|**VS Code + GitHub Copilot**| Use `#file:path/to/SKILL.md` in the Copilot Chat input to attach it as context for that session. |
246
-
|**Cursor**| Drag the `SKILL.md` file into the chat window, or type `@file` and select it. |
247
-
|**Windsurf**| Attach the file using the **+** button in the Cascade chat panel. |
248
-
|**JetBrains AI Assistant**| Click the paperclip icon in the AI chat to attach the file as context. |
249
-
|**Claude Desktop**| Drag the file into the chat or add it to the project knowledge base via **Project → Add Content**. |
250
-
|**Other assistants**| Open the `SKILL.md` file, copy its full contents, and paste them into the system prompt or at the top of your first message. |
Copy file name to clipboardExpand all lines: en/components/ai/theming-mcp.md
+15-15Lines changed: 15 additions & 15 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -232,21 +232,21 @@ To see the current full list of tools and their parameters at any time, ask your
232
232
233
233
Here is a brief overview of each tool:
234
234
235
-
| Tool | Description |
236
-
|------|-------------|
237
-
|`detect_platform`| Reads `package.json` and identifies whether the project uses Ignite UI for Angular, Web Components, React, or Blazor. Selects the correct import paths and component selectors for all subsequent tools. |
238
-
|`create_palette`| Generates a color palette with automatic shade variants (50–900, A100–A700) from your base brand colors. Accepts an `output` parameter (`sass` or `css`) and a `designSystem` to select the schema. |
239
-
|`create_custom_palette`| Fine-grained palette creation — specify exact hex values for every shade when automatic generation is not suitable. |
240
-
|`create_typography`| Sets up a font family and type scale for a given design system. |
241
-
|`create_elevations`| Configures box-shadow elevation levels (0–24) for Material or Indigo design systems. |
242
-
|`create_theme`| One-shot complete theme: palette + typography + elevations, ready to include in your `styles.scss`. Accepts a `designSystem` (`material`, `bootstrap`, `fluent`, or `indigo`) and `variant` (`light` or `dark`). |
243
-
|`set_size`| Sets `--ig-size` globally or for a specific component (`small`, `medium`, or `large`). |
244
-
|`set_spacing`| Sets `--ig-spacing` (and optionally inline/block overrides) globally or per component. |
245
-
|`set_roundness`| Sets `--ig-radius-factor` (0 = square, 1 = fully round) globally or per component. |
246
-
|`get_component_design_tokens`| Returns all available design tokens for a component — always call this before `create_component_theme`. |
247
-
|`create_component_theme`| Generates Sass or CSS to customize a component's tokens (colors, borders, etc.). Accepts a `variant` (`light` or `dark`) to select the correct schema. |
248
-
|`get_color`| Returns a CSS variable reference for a palette color, e.g. `var(--ig-primary-500)`. Supports optional contrast and opacity parameters. |
249
-
|`read_resource`| Reads built-in reference resources organized into four categories: platform configs (6), palette/typography/elevation presets (5), color guidance (7), and layout/spacing docs (8). |
|`detect_platform`| Reads `package.json` and identifies whether the project uses Ignite UI for Angular, Web Components, React, or Blazor. Selects the correct import paths and component selectors for all subsequent tools.|
238
+
|`create_palette`| Generates a color palette with automatic shade variants (50–900, A100–A700) from your base brand colors. Accepts an `output` parameter (`sass` or `css`) and a `designSystem` to select the schema.|
239
+
|`create_custom_palette`| Fine-grained palette creation — specify exact hex values for every shade when automatic generation is not suitable.|
240
+
|`create_typography`| Sets up a font family and type scale for a given design system.|
241
+
|`create_elevations`| Configures box-shadow elevation levels (0–24) for Material or Indigo design systems.|
242
+
|`create_theme`| One-shot complete theme: palette + typography + elevations, ready to include in your `styles.scss`. Accepts a `designSystem` (`material`, `bootstrap`, `fluent`, or `indigo`) and `variant` (`light` or `dark`). |
243
+
|`set_size`| Sets `--ig-size` globally or for a specific component (`small`, `medium`, or `large`).|
244
+
|`set_spacing`| Sets `--ig-spacing` (and optionally inline/block overrides) globally or per component.|
245
+
|`set_roundness`| Sets `--ig-radius-factor` (0 = square, 1 = fully round) globally or per component.|
246
+
|`get_component_design_tokens`| Returns all available design tokens for a component — always call this before `create_component_theme`. |
247
+
|`create_component_theme`| Generates Sass or CSS to customize a component's tokens (colors, borders, etc.). Accepts a `variant` (`light` or `dark`) to select the correct schema.|
248
+
|`get_color`| Returns a CSS variable reference for a palette color, e.g. `var(--ig-primary-500)`. Supports optional contrast and opacity parameters.|
249
+
|`read_resource`| Reads built-in reference resources organized into four categories: platform configs (6), palette/typography/elevation presets (5), color guidance (7), and layout/spacing docs (8).|
250
250
251
251
> [!NOTE]
252
252
> For compound components (e.g., `combo`, `select`, `grid`), `get_component_design_tokens` returns a list of related child themes instead of a flat token list. For example, querying `grid` may return child themes such as `grid`, `grid-toolbar`, `grid-filtering`, and `paginator`. The AI will generate a separate `create_component_theme` call for each child theme using the appropriate scoped selector.
![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4&size=40){kind=avatar}
0 commit comments