angular-ui-rules
The short Angular, Angular Material and Tailwind rule list, keyed by Rule ID, that the Angular agents preload. Use when: writing or reviewing Angular components, templates, state services or styles; o
SKILL.mdskills/angular-ui-rules/SKILL.md
GitHubRule set: angular-ui-rules
Angular UI rules (short list)
This is the short list. The full text of each rule, with examples, lives in the rule documents the angular-tailwind add-on installs. Cite the Rule ID when you apply or report a rule.
Which rule wins. The project's own instructions win over every rule document. A document the project wrote and lists in review.documents wins over this plugin document where they disagree. For what it checks, the guard's verdict is final.
When the documents are missing. Read the review.documents slot of .claude/project-profile.md. If the add-on's documents are not listed there, the add-on is not installed: say so once, and work from the short list below alone. Do not invent a document path.
Per-app rules. Before editing an application, read that application's .app-rules.json (the roots are the frontend.roots slot), including its advisorRemindersAppendix. Those entries apply on top of this list.
Components and templates
- A-001 Components are standalone.
- A-002
ChangeDetectionStrategy.OnPush. - A-003
templateUrlandstyleUrlin separate files; never inlinetemplate:orstyles:. - A-004
inject(), not constructor injection. - A-005
input()/input.required(), not@Input(). - A-006
@if,@for,@switch; never*ngIf/*ngFor. - A-007 Every
@forhas atrackexpression.
State and signals
- A-009 State services keep private signals and expose them with
.asReadonly(). - A-011 Clean up subscriptions (
takeUntilDestroyed,toSignal). - A-012 No async pipe.
- A-013 No
any; useunknownand a type guard.
Styling
- T-001 No static
stylefor layout, spacing or sizing; use Tailwind utilities. - T-003 No
text-gray-*/bg-gray-*. - T-004 No hard-coded hex colours; use the theme-bridged utilities (
text-primary,bg-surface-container,border-outline-variant). - T-010 SCSS files stay near-empty:
:host ::ng-deep,@keyframes,@media/@supports,@apply. - T-011 A Material override that serves one component goes in that component's stylesheet.
- T-012 Scrollable containers use the global
scroll-edgeclasses, never inlineoverflow-y-autoorsticky. - T-014 Keep the height chain intact down to a scrolling child.
- T-022 Do not use the classes an application's
.app-rules.jsonbans.
Data
- Response envelope. Check
<the success flag of the project's response envelope>(named in the project's own handbook listed inreview.documents) before reading the value. - Generated models. Never hand-edit generated API or hub models; they regenerate from the server code.
Layout (advisory)
For screen layout and density, agentic-auto-improve:application-design and agentic-auto-improve:website-design are advisory references; they do not override the rules above.