material-mdc

material-mdc is a skill for Claude Code, Codex from Acheron-AI/angular-upgrade-kit. It costs 86 tokens per session (1,074 once invoked), scanned A, original, MIT.

A reference guide for updating Angular Material components during the Angular 15 MDC migration. MDC is the newer implementation used by Angular Material, and Sass is the stylesheet language used for its themes.

In plain words
What is it for?
Use it when fixing Material styles, rewriting Sass themes from @import to @use, or resolving Angular Material migration problems involving form fields, dialogs, tables, and paginators.
Why use it?
The migration can change CSS class names, dialog, table, and paginator behavior, and the syntax used to define Sass themes. The guide explains the required code changes and compatibility checks.

Skill for Claude CodeCodex

Part of the angular-upgrade-kit plugin — 3 skills, 8 commands, 8 agents shipped together

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add skills/acheron-ai/angular-upgrade-kit/material-mdc
Any agent
npx skills add Acheron-AI/angular-upgrade-kit --skill material-mdc
Clone the repo
git clone --depth 1 https://github.com/Acheron-AI/angular-upgrade-kit

Made for: Claude Code, Codex.

Or install angular-upgrade-kit, the plugin that ships this one along with the rest of its 3 skills, 8 commands, 8 agents.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for material-mdc

README.md
[![agentmods](https://agentmods.dev/badge/skills/acheron-ai/angular-upgrade-kit/material-mdc.svg)](https://agentmods.dev/skills/acheron-ai/angular-upgrade-kit/material-mdc)
Your own site
<a href="https://agentmods.dev/skills/acheron-ai/angular-upgrade-kit/material-mdc"><img src="https://agentmods.dev/badge/skills/acheron-ai/angular-upgrade-kit/material-mdc.svg" alt="Measured on agentmods" height="20"></a>
Per session 86 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 1,074 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5 $0.00086 $0.01074
Opus 5 $0.00043 $0.00537
Sonnet 5 $0.00017 $0.00215
Haiku 4.5 $0.00009 $0.00107

Measured 4d ago against content hash 5133c1435730, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

material-mdc scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 4d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/material-mdc/SKILL.md · 99 lines

How it starts

The opening of the file, as written. The whole thing — 99 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Material MDC Migration Guide

Sass Theming Rewrite (v15)

When upgrading to Angular 15, all Material Sass theming must be rewritten from @import to @use syntax.

Detection

Scan for all *.scss files containing:

  • @import '@angular/material/theming'
  • @import '~@angular/material/theming'
  • @import '@angular/material'
  • mat-core(), mat-palette(), mat-light-theme(), angular-material-theme()

New @use Syntax Template

@use '@angular/material' as mat;

// Detect existing palette colors from the current theme definition.
// If palette cannot be detected, use Material defaults and add a TODO comment.
$app-theme: mat.define-light-theme((
  color: (
    primary: mat.define-palette(mat.$indigo-palette),
    accent: mat.define-palette(mat.$pink-palette),
    warn: mat.define-palette(mat.$red-palette),
  ),
  typography: mat.define-typography-config(),
  density: 0,
));

@include mat.all-component-themes($app-theme);

html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

Available Palette Names

mat.$red-palette, mat.$pink-palette, mat.$purple-palette, mat.$deep-purple-palette, mat.$indigo-palette, mat.$blue-palette, mat.$light-blue-palette, mat.$cyan-palette, mat.$teal-palette, mat.$green-palette, mat.$light-green-palette, mat.$lime-palette, mat.$yellow-palette, mat.$amber-palette, mat.$orange-palette, mat.$deep-orange-palette, mat.$brown-palette, mat.$grey-palette, mat.$blue-grey-palette

IMPORTANT: Keep all custom styles from the original theme files below the @include line.

CSS Class Mapping (old → new)

RULE: Only change CLASS selectors (.mat-X). Element selectors (mat-X) stay unchanged.

Old New
.mat-form-field .mat-mdc-form-field
.mat-input-element .mat-mdc-input-element
.mat-select .mat-mdc-select
.mat-option .mat-mdc-option
.mat-table .mat-mdc-table
.mat-row .mat-mdc-row
.mat-header-row .mat-mdc-header-row
.mat-cell .mat-mdc-cell
.mat-header-cell .mat-mdc-header-cell
.mat-card .mat-mdc-card
.mat-dialog-container .mat-mdc-dialog-container
.mat-chip .mat-mdc-chip
.mat-paginator .mat-mdc-paginator
.mat-menu-panel .mat-mdc-menu-panel
.mat-button .mat-mdc-button
.mat-icon-button .mat-mdc-icon-button
.mat-slide-toggle .mat-mdc-slide-toggle
.mat-tab-label .mat-mdc-tab
.mat-snack-bar-container .mat-mdc-snack-bar-container
.mat-tooltip .mat-mdc-tooltip
.mat-checkbox .mat-mdc-checkbox
.mat-radio-button .mat-mdc-radio-button
.mat-progress-bar .mat-mdc-progress-bar
.mat-progress-spinner .mat-mdc-progress-spinner

Read the full file on GitHub · 99 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 4d ago First seen · 99 lines · 86 tokens per session scan A 5133c1435730

Subscribe to this mod's changes

material-mdc is a skill published in the GitHub repository Acheron-AI/angular-upgrade-kit (1 stars, last pushed 22d ago), licensed MIT. It adds 86 tokens to every session and 1,074 once invoked, about $0.0004 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

Related

Other skills, from other repositories

flow-define

Multi-AI requirements scoping using available external providers (Double Diamond Define phase).

nyldn/claude-octopus · 0 tokens

prd

Generates a Product Requirements Document from a natural language app description. Asks clarifying questions, researches similar apps, defines scope, stack, architecture, and produces a structured PRD that Archon can decompose into a campaign.

SethGammon/Citadel · 48 tokens

common-workflow-writing

Rules for writing concise, token-efficient workflow and skill files. Prevents over-building that requires costly optimization passes. Use when creating or editing workflow files, SKILL.md files, or new skill definitions.

HoangNguyen0403/agent-skills-standard · 45 tokens

system-design-principles

Define module boundaries, dependency direction, data ownership, resilience, and distributed-system trade-offs. Use for architecture, service boundaries, coupling, scalability, or failure-cascade decisions; defer session facilitation to system-design-methodology.

HoangNguyen0403/agent-skills-standard · 51 tokens

agent-wiki-tasks

Discover task families across summaries and write per-family comparison pages with findings narrative. Updates wiki-twobatch/config.yaml task definitions and writes tasks/ task.md.

AgentToolkit/altk-evolve · 42 tokens

glossary-init

USE WHEN setting up a repo for AI-first work, when an agent hallucinates domain term meaning, or when user asks to bootstrap / extend the repo's domain glossary. Surfaces candidate terms by identifier frequency, asks the user for 1-sentence definitions, writes GLOSSARY.md at repo root. Idempotent — re-running adds new…

Filip-Podstavec/claude-leverage · 119 tokens