Merge branch 'vnext' into jp-sync/pr-6499-ai-config-update-1b29df6635727b63

Author: ChronosSF

en/components/chat.md

@@ -399,6 +399,37 @@ We highly recommend using the standard Web Component styling approaches before r
 - `<link>` elements – For larger stylesheets, inject them inside the Shadow DOM.
 - Inline `<style>` tags – For small, scoped style overrides.
 
+### Chat theme
+
+Apart from the **CSS parts** and **slots**, the Chat component also has a [`chat-theme`]({environment:sassApiUrl}/themes#function-chat-theme) function exposed by our theming engine.
+
+In order to style the Chat component using the theme function, first we need to import the theming module, where all the theme functions and component mixins live:
+
+```scss
+@use "igniteui-angular/theming" as *;
+
+// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
+// @import '~igniteui-angular/lib/core/styles/themes/index';
+```
+
+Then, we create a new theme that extends the [`chat-theme`]({environment:sassApiUrl}/themes#function-chat-theme) and provide the `$header-background`, `$sent-message-background` and `$received-message-background` parameters. Based on these parameter values, the `$header-color`, `$sent-message-color` and `$received-message-color` are automatically set to black or white, depending on which provides better contrast with the background.
+
+```scss
+$custom-chat-theme: chat-theme(
+  $header-background: #4a4a4a,
+  $sent-message-background: #fb8500,
+  $received-message-background: #e2d8c9
+);
+```
+
+Finally, **include** the custom theme in your application:
+
+```scss
+:host {
+  @include tokens($custom-chat-theme);
+}
+```
+
 <code-view style="height:900px"
            data-demos-base-url="{environment:demosBaseUrl}"
            iframe-src="{environment:demosBaseUrl}/interactions/chat-styling-sample/" alt="Angular Chat Styling">
@@ -412,6 +443,7 @@ We highly recommend using the standard Web Component styling approaches before r
 - [`IgxChatMessageContextDirective`]({environment:angularApiUrl}/classes/igxchatmessagecontextdirective.html)
 - [`IgxChatInputContextDirective`]({environment:angularApiUrl}/classes/igxchatinputcontextdirective.html)
 - [`IgxChatAttachmentContextDirective`]({environment:angularApiUrl}/classes/igxchatattachmentcontextdirective.html)
+- [`chat-theme`]({environment:sassApiUrl}/themes#function-chat-theme)
 - [`Styling & Themes`](./themes/index.md)
 
 ## Additional Resources

jp/components/ai/skills.md

@@ -23,6 +23,7 @@ Ignite UI for Angular には **[エージェント スキル](https://agentskill
 | コンポーネントとレイアウト | [`skills/igniteui-angular-components/SKILL.md`](https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-components/SKILL.md) | スタンドアロン コンポーネント、フォーム コントロール、オーバーレイ、レイアウト |
 | データ グリッド | [`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、ソート、フィルタリング、グループ化、ページング、リモート データ |
 | テーマ設定とスタイル設定 | [`skills/igniteui-angular-theming/SKILL.md`](https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-theming/SKILL.md) | パレット、タイポグラフィ、エレベーション、コンポーネント テーマ、MCP サーバー |
+| 画像デザインからの生成 | [`skills/igniteui-angular-generate-from-image-design/SKILL.md`](https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-generate-from-image-design/SKILL.md) | スクリーンショット、モックアップ、ワイヤーフレームから Ignite UI コンポーネントを使用して Angular アプリを構築 |
 
 > [!NOTE]
 > Ignite UI for Angular **21.1.0** 以降、これらのスキルはエージェントのスキル パス (例: `.claude/skills`、`.agents/skills`、`.cursor/rules/`) に配置すると自動的に検出されます。このリリースには、これらのスキルをプロジェクトに自動的に追加するオプションの移行が含まれています。
@@ -44,6 +45,8 @@ Ignite UI for Angular には **[エージェント スキル](https://agentskill
       SKILL.md
     igniteui-angular-theming/
       SKILL.md
+    igniteui-angular-generate-from-image-design/
+      SKILL.md
 ```
 
 すべてのプロジェクトで利用可能なユーザー レベル (グローバル) スキルの場合は、代わりに `~/.agents/skills/` を使用します。
@@ -152,6 +155,7 @@ robocopy node_modules\igniteui-angular\skills .agents\skills /E
 cp -r node_modules/igniteui-angular/skills/igniteui-angular-components .agents/skills/
 cp -r node_modules/igniteui-angular/skills/igniteui-angular-grids .agents/skills/
 cp -r node_modules/igniteui-angular/skills/igniteui-angular-theming .agents/skills/
+cp -r node_modules/igniteui-angular/skills/igniteui-angular-generate-from-image-design .agents/skills/
 ```
 
 **Windows (Command Prompt)**
@@ -160,6 +164,7 @@ cp -r node_modules/igniteui-angular/skills/igniteui-angular-theming .agents/skil
 robocopy node_modules\igniteui-angular\skills\igniteui-angular-components .agents\skills\igniteui-angular-components /E
 robocopy node_modules\igniteui-angular\skills\igniteui-angular-grids .agents\skills\igniteui-angular-grids /E
 robocopy node_modules\igniteui-angular\skills\igniteui-angular-theming .agents\skills\igniteui-angular-theming /E
+robocopy node_modules\igniteui-angular\skills\igniteui-angular-generate-from-image-design .agents\skills\igniteui-angular-generate-from-image-design /E
 ```
 
 ### **オプション C — `gemini skills` CLI を使用する**
@@ -175,6 +180,7 @@ robocopy node_modules\igniteui-angular\skills\igniteui-angular-theming .agents\s
 gemini skills install https://github.com/IgniteUI/igniteui-angular.git --path skills/igniteui-angular-components
 gemini skills install https://github.com/IgniteUI/igniteui-angular.git --path skills/igniteui-angular-grids
 gemini skills install https://github.com/IgniteUI/igniteui-angular.git --path skills/igniteui-angular-theming
+gemini skills install https://github.com/IgniteUI/igniteui-angular.git --path skills/igniteui-angular-generate-from-image-design
 ```
 
 **ワークスペース スコープにインストールする:**
@@ -183,6 +189,7 @@ gemini skills install https://github.com/IgniteUI/igniteui-angular.git --path sk
 gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-angular.git --path skills/igniteui-angular-components
 gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-angular.git --path skills/igniteui-angular-grids
 gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-angular.git --path skills/igniteui-angular-theming
+gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-angular.git --path skills/igniteui-angular-generate-from-image-design
 ```
 
 インストールが完了すると、スキル ファイルはそれぞれの場所で利用できるようになり、互換性のある AI アシスタントによって自動的に検出されます。