chore(ai): configure angular agent skills#1800
Conversation
Agent Skills are specialized, domain-specific instructions and capabilities designed for AI agents. Read more about angular skills here https://angular.dev/ai/agent-skills
|
@siemens/siemens-element-members Angular is now shipping agent skills https://angular.dev/ai/agent-skills. Shall we add them? Any opinion |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a comprehensive set of Angular developer guidelines and reference documentation designed for AI agents, covering topics from core components to advanced reactivity and testing. The review feedback focuses on correcting technical inaccuracies, such as the false claim that the @angular/animations package is deprecated and errors in the Signal Forms API examples. Additionally, the feedback addresses grammatical errors, typos, and adherence to Siemens UX writing guidelines regarding capitalization and list formatting.
| If no guidelines are provided by the user, here are same default rules to follow when creating a new Angular project: | ||
|
|
||
| 1. Use the latest stable version of Angular unless the user specifies otherwise. | ||
| 2. Use Signals Forms for form management in new projects (available in Angular v21 and newer) [Find out more](references/signal-forms.md). |
There was a problem hiding this comment.
According to the Siemens UX writing guidelines (Capitalization, rule 81), only the first letter of the first word in titles and list items should be capitalized. "Signals Forms" should be "Signal forms".
| 2. Use Signals Forms for form management in new projects (available in Angular v21 and newer) [Find out more](references/signal-forms.md). | |
| 2. Use Signal forms for form management in new projects (available in Angular v21 and newer) (references/signal-forms.md). |
References
- Capitalize only the first letter of the first word in titles, tooltips, menu items, list items, and buttons (link)
| In most cases for new apps, **prefer signal forms**. When making a forms decision, analyze the project and consider the following guidelines: | ||
|
|
||
| - if the application is using v21 or newer and this is a new form, **prefer signal forms**. | ||
| -For older applications or when working with existing forms, use the appropriate form type that matches the applications current form strategy. |
There was a problem hiding this comment.
There is a missing space after the hyphen in the list item.
| -For older applications or when working with existing forms, use the appropriate form type that matches the applications current form strategy. | |
| - For older applications or when working with existing forms, use the appropriate form type that matches the applications current form strategy. |
| # Angular Animations | ||
|
|
||
| When animating elements in Angular, **first analyze the project's Angular version** in `package.json`. | ||
| For modern applications (**Angular v20.2 and above**), prefer using native CSS with `animate.enter` and `animate.leave`. For older applications, you may need to use the deprecated `@angular/animations` package. |
There was a problem hiding this comment.
The @angular/animations package is not deprecated. While native CSS animations are recommended for simple enter/leave transitions in modern Angular versions, the package remains the standard for complex animation sequences and is fully supported.
| - **View**: The DOM rendered by the component's template inside the host element. | ||
| - **Standalone**: By default, components are standalone (since Angular 19, `standalone: true` is default). For older versions, `standalone: true` must be explicit or the component must be part of an `NgModule`. | ||
| - **Component Tree**: Angular applications are structured as a tree of components, where each component can host child components. | ||
| - **Component Naming**: Do not add suffixes the `Component` suffix for Component classes (e.g., AppComponent) unless the project has been configured to use that naming configuration. |
There was a problem hiding this comment.
There is a grammatical error in this sentence: "Do not add suffixes the Component suffix". It should be "Do not add the Component suffix".
| - **Component Naming**: Do not add suffixes the `Component` suffix for Component classes (e.g., AppComponent) unless the project has been configured to use that naming configuration. | |
| - Component Naming: Do not add the Component suffix for Component classes (e.g., AppComponent) unless the project has been configured to use that naming configuration. |
| const isReadonly = this.userForm().readonly(); | ||
| ``` | ||
|
|
||
| IMPORTANT!: Make sure to call the field to get it state. |
There was a problem hiding this comment.
Typo: "get it state" should be "get its state".
| IMPORTANT!: Make sure to call the field to get it state. | |
| IMPORTANT!: Make sure to call the field to get its state. |
| form().reset() | ||
|
|
||
| // The only exception is length: | ||
| form.children.length |
There was a problem hiding this comment.
The FormField proxy in Signal Forms does not have a children property. To access the length of an array field, use form.field.length directly.
| form.children.length | |
| form.length // NOTE: no parenthesis! |
| form( | ||
| data, | ||
| (path) => { | ||
| applyWhen( | ||
| name, | ||
| ({value}) => value() !== 'admin', | ||
| (namePath) => { | ||
| validate(namePath.last /* ... */); | ||
| disable(namePath.last /* ... */); | ||
| }, | ||
| ); | ||
| }, | ||
| {injector: TestBed.inject(Injector)}, | ||
| ); | ||
| ``` | ||
|
|
||
| `applyWhen` passes the path mapped to the first argument. | ||
| If you need parent field, just pass it to `applyWhen`: | ||
|
|
||
| ```ts | ||
| form( | ||
| data, | ||
| (path) => { | ||
| applyWhen( | ||
| cat, | ||
| ({value}) => value().name !== 'admin', | ||
| (catPath) => { | ||
| require(cat.catPath /* ... */); | ||
| }, | ||
| ); | ||
| }, | ||
| {injector: TestBed.inject(Injector)}, | ||
| ); | ||
| ``` |
There was a problem hiding this comment.
The "Conditional Validation" section contains several errors:
- name and cat are used but not defined in the callback scope (should be path.name and path.cat).
- require should be required.
- disable should be disabled.
- TestBed.inject(Injector) is for unit tests and should not be part of a general application code guideline.
| form( | |
| data, | |
| (path) => { | |
| applyWhen( | |
| name, | |
| ({value}) => value() !== 'admin', | |
| (namePath) => { | |
| validate(namePath.last /* ... */); | |
| disable(namePath.last /* ... */); | |
| }, | |
| ); | |
| }, | |
| {injector: TestBed.inject(Injector)}, | |
| ); | |
| ``` | |
| `applyWhen` passes the path mapped to the first argument. | |
| If you need parent field, just pass it to `applyWhen`: | |
| ```ts | |
| form( | |
| data, | |
| (path) => { | |
| applyWhen( | |
| cat, | |
| ({value}) => value().name !== 'admin', | |
| (catPath) => { | |
| require(cat.catPath /* ... */); | |
| }, | |
| ); | |
| }, | |
| {injector: TestBed.inject(Injector)}, | |
| ); | |
| ``` | |
| form( | |
| data, | |
| (path) => { | |
| applyWhen( | |
| path.name, | |
| ({value}) => value() !== 'admin', | |
| (namePath) => { | |
| validate(namePath.last /* ... */); | |
| disabled(namePath.last /* ... */); | |
| }, | |
| ); | |
| } | |
| ); |
References
- In README documentation, code examples do not need to be fully complete or runnable; a minimal example demonstrating basic usage is sufficient.
1 participant
Agent Skills are specialized, domain-specific instructions and capabilities designed for AI agents.
Read more about angular skills here https://angular.dev/ai/agent-skills
Documentation.
Examples.
Dashboards Demo.
Playwright report.
Coverage Reports: