Ignite UI for Angular Habilidades de Agente
Ignite UI for Angular incluye Agent Skills: archivos de conocimiento estructurado que enseñan a los asistentes de programación de IA (GitHub Copilot, Cursor, Windsurf, Claude, Gemini CLI, JetBrains Junie, etc.) cómo trabajar con Ignite UI for Angular. Estos archivos de habilidades proporcionan orientación contextual sobre componentes, cuadrículas, operaciones de datos y tematización, permitiendo que tu asistente de IA genere código preciso e idiomático que siga las mejores prácticas.
Note
El panorama de las herramientas de IA está evolucionando rápidamente. Las ubicaciones de descubrimiento de habilidades y las opciones de distribución pueden cambiar a medida que se actualicen herramientas e IDEs. Consulta siempre la documentación oficial de tu herramienta o agente específico para obtener la información más reciente.
Available Skills
Los archivos de habilidades están en elskills/ directorio del repositorio de Ignite UI for Angular:
| Skill | Camino | Descripción |
|---|---|---|
| Componentes y disposición | skills/igniteui-angular-components/SKILL.md |
Componentes independientes, controles de formulario, superposiciones, diseño |
| Data Grids | skills/igniteui-angular-grids/SKILL.md |
Cuadrícula, Grid de árbol, Grid jerárquica, Pivot Grid, ordenación, filtrado, agrupación, paginación, datos remotos |
| Tematización y estilismo | skills/igniteui-angular-theming/SKILL.md |
Paletas, tipografía, elevaciones, temas componentes, servidor MCP |
Note
A partir de Ignite UI for Angular 21.1.0, estas habilidades se descubren automáticamente al colocarse en la ruta de habilidades de tu agente (por ejemplo, ,.claude/skills,.agents/skills,)..cursor/rules/ Esta versión incluye una migración opcional para añadir estas habilidades automáticamente a tu proyecto.
Skill Locations
Cada herramienta de codificación con IA descubre habilidades a partir de directorios específicos. Coloca tus archivos de habilidades en la ubicación adecuada para que tu asistente de IA pueda encontrarlos y usarlos automáticamente. La convención general.agents/skills/ se soporta en múltiples herramientas, y cada herramienta también tiene sus propios directorios específicos.
General (.agents/skills/)
El.agents/skills/ directorio es una convención cross-agent soportada por múltiples herramientas, incluyendo VS Code con Copilot, OpenAI Codex, Cursor, Gemini CLI, Antigravity y Windsurf. Copia los directorios de habilidades en.agents/skills/ la raíz de tu proyecto:
.agents/
skills/
igniteui-angular-components/
SKILL.md
igniteui-angular-grids/
SKILL.md
igniteui-angular-theming/
SKILL.md
Para las habilidades a nivel de usuario (globales) disponibles en todos los proyectos, utiliza~/.agents/skills/ en su lugar.
GitHub Copilot
GitHub Copilot descubre habilidades de:
| Scope | Ubicación |
|---|---|
| Proyecto | .github/skills/, .claude/skills/ |
| Vida personal | ~/.copilot/skills/,~/.claude/skills/ (Solo agente de codificación de Copilot y solo CLI de GitHub Copilot) |
Propina: En VS Code, estas ubicaciones también incluyen el general
.agents/skills/y~/.agents/skills/puedes configurar ubicaciones adicionales de habilidades usando elchat.agentSkillsLocationsescenario.
Claude
Claude descubre habilidades de:
| Scope | Ubicación |
|---|---|
| Proyecto | .claude/skills/ |
| Vida personal | ~/.claude/skills/ |
Cursor
Cursor descubre habilidades de:
| Scope | Ubicación |
|---|---|
| Proyecto | .agents/skills/, .cursor/skills/ |
| User (global) | ~/.cursor/skills/ |
Gemini CLI and Antigravity
Gemini CLI and Antigravity discover skills from:
| Scope | Ubicación |
|---|---|
| Workspace | .gemini/skills/, .agents/skills/ |
| User | ~/.gemini/skills/, ~/.agents/skills/ |
Propina: Utiliza el
/skillscomando barra en la CLI Gemini para ver y gestionar las habilidades instaladas.
Junie (JetBrains IDEs)
Junie descubre habilidades de:
| Scope | Ubicación |
|---|---|
| Proyecto | .junie/skills/ |
| User | ~/.junie/skills/ |
Windsurf
El windsurf aprende habilidades de:
| Scope | Ubicación |
|---|---|
| Workspace | .windsurf/skills/, .agents/skills/ |
| Global | ~/.codeium/windsurf/skills/, ~/.agents/skills/ |
Installing Skills
Utiliza una de las opciones de abajo para descargar y colocar los archivos de habilidades en la ubicación adecuada para tu asistente de IA.
Option A - Use the Ignite UI CLI
Elai-config comando copia los archivos skill del paquete de Ignite UI for Angular instalado y.claude/skills/ escribe.vscode/mcp.json la configuración Ignite UI del servidor MCP. Si los archivos ya existen y están actualizados, el comando es un no-op.
Uso de esquemas Angular:
ng generate @igniteui/angular-schematics:ai-config
Esto también registra el@angular/cli servidor MCP junto.vscode/mcp.json a los servidores Ignite UI.
Usando la Ignite UI CLI:
Option A - Use the Ignite UI CLI
Elai-config comando copia los archivos skill del paquete de Ignite UI for Angular instalado y.claude/skills/ escribe.vscode/mcp.json la configuración Ignite UI del servidor MCP. Si los archivos ya existen y están actualizados, el comando es un no-op.
Uso de esquemas Angular:
ng generate @igniteui/angular-schematics:ai-config
If Ignite UI for Angular is already installed in your project, the skill files are available under `node_modules`. To copy them into your project (e.g. into `.agents/skills/`), run:
**macOS / Linux / Windows (PowerShell)**
```bash
cp -r node_modules/igniteui-angular/skills/. .agents/skills/
Windows (Símbolo del prompt)
robocopy node_modules\igniteui-angular\skills .agents\skills /E
O copiar directorios de habilidades individuales según sea necesario:
macOS / Linux / Windows (PowerShell)
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/
Windows (Símbolo del prompt)
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
Option C - Use the gemini skills CLI
Elgemini skills install comando instala habilidades directamente desde un repositorio Git. Soporta dos ámbitos:
- Alcance de usuario (por defecto): instala habilidades globalmente para tu cuenta de usuario, haciéndolas disponibles en todos los proyectos. Las habilidades se colocan en
~/.gemini/skills/o~/.agents/skills/. - Alcance de espacio de trabajo: instala habilidades localmente en el directorio actual del proyecto,
.agents/skills/asignándolas solo a ese proyecto.
Instalar en el ámbito de usuario (por defecto):
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
Instalar en el ámbito del espacio de trabajo:
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
Una vez instalados, los archivos de habilidades están disponibles en la ubicación correspondiente y serán descubiertos automáticamente por asistentes de IA compatibles.
Option D - Use the npx skills CLI
Laskills CLI es una herramienta interactiva que descarga e instala habilidades directamente en tu proyecto. Ejecuta el siguiente comando en la raíz de tu proyecto:
npx skills add IgniteUI/igniteui-angular
La CLI te guiará a través de una serie de indicaciones para:
- Selecciona qué habilidades instalar (componentes, tematización, etc.).
- Elige la ubicación objetivo para los archivos de habilidades en tu proyecto (por ejemplo
.agents/skills/, )..github/skills/ - Descarga y escribe automáticamente los archivos de habilidades seleccionados.
Una vez completadas, las habilidades están listas para usar, sin necesidad de copiar manualmente el archivo.
Nota: Requiere Node.js y conexión a internet. El comando obtiene los archivos de habilidades más recientes del repositorio IgniteUI/igniteui-angular.
Theming MCP Server
La habilidad de Temización incluye instrucciones de configuración para eligniteui-theming servidor MCP, que da a los asistentes de IA acceso a herramientas de tematización en vivo como la generación de paletas y el andamiaje de temas componentes. Consulta el archivo de habilidades Theming para los pasos de configuración de los IDEs de VS Code, Cursor, Claude Desktop y JetBrains.
Para más información sobre el Theming MCP, consulte la documentación Ignite UI Theming MCP.
Additional Resources
- Empezando con Ignite UI for Angular
- Angular Esquemas y CLI de Ignite UI
- Desarrollo asistido por IA con Ignite UI
- Ignite UI CLI MCP
- Ignite UI Theming MCP