igniteui-angular 22.2.0-rc.0 → 22.2.0-rc.2

package/skills/igniteui-angular-figma-to-app/references/theme-generation.md

@@ -0,0 +1,120 @@
+# Theme Generation
+
+> **Part of the [`igniteui-angular-figma-to-app`](../SKILL.md) skill.**
+>
+> Use this file in Phase 3 to generate the global theme and per-component tokens. Read in full, together with [`design-token-bridge.md`](design-token-bridge.md), before calling any theming tool.
+
+**Goal:** produce Sass theming code that matches the Figma design's visual language using the design tokens extracted in Phase 1e (Path A) or the color census and measurements from Phase 1d (Path B).
+
+## 3a: Inspect Existing Theme (Guard)
+
+Check **both** places a theme can come from:
+
+- `src/styles.scss` (or the project's global stylesheet): `@include theme(...)`, `@include palette(...)`, or a named theme mixin such as `light-theme`, `dark-theme`, `fluent-light-theme`, `bootstrap-dark-theme`, `indigo-light-theme`.
+- The `styles` array in `angular.json`: a prebuilt theme CSS such as `node_modules/igniteui-angular/styles/igniteui-angular.css` or `…/igniteui-fluent-light.css`.
+
+Then classify what you found:
+
+| Found | Meaning | Action |
+| --- | --- | --- |
+| Nothing | No theme | Continue with 3b–3c |
+| A prebuilt theme CSS in `angular.json` and no Sass theme | The CLI's **Default** scaffold theme | Treat it as no theme. Continue with 3b–3c, and **remove the prebuilt CSS entry** from `angular.json` when you add the generated Sass theme. Otherwise both themes load and override each other |
+| The CLI's **Custom** scaffold block: `$primary: #09f`, `$secondary: #4db8ff`, `$surface: #fff` passed to `palette(...)` and `@include theme($app-palette)` | The CLI's placeholder theme, not a choice made for this app | Treat it as no theme. Replace the block with the generated theme in 3c |
+| Any other theme | A theme the app's authors chose | Keep it for now. Finish the comparison below after 3b |
+
+**Existing app theme — compare after 3b.** Reuse it, and skip to 3d, only when **all three** match the design:
+
+1. the light/dark **variant**;
+2. the **design system**: the `$schema` argument, or the named mixin (`theme(...)` without `$schema` is `material`);
+3. the **primary color**: the seed color on the high-emphasis controls, as seen in the design (Path A: the kit variables; Path B: the color census).
+
+If any of them differs, **ask the user** before changing the global theme. It affects every existing view in the app. If the user declines, generate the design's theme scoped to the new view's host selector instead of `:root`.
+
+Detect the Figma design's variant from Phase 1e: if a `color/mode` variable exists, use its value. Otherwise, use the artboard background color: near-black (`#121212`, `#1a1a1a`, `#000`) → `"dark"`; near-white (`#fff`, `#f5f5f5`) → `"light"`.
+
+## 3b: Resolve Design System
+
+You don't need to call `theming_detect_platform` to confirm the Angular package layout. We already did that in Phase 0.
+
+**Choose the path from the dominant Phase 1f tier** (see `design-token-bridge.md § Two Paths`):
+
+- **Path B (mostly Tier B/C):** the design system is the **closest baseline**, not a match. Choose it with `design-token-bridge.md § B1`, in this order: the user's request, then the kit's direct counterpart (Material 3 → `material`, Fluent 2 → `fluent`, Bootstrap → `bootstrap`), then text-field label placement, then control heights. A design whose fields have labels *above* them should not get `material`. Then continue: apply B2–B4 in 3c and B5–B8 in 3d.
+- **Path A (mostly Tier A):** use this **strict precedence order**. Stop at the first signal that gives a clear answer:
+
+1. **Explicit user request** — "make it Material", "use Fluent", etc.
+2. **Library source name in design context** — the `figma_get_design_context` or `figma_get_metadata` response may reference the Figma source library file name (e.g. `"Indigo.Design UI Kit for Material"` → `material`).
+3. **Variable collection names from Phase 1e** — collection names like `Material/color/primary` identify the kit variant directly.
+4. **Elevation variable structure** — inspect the `Elevations/*` variables in `figma_get_variable_defs` output:
+   - **Three-layer DROP_SHADOW** (umbra + penumbra + ambient) → **Material Design**
+   - **Single-layer DROP_SHADOW** → Indigo, Fluent, or Bootstrap
+5. **Palette shade naming** — variables named `primary/500`, `primary/100`–`primary/900` follow the Material 100–900 palette convention → likely **Material**.
+6. **Visual heuristics** (use only when all above are inconclusive): prominent shadows + ripple effects → `"material"`; flat surfaces + sharp corners + Segoe/Inter font → `"fluent"`; component borders + Bootstrap grid → `"bootstrap"`; rounded purple/indigo accents without Material shadows → `"indigo"`.
+
+> **Never use font name as a primary signal.** "Titillium Web" is the default body font in the Indigo.Design UI Kit for Material — it is not exclusive to any single kit variant.
+
+Supported values: `material` (default), `bootstrap`, `fluent`, `indigo`.
+
+## 3c: Generate Global Theme
+
+Extract the following using [references/design-token-bridge.md](design-token-bridge.md):
+
+```
+Path A (Indigo.Design kits) — from Phase 1e variables:
+primaryColor    ← from "color/primary/500" or "primary/500"
+secondaryColor  ← from "color/secondary/500" or "secondary/500"
+surfaceColor    ← from "color/surface" or "surface/default"
+fontFamily      ← from "typography/font-family" or "typography/body/font-family"
+
+Path B (any other kit, or none) — from the Phase 1d color census (`design-token-bridge.md § B2`):
+primaryColor    ← color painted on high-emphasis buttons / active indicators
+secondaryColor  ← a second accent actually used, else = primary
+                  (material baseline: controls use secondary — seed it with the button color)
+surfaceColor    ← page background
+fontFamily      ← family of the text styles in use
+type overrides  ← kit type ramp by role (`design-token-bridge.md § B3`), incl. button text transform (§ B4)
+```
+
+> **Parameter names differ between tools** — `theming_create_palette` uses `primary`, `secondary`, `surface`, `gray`, `success`, `warn`, `error`, `info`, and `variant`. `theming_create_theme` uses `primaryColor`, `secondaryColor`, `surfaceColor`, and has no `gray`. Do not mix them up.
+
+> **fontFamily double-quote bug** — `theming_create_theme` may double-wrap the fontFamily string (e.g. `""'Titillium Web', sans-serif""`) in its Sass output, producing invalid Sass. If you see double-quoted strings in the generated output, strip the outer quotes before applying to `styles.scss`.
+
+Generate the global theme in **one** call. `theming_create_theme` takes seed colors and emits the palette, typography, elevations, and spacing together:
+
+```
+theming_create_theme({
+  platform: "angular",
+  designSystem: "<resolved design system>",
+  primaryColor, secondaryColor, surfaceColor,
+  variant: "<light|dark>",
+  fontFamily,
+  includeTypography: true,
+  includeElevations: true,
+  includeSpacing: true,
+  licensed: <true if @infragistics package>
+})
+```
+
+Call the individual generators only when you need one piece on its own:
+
+- `theming_create_palette({ primary, secondary, surface, gray?, success?, warn?, error?, info?, variant, platform: "angular" })`, or `theming_create_custom_palette` for explicit shades (Path B full ramps). `create_custom_palette` emits its own `@include palette(...)`. Place it **after** the `create_theme` output, so its `:root` palette variables override the ones generated from the seed colors, and keep only one `@use "igniteui-angular/theming"` line. Check `--ig-primary-500` in Phase 5.
+- `theming_create_typography({ fontFamily, designSystem, platform: "angular" })`. Do not pass `customScale`: the tool accepts it but its generators ignore it.
+- `theming_create_elevations({ designSystem: "material" | "indigo" })`. The parameter is `designSystem`; there is no `preset` parameter.
+
+**Path B type overrides.** After the theme output in `styles.scss`, add a `:root` block that sets the `--ig-<style>-<property>` variables for the type styles that differ from the baseline, including the button's text transform. See `design-token-bridge.md § B4`.
+
+Apply the generated output to `src/styles.scss` as instructed in the tool's response.
+
+## 3d: Per-Component Token Mapping
+
+> **Scope:** applies only to core Ignite UI Angular components (grid, navbar, card, inputs, chips, list, etc.). Charts, maps, and gauges have no Sass tokens — configure those via component inputs only.
+
+For **every** Ignite UI core component in your plan, run this loop:
+
+1. `theming_get_component_design_tokens({ component: "<theme name>" })` — review all token names, types, and descriptions. Use the tool's component names (`input-group`, `navbar`, `grid`), and the variant name for buttons (`contained-button`, `flat-icon-button`, …). See `design-token-bridge.md § Per-Component Token Resolution`.
+2. Find the values for this component's surfaces (background, text, border, hover state). **Path A:** from the Phase 1e kit variables. **Path B:** from the Phase 1d color census and measurements. Variables, when they exist, only confirm them.
+3. `theming_create_component_theme({ component: "<theme name>", platform: "angular", designSystem: "<3b result>", variant: "<light|dark>", licensed: <true if @infragistics>, tokens: { <only differing tokens> } })`. Always pass `designSystem` and `variant`: the tool defaults to Material light and would compute the theme against the wrong schema.
+4. Apply the generated `@include tokens(<theme>)` block to the component's SCSS or to a scoped block in `styles.scss`
+
+**Path B additions to this loop** (see `design-token-bridge.md § B5–B8`): include the component's **radius** tokens at the measured px value, its **border** and **shadow/elevation** tokens as the design shows them, and its hover/focus/disabled **state** tokens from the kit's state variants, in the same `theming_create_component_theme` call. Choose `--ig-size` from the measured control heights (`design-token-bridge.md § B7`) before tuning individual components.
+
+When a specific component needs a different density or spacing from the global default, use `theming_set_size` or `theming_set_spacing` with the `component` parameter — this scopes `--ig-size` or `--ig-spacing` to that component’s selector rather than applying globally. For compound components, use `scope` with a sub-component selector. Only apply these globally (`:root`) when the entire app has a clearly distinct density (Path B: when every component family moves the same way, see `design-token-bridge.md § B7`). Leave `theming_set_roundness` at its default unless the user explicitly requests a change. For Path B, express radius through per-component tokens instead, because one global factor cannot reproduce a kit's radii. Never derive multiplier values from Figma pixel values. See `references/design-token-bridge.md § Spacing, Sizing, and Roundness`.

package/skills/igniteui-angular-figma-to-app/references/validation-patterns.md

@@ -2,15 +2,13 @@
 
 > **Part of the [`igniteui-angular-figma-to-app`](../SKILL.md) skill.**
 >
-> Use this file in Phase 5 for the measurement-driven validation loop. Read in full
-> before calling any Playwright MCP tool.
+> Use this file in Phase 5 for the measurement-driven validation loop. Read in full before calling any Playwright MCP tool.
 
 ---
 
 ## Core Philosophy
 
-**Measure, don't eyeball.** The goal is not visual regression (did this change from last week?) but design fidelity (does this match the Figma spec?).
-Screenshots give you the gestalt. `playwright_browser_evaluate` gives you the numbers. Numbers drive corrections.
+**Measure, don't eyeball.** The goal is not visual regression (did this change from last week?) but design fidelity (does this match the Figma spec?). Screenshots give you the gestalt. `playwright_browser_evaluate` gives you the numbers. Numbers drive corrections.
 
 ---
 
@@ -23,7 +21,7 @@ Screenshots give you the gestalt. `playwright_browser_evaluate` gives you the nu
 4. playwright_browser_take_screenshot → capture the full viewport
 5. [Visual comparison] → compare against Phase 1c Figma screenshot section by section
 6. playwright_browser_evaluate → measure exact CSS values for EVERY section in the
-   Phase 1g Surfaces table (mandatory, not just differing regions)
+   Phase 1g Table B (Layout Surfaces) (mandatory, not just differing regions)
 7. [Surfaces audit] → assert each section's backgroundColor, border, padding against spec
 8. [Action controls audit] → count and name all action buttons; compare against Phase 1d inventory
 9. [Input type audit] → check igx-input-group class modifier on all form controls
@@ -31,9 +29,9 @@ Screenshots give you the gestalt. `playwright_browser_evaluate` gives you the nu
 11. [Apply fixes] → edit source files
 12. playwright_browser_navigate → reload after fixes
 13. playwright_browser_take_screenshot → re-verify
-14. Repeat steps 5-13 until no Critical/Major issues remain
-15. Do NOT advance to the next artboard until all checks pass on the current page
-16. playwright_browser_snapshot → final accessibility check (once per session)
+14. Repeat steps 5-13 until the exit condition below is met (only Cosmetic and Accepted items left)
+15. Do NOT advance to the next artboard until then
+16. playwright_browser_snapshot → accessibility check for this view (once per artboard)
 ```
 
 ---
@@ -55,9 +53,7 @@ playwright_browser_take_screenshot({ type: "png" })
 
 ### 2. `playwright_browser_evaluate` Uses `function`, Not `script`
 
-**Problem:** The `playwright_browser_evaluate` tool requires a `function` parameter
-(a JavaScript function string), **not** `script`. Passing `script` causes a validation
-error: _"Invalid input: expected string, received undefined"_.
+**Problem:** The `playwright_browser_evaluate` tool requires a `function` parameter (a JavaScript function string), **not** `script`. Passing `script` causes a validation error: _"Invalid input: expected string, received undefined"_.
 
 **Fix:** Always use the `function` parameter with a self-contained arrow function string.
 
@@ -135,13 +131,13 @@ playwright_browser_evaluate({
 });
 ```
 
-### Surfaces Audit (run for EVERY page, EVERY section in Phase 1g Surfaces table)
+### Surfaces Audit (run for EVERY page, EVERY section in Phase 1g Table B (Layout Surfaces))
 
 For each surface entry, run:
 
 ```javascript
 playwright_browser_evaluate({
-  function: "() => { var sections = { /* fill from Phase 1g Surfaces table */ sectionA: '.section-a-selector', sectionB: '.section-b-selector' }; var result = {}; Object.keys(sections).forEach(function(key) { var el = document.querySelector(sections[key]); if (el) { var s = getComputedStyle(el); var r = el.getBoundingClientRect(); result[key] = { bg: s.backgroundColor, br: s.borderRadius, padding: s.padding, border: s.border, h: Math.round(r.height) }; } else { result[key] = 'NOT FOUND'; } }); return result; }",
+  function: "() => { var sections = { /* fill from Phase 1g Table B (Layout Surfaces) */ sectionA: '.section-a-selector', sectionB: '.section-b-selector' }; var result = {}; Object.keys(sections).forEach(function(key) { var el = document.querySelector(sections[key]); if (el) { var s = getComputedStyle(el); var r = el.getBoundingClientRect(); result[key] = { bg: s.backgroundColor, br: s.borderRadius, padding: s.padding, border: s.border, h: Math.round(r.height) }; } else { result[key] = 'NOT FOUND'; } }); return result; }",
 });
 ```
 
@@ -149,7 +145,7 @@ playwright_browser_evaluate({
 
 - If Figma surface has a background: `bg !== 'rgba(0, 0, 0, 0)'`
 - If Figma section floats on page background: `bg === 'rgba(0, 0, 0, 0)'` (do not over-surface)
-- `borderRadius`, `padding`, `border` match Phase 1g Surfaces table values
+- `borderRadius`, `padding`, `border` match Phase 1g Table B (Layout Surfaces) values
 
 ### Input Type Audit (run for every page with form controls)
 
@@ -159,8 +155,7 @@ playwright_browser_evaluate({
 });
 ```
 
-Compare each result against the variant detected in Phase 1d. If all controls should be
-`border`, add `{ provide: IGX_INPUT_GROUP_TYPE, useValue: 'border' }` to `app.config.ts`.
+Compare each result against the variant detected in Phase 1d. If all controls should be `border`, add `{ provide: IGX_INPUT_GROUP_TYPE, useValue: 'border' }` to `app.config.ts`.
 
 ### Action Controls Audit (run for every page)
 
@@ -170,23 +165,31 @@ playwright_browser_evaluate({
 });
 ```
 
-Compare the returned list against Phase 1d's action controls inventory. Any button in
-this list that is **not** in the Phase 1d inventory is fabricated and must be removed.
+Compare the returned list against Phase 1d's action controls inventory. Any button in this list that is **not** in the Phase 1d inventory is fabricated and must be removed.
 
 ---
 
 ## Mismatch Severity Classification
 
-| Severity     | Category                 | Decision rule                                           | Action                      |
-| ------------ | ------------------------ | ------------------------------------------------------- | --------------------------- |
-| **Critical** | Missing element          | Present in Figma, absent from DOM                       | Auto-fix                    |
-| **Critical** | Broken layout            | Overlapping elements, content outside bounds            | Auto-fix                    |
-| **Major**    | Wrong component          | Figma shows `igx-combo`, code has `igx-select`          | Auto-fix                    |
-| **Major**    | Wrong variant            | `igxButton="flat"` when design shows `contained`        | Auto-fix                    |
-| **Minor**    | Spacing off by > 4px     | `gap: 24px` measured, Figma shows `16px`                | Auto-fix if single property |
-| **Minor**    | Font size wrong by > 2px | `16px` measured, Figma shows `14px`                     | Auto-fix                    |
-| **Cosmetic** | Color shade              | `rgb(50, 50, 50)` vs `#333333` (identical perceptually) | Report only                 |
-| **Cosmetic** | Spacing off by ≤ 4px     | Minor rounding or sub-pixel difference                  | Report only                 |
+| Severity     | Category | Decision rule | Action |
+| ------------ | -------- | ------------- | ------ |
+| **Critical** | Missing element | Present in Figma, absent from DOM | Fix |
+| **Critical** | Broken layout | Overlapping elements, content outside bounds | Fix |
+| **Major**    | Wrong component | Figma shows `igx-combo`, code has `igx-select` | Fix |
+| **Major**    | Wrong variant | `igxButton="flat"` when the design shows `contained` | Fix |
+| **Major**    | Token-fixable mismatch | Color, radius, border, shadow, or text casing differs, or a control height differs by more than 4px, and a component token, palette seed, `--ig-size` step, or `--ig-<style>-<property>` override can close it | Fix |
+| **Minor**    | Spacing off by > 4px | `gap: 24px` measured, Figma shows `16px` | Fix |
+| **Minor**    | Font size wrong by > 2px | `16px` measured, Figma shows `14px` | Fix |
+| **Cosmetic** | Color rounding | The same color after conversion: `rgb(51, 51, 51)` vs `#333333`. Any visibly different shade (`#333` vs `#2d2d2d`, a 500-vs-600 seed) is **Major** | Report only |
+| **Cosmetic** | Size off by ≤ 4px | Spacing or control height within 4px, or font size within 2px, from rounding or sub-pixel layout | Report only |
+| **Accepted** | Approved anatomy delta | Matches a delta-ledger entry the user approved (e.g. an M3 segmented button's check icon, a breadcrumb rendered as semantic markup) | Report only. Do not "fix" it; it does not count toward the 3-retry rule |
+
+**Exit condition for an artboard:** no Critical, Major, or Minor issues remain. Only Cosmetic and Accepted items may be left, and both go into the final report.
+
+> **Accepted needs the user's approval.** A delta is Accepted only after the user approves its ledger entry. Most entries come from Phase 2d. When Phase 5 finds a difference that tokens, documented parts, or projected content cannot close, add it to the ledger and ask the user. Once they approve it, it is Accepted from then on. Until then, classify it normally, and never downgrade it silently.
+>
+> **Third-party kits (Path B):** color, radius, border, casing, and height mismatches are almost always fixable with component tokens or the `--ig-<style>-<property>` typography overrides. They are Major, never Accepted. Only *structural* differences (a label position the baseline cannot move, an adornment the component does not render, a behavior pattern with no equivalent) qualify for the ledger.
+
 
 ### Mismatch Report Format
 
@@ -197,7 +200,7 @@ ISSUE:    <concise description of the mismatch>
 LOCATION: <component/section in the view>
 FIGMA:    <value or description from the Figma design context>
 RENDERED: <value measured by Playwright>
-SEVERITY: <Critical | Major | Minor | Cosmetic>
+SEVERITY: <Critical | Major | Minor | Cosmetic | Accepted>
 FIX:      <specific, one-line code change — no vague instructions>
 ```
 
@@ -215,10 +218,8 @@ ISSUE:    Grid header row height too large
 LOCATION: igx-grid header
 FIGMA:    header height = 40px
 RENDERED: height = 56px
-SEVERITY: Minor
-FIX:      Call theming_get_component_design_tokens("grid"), find "header-background" or size
-          token, then call theming_set_size({ component: "grid", size: "small" }) or
-          theming_create_component_theme with a custom header height token.
+SEVERITY: Major
+FIX:      theming_set_size({ component: "grid", size: "small", platform: "angular" })
 ```
 
 ---
@@ -234,7 +235,7 @@ Run this checklist during the first screenshot comparison after implementation:
 | Page header          | Typography size and weight, breadcrumb spacing, action button prominence                                                                     |
 | Data table / grid    | Column widths, header background, row height, cell padding, border color                                                                     |
 | Cards / panels       | **Background color** (must not be `rgba(0,0,0,0)` when surface exists in Figma), border, border radius, shadow, padding, divider             |
-| Surface containers   | Every entry in Phase 1g Surfaces table: `backgroundColor`, `borderRadius`, `padding`, `border`; child elements enclosed within bounding rect |
+| Surface containers   | Every entry in Phase 1g Table B (Layout Surfaces): `backgroundColor`, `borderRadius`, `padding`, `border`; child elements enclosed within bounding rect |
 | Form fields          | Input type variant (line/border/box) — check `igx-input-group--border` vs `--box` vs `--line` CSS class; run Input Type Audit snippet        |
 | Action controls      | Count and name all buttons/toolbar actions; compare against Phase 1d inventory; remove any not in Figma                                      |
 | Buttons              | Variant (flat/outlined/contained), color, typography, padding                                                                                |
@@ -262,12 +263,9 @@ After `playwright_browser_snapshot()`, verify:
 
 ### Spacing, Size, and Roundness Correction
 
-Do **not** patch internal component classes with `::ng-deep`. Those are implementation
-details subject to change between versions.
+Do **not** patch internal component classes with `::ng-deep`. Those are implementation details subject to change between versions.
 
-Ignite UI components expose `--ig-size` and `--ig-spacing` CSS custom properties.
-Scope them to the component's selector — or to a sub-component selector for compound
-components — to adjust density and spacing without touching internal class names.
+Ignite UI components expose `--ig-size` and `--ig-spacing` CSS custom properties. Scope them to the component's selector — or to a sub-component selector for compound components — to adjust density and spacing without touching internal class names.
 
 **Via theming MCP** (preferred — generates correctly scoped Sass or CSS output):
 
@@ -297,28 +295,28 @@ igx-grid-toolbar {
 }
 ```
 
-> **Multiplier reasoning:** the `--ig-spacing` value is relative to the default (1.0).
-> Choose a value based on visual judgment — `0.75` for slightly tighter, `0.5` for
-> compact — never by mapping a Figma pixel value directly.
+> **Multiplier reasoning:** the `--ig-spacing` value is relative to the default (1.0). Choose a value based on visual judgment — `0.75` for slightly tighter, `0.5` for compact — never by mapping a Figma pixel value directly.
 
 ### Typography size correction
 
-```
-// Re-check the typography doc, then update the SCSS
-// Example: heading is 28px but should be 24px
-// Check theming_get_component_design_tokens to find the right token,
-// or override directly in the component's SCSS
-.igx-navbar__title {
-  font-size: 1.5rem;   // 24px
+Fix the type style, not an internal class. Every type style is a set of `--ig-<style>-<property>` variables on `:root` (see `design-token-bridge.md § B4`):
+
+```scss
+// Example: the page heading renders at 28px, the design shows 24px. Native <h1>
+// elements get the h1 type style inside an element with the `ig-typography` class:
+:root {
+  --ig-h1-font-size: 1.5rem;   // 24px
 }
 ```
 
+If the text belongs to a component, find which type style it uses in the component's doc, or use its typography-related design tokens from `theming_get_component_design_tokens`. Or style content you project into it.
+
 ### Color correction via palette token
 
 ```
 // Instead of hardcoding, use a CSS variable from the generated palette
 background-color: var(--ig-primary-500);
-color: var(--ig-primary-contrast-500);
+color: var(--ig-primary-500-contrast);
 ```
 
 ### Missing element

package/skills/igniteui-angular-generate-from-image-design/SKILL.md

@@ -1,7 +1,7 @@
 ---
 license: MIT
 name: igniteui-angular-generate-from-image-design
-description: Implement Angular application views from design images using Ignite UI Angular components. Uses MCP servers (igniteui-cli, igniteui-theming, angular-cli) to discover components, generate themes, and follow best practices. Triggers when the user provides a design image (screenshot, mockup, wireframe) and wants it built as a working Angular view with igniteui-angular components. Also triggers when the user asks to "implement this design", "build this UI", "convert this mockup", or "create a page from this image" in an Ignite UI Angular project.
+description: "Implements Angular application views from design images using Ignite UI Angular components. Uses MCP servers (igniteui-cli, igniteui-theming, angular-cli) to discover components, generate themes, and follow best practices. WHEN TO USE: the user provides a design image (screenshot, mockup, wireframe) and wants it built as a working Angular view with igniteui-angular components, or asks to \"implement this design\", \"build this UI\", \"convert this mockup\", or \"create a page from this image\" in an Ignite UI Angular project. WHEN NOT TO USE: the design is a Figma file or Figma URL, whatever UI kit it was built with (use igniteui-angular-figma-to-app; fall back to this skill only when the Figma MCP is unavailable and the user provides an exported image); questions about a single component's API (use igniteui-angular-components or igniteui-angular-grids); theme-only changes with no view to build (use igniteui-angular-theming)."
 user-invocable: true
 ---
 
@@ -18,12 +18,16 @@ Complete these steps in order before writing any implementation code:
 5. Call `get_doc` for every chosen component family before using it.
 6. Only then start coding.
 
-> **If the MCP tools are unavailable**, do not block the task: fall back to the reference
-> files of the [`igniteui-angular-components`](../igniteui-angular-components/SKILL.md) and
-> [`igniteui-angular-grids`](../igniteui-angular-grids/SKILL.md) skills for component APIs,
-> and the [`igniteui-angular-theming`](../igniteui-angular-theming/SKILL.md) skill's manual
-> Sass workflow for theming. Suggest running `npx -y igniteui-cli ai-config` (configures the
-> `igniteui-cli` and `igniteui-theming` MCP servers) and reloading the editor for future sessions.
+> **The `igniteui-cli` and `igniteui-theming` MCP servers are required.** Before step 1,
+> verify both by calling `list_components` (with `framework: "angular"`) and `detect_platform`.
+> If either tool is not available, configure the servers yourself by running
+> `npx -y igniteui-cli ai-config` (or `ig ai-config`) from the project root, ask the user to
+> reload the editor or agent session, and stop. Continue without them only if the user
+> explicitly asks to — then fall back to the reference files of the
+> [`igniteui-angular-components`](../igniteui-angular-components/SKILL.md) and
+> [`igniteui-angular-grids`](../igniteui-angular-grids/SKILL.md) skills and the
+> [`igniteui-angular-theming`](../igniteui-angular-theming/SKILL.md) skill's manual Sass
+> workflow, and mark every API detail you could not verify as unverified.
 
 ## Workflow
 

package/skills/igniteui-angular-grids/SKILL.md

@@ -1,12 +1,16 @@
 ---
 license: MIT
 name: igniteui-angular-grids
-description: "Provides guidance on all Ignite UI for Angular data grid types (Flat Grid, Tree Grid, Hierarchical Grid, Grid Lite, Pivot Grid) including setup, column configuration, sorting, filtering, selection, editing, grouping, summaries, toolbar, export, paging, remote data, and state persistence. Use when users ask about grids, tables, data grids, tabular data display, cell editing, batch editing, row selection, column pinning, column hiding, grouping rows, pivot tables, tree-structured data, hierarchical data, master-detail views, or exporting grid data. Do NOT use for non-grid UI components (forms, dialogs, navigation, charts) — use igniteui-angular-components instead. Do NOT use for theming or styling — use igniteui-angular-theming instead."
+description: "Provides guidance on all Ignite UI for Angular data grid types (Flat Grid, Tree Grid, Hierarchical Grid, Grid Lite, Pivot Grid) including setup, column configuration, sorting, filtering, selection, editing, grouping, summaries, toolbar, export, paging, remote data, and state persistence. WHEN TO USE: users ask about grids, tables, data grids, tabular data display, cell editing, batch editing, row selection, column pinning, column hiding, grouping rows, pivot tables, tree-structured data, hierarchical data, master-detail views, or exporting grid data. WHEN NOT TO USE: non-grid UI components such as forms, dialogs, navigation, or charts (use igniteui-angular-components); theming or styling (use igniteui-angular-theming)."
 user-invocable: true
 ---
 
 # Ignite UI for Angular — Data Grids
 
+## Ignite UI CLI MCP Server (required)
+
+**Verify the `igniteui-cli` MCP server before any other step** by calling `list_components` with `framework: "angular"`. If the tool is not available, follow the setup procedure in [`igniteui-angular-components`](../igniteui-angular-components/SKILL.md#ignite-ui-cli-mcp-server-required): configure it yourself with `npx -y igniteui-cli ai-config` (or `ig ai-config`), ask the user to reload the editor or agent session and stop, and continue without the server only if the user explicitly asks to.
+
 ## Required Workflow
 
 **This file is a routing hub only. It contains no code examples and no API details.** Grid APIs change between releases, so never write component selectors, import paths, method names, or property names from memory — read the relevant reference files first.
@@ -14,7 +18,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_doc`/`search_docs`/`search_api` from the `igniteui-cli` MCP server. Never guess — if the MCP server cannot answer it, state explicitly that the detail is unverified.
 
 ### Task → Reference File
 
@@ -35,7 +39,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 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.
 
 ---
 

package/skills/igniteui-angular-grids/references/editing.md

@@ -425,8 +425,7 @@ Default summaries by type:
 ### Custom Summary Operand
 
 ```typescript
-import { IgxNumberSummaryOperand } from 'igniteui-angular/grids/core';
-import { IgxSummaryResult } from 'igniteui-angular/core';
+import { IgxNumberSummaryOperand, IgxSummaryResult } from 'igniteui-angular/core';
 
 class RevenueSummary extends IgxNumberSummaryOperand {
   operate(data: number[]): IgxSummaryResult[] {

package/skills/igniteui-angular-grids/references/grid-migration.md

@@ -12,7 +12,7 @@ Grid APIs change between releases — do not write migration code from memory. B
 
 1. **Identify the current Grid Lite usage** - read the user's existing component files to understand their column configuration, templates, data binding, and any `dataPipelineConfiguration` usage.
 2. **Consult the grids skill** - read the relevant reference files from [`igniteui-angular-grids`](../SKILL.md) for the target features the user needs after migration.
-3. **Use the MCP server when in doubt** - call `get_doc` or `search_docs` from the `igniteui-cli` MCP server (if available) for Angular to verify current API details.
+3. **Verify with the MCP server** - call `get_doc`, `search_docs`, or `search_api` from the `igniteui-cli` MCP server for Angular to verify current API details.
 4. **Only then produce output** - base all code on verified references, not memory.
 
 ---

package/skills/igniteui-angular-theming/SKILL.md

@@ -1,7 +1,7 @@
 ---
 license: MIT
 name: igniteui-angular-theming
-description: "Generates and customizes Ignite UI for Angular themes including color palettes, typography, elevations, and component-level styles using the Sass theming system and the igniteui-theming MCP server. Use when users ask to theme, restyle, or style Ignite UI components, change colors or the color palette, switch between light and dark themes, create or apply a global theme, customize typography or elevation shadows, adjust spacing, sizing, or roundness, or configure per-component design tokens. Do NOT use for component behavior, APIs, or data binding — use igniteui-angular-components or igniteui-angular-grids instead."
+description: "Generates and customizes Ignite UI for Angular themes including color palettes, typography, elevations, and component-level styles using the Sass theming system and the igniteui-theming MCP server. WHEN TO USE: users ask to theme, restyle, or style Ignite UI components, change colors or the color palette, switch between light and dark themes, create or apply a global theme, customize typography or elevation shadows, adjust spacing, sizing, or roundness, or configure per-component design tokens. WHEN NOT TO USE: component behavior, APIs, or data binding (use igniteui-angular-components or igniteui-angular-grids); building whole views from a design image or Figma file (use igniteui-angular-generate-from-image-design or igniteui-angular-figma-to-app)."
 user-invocable: true
 ---
 
@@ -16,11 +16,15 @@ This skill teaches AI agents how to theme Ignite UI for Angular applications usi
 - An Angular project with `igniteui-angular` installed, **or** `@infragistics/igniteui-angular` for licensed users
 - Sass support enabled in the project (default for Angular CLI projects)
 
-## Ignite UI Theming MCP Server (recommended, not required)
+## Ignite UI Theming MCP Server (required)
 
-The `igniteui-theming` MCP server generates production-ready theme code (`create_theme`, `create_palette`, `create_component_theme`, `get_component_design_tokens`, `get_color`, and more). When its tools are available, prefer them over writing theme Sass from memory — start by calling `detect_platform`.
+The `igniteui-theming` MCP server generates production-ready theme code (`create_theme`, `create_palette`, `create_component_theme`, `get_component_design_tokens`, `get_color`, and more). Use its tools for all theme code — never write theme Sass or component token names from memory.
 
-If the tools are not available, do not block the task — use the manual Sass workflow in this file. 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 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).
+**Verify the server before any other step** by calling `detect_platform`. If the tool is not available:
+
+1. **Configure it yourself — do not just suggest it.** From the project root, run `npx -y igniteui-cli ai-config` (or `ig ai-config` when `igniteui-cli` is installed globally). It configures both the `igniteui-theming` and `igniteui-cli` MCP servers, preserves existing server entries, and copies the Agent Skills. If the client is not covered, add the entry manually from [`references/mcp-setup.md`](./references/mcp-setup.md) — the server command is `npx -y igniteui-theming igniteui-theming-mcp`.
+2. **Ask the user to reload the editor or agent session, then stop.** MCP tools cannot be loaded into a running session.
+3. **Continue without the server only if the user explicitly asks to.** In that case, use the manual Sass workflow in this file and mark every token name you could not verify with `get_component_design_tokens` as unverified.
 
 ## Theming Architecture
 
@@ -369,7 +373,7 @@ Everything else must use `var(--ig-<family>-<shade>)` tokens.
 ## Key Rules
 
 1. **Preserve existing styles** — apply theme code as targeted edits to existing style files; never wholesale-replace a file the user has customized
-2. **Always call `detect_platform` first** when using MCP tools
+2. **Always call `detect_platform` first** — it verifies the MCP server is connected and sets the correct import paths
 3. **Always call `get_component_design_tokens` before `create_component_theme`** to discover valid token names
 4. **Palette shades 50 = lightest, 900 = darkest** for all chromatic colors — never invert for dark themes (only gray inverts)
 5. **Surface color must match the variant** — light color for `light`, dark color for `dark`

package/skills/igniteui-angular-theming/references/mcp-setup.md

@@ -2,10 +2,18 @@
 
 > **Part of the [`igniteui-angular-theming`](../SKILL.md) skill hub.**
 
-The Ignite UI Theming MCP server enables AI assistants to generate production-ready theming code. It must be configured in the editor/agent before the theming tools become available, and the editor or agent session must be restarted afterwards — MCP servers cannot be hot-loaded into a running session.
+The Ignite UI Theming MCP server enables AI assistants to generate production-ready theming code. **It is required by the Ignite UI Agent Skills.** It must be configured in the editor/agent before the theming tools become available, and the editor or agent session must be restarted afterwards — MCP servers cannot be hot-loaded into a running session.
 
 > Depending on the client, MCP tool names may appear with a server prefix (e.g. `mcp__igniteui-theming__detect_platform` in Claude Code). This skill refers to tools by their bare names.
 
+## Agent Responsibilities
+
+When the `detect_platform` tool is not available, the agent configures the server itself — it does not only suggest the setup to the user:
+
+1. Run the one-command setup below from the project root.
+2. Ask the user to reload the editor or agent session, then stop.
+3. Continue without the server only if the user explicitly asks to, and mark every token name that could not be verified with `get_component_design_tokens` as unverified.
+
 ## Recommended: One-Command Setup
 
 From the project root:
@@ -14,7 +22,7 @@ From the project root:
 npx -y igniteui-cli ai-config
 ```
 
-This configures **both** the `igniteui-theming` and `igniteui-cli` MCP servers, copies the Ignite UI Agent Skills into the project, and preserves any existing server entries in the config files. Inline options such as `--agents claude copilot` and `--assistants vscode cursor` select which agents and editors to configure.
+This configures **both** the `igniteui-theming` and `igniteui-cli` MCP servers, copies the Ignite UI Agent Skills into the project, and preserves any existing server entries in the config files. Inline options such as `--agents claude copilot` and `--assistants vscode cursor` select which agents and editors to configure. When `igniteui-cli` is installed globally (`npm install -g igniteui-cli`), use `ig ai-config` instead.
 
 ## Manual Configuration (fallback)
 
@@ -41,6 +49,8 @@ Use these only when `ai-config` is unavailable or your editor is not covered by
 claude mcp add igniteui-theming -- npx -y igniteui-theming igniteui-theming-mcp
 ```
 
+Or add the entry to the project's `.mcp.json` at the repository root, using the `mcpServers` key shown for Cursor below.
+
 ### Cursor — `.cursor/mcp.json`
 
 ```json