diff --git a/skills/igniteui-angular-components/SKILL.md b/skills/igniteui-angular-components/SKILL.md index 7551cdffc88..5a31993caed 100644 --- a/skills/igniteui-angular-components/SKILL.md +++ b/skills/igniteui-angular-components/SKILL.md @@ -15,7 +15,7 @@ user-invocable: true ## Ignite UI CLI MCP Server (recommended, not required) -The `igniteui-cli` MCP server provides `list_components`, `get_doc`, `search_docs`, `search_api`, and `get_api_reference`. Its **full component docs cover a subset of components** (the catalog grows over releases — call `list_components` once to see what exists; e.g. Combo, Simple Combo, Chat, Tooltip, and grid toolbar/export docs). Where a `get_doc` doc exists, prefer it over the reference files below. `search_api`/`get_api_reference` cover API members (inputs, outputs, methods) for all components — use them for member-level lookups. For everything else, the reference files below are the primary guidance. +The `igniteui-cli` MCP server provides `list_components`, `get_doc`, `get_example`, `search_docs`, `search_api`, and `get_api_reference`. Its **full component docs cover a subset of components** (the catalog grows over releases — call `list_components` once to see what exists; e.g. Combo, Simple Combo, Chat, Tooltip, and grid toolbar/export docs). Where a doc exists, prefer `get_example` for working code (props, event handlers, structure) — pass `language` to cut response size further. Fall back to `get_doc` when explanation context matters (event lifecycle, option tradeoffs, feature interactions). `search_api`/`get_api_reference` cover API members (inputs, outputs, methods) for all components — use them for member-level lookups. For everything else, the reference files below are the primary guidance. If the tools are not available, do not block the task — use the reference files. Suggest that the user run `npx -y igniteui-cli ai-config` from the project root (it configures both the `igniteui-cli` and `igniteui-theming` MCP servers and copies the agent skill files) and reload the editor. MCP servers cannot be started mid-session; the configuration takes effect on the next session. Editor-specific details are in [`references/mcp-setup.md`](./references/mcp-setup.md). @@ -25,7 +25,7 @@ If the tools are not available, do not block the task — use the reference file 1. **Identify every component or feature involved.** Map the user's request to one or more rows in the Task → Reference File table below. A single request often spans multiple categories (e.g., a form inside a Dialog requires both `form-controls.md` and `feedback.md`). 2. **Read every identified reference file in full**, in a single parallel batch of file reads — even if you believe you already know the answer. -3. **Then produce output**, based only on what you read. If something is not covered by the reference files, look it up with `get_doc`/`search_docs` when the MCP tools are available; otherwise state explicitly that the detail is unverified instead of guessing. +3. **Then produce output**, based only on what you read. If something is not covered by the reference files, look it up with `get_example`/`search_docs` when the MCP tools are available — or `get_doc` when explanation context matters — otherwise state explicitly that the detail is unverified instead of guessing. ### Task → Reference File diff --git a/skills/igniteui-angular-figma-to-app/SKILL.md b/skills/igniteui-angular-figma-to-app/SKILL.md index e7c07e8b35a..8ec126c67af 100644 --- a/skills/igniteui-angular-figma-to-app/SKILL.md +++ b/skills/igniteui-angular-figma-to-app/SKILL.md @@ -35,9 +35,7 @@ This skill orchestrates four MCP servers: **Figma** (design data), **Ignite UI C Complete all phases in order — do not skip phases or generate component code from memory. Every component selector, input name, and import path must come from -`get_doc` results or, where no doc exists in the catalog, from the -`igniteui-angular-components` / `igniteui-angular-grids` skill reference files — -never guessed. +`get_example` (or `get_doc` when explanation context matters) results or, where no doc exists in the catalog, from the `igniteui-angular-components` / `igniteui-angular-grids` skill reference files — never guessed. Read [references/figma-component-map.md](references/figma-component-map.md) before Phase 2. Read [references/design-token-bridge.md](references/design-token-bridge.md) before Phase 3. @@ -376,7 +374,7 @@ Find the row for each Figma layer name from your Phase 1 decomposition table. Each row gives you: - The Ignite UI Angular selector -- The `get_doc` key to call +- The `get_example` (and optionally `get_doc`) key to call - Key inputs and variants to configure ### 2b: Fetch Component Docs @@ -384,8 +382,7 @@ Each row gives you: Call `list_components({ framework: "angular" })` **once** to discover which component families have full docs — **the catalog covers only a subset of components**. Then: -- For families **with** a doc: call `get_doc({ framework: "angular", name: "" })`, - all in a single parallel batch — never sequentially. +- For families **with** a doc: call `get_example({ framework: "angular", name: "" })` (or `get_doc` when explanation context matters), all in a single parallel batch — never sequentially. - For families **without** a doc: read the matching reference files from the [`igniteui-angular-components`](../igniteui-angular-components/SKILL.md) and [`igniteui-angular-grids`](../igniteui-angular-grids/SKILL.md) skills, and use @@ -561,7 +558,7 @@ See `references/design-token-bridge.md § Spacing, Sizing, and Roundness`. ### Implementation Rules -1. **Never generate component code without reading its `get_doc` result first** (Phase 2b) +1. **Never generate component code without calling `get_example` first** (or `get_doc` when explanation context matters) (Phase 2b) 2. **Section by section** — layout → navigation → primary content → secondary → data 3. Follow Angular standalone component conventions and AGENTS.md coding standards 4. Import components from their specific entry points, never from the root barrel diff --git a/skills/igniteui-angular-generate-from-image-design/SKILL.md b/skills/igniteui-angular-generate-from-image-design/SKILL.md index a10ad973855..3cfb47aad63 100644 --- a/skills/igniteui-angular-generate-from-image-design/SKILL.md +++ b/skills/igniteui-angular-generate-from-image-design/SKILL.md @@ -14,7 +14,7 @@ Complete these steps in order before writing any implementation code: 2. Read [references/component-mapping.md](references/component-mapping.md) and [references/gotchas.md](references/gotchas.md). 3. This skill is Angular-only. Check package layout or licensing only when imports, packages, or theming depend on it. 4. To apply a theme, use the theming workflow from this skill and the dedicated `igniteui-angular-theming` skill; use the `igniteui-theming` MCP tools instead of styling from memory. -5. Call `get_doc` for every chosen component family before using it. +5. Call `get_example` for every chosen component family before using it — pass `language` to cut response size further. Fall back to `get_doc` when explanation context matters, not just code. 6. Only then start coding. > **If the MCP tools are unavailable**, do not block the task: fall back to the reference @@ -29,7 +29,7 @@ Complete these steps in order before writing any implementation code: 1. **Analyze the design image** - Read the image, identify every UI section, component, layout structure. 2. **Confirm package layout if needed** - this skill is Angular-only; check package layout or licensing only when imports, packages, or theming depend on it 3. **Discover components** - Call `list_components` with targeted filters to find matching components for each UI pattern -4. **Look up component docs** - Call `get_doc` for every chosen component family before coding +4. **Look up component docs** - Call `get_example` for every chosen component family before coding (fall back to `get_doc` when explanation context matters) 5. **Generate theme** - (a) To generate a theme, first extract colors and create a color palette using `create_palette` or `create_custom_palette` depending on the scenario. Then extract elevations and call `create_elevations`. Then extract typography and call `create_typography`. Then call `create_theme` with the palette, elevations, and typography. (b) After a theme exists, prefer using design tokens or scoped semantic CSS variables over raw literals. (c) For every Ignite UI component, call `get_component_design_tokens`, map extracted image tokens to token roles, then call `create_component_theme` with the tokens differing from the global theme for the specific component. 6. **Install DV packages** - if the design uses charts, maps, gauges, or sparklines, resolve and install the compatible DV packages (with approval) 7. **Implement** - Build the screenshot-first layout, data, and view components @@ -94,7 +94,7 @@ For component-to-Ignite-UI mapping, see [references/component-mapping.md](refere ## Step 4: Look Up Component API -For every chosen component category that appears in the `list_components` results, call `get_doc` with its doc `name` field (not the result title). **The doc catalog covers only a subset of components** — for categories without a doc, read the matching reference files from the [`igniteui-angular-components`](../igniteui-angular-components/SKILL.md) / [`igniteui-angular-grids`](../igniteui-angular-grids/SKILL.md) skills and use `search_api` for member-level API lookups. Read one or the other before coding — it gives exact usage patterns, inputs, and template structure. +For every chosen component category that appears in the `list_components` results, call `get_example` with its doc `name` field (not the result title) — or `get_doc` when explanation context matters. **The doc catalog covers only a subset of components** — for categories without a doc, read the matching reference files from the [`igniteui-angular-components`](../igniteui-angular-components/SKILL.md) / [`igniteui-angular-grids`](../igniteui-angular-grids/SKILL.md) skills and use `search_api` for member-level API lookups. Read one or the other before coding — it gives exact usage patterns, inputs, and template structure. Call `search_docs` for feature-based questions (e.g., "how to configure [component] for [specific behavior or styling need]") — it searches only the docs in the catalog. diff --git a/skills/igniteui-angular-grids/SKILL.md b/skills/igniteui-angular-grids/SKILL.md index 0734aaf1805..465a833ccfa 100644 --- a/skills/igniteui-angular-grids/SKILL.md +++ b/skills/igniteui-angular-grids/SKILL.md @@ -13,7 +13,7 @@ user-invocable: true 1. **Identify the grid type.** Use the Grid Selection Decision Guide below. If the grid type is not explicitly stated, infer it from context or ask. 2. **Identify every task category involved.** Map the user's request to one or more rows in the Task → Reference File table below. A single request often spans multiple categories (e.g., remote paging plus editing requires both `paging-remote.md` and `editing.md`). 3. **Read every identified reference file in full**, in a single parallel batch of file reads — even if you believe you already know the answer. -4. **Then produce output**, based only on what you read. If something is not covered by the reference files, look it up with `get_doc`/`search_docs`/`search_api` from the `igniteui-cli` MCP server when available; otherwise state explicitly that the detail is unverified instead of guessing. +4. **Then produce output**, based only on what you read. If something is not covered by the reference files, look it up with `get_example`/`search_docs`/`search_api` from the `igniteui-cli` MCP server when available — or `get_doc` when explanation context matters — otherwise state explicitly that the detail is unverified instead of guessing. ### Task → Reference File @@ -34,7 +34,7 @@ user-invocable: true --- ## Overview -This skill gives high-level guidance on grids and their features. The `igniteui-cli` MCP server (when available) has **full docs for grid toolbars and export** (`grid-toolbar`, `grid-export-excel`, `exporter-pdf`, and the tree/hierarchical/pivot variants — call `list_components` to see the current catalog) and an API-member index via `search_api`/`get_api_reference` for member-level lookups. For everything else, the reference files below are the primary guidance. +This skill gives high-level guidance on grids and their features. The `igniteui-cli` MCP server (when available) has **full docs for grid toolbars and export** (`grid-toolbar`, `grid-export-excel`, `exporter-pdf`, and the tree/hierarchical/pivot variants — call `list_components` to see the current catalog) and an API-member index via `search_api`/`get_api_reference` for member-level lookups. Prefer `get_example` for working code (props, event handlers, structure) and pass `language` to cut response size further; use `get_doc` only when explanation context matters (event lifecycle, option tradeoffs). For everything else, the reference files below are the primary guidance. ---