# Angular Material

> Build, customize, and theme Angular Material + CDK UIs the modern way — signal primitives (input()/output()/model()/computed), native control flow (@if/@for/@switch), standalone + OnPush + zoneless. Use when adding/using any Material component, building custom widgets from CDK primitives, overriding the Material theme, or "owning" components locally like shadcn. Queryable component index + reference cards; delegates exact current API to the angular-cli MCP and context7.

- Skill: `sefatanam/angular-material` (Agent Skill, multi-file: 20 files)
- Install (CLI): `npx skillmds@latest add sefatanam/angular-material`
- Raw SKILL.md: https://api.skillmd.com/api/skills/sefatanam/angular-material/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: sefatanam (https://skillmd.com/u/sefatanam)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/sefatanam/angular-material

---


# Angular Material + CDK skill

A **map + conventions** layer over `material.angular.dev`. The static files here
tell you *where things are* and *how to write them the modern way*. The exact,
current API (every input/output/token, which changes each release) comes from
**live MCP lookups** — never guess volatile API from memory.

## When to use

- Using or configuring any Angular **Material component** (button, form-field,
  dialog, table, …).
- Building a **custom component** from **CDK** primitives (overlay, portal,
  a11y, drag-drop, virtual scroll, layout).
- **Theming**: `mat.theme`, palettes, typography, density, dark mode, token
  overrides.
- **shadcn-style** ownership: wrapping a Material component into your own
  themeable, signal-based local component.

## The one rule: MCP-first for exact API

The static cards below are a **map**, not the source of truth. For any exact or
current detail (import path, input name, token name, appearance value), **look
it up live** — Material's API shifts between releases.

1. **context7** — library id `/websites/material_angular_dev`
   (`resolve-library-id` → `query-docs`). 3600+ snippets, High reputation.
   Query one concept at a time, e.g. `"MatFormField appearance outline
   subscriptSizing"`, `"cdkDrag cdkDropList reorder list"`.
2. **angular-cli MCP** (this repo's `.mcp.json` already wires it):
   - `list_projects` → get `workspacePath` + `frameworkVersion` first, inside a
     real project.
   - `get_best_practices` (pass `workspacePath`) → version-matched rules. Load
     it before writing any Angular code.
   - `search_documentation` → conceptual answers from angular.dev.
   - `find_examples` → modern, copy-ready snippets (signals, control flow).
3. Fall back to WebFetch of `material.angular.dev/...` only if MCP is
   unavailable — note its pages are client-rendered, so context7 is more
   reliable.

> When a card and a live lookup disagree, **the live lookup wins.** Prefer
> updating the card.

## Routing table — intent → file

| I want to… | Go to |
| --- | --- |
| Find a component's import/selector/category fast | `references/components-index.md` |
| See usage + customization for a component | `references/components/<category>.md` |
| Find a CDK primitive to build with | `references/cdk-index.md` |
| Build a custom widget from CDK | `references/cdk/custom-components.md` |
| Set up / configure the theme | `references/theming/theme-setup.md` |
| Override component tokens / shadcn-style theming | `references/theming/overrides-and-shadcn.md` |
| Light/dark mode | `references/theming/dark-mode.md` |
| Signals + control-flow patterns (the house style) | `references/patterns/signals-and-control-flow.md` |
| Wrap a Material component into a local "owned" one | `references/patterns/component-recipe.md` |
| Install Material / add a component end-to-end | `references/workflows/add-a-component.md` |
| Exact MCP queries to run | `references/workflows/mcp-lookup.md` |
| Copy-paste starting points | `templates/` |

## Component categories (material.angular.dev/components/categories)

- **Form Controls** → `references/components/form-controls.md`
- **Buttons & Indicators** → `references/components/buttons-indicators.md`
- **Navigation** → `references/components/navigation.md`
- **Layout** → `references/components/layout.md`
- **Popups & Modals** → `references/components/popups-modals.md`
- **Data table** → `references/components/data-table.md`

## Global conventions (apply to every snippet you emit)

Source of truth: angular-cli `get_best_practices`. Baseline:

- **Standalone by default** — never write `standalone: true` (it's the default
  in v20+) and never use `NgModule`. Add imports to the component's `imports`.
- **Signals for state**: `input()` / `input.required()`, `output()`,
  `model()` for two-way, `computed()` for derived, `signal()` for local. Never
  `mutate` — use `set` / `update`.
- **Native control flow** in templates: `@if`, `@for (x of xs; track x.id)`,
  `@switch`. Never `*ngIf` / `*ngFor` / `*ngSwitch`.
- **`changeDetection: ChangeDetectionStrategy.OnPush`** on every component;
  assume **zoneless** (`provideZonelessChangeDetection()`).
- **`inject()`** over constructor DI; services `providedIn: 'root'`.
- **Host bindings** go in the `host: {}` object — never `@HostBinding` /
  `@HostListener`.
- **`class` / `style` bindings**, never `ngClass` / `ngStyle`.
- **Reactive forms** over template-driven; type your `FormGroup`.
- **A11y**: pass AXE, WCAG AA (focus, contrast, ARIA). Material components ship
  accessible — keep it that way in wrappers.
- **`NgOptimizedImage`** for static images (not base64).

See `references/patterns/signals-and-control-flow.md` for worked examples.

## Install this skill

Distributed via the [`skills`](https://github.com/vercel-labs/skills) CLI
(GitHub-as-registry):

```bash
npx skills@latest add sefatanam/ng-skills -g -a claude-code -y
```

`-g` installs to your user skills dir; drop it to install into the current
project. Run `/reload-skills` to load it in the current session.

Prereqs in the target Angular app: `ng add @angular/material` (installs
`@angular/material` + `@angular/cdk`, wires a theme and Roboto/Material icons).