菜单
Implement Material Design 3 in Angular using Angular Material (@angular/material) with first-class M3 support. Covers M3 theming via design tokens, SCSS mixins, CLI schematics, and component usage. Use this when building M3-styled Angular applications.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Help choose an appropriate software/open-source license (e.g., MIT, Apache-2.0, GPL-3.0, AGPL-3.0, MPL-2.0, BSD) based on the user's goals and constraints; explain tradeoffs (permissive vs copyleft, patent grants, SaaS/network copyleft); check for dependency-driven constraints; and generate or update LICENSE files and short license headers. Use when a user asks what license to pick, whether licenses are compatible, or to add a LICENSE file to a repo.
Applies Material Design 3 Expressive dynamic color and theming principles to user interfaces. Use this when working on color palettes, themes, dynamic color systems, accessibility, or when the user asks to apply Material Design 3 color guidelines to a design or application.
Comprehensive guide to Material Design 3 components — from baseline Material You through M3 Expressive. Covers action, containment, communication, navigation, selection, and text input components with specifications, states, and implementation guidelines. Use this when building or styling UI components following Material Design 3 guidelines.
Master guide for Material Design 3 — covering the full specification from Material You foundations through M3 Expressive. Explains when to use each Material Design 3 skill subset (color, motion, typography, shape, layout, components, icons). Use this when starting a Material Design 3 project, when you need to understand which M3 skill to apply, or when the user asks about Material Design 3 in general.
Applies Material Design 3 Expressive motion and animation principles to create natural, intuitive, and engaging user experiences. Use this when implementing animations, transitions, micro-interactions, or when the user asks to apply Material Design 3 motion guidelines.
Applies Material Design 3 Expressive shape and containment principles including rounded corners, morphing shapes, and container design. Use this when working on component shapes, borders, containment, or when the user asks to apply Material Design 3 shape guidelines.
| name | m3-web-angular |
| description | Implement Material Design 3 in Angular using Angular Material (@angular/material) with first-class M3 support. Covers M3 theming via design tokens, SCSS mixins, CLI schematics, and component usage. Use this when building M3-styled Angular applications. |
| license | Apache-2.0 |
Angular Material (@angular/material) has first-class M3 support since v17.2+. The Angular team works closely with Google's Material team. Full M3 theming via design tokens, SCSS mixins, and CLI schematics.
Keywords: Material Design 3, M3, Angular, Angular Material, @angular/material, SCSS, design tokens, schematics
ng add @angular/material
ng generate @angular/material:m3-theme
@use '@angular/material' as mat;
@include mat.core();
$my-theme: mat.define-theme((
color: (
theme-type: light,
primary: #6750A4,
secondary: #625B71,
tertiary: #7D5260,
),
));
$dark-theme: mat.define-theme((
color: (
theme-type: dark,
primary: #6750A4,
secondary: #625B71,
tertiary: #7D5260,
),
));
:root {
@include mat.all-component-themes($my-theme);
color-scheme: light;
}
html.dark-theme {
@include mat.all-component-colors($dark-theme);
color-scheme: dark;
}
<button mat-raised-button color="primary">Filled</button>
<button mat-stroked-button>Outlined</button>
<button mat-button>Text</button>
<button mat-fab><mat-icon>add</mat-icon></button>
<mat-card appearance="raised">
<mat-card-header>
<mat-card-title>Title</mat-card-title>
</mat-card-header>
<mat-card-content>Content</mat-card-content>
<mat-card-actions>
<button mat-button>Action</button>
</mat-card-actions>
</mat-card>
<mat-form-field appearance="outline">
<mat-label>Email</mat-label>
<input matInput type="email" />
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Name</mat-label>
<input matInput />
</mat-form-field>
<mat-toolbar color="primary">
<span>My App</span>
</mat-toolbar>
<mat-tab-group>
<mat-tab label="Home">Home content</mat-tab>
<mat-tab label="Search">Search content</mat-tab>
</mat-tab-group>
<mat-sidenav-container>
<mat-sidenav mode="side" opened>Navigation</mat-sidenav>
<mat-sidenav-content>Main content</mat-sidenav-content>
</mat-sidenav-container>
<button mat-raised-button (click)="openDialog()">Open Dialog</button>
import { MatDialog } from '@angular/material/dialog';
constructor(private dialog: MatDialog) {}
openDialog() {
this.dialog.open(MyDialogComponent);
}
ng generate @angular/material:m3-themecolor="primary" binding for themingm3-theme.scss — Ready-to-use Angular Material M3 theme SCSS (orange palette, light + dark) included in this skill's directory. Copy into your project and customize.material-theme-builder skill — Generate a custom palette from any source color.$red-palette, $green-palette, $blue-palette, $yellow-palette, $cyan-palette, $magenta-palette, $orange-palette, $chartreuse-palette, $spring-green-palette, $azure-palette, $violet-palette, $rose-palette