angular-materiallisted

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.
sefatanam/ng-skills · ★ 1 · Web & Frontend · score 69

Install: claude install-skill sefatanam/ng-skills

# 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 `w