Installs with the open skills CLI

Angular Material,
agent-native.

A Claude Code skill that turns Angular Material + CDK into a queryable system — so Claude finds any component instantly and writes it the modern way: signals, native control flow, standalone, zoneless.

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

No npm publish · GitHub is the registry · works with Claude Code & other agents

What you get

One skill, the whole toolkit

A map and a house style for Material + CDK — everything Claude needs to build production UI, nothing that goes stale.

🔎

Find any component fast

A grep-able index of every Material component & CDK module — import path, selector, category, and a live-doc query per row.

Modern code by default

Signals (input(), model(), computed), native control flow (@if/@for), standalone + OnPush + zoneless.

🧩

Custom widgets from CDK

Recipes for overlay, portal, a11y, drag-drop, virtual scroll and responsive layout — build your own behavior-rich components.

🎨

Theme & override

mat.theme, palettes, typography, density, dark mode and component token overrides — straight from the official guides.

🛠️

Own it like shadcn

A wrapper recipe and copy-paste templates to turn Material into your own themeable, signal-based UI library.

📡

Always up to date

Exact API is fetched live via the angular-cli MCP and context7 — accurate across Material releases, never a static dump.

How it works

Hybrid by design

Static files are the map; the live MCP servers are the source of truth. Together they stay compact and correct.

🗺️ The map in this repo

  • Routing table — intent → the exact reference file to open.
  • Queryable indexes — components & CDK, grep by name or selector.
  • Component cards — Import · Selector · Inputs · Usage · Customize.
  • Patterns & templates — the signals-first house style.

📡 The source live via MCP

  • context7/websites/material_angular_dev, 3,600+ snippets.
  • angular-cli MCP — version-matched best practices & examples.
  • Exact API on demand — every input, token and selector, current.
  • Survives upgrades — no manual re-sync each release.
In practice

Install once, then just ask

The skills CLI discovers the skill from GitHub and drops it into Claude Code. From there, prompts become production Angular.

Ready in seconds

Give Claude the Angular Material superpower

Copy the command, run it, and start shipping accessible, modern Angular UI.

$ npx skills@latest add sefatanam/ng-skills -g