메뉴
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