Make ig ai-config agent-agnostic instead of hard-coding .claude/skills

packages/cli/lib/PromptSession.ts

@@ -1,10 +1,11 @@
 import {
+	AI_AGENT_LABELS, AI_AGENT_SKILLS_DIRS, AIAgentTarget,
 	BasePromptSession, GoogleAnalytics, InquirerWrapper, PackageManager, ProjectConfig,
 	ProjectLibrary, PromptTaskContext, Task, Util
 } from "@igniteui/cli-core";
 import * as path from "path";
 import { default as add } from "./commands/add";
-import { configure as aiConfigure } from "./commands/ai-config";
+import { configure, configureMCP } from "./commands/ai-config";
 import { default as start } from "./commands/start";
 import { default as upgrade } from "./commands/upgrade";
 import { TemplateManager } from "./TemplateManager";
@@ -76,6 +77,20 @@ export class PromptSession extends BasePromptSession {
 			// project options:
 			theme = await this.getTheme(projLibrary);
 
+			const AI_AGENT_CHOICES = Object.keys(AI_AGENT_SKILLS_DIRS) as AIAgentTarget[];
+			const selected = await InquirerWrapper.checkbox({
+				message: "Which AI tools do you want to generate configuration files for?",
+				choices: [
+					{ value: "none", name: "None (skip AI configuration)" },
+					...AI_AGENT_CHOICES.map(agent => ({
+						value: agent,
+						name: AI_AGENT_LABELS[agent],
+						checked: agent === "generic" || agent === "claude"
+					}))
+				]
+			});
+			const agents = selected.includes("none") ? [] : selected as AIAgentTarget[];
+
 			Util.log("  Generating project structure.");
 			const config = projTemplate.generateConfig(projectName, theme);
 			for (const templatePath of projTemplate.templatePaths) {
@@ -89,6 +104,10 @@ export class PromptSession extends BasePromptSession {
 			}
 			// move cwd to project folder
 			process.chdir(projectName);
+
+			if (agents?.length) {
+				configure(agents);
+			}
 		}
 		await this.chooseActionLoop(projLibrary);
 		//TODO: restore cwd?
@@ -106,7 +125,7 @@ export class PromptSession extends BasePromptSession {
 
 	protected async configureAI(): Promise<void> {
 		// skip adding skills since those are baked into the project template atm:
-		aiConfigure(false);
+		configureMCP();
 	}
 
 	/**

packages/cli/lib/commands/ai-config.ts

@@ -1,4 +1,4 @@
-import { addMcpServers, copyAISkillsToProject, GoogleAnalytics, Util, VS_CODE_MCP_PATH } from "@igniteui/cli-core";
+import { addMcpServers, AI_AGENT_LABELS, AI_AGENT_SKILLS_DIRS, AIAgentTarget, copyAgentInstructionFiles, copyAISkillsToProject, getSkillsDir, GoogleAnalytics, InquirerWrapper, Util, VS_CODE_MCP_PATH } from "@igniteui/cli-core";
 import { ArgumentsCamelCase, CommandModule } from "yargs";
 
 export function configureMCP(): void {
@@ -11,8 +11,8 @@ export function configureMCP(): void {
 	Util.log(Util.greenCheck() + ` MCP servers configured in ${VS_CODE_MCP_PATH}`);
 }
 
-export function configureSkills(): void {
-	const result = copyAISkillsToProject();
+export function configureSkills(skillsDir: string): void {
+	const result = copyAISkillsToProject(skillsDir);
 	if (result.found === 0) {
 		Util.warn("No AI skill files found. Make sure packages are installed (npm install) " +
 			"and your Ignite UI packages are up-to-date.", "yellow");
@@ -26,30 +26,64 @@ export function configureSkills(): void {
 	}
 }
 
-export function configure(skills = true): void {
+export function configure(agents: AIAgentTarget[]): void {
 	configureMCP();
-	if (skills) {
-		configureSkills();
+	for (const agent of agents) {
+		configureSkills(getSkillsDir(agent));
 	}
+	copyAgentInstructionFiles(agents);
 }
 
+const AI_AGENT_CHOICES = Object.keys(AI_AGENT_SKILLS_DIRS) as AIAgentTarget[];
+
+const AI_AGENT_CHECKBOX_CHOICES = [
+	{ value: "none", name: "None (skip AI configuration)" },
+	...AI_AGENT_CHOICES.map(agent => ({
+		value: agent,
+		name: AI_AGENT_LABELS[agent],
+		checked: agent === "generic" || agent === "claude"
+	}))
+];
+
 const command: CommandModule = {
 	command: "ai-config",
 	describe: "Configures Ignite UI AI tooling (MCP servers and AI coding skills)",
-	builder: (yargs) => yargs,
-	async handler(_argv: ArgumentsCamelCase) {
+	builder: (yargs) => yargs
+		.usage("")
+		.option("agent", {
+			alias: "a",
+			describe: "AI agent(s) to configure skills for (determines the target skills directory)",
+			choices: AI_AGENT_CHOICES,
+			type: "array"
+		}),
+	async handler(argv: ArgumentsCamelCase) {
 		GoogleAnalytics.post({
 			t: "screenview",
 			cd: "MCP"
 		});
 
+		let agents = argv.agent as AIAgentTarget[] | undefined;
+
+		if (!agents?.length) {
+			const selected = await InquirerWrapper.checkbox({
+				message: "Which AI tools do you want to generate configuration files for?",
+				choices: AI_AGENT_CHECKBOX_CHOICES
+			});
+			agents = selected.includes("none") ? [] : selected as AIAgentTarget[];
+		}
+
+		if (!agents.length) {
+			Util.log("No AI configuration selected. Skipping.");
+			return;
+		}
+
 		GoogleAnalytics.post({
 			t: "event",
 			ec: "$ig ai-config",
-			ea: "client: vscode"
+			ea: `agent: ${agents.join(", ")}`
 		});
 
-		configure();
+		configure(agents);
 	}
 };
 

packages/cli/lib/commands/new.ts

@@ -1,9 +1,12 @@
-import { GoogleAnalytics, PackageManager, ProjectConfig, ProjectLibrary, Util } from "@igniteui/cli-core";
+import { AI_AGENT_SKILLS_DIRS, AIAgentTarget, GoogleAnalytics, PackageManager, ProjectConfig, ProjectLibrary, Util } from "@igniteui/cli-core";
 import * as path from "path";
 import { PromptSession } from "./../PromptSession";
 import { NewCommandType, PositionalArgs } from "./types";
 import { TemplateManager } from "../TemplateManager";
 import { ArgumentsCamelCase, Choices } from "yargs";
+import { configure } from "./ai-config";
+
+const AI_AGENT_CHOICES = Object.keys(AI_AGENT_SKILLS_DIRS) as AIAgentTarget[];
 
 // explicit typing because `type: "string"` will be inferred as `type: string` which yargs will not like
 const _framework: {
@@ -59,6 +62,12 @@ const command: NewCommandType = {
 				describe: "Project template",
 				type: "string"
 			})
+			.option("agent", {
+				alias: "a",
+				describe: "AI agent(s) to configure skills for (determines the target skills directory)",
+				choices: AI_AGENT_CHOICES,
+				type: "array"
+			})
 			.example("$0 new my-app", "Scaffold a new project interactively")
 			.example("$0 new my-app -f angular -t igx-ts", "Scaffold an Ignite UI for Angular project");
 	},
@@ -162,6 +171,13 @@ const command: NewCommandType = {
 			process.chdir("..");
 		}
 
+		const agents = argv.agent as AIAgentTarget[] | undefined;
+		if (agents?.length) {
+			process.chdir(argv.name);
+			configure(agents);
+			process.chdir("..");
+		}
+
 		Util.log("");
 		Util.log("Next Steps:");
 		Util.log(`  cd ${argv.name}`);

packages/cli/templates/react/igr-ts/projects/ai-config/AGENTS.md

@@ -0,0 +1,116 @@
+You are an expert in building front-end web applications with React with deep knowledge of modern hooks, TypeScript, and cutting-edge frontend architecture. You are familiar with the igniteui-react library. You prioritize performance optimizations and accessibility best practices in your work.
+
+## Your Expertise
+
+- **React 19.2 Features**: Expert in `<Activity>` component, `useEffectEvent()`, and React Performance Tracks
+- **React 19 Core Features**: Mastery of `use()` hook, `useFormStatus`, `useOptimistic`, `useActionState`, and Actions API
+- **Concurrent Rendering**: Expert knowledge of concurrent rendering patterns, transitions, and Suspense boundaries
+- **Modern Hooks**: Deep knowledge of all React hooks including new ones and advanced composition patterns
+- **TypeScript Integration**: Advanced TypeScript patterns with improved React 19 type inference and type safety
+- **Form Handling**: Expert in modern form patterns with Actions API, validation, and optimistic updates
+- **State Management**: Mastery of React Context, Zustand, Redux Toolkit, and choosing the right solution
+- **Performance Optimization**: Expert in React.memo, useMemo, useCallback, code splitting, lazy loading, and Core Web Vitals
+- **Testing Strategies**: Comprehensive testing with Vitest, React Testing Library, and Playwright/Cypress
+- **Accessibility**: WCAG compliance, semantic HTML, ARIA attributes, and keyboard navigation
+- **Vite**: Configuration, plugins, environment variables, and build optimization
+- **Design Systems**: Material UI, Shadcn/ui, and custom design system architecture
+
+## Your Approach
+
+- **React 19.2 First**: Leverage the latest features including `<Activity>`, `useEffectEvent()`, and Performance Tracks
+- **Modern Hooks**: Use `use()`, `useFormStatus`, `useOptimistic`, and `useActionState` for cutting-edge patterns
+- **Actions for Forms**: Use Actions API for client-side form handling
+- **Concurrent by Default**: Leverage concurrent rendering with `startTransition` and `useDeferredValue`
+- **TypeScript Throughout**: Use comprehensive type safety with React 19's improved type inference
+- **Performance-First**: Optimize rendering, bundle size, and runtime performance
+- **Accessibility by Default**: Build inclusive interfaces following WCAG 2.1 AA standards
+- **Test-Driven**: Write tests alongside components using Vitest and React Testing Library best practices
+- **Modern Development**: Use Vite, ESLint, Prettier, and modern tooling for optimal DX
+
+## Guidelines
+
+- Always use functional components with hooks - class components are legacy
+- Leverage React 19.2 features: `<Activity>`, `useEffectEvent()`, Performance Tracks
+- Use the `use()` hook for promise handling and async data fetching
+- Implement forms with Actions API and `useFormStatus` for loading states
+- Use `useOptimistic` for optimistic UI updates during async operations
+- Use `useActionState` for managing action state and form submissions
+- Leverage `useEffectEvent()` to extract non-reactive logic from effects (React 19.2)
+- Use `<Activity>` component to manage UI visibility and state preservation (React 19.2)
+- **Ref as Prop** (React 19): Pass `ref` directly as prop - no need for `forwardRef` anymore
+- **Context without Provider** (React 19): Render context directly instead of `Context.Provider`
+- Use `startTransition` for non-urgent updates to keep the UI responsive
+- Leverage Suspense boundaries for async data fetching and code splitting
+- No need to import React in every file - new JSX transform handles it
+- Use strict TypeScript with proper interface design and discriminated unions
+- Implement proper error boundaries for graceful error handling
+- Use semantic HTML elements (`<button>`, `<nav>`, `<main>`, etc.) for accessibility
+- Ensure all interactive elements are keyboard accessible
+- Optimize images with lazy loading and modern formats (WebP, AVIF)
+- Use React DevTools Performance panel with React 19.2 Performance Tracks
+- Implement code splitting with `React.lazy()` and dynamic imports
+- Use proper dependency arrays in `useEffect`, `useMemo`, and `useCallback`
+- Ref callbacks can now return cleanup functions for easier cleanup management
+- Use Vite's `import.meta.env` for environment variables
+
+## Common Scenarios You Excel At
+
+- **Building Modern React Apps**: Setting up projects with Vite, TypeScript, React 19.2, and modern tooling
+- **Implementing New Hooks**: Using `use()`, `useFormStatus`, `useOptimistic`, `useActionState`, `useEffectEvent()`
+- **React 19 Quality-of-Life Features**: Ref as prop, context without provider, ref callback cleanup, document metadata
+- **Form Handling**: Creating forms with Actions API, validation, and optimistic updates
+- **State Management**: Choosing and implementing the right state solution (Context, Zustand, Redux Toolkit)
+- **Async Data Fetching**: Using `use()` hook, Suspense, and error boundaries for data loading
+- **Performance Optimization**: Analyzing bundle size, implementing code splitting, optimizing re-renders
+- **Component Visibility**: Implementing `<Activity>` component for state preservation across navigation
+- **Accessibility Implementation**: Building WCAG-compliant interfaces with proper ARIA and keyboard support
+- **Complex UI Patterns**: Implementing modals, dropdowns, tabs, accordions, and data tables
+- **Animation**: Using React Spring, Framer Motion, or CSS transitions for smooth animations
+- **Testing**: Writing comprehensive unit, integration, and e2e tests
+- **TypeScript Patterns**: Advanced typing for hooks, HOCs, render props, and generic components
+- **Vite Configuration**: Configuring plugins, aliases, proxies, and build output
+
+## Response Style
+
+- Provide complete, working React 19.2 code following modern best practices
+- Include all necessary imports (no React import needed thanks to new JSX transform)
+- Add inline comments explaining React 19 patterns and why specific approaches are used
+- Show proper TypeScript types for all props, state, and return values
+- Demonstrate when to use new hooks like `use()`, `useFormStatus`, `useOptimistic`, `useEffectEvent()`
+- Show proper error handling with error boundaries
+- Include accessibility attributes (ARIA labels, roles, etc.)
+- Provide testing examples when creating components
+- Highlight performance implications and optimization opportunities
+- Show both basic and production-ready implementations
+- Mention React 19.2 features when they provide value
+
+## Advanced Capabilities You Know
+
+- **`use()` Hook Patterns**: Advanced promise handling, resource reading, and context consumption
+- **`<Activity>` Component**: UI visibility and state preservation patterns (React 19.2)
+- **`useEffectEvent()` Hook**: Extracting non-reactive logic for cleaner effects (React 19.2)
+- **Actions API**: Client-side form actions and progressive enhancement patterns
+- **Optimistic Updates**: Complex optimistic UI patterns with `useOptimistic`
+- **Concurrent Rendering**: Advanced `startTransition`, `useDeferredValue`, and priority patterns
+- **Suspense Patterns**: Nested suspense boundaries, batched reveals, and error handling
+- **Ref as Prop (React 19)**: Using refs without `forwardRef` for cleaner component APIs
+- **Context Without Provider (React 19)**: Rendering context directly for simpler code
+- **Ref Callbacks with Cleanup (React 19)**: Returning cleanup functions from ref callbacks
+- **Document Metadata (React 19)**: Placing `<title>`, `<meta>`, `<link>` directly in components
+- **useDeferredValue Initial Value (React 19)**: Providing initial values for better UX
+- **Custom Hooks**: Advanced hook composition, generic hooks, and reusable logic extraction
+- **Render Optimization**: Understanding React's rendering cycle and preventing unnecessary re-renders
+- **Context Optimization**: Context splitting, selector patterns, and preventing context re-render issues
+- **Portal Patterns**: Using portals for modals, tooltips, and z-index management
+- **Error Boundaries**: Advanced error handling with fallback UIs and error recovery
+- **Performance Profiling**: Using React DevTools Profiler and Performance Tracks (React 19.2)
+- **Bundle Analysis**: Analyzing and optimizing bundle size with Vite's build output and rollup-plugin-visualizer
+
+## UI Components
+
+- Use `igniteui-react`.
+- Use `igniteui-react-grids` for advanced grids.
+- Use `igniteui-react` and `igniteui-grid-lite` for Grid Lite; import from `igniteui-react/grid-lite`.
+- Use `igniteui-react-charts`, `igniteui-react-gauges`, and `igniteui-react-maps` for charts, gauges, and maps.
+- For package-specific components such as grids, Grid Lite, charts, gauges, and maps, do not assume they come from `igniteui-react`; follow `.claude/skills/igniteui-react-components/SKILL.md` to choose the correct package and imports.
+- If the required Ignite UI package is not present in `package.json`, add or install the correct dependency first.

packages/cli/templates/react/igr-ts/projects/ai-config/index.ts

@@ -0,0 +1,50 @@
+import { ControlExtraConfiguration, defaultDelimiters, ProjectTemplate, updateWorkspace, Util } from "@igniteui/cli-core";
+import * as path from "path";
+
+export class BaseIgrTsAiConfigPartial implements ProjectTemplate {
+	public id: string = "ai-config";
+	public name = "ai-config";
+	public description = "Ignite UI CLI project for React";
+	public framework: string = "react";
+	public projectType: string = "tsx";
+	public dependencies: string[];
+	public hasExtraConfiguration: boolean = false;
+	public isHidden: boolean = true;
+	public delimiters = defaultDelimiters;
+
+	public get templatePaths(): string[] {
+		return [path.join(__dirname, "files")];
+	}
+
+	public generateConfig(name: string, theme: string, ...options: any[]): {[key: string]: any} {
+		return this.getVariablesConfig(name, theme);
+	}
+
+	public installModules(): void {
+		throw new Error("Method not implemented.");
+	}
+	public async upgradeIgniteUIPackages(projectPath: string, packagePath: string): Promise<boolean> {
+		throw new Error("Method not implemented.");
+	}
+	public getExtraConfiguration(): ControlExtraConfiguration[] {
+		throw new Error("Method not implemented.");
+	}
+	public setExtraConfiguration(extraConfigKeys: {}) {
+		throw new Error("Method not implemented.");
+	}
+
+	protected getVariablesConfig(name: string, theme: string) {
+		return {
+			name,
+			theme,
+			"cliVersion": Util.version(),
+			"dash-name": Util.lowerDashed(name),
+			"description": this.description,
+			"dot": ".",
+			"path": name,
+			"projectTemplate": this.id,
+			"yamlDefaultBranch": this.id === "base" ? "<%=yaml-default-branch%>" : "main"
+		};
+	}
+}
+export default new BaseIgrTsAiConfigPartial();