skills.rest
e-picsa
e-picsaOFFICIAL
Explore all skills by this author →
WebsiteGitHub

Angular Conventions

Enforces Angular 21 coding standards, Signals reactivity, and project-specific component conventions.

8|3|Updated Jun 8, 2019
Search Tags:#typescript#angular#coding standards#signals#RxJS#angular material#frontend conventions
One-click install
npx skills add https://github.com/e-picsa/picsa-apps --skill angular-conventions-e-picsa
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Angular Conventions
Source: https://github.com/e-picsa/picsa-apps/tree/main/.agent/skills/angular
Command: npx skills add https://github.com/e-picsa/picsa-apps --skill angular-conventions-e-picsa

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Maintaining consistent, modern Angular code across a large team is difficult, especially with Angular 21's shift to Signals, new control flow syntax, and project-specific UI patterns. This Skill ensures every generated component follows the project's non-negotiable architectural rules. ## Core Features & Use Cases - Signals-First Reactivity: Enforces input(), output(), signal(), and computed() instead of legacy decorators. - Modern Syntax Rules: Mandates built-in control flow (@if, @for, @defer), OnPush change detection, and separate template/style files. - Project-Specific UI & i18n: Requires the matButton directive variants, Tailwind-first styling, and the translate pipe for all user-facing text. - Use Case: When asking an AI to scaffold a new feature component, this Skill guarantees the output uses Signals, strict typing, Zod validation, and the correct Angular Material 21 patterns without manual correction. ## Quick Start Generate a new presentational component for displaying a farmer profile following the Angular conventions skill.

Frequently Asked Questions about Angular Conventions

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I use Angular Signals instead of @Input decorators?▼

Use `input()` and `input.required()` for component inputs, `output()` for events, and `signal()` with `computed()` for local state. These replace the legacy `@Input()` and `@Output()` decorators in Angular 21.

What is the correct button directive in Angular Material 21?▼

Use the `matButton` directive with variants like `<button matButton="filled" color="primary">`. Legacy directives such as `mat-button` and `mat-raised-button` are superseded and must not be used in this project.

Can I combine RxJS Observables with Angular Signals?▼

Yes, use `toSignal` to consume Observables synchronously in templates and `toObservable` to convert a Signal back into a stream for operators like debounce. RxJS remains the standard for asynchronous sources like HTTP.

Does this project require translations for all user-facing text?▼

Yes, all templates must use the `translate` pipe since the app supports over 20 languages. The only exception is the `apps/picsa-apps/dashboard` application, where hardcoded text is permitted.

When should I use inline templates in Angular components?▼

Never in this project. Logic, templates, and styles must live in separate `.ts`, `.html`, and `.scss` files, and every component must use `ChangeDetectionStrategy.OnPush`.

Related Skills

Explore More Software Engineering Skills→
Shockwave2kShockwave2k

angular-nx-architect

Scaffold Angular 21 apps in an Nx monorepo with app-first folder structure.

Community
Advanced
soniqosoniqo
1.1k

test

Run Swift unit or end-to-end test suites against a local codebase.

Official
Basic
rohanbhatia27rohanbhatia27
1

audit-prep-assistant

Prepare codebases for security review with static analysis and documentation generation.

Community
Advanced
ironkid90ironkid90

saas-workspace-initializer

Automates SaaS project initialization with Nx, NestJS, and Angular or React.

Community
Advanced