From b022be956accc9c5c41b740319990d16b96cd0af Mon Sep 17 00:00:00 2001
From: georgianastasov <ggeorgianastasov@gmail.com>
Date: Thu, 23 Apr 2026 11:31:21 +0300
Subject: [PATCH] docs(skills): Replace ng-deep with tokens in
 generate-from-image-design skill

---
 .../SKILL.md                                  |  2 +-
 .../references/gotchas.md                     | 19 ++-----------------
 2 files changed, 3 insertions(+), 18 deletions(-)

diff --git a/skills/igniteui-angular-generate-from-image-design/SKILL.md b/skills/igniteui-angular-generate-from-image-design/SKILL.md
index 063386d6d25..a869db8a8f1 100644
--- a/skills/igniteui-angular-generate-from-image-design/SKILL.md
+++ b/skills/igniteui-angular-generate-from-image-design/SKILL.md
@@ -146,7 +146,7 @@ For **every** core Ignite UI component chosen in Steps 3-4, follow this MCP-firs
 - Resolve each value to a palette token or local semantic CSS variable
 - Call `create_component_theme("grid", ...)` with only `{ "header-background": "<resolved token>", "content-background": "<resolved token>", "row-hover-background": "<resolved token>" }`
 
-Apply the generated theme blocks inside `::ng-deep` scoped to the component selector as shown in the `create_component_theme` output.
+Apply the generated theme block using `@include tokens(<theme-name>);` as returned by `create_component_theme`.
 
 Do not run `create_component_theme` for regions built with custom HTML/CSS only.
 
diff --git a/skills/igniteui-angular-generate-from-image-design/references/gotchas.md b/skills/igniteui-angular-generate-from-image-design/references/gotchas.md
index f81d3fdcadf..d7087737cbc 100644
--- a/skills/igniteui-angular-generate-from-image-design/references/gotchas.md
+++ b/skills/igniteui-angular-generate-from-image-design/references/gotchas.md
@@ -118,24 +118,9 @@ igx-nav-drawer {
 ```
 
 ### Dark theme overrides for `IgxGridComponent`
-Grid internals often need explicit dark-theme overrides. Use palette tokens or local semantic CSS variables that map to the design:
+Grid internals often need explicit dark-theme overrides. Use `get_component_design_tokens("grid")` to discover available tokens, then call `create_component_theme` with the tokens that differ from the global theme. Apply the returned theme with the `tokens`:
 ```scss
-:host ::ng-deep igx-grid {
-  .igx-grid__thead,
-  .igx-grid__tr {
-    background: <resolved-surface-token>;
-  }
-
-  .igx-grid__th,
-  .igx-grid__td {
-    color: <resolved-text-token>;
-    border-color: <resolved-border-token>;
-  }
-
-  .igx-grid__tbody {
-    background: <resolved-surface-token>;
-  }
-}
+@include tokens($custom-grid-theme);
 ```
 
 ### Read luminance warnings from theme generation