Skills
Teach your AI coding agent how Angular Material theming and Tailwind CSS work together
Agent Skills are folders of instructions that AI coding agents load on demand, when a task needs them. Angular Material Blocks ships an Angular Material × Tailwind CSS skill that teaches your agent how the two libraries interact, so the code it writes looks right the first time.
The rules files cover Angular Material's APIs. The skill covers what goes wrong when Material and Tailwind meet on the same page, all of it collected while building and reviewing hundreds of blocks:
- Why a Tailwind class does nothing on a Material component, and where the style should go instead: a wrapper, the overrides API, or the theme
- Giving Material components a brand or accent colour with
mat.<component>-overrides, including ripple and state-layer colours that behave like Material's defaults - Dark mode that actually applies, with one switch shared by Material's
color-schemeand Tailwind'sdark:variant, pluslight-dark()in component styles - Tailwind colour variables that resolve to nothing from SCSS, and how to make overrides safe to copy between projects
- Accessible accent shades, with contrast ratios measured for every Tailwind palette shade as a label, text or icon colour
- Layout fixes for form fields next to buttons, cards, chips, dividers, lists, toolbars and icons
- A complete list of override tokens, with their default values, generated from Angular Material 22, so your agent never guesses a token name
Get the skill
The skill is part of All Access. Authenticate the CLI once:
npx @ngm-dev/cli authThen add the skill to the folder your agent reads skills from.
Claude Code:
npx @ngm-dev/cli add skills/angular-material-tailwind --paths skills=./.claude/skillsAgents that read .agents/skills:
npx @ngm-dev/cli add skills/angular-material-tailwind --paths skills=./.agents/skillsFor other agents, point --paths skills= at the skills folder named in your agent's documentation.
What's inside
| File | Purpose |
|---|---|
SKILL.md |
The core rules: where each kind of style belongs, overrides, dark mode, contrast |
setup.md |
Global setup that joins the Material theme with Tailwind, and how to audit it |
recipes.md |
Working code for accent buttons, fields, cards, toolbars, lists, icons and more |
troubleshooting.md |
Symptom → cause → fix for silent Material × Tailwind failures |
override-tokens.md |
Every mat.<component>-overrides key with its default value |
contrast.md |
WCAG contrast ratios for every Tailwind palette shade |
Usage
Agents load the skill when a task needs it. You can also name it in a prompt:
- "Use the angular-material-tailwind skill to restyle this pricing section in our teal brand colour."
- "My
bg-gray-900onmat-toolbardoes nothing. Fix it the right way." - "Review this component's styles against the angular-material-tailwind skill."
Share Your Thoughts
Have suggestions for the skill, or found a case it doesn't cover? Contact us, we'd love to hear from you.
Angular Material Dev UI (or Angular Material Blocks) is one place stop for developers to explore components and blocks for their Angular Material and Tailwind CSS based applications.
Find us on X (Twitter), LinkedIn, Instagram & Threads