Instruction file imported from luiszkm/Product.Template.Angular (.cursor/rules/angular-components.mdc). Copyright stays with the author.

Componentes Angular

Name: angular-components
Author: luiszkm

Fontes: .ai/rules/03-components.md, .ai/prompts/create-component.md

Obrigatório

standalone: true, OnPush
input() / input.required(), output() — signal-based
inject() — nunca constructor
@for (item of items(); track item.id) — sempre com track
Pipes importados explicitamente (DecimalPipe, DatePipe, CurrencyPipe)

Formulários (se aplicável)

apiErrors = input<Record<string, string[]> | null>(null)
effect() para aplicar apiErrors nos controles
fieldError(name) getter — lógica fora do template
<fieldset [disabled]="loading()">

Acessibilidade

aria-invalid, aria-describedby, role="alert" em erros
aria-label em botões de ícone
type="button" em botões não-submit

Exemplo: @src/app/shared/components/badge.component.ts

Design

Tokens ERP em CSS
Classes .btn para botões

{ "ocm": "1", "id": "luiszkm-product-template-angular-angular-components-rule", "kind": "skill", "name": "angular-components", "description": "Componentes Angular — standalone, signals, acessibilidade", "publisher": "luiszkm", "version": "1.0.0", "capabilities": { "domains": [ "general" ], "tags": [ "skill-md", "github-cursor-rules" ], "languages": [ "en" ] }, "quality_prior": 0.6, "examples": [ "Componentes Angular — standalone, signals, acessibilidade" ], "primary": false, "metadata": { "source": { "provider": "github-cursor-rules", "repository": "https://github.com/luiszkm/Product.Template.Angular", "path": ".cursor/rules/angular-components.mdc", "ref": "603e14802c355d56964010061d99950e1aceae02", "url": "https://github.com/luiszkm/Product.Template.Angular/blob/603e14802c355d56964010061d99950e1aceae02/.cursor/rules/angular-components.mdc", "key": "luiszkm/Product.Template.Angular/.cursor/rules/angular-components.mdc" }, "applies_to": "**/*.component.ts,**/*.component.html" }, "instructions": "# Componentes Angular\n\n**Fontes:** `.ai/rules/03-components.md`, `.ai/prompts/create-component.md`\n\n## Obrigatório\n- `standalone: true`, `OnPush`\n- `input()` / `input.required()`, `output()` — signal-based\n- `inject()` — nunca constructor\n- `@for (item of items(); track item.id)` — sempre com track\n- Pipes importados explicitamente (DecimalPipe, DatePipe, CurrencyPipe)\n\n## Formulários (se aplicável)\n- `apiErrors = input<Record<string, string[]> | null>(null)`\n- `effect()` para aplicar apiErrors nos controles\n- `fieldError(name)` getter — lógica fora do template\n- `<fieldset [disabled]=\"loading", "cost": { "context_tokens": 218 } }

angular-components

About

Componentes Angular

Obrigatório

Formulários (se aplicável)

Acessibilidade

Design

Use it

Manifest

Reviews