Skip to content

Merge pull request #6440 from IgniteUI/dependabot/npm_and_yarn/npm_an… #6447

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
ChronosSF wants to merge 1 commit into from
Closed

Merge pull request #6440 from IgniteUI/dependabot/npm_and_yarn/npm_an… #6447

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .markdownlint.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,5 +43,6 @@
"MD051": false,
"MD055": false,
"MD058": true,
"MD059": false
"MD059": false,
"MD060": { "style": "aligned" }
}
26 changes: 13 additions & 13 deletions en/components/ai/skills.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,11 @@ Ignite UI for Angular ships with **Agent Skills** — structured knowledge files

The skill files live in the [`skills/`](https://github.com/IgniteUI/igniteui-angular/tree/master/skills) directory of the Ignite UI for Angular repository:

| Skill | Path | Description |
|:------|:-----|:------------|
| Components & Layout | [`skills/igniteui-angular-components/SKILL.md`](https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-components/SKILL.md) | Standalone components, form controls, overlays, layout |
| Data Grids | [`skills/igniteui-angular-grids/SKILL.md`](https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-grids/SKILL.md) | Grid, Tree Grid, Hierarchical Grid, Pivot Grid, sorting, filtering, grouping, paging, remote data |
| Theming & Styling | [`skills/igniteui-angular-theming/SKILL.md`](https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-theming/SKILL.md) | Palettes, typography, elevations, component themes, MCP server |
| Skill | Path | Description |
| :------------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------ |
| Components & Layout | [`skills/igniteui-angular-components/SKILL.md`](https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-components/SKILL.md) | Standalone components, form controls, overlays, layout |
| Data Grids | [`skills/igniteui-angular-grids/SKILL.md`](https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-grids/SKILL.md) | Grid, Tree Grid, Hierarchical Grid, Pivot Grid, sorting, filtering, grouping, paging, remote data |
| Theming & Styling | [`skills/igniteui-angular-theming/SKILL.md`](https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-theming/SKILL.md) | Palettes, typography, elevations, component themes, MCP server |

> **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 migration to add these skills to your project automatically.

Expand Down Expand Up @@ -240,14 +240,14 @@ Once complete, the skills are ready to use — no manual file copying required.

Once you have the files, open them and load them into your AI assistant:

| IDE / Tool | How to load |
|:-----------|:------------|
| **VS Code + GitHub Copilot** | Use `#file:path/to/SKILL.md` in the Copilot Chat input to attach it as context for that session. |
| **Cursor** | Drag the `SKILL.md` file into the chat window, or type `@file` and select it. |
| **Windsurf** | Attach the file using the **+** button in the Cascade chat panel. |
| **JetBrains AI Assistant** | Click the paperclip icon in the AI chat to attach the file as context. |
| **Claude Desktop** | Drag the file into the chat or add it to the project knowledge base via **Project → Add Content**. |
| **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. |
| IDE / Tool | How to load |
| :--------------------------- | :--------------------------------------------------------------------------------------------------------------------------- |
| **VS Code + GitHub Copilot** | Use `#file:path/to/SKILL.md` in the Copilot Chat input to attach it as context for that session. |
| **Cursor** | Drag the `SKILL.md` file into the chat window, or type `@file` and select it. |
| **Windsurf** | Attach the file using the **+** button in the Cascade chat panel. |
| **JetBrains AI Assistant** | Click the paperclip icon in the AI chat to attach the file as context. |
| **Claude Desktop** | Drag the file into the chat or add it to the project knowledge base via **Project → Add Content**. |
| **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. |

---

Expand Down
30 changes: 15 additions & 15 deletions en/components/ai/theming-mcp.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -232,21 +232,21 @@ To see the current full list of tools and their parameters at any time, ask your

Here is a brief overview of each tool:

| Tool | Description |
|------|-------------|
| `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. |
| `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. |
| `create_custom_palette` | Fine-grained palette creation — specify exact hex values for every shade when automatic generation is not suitable. |
| `create_typography` | Sets up a font family and type scale for a given design system. |
| `create_elevations` | Configures box-shadow elevation levels (0–24) for Material or Indigo design systems. |
| `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`). |
| `set_size` | Sets `--ig-size` globally or for a specific component (`small`, `medium`, or `large`). |
| `set_spacing` | Sets `--ig-spacing` (and optionally inline/block overrides) globally or per component. |
| `set_roundness` | Sets `--ig-radius-factor` (0 = square, 1 = fully round) globally or per component. |
| `get_component_design_tokens` | Returns all available design tokens for a component — always call this before `create_component_theme`. |
| `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. |
| `get_color` | Returns a CSS variable reference for a palette color, e.g. `var(--ig-primary-500)`. Supports optional contrast and opacity parameters. |
| `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). |
| Tool | Description |
| :---------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `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. |
| `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. |
| `create_custom_palette` | Fine-grained palette creation — specify exact hex values for every shade when automatic generation is not suitable. |
| `create_typography` | Sets up a font family and type scale for a given design system. |
| `create_elevations` | Configures box-shadow elevation levels (0–24) for Material or Indigo design systems. |
| `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`). |
| `set_size` | Sets `--ig-size` globally or for a specific component (`small`, `medium`, or `large`). |
| `set_spacing` | Sets `--ig-spacing` (and optionally inline/block overrides) globally or per component. |
| `set_roundness` | Sets `--ig-radius-factor` (0 = square, 1 = fully round) globally or per component. |
| `get_component_design_tokens` | Returns all available design tokens for a component — always call this before `create_component_theme`. |
| `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. |
| `get_color` | Returns a CSS variable reference for a palette color, e.g. `var(--ig-primary-500)`. Supports optional contrast and opacity parameters. |
| `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). |

> [!NOTE]
> 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.
Expand Down
Loading
Loading