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.
- 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".
- 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).
- 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 CLI
(GitHub-as-registry):
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).
1---2name: angular-material3description: 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.4---56# Angular Material + CDK skill78A **map + conventions** layer over `material.angular.dev`. The static files here9tell you *where things are* and *how to write them the modern way*. The exact,10current API (every input/output/token, which changes each release) comes from11**live MCP lookups** — never guess volatile API from memory.1213## When to use1415- Using or configuring any Angular **Material component** (button, form-field,16 dialog, table, …).17- Building a **custom component** from **CDK** primitives (overlay, portal,18 a11y, drag-drop, virtual scroll, layout).19- **Theming**: `mat.theme`, palettes, typography, density, dark mode, token20 overrides.21- **shadcn-style** ownership: wrapping a Material component into your own22 themeable, signal-based local component.2324## The one rule: MCP-first for exact API2526The static cards below are a **map**, not the source of truth. For any exact or27current detail (import path, input name, token name, appearance value), **look28it up live** — Material's API shifts between releases.29301. **context7** — library id `/websites/material_angular_dev`31 (`resolve-library-id` → `query-docs`). 3600+ snippets, High reputation.32 Query one concept at a time, e.g. `"MatFormField appearance outline33 subscriptSizing"`, `"cdkDrag cdkDropList reorder list"`.342. **angular-cli MCP** (this repo's `.mcp.json` already wires it):35 - `list_projects` → get `workspacePath` + `frameworkVersion` first, inside a36 real project.37 - `get_best_practices` (pass `workspacePath`) → version-matched rules. Load38 it before writing any Angular code.39 - `search_documentation` → conceptual answers from angular.dev.40 - `find_examples` → modern, copy-ready snippets (signals, control flow).413. Fall back to WebFetch of `material.angular.dev/...` only if MCP is42 unavailable — note its pages are client-rendered, so context7 is more43 reliable.4445> When a card and a live lookup disagree, **the live lookup wins.** Prefer46> updating the card.4748## Routing table — intent → file4950| I want to… | Go to |51| --- | --- |52| Find a component's import/selector/category fast | `references/components-index.md` |53| See usage + customization for a component | `references/components/<category>.md` |54| Find a CDK primitive to build with | `references/cdk-index.md` |55| Build a custom widget from CDK | `references/cdk/custom-components.md` |56| Set up / configure the theme | `references/theming/theme-setup.md` |57| Override component tokens / shadcn-style theming | `references/theming/overrides-and-shadcn.md` |58| Light/dark mode | `references/theming/dark-mode.md` |59| Signals + control-flow patterns (the house style) | `references/patterns/signals-and-control-flow.md` |60| Wrap a Material component into a local "owned" one | `references/patterns/component-recipe.md` |61| Install Material / add a component end-to-end | `references/workflows/add-a-component.md` |62| Exact MCP queries to run | `references/workflows/mcp-lookup.md` |63| Copy-paste starting points | `templates/` |6465## Component categories (material.angular.dev/components/categories)6667- **Form Controls** → `references/components/form-controls.md`68- **Buttons & Indicators** → `references/components/buttons-indicators.md`69- **Navigation** → `references/components/navigation.md`70- **Layout** → `references/components/layout.md`71- **Popups & Modals** → `references/components/popups-modals.md`72- **Data table** → `references/components/data-table.md`7374## Global conventions (apply to every snippet you emit)7576Source of truth: angular-cli `get_best_practices`. Baseline:7778- **Standalone by default** — never write `standalone: true` (it's the default79 in v20+) and never use `NgModule`. Add imports to the component's `imports`.80- **Signals for state**: `input()` / `input.required()`, `output()`,81 `model()` for two-way, `computed()` for derived, `signal()` for local. Never82 `mutate` — use `set` / `update`.83- **Native control flow** in templates: `@if`, `@for (x of xs; track x.id)`,84 `@switch`. Never `*ngIf` / `*ngFor` / `*ngSwitch`.85- **`changeDetection: ChangeDetectionStrategy.OnPush`** on every component;86 assume **zoneless** (`provideZonelessChangeDetection()`).87- **`inject()`** over constructor DI; services `providedIn: 'root'`.88- **Host bindings** go in the `host: {}` object — never `@HostBinding` /89 `@HostListener`.90- **`class` / `style` bindings**, never `ngClass` / `ngStyle`.91- **Reactive forms** over template-driven; type your `FormGroup`.92- **A11y**: pass AXE, WCAG AA (focus, contrast, ARIA). Material components ship93 accessible — keep it that way in wrappers.94- **`NgOptimizedImage`** for static images (not base64).9596See `references/patterns/signals-and-control-flow.md` for worked examples.9798## Install this skill99100Distributed via the [`skills`](https://github.com/vercel-labs/skills) CLI101(GitHub-as-registry):102103```bash104npx skills@latest add sefatanam/ng-skills -g -a claude-code -y105```106107`-g` installs to your user skills dir; drop it to install into the current108project. Run `/reload-skills` to load it in the current session.109110Prereqs in the target Angular app: `ng add @angular/material` (installs111`@angular/material` + `@angular/cdk`, wires a theme and Roboto/Material icons).
sefatanam