Merge pull request #17228 from IgniteUI/ganastasov/fix-image-to-app-skill

docs(skills): Replace ng-deep with tokens in generate-from-image-design skill

Author: georgianastasov

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.
 

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