Run any Skill in Manus with one click

angular-material

Stars3

Forks0

UpdatedMay 18, 2026 at 04:38

Angular Material standards. Use ONLY when an Angular project already uses Angular Material or the task explicitly asks for Material components, theming, dialogs, tables, forms, overlays, navigation, or accessibility. Do not use for Blazor or Angular projects without Material.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

Ezefeola

Ezefeola/Temper-AI

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Software DevelopersComputer and Mathematical Occupations·SOC 15-1252

SKILL.md

readonly

name	angular-material
description	Angular Material standards. Use ONLY when an Angular project already uses Angular Material or the task explicitly asks for Material components, theming, dialogs, tables, forms, overlays, navigation, or accessibility. Do not use for Blazor or Angular projects without Material.

Angular Material

Scope

Use this optional skill with angular when Angular Material is relevant.

Setup

Do not introduce Angular Material unless the task explicitly requires it.
Import only the Material modules or standalone component imports needed by the feature.
Keep global theme setup centralized.
Follow the project's density, typography, color, and dark-mode strategy.

Components

Use Material components for forms, dialogs, menus, tables, tabs, navigation, cards, snack bars, and overlays when they match the task.
Keep business logic out of dialog and table markup; delegate to services or component methods.
Use MatDialog for focused modal tasks and return typed results.
Use MatSnackBar for transient feedback and inline messages for persistent errors.

Forms

Use mat-form-field with accessible labels and validation messages.
Connect Material inputs to reactive or template-driven forms according to the project pattern.
Use mat-error for validation feedback.
Disable submit controls during pending requests.

Tables and Lists

Use Material table, paginator, and sort when the project uses them and the data set requires it.
Prefer server-side paging/filtering for large data.
Provide empty and loading states.
Keep row actions keyboard accessible.

Theming

Use Angular Material theming APIs and design tokens rather than one-off CSS overrides.
Keep component overrides minimal and scoped.
Avoid deep selectors unless there is no supported theming alternative.

Accessibility

Preserve Material-provided roles, focus traps, keyboard navigation, and aria behavior.
Add meaningful labels to icon buttons.
Ensure dialogs have titles and clear close/cancel behavior.
Do not use disabled elements when an explanatory validation or permission message is needed.

More from this repository

same repository

clean-architecture

Ezefeola/Temper-AI

Structure and rules for .NET projects using Clean Architecture with DDD. Use when the project has complex business domain, multiple use cases, need to test business logic in isolation, or when the system is enterprise, e-commerce, ERP, CRM, or any rich domain. Do not use for simple CRUDs without logic — prefer Vertical Slice in that case. For implementation details, load the required `backend/dotnet/orms/ef-core/*/SKILL.md` leaf skill(s) or your chosen data access skill.

2026-07-013

hexagonal-architecture

Ezefeola/Temper-AI

Structure and rules for .NET projects using Hexagonal Architecture (Ports & Adapters). Use when the project has multiple input channels (API, CLI, message queue), need to test the domain in isolation, or when adapters change frequently. Do not use for simple CRUDs without logic — prefer Vertical Slice in that case. For implementation details, load the required `backend/dotnet/orms/ef-core/*/SKILL.md` leaf skill(s) or your chosen data access skill.

2026-07-013

onion-architecture

Ezefeola/Temper-AI

Structure and rules for .NET projects using Onion Architecture. Use when the project has a strong domain-centric focus with DDD, aggregate roots, and the Specification pattern. All dependencies point inward toward the domain core. Do not use for simple CRUDs without logic — prefer Vertical Slice in that case. For implementation details, load the required `backend/dotnet/orms/ef-core/*/SKILL.md` leaf skill(s) or your chosen data access skill.

2026-07-013

dbcontext-setup

Ezefeola/Temper-AI

Canonical DbContext setup and registration rules for EF Core. Load when creating or modifying DbContext classes or their DI wiring.

2026-07-013

dotnet-linq

Ezefeola/Temper-AI

Pure LINQ standards for .NET 10 projects. Covers language operators, query composition, projection patterns, filtering, grouping, and performance best practices over IEnumerable<T> and IQueryable<T>. Load when writing or reviewing LINQ expressions in any layer. DO NOT load expecting EF Core-specific methods (ToListAsync, AsNoTracking, Include, ExecuteUpdateAsync) — those belong to `backend/dotnet/orms/ef-core/query-best-practices/SKILL.md`.

2026-07-013

dbcontext-usage

Ezefeola/Temper-AI

Canonical rules for using AppDbContext DIRECTLY from application code (use cases / handlers) when the project's data-access pattern is Direct DbContext — no repositories, no UnitOfWork. Load when the chosen pattern is Direct DbContext and a use case reads or writes data. This is the counterpart to repository-usage; never load both for the same task.

2026-07-013

name	angular-material
description	Angular Material standards. Use ONLY when an Angular project already uses Angular Material or the task explicitly asks for Material components, theming, dialogs, tables, forms, overlays, navigation, or accessibility. Do not use for Blazor or Angular projects without Material.

Angular Material

Scope

Use this optional skill with angular when Angular Material is relevant.

Setup

Do not introduce Angular Material unless the task explicitly requires it.
Import only the Material modules or standalone component imports needed by the feature.
Keep global theme setup centralized.
Follow the project's density, typography, color, and dark-mode strategy.

Components

Use Material components for forms, dialogs, menus, tables, tabs, navigation, cards, snack bars, and overlays when they match the task.
Keep business logic out of dialog and table markup; delegate to services or component methods.
Use MatDialog for focused modal tasks and return typed results.
Use MatSnackBar for transient feedback and inline messages for persistent errors.

Forms

Use mat-form-field with accessible labels and validation messages.
Connect Material inputs to reactive or template-driven forms according to the project pattern.
Use mat-error for validation feedback.
Disable submit controls during pending requests.

Tables and Lists

Use Material table, paginator, and sort when the project uses them and the data set requires it.
Prefer server-side paging/filtering for large data.
Provide empty and loading states.
Keep row actions keyboard accessible.

Theming

Use Angular Material theming APIs and design tokens rather than one-off CSS overrides.
Keep component overrides minimal and scoped.
Avoid deep selectors unless there is no supported theming alternative.

Accessibility

Preserve Material-provided roles, focus traps, keyboard navigation, and aria behavior.
Add meaningful labels to icon buttons.
Ensure dialogs have titles and clear close/cancel behavior.
Do not use disabled elements when an explanatory validation or permission message is needed.