angular-material-developer
starsforks
How to install angular-material-developer?
mofirojean/angular-ui-skills/angular-material-developer
$npx -y skills add mofirojean/angular-ui-skills --skill angular-material-developerGenerates Angular Material code and guidance for Angular projects using @angular/material with the Material 3 (M3) theming system. Covers installation, Sass-based theming via mat.theme() and the prebuilt palettes, density and typography customisation, component usage across a
SKILL.md
| 1 | # Angular Material Developer Guidelines |
| 2 | |
| 3 | > **Pairs with `angular-developer`** , that skill provides Angular fundamentals (signals, DI, routing, forms, SSR, accessibility). This skill focuses on Angular Material specifics. Install both for the best experience. |
| 4 | |
| 5 | ## Compatibility |
| 6 | |
| 7 | - **Tracks:** `@angular/material@22.0.2` (Angular v22 stable, released 2026-06-03), paired with `@angular/cdk@22.0.2`. The v21-aligned LTS remains available at `21.2.14` for legacy projects. |
| 8 | - **Works for:** Material v19 → v22 projects (M3 theming system landed in v19; older majors used M2 with the now-legacy `mat.define-light-theme` / `mat.define-dark-theme` API). |
| 9 | - **Angular:** v19 or newer required. v22 requires Node 22 or 26 and TypeScript 6. The skill assumes standalone components, control flow (`@if` / `@for`), and signal-based APIs. |
| 10 | - **Sass:** required for theming. The build pipeline must support `.scss` (Angular CLI does by default). Standalone CSS-only theming is not supported by Material's theming engine. |
| 11 | - **Not supported:** Material v18 and below (M2-only with `mat.define-*-theme()` API), Angular v18 or below (NgModule patterns + older animations API). |
| 12 | |
| 13 | ### v22 breaking changes (from v21) |
| 14 | |
| 15 | The v21 → v22 jump has real API drift, not just an Angular version bump. Watch for: |
| 16 | |
| 17 | - **Combobox:** legacy combobox and autocomplete promoted / removed. `SimpleCombobox` promoted to `Combobox` with all `simpleCombobox*` symbols renamed to `combobox*`. |
| 18 | - **List:** `MatListOption.checkboxPosition` removed, use `togglePosition` instead. `MatListOptionCheckboxPosition` renamed to `MatListOptionTogglePosition`. |
| 19 | - **CDK:** `injector` parameter is now required on `ConfigurableFocusTrap` and `FocusTrap` constructors. `ConfigurableFocusTrapFactory.create` boolean parameter replaced with a config object. `DropListRef.drop` event parameter is now required. `ContextMenuTracker` renamed to `MenuTracker`. Removed: `CDK_DESCRIBEDBY_HOST_ATTRIBUTE`, `CDK_DESCRIBEDBY_ID_PREFIX`, `MESSAGES_CONTAINER_ID`. |
| 20 | - **Multiple components:** input/model rename from `values` to `value` across Combobox, Listbox, Tree, Menu, Toolbar, Select. Constructors with rest arguments removed (affects code that extends Material or CDK components). |
| 21 | - **Dialog / Overlay:** `ArrowViewState` and `ArrowViewStateTransition` types removed. |
| 22 | |
| 23 | Most of these have automatic `ng update` migrations. When in doubt, run `ng update @angular/material` and let the schematic do the work before hand-editing. |
| 24 | |
| 25 | ### v22 new features worth knowing |
| 26 | |
| 27 | - **Signal Forms stable** (was experimental in v21). Angular's signal-based form API is now safe to use in production. `mat-form-field` composes with both `ReactiveFormsModule` and Signal Forms. |
| 28 | - **Angular Aria stable** (was preview). New accessibility primitives ship in the framework, which reduces the need to reach for CDK's a11y module for some patterns. |
| 29 | - **Button progress indicator** support inside `<button>` component. |
| 30 | - **Portal directives** support on `ComponentPortal`. |
| 31 | - **Separate tab animation durations** (per-tab enter/exit timing). |
| 32 | |
| 33 | |
| 34 | 1. **Check the project's Material version before answering.** Material's M3 theming engine was introduced in v19 (`mat.theme()` mixin replacing `mat.define-light-theme` and `mat.define-dark-theme`). Code generated against M3 will silently break on M2 projects. `package.json` is the source of truth. |
| 35 | |
| 36 | 2. **Detect the theming generation in `styles.scss`:** |
| 37 | - If you see `@include mat.theme((...))` → **M3** (v19+, default). Use `mat.theme()`, Material's prebuilt palettes, and CSS variable overrides. |
| 38 | - If you see `mat.define-light-theme(...)` or `mat.define-dark-theme(...)` plus `@include mat.all-component-themes($theme)` → **M2** (legacy). Recommend migrating, see [migration.md](references/migration.md). |
| 39 | - The two systems compile and behave very differently. See [theming.md](references/theming.md). |
| 40 | |
| 41 | 3. **Components are standalone since v15.** Always import the standalone class (e.g. `MatButton` from `'@angular/material/button'`), not the legacy `MatButtonModule`. The modules still re-export everything for backwa |
People who liked this also viewed
6 picksType
- hyperframes-cliUse the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes, single or batch render, publish, cloud, SkillsJul 2026
- request-refactor-planSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
- analyze-projectRigor Analyze / Rigor Audit read-only skill for deep learning research repositories. Use when the user wants to read and understand a repository, inspect model structure and training or inference entrSkillsMay 2026
- explore-codeRigor Improve implementation leaf skill for auditable candidate implementation in deep learning research repositories. Use when the researcher explicitly authorizes exploratory work on an isolated braSkillsMay 2026
- ubiquitous-languageSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
- scaffold-exercisesSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
