angular-material について
angular-materialは、Material Design 3を実装するAngular公式コンポーネントライブラリAngular MaterialとCDKを扱うスキルです。既成コンポーネント、テーマ、アクセシビリティ機能、テスト資料を使うAngular開発者向けです。
主な機能
- 01Material Design 3のテーマ設定
- 02既成UIコンポーネント
- 03CDKの操作・レイアウト基盤
- 04アクセシビリティ機能
- 05コンポーネントテストハーネス
- 06Angular Material schematics
活用シーン
- 01フォーム、テーブル、ダイアログ、ナビゲーションの構築
- 02テーマの色、タイポグラフィ、密度の設定
- 03キーボードやフォーカスのアクセシビリティ対応
- 04ハーネスを使ったコンポーネントテスト
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/angular-materialを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
GENERATION.mdreferences/advanced-custom-form-field.mdadvanced-theme-customization.mdreferences/cdk/cdk-a11y.mdcdk-accordion.mdcdk-bidi.mdcdk-clipboard.mdcdk-coercion.mdcdk-collections.mdcdk-dialog.mdcdk-drag-drop.mdcdk-keycodes.mdcdk-layout.mdcdk-listbox.mdcdk-menu.mdcdk-observers.mdcdk-overlay.mdcdk-platform.mdcdk-portal.mdcdk-scrolling.mdcdk-stepper.mdcdk-table.mdcdk-text-field.mdcdk-tree.mdreferences/components/component-autocomplete.mdcomponent-badge.mdcomponent-bottom-sheet.mdcomponent-buttons.mdcomponent-card.mdcomponent-chips.md詳細
このスキルは Angular Material v21.x（v21.2.0-next.2）に基づいており、2026-01-31 に生成されました。
Angular Material は、Material Design 3（M3）を実装した Angular の公式 UI コンポーネントライブラリです。アクセシビリティに配慮した、すぐに使える包括的なコンポーネントセットと、カスタムコンポーネントの構築に使用する Component Dev Kit（CDK）を提供します。
使用する場面
次のような場合に、このスキルを使用してください。
- Angular Material コンポーネント（ボタン、フォーム、ダイアログ、テーブルなど）を使用するとき
- Material Design 3（M3）のカラーパレット、タイポグラフィ、密度を使ってテーマを設定するとき
- mat-form-field、入力、セレクト、オートコンプリート、日付選択を扱うとき
- 並べ替え、ページネーション、フィルタリングを備えたデータテーブルを実装するとき
- ダイアログ、ボトムシート、スナックバー、ツールチップを作成するとき
- sidenav、メニュー、タブ、ステッパーを使ってナビゲーションを構築するとき
- CDK のプリミティブ（オーバーレイ、ポータル、ドラッグ＆ドロップ、仮想スクロール）を使用するとき
- CDK の a11y ユーティリティを使ってアクセシブルなコンポーネントを実装するとき
- mat-form-field と連携するカスタムフォームフィールドコントロールを作成するとき
- 信頼性の高いテストのためにコンポーネントテストハーネスを使用するとき
- Angular Material schematics を使ってコンポーネントをスキャフォールディングするとき
次のような場合は、このスキルを使用しないでください。
- 別の UI ライブラリ（PrimeNG、ngx-bootstrap など）を使用するとき
- Material Design を使わずに、完全にカスタムな UI を構築するとき
- Angular Aria のヘッドレスプリミティブを扱うとき（代わりに angular-aria スキルを使用してください）
主なリファレンス
| トピック | 説明 | リファレンス |
|---|---|---|
| テーマ設定 | カラーパレット、タイポグラフィ、密度、CSS 変数を備えた M3 テーマシステム | core-theming |
| Schematics | コンポーネントのスキャフォールディングとテーマの生成に使用する Angular CLI schematics | core-schematics |
| コンポーネントハーネス | 信頼性と保守性に優れたコンポーネントテストのためのテストハーネス | core-harnesses |
コンポーネント
ボタンとインジケーター
| トピック | 説明 | リファレンス |
|---|---|---|
| ボタン | テキスト、塗りつぶし、FAB、アイコンボタン、ボタントグル | component-buttons |
| Badge | 要素に付加する小さなステータス表示 | component-badge |
| Icon | フォントと SVG に対応したベクターアイコンの表示 | component-icon |
| Progress | プログレスバーとスピナーのインジケーター | component-progress |
フォームコントロール
| トピック | 説明 | リファレンス |
|---|---|---|
| Form Field | ラベル、ヒント、エラーを備えたフォームフィールドのラッパー | component-form-field |
| Input | mat-form-field と組み合わせるネイティブの入力欄とテキストエリア | component-input |
| Select | 単一選択と複数選択に対応したドロップダウンセレクト | component-select |
| Autocomplete | 候補をドロップダウン表示するテキスト入力欄 | component-autocomplete |
| Chips | 選択、フィルタリング、タグ入力に使用するチップ | component-chips |
| Form Controls | チェックボックス、ラジオボタン、スライドトグル、スライダー | component-form-controls |
| Datepicker | 日付と日付範囲の選択 | component-datepicker |
| Timepicker | ドロップダウンのオプションから時刻を選択 | component-timepicker |
レイアウト
| トピック | 説明 | リファレンス |
|---|---|---|
| カード | テキスト、画像、アクション用のコンテンツコンテナー | component-card |
| 区切り線 | コンテンツを視覚的に分ける線 | component-divider |
| 展開 | 展開可能なパネルとアコーディオン | component-expansion |
| グリッドリスト | タイル用の二次元グリッドレイアウト | component-grid-list |
| リスト | 項目、ナビゲーション、アクション、選択用のリスト | component-list |
| ツリー | フラットツリー／ネストされたツリーによる階層データの表示 | component-tree |
ナビゲーション
| トピック | 説明 | リファレンス |
|---|---|---|
| ナビゲーション | サイドナビ、メニュー、ツールバー、タブ | component-navigation |
| ステッパー | ステップで構成されるウィザード形式のワークフロー | component-stepper |
テーブル
| トピック | 説明 | リファレンス |
|---|---|---|
| テーブル | 機能を備えたマテリアルデザインのデータテーブル | component-table |
| 並べ替え | 並べ替え可能な列ヘッダー | component-sort |
| ページネーター | ページ分割されたデータ用のページネーションコントロール | component-paginator |
ポップアップとモーダル
| トピック | 説明 | リファレンス |
|---|---|---|
| ダイアログ | データを共有するモーダルダイアログ | component-dialog |
| ボトムシート | 画面下部から表示されるモーダルパネル | component-bottom-sheet |
| スナックバー | 簡潔な通知メッセージ | component-snackbar |
| ツールチップ | ホバー／フォーカス時に表示されるテキストラベル | component-tooltip |
CDK（コンポーネント開発キット）
オーバーレイと位置調整
| トピック | 説明 | リファレンス |
|---|---|---|
| オーバーレイ | 位置指定の戦略を備えたフローティングパネル | cdk-overlay |
| ポータル | 動的なコンテンツのレンダリング | cdk-portal |
| ダイアログ | スタイルを持たないモーダルダイアログの基盤 | cdk-dialog |
アクセシビリティ
| トピック | 説明 | リファレンス |
|---|---|---|
| アクセシビリティ | フォーカス管理、キーボードナビゲーション、ライブアナウンサー | cdk-a11y |
データとコレクション
| トピック | 説明 | リファレンス |
|---|---|---|
| テーブル | DataSourceパターンを備えた基盤となるデータテーブル | cdk-table |
| ツリー | 階層ツリー表示の基盤 | cdk-tree |
| コレクション | 選択状態を管理するSelectionModel | cdk-collections |
| 仮想スクロール | 大規模なリストを効率的にレンダリング | cdk-scrolling |
レイアウトとレスポンシブ対応
| トピック | 説明 | リファレンス |
|---|---|---|
| レイアウト | BreakpointObserverとMediaMatcher | cdk-layout |
| 双方向テキスト | 双方向（LTR/RTL）の処理 | cdk-bidi |
インタラクション
| トピック | 説明 | リファレンス |
|---|---|---|
| ドラッグ＆ドロップ | リストの並べ替えと項目の移動 | cdk-drag-drop |
| クリップボード | テキストをシステムのクリップボードにコピー | cdk-clipboard |
| リストボックス | アクセシブルなカスタムリストボックスコントロール | cdk-listbox |
| メニュー | アクセシブルなカスタムメニューとメニューバー | cdk-menu |
コンポーネントの基盤
| トピック | 説明 | リファレンス |
|---|---|---|
| アコーディオン | 展開可能なパネルグループの基盤 | cdk-accordion |
| ステッパー | ウィザード形式のワークフローの基盤 | cdk-stepper |
ユーティリティ
| トピック | 説明 | リファレンス |
|---|---|---|
| テキストフィールド | テキストエリアの自動リサイズとオートフィルの検出 | cdk-text-field |
| プラットフォーム | ブラウザーとプラットフォームの検出 | cdk-platform |
| オブザーバー | コンテンツの変更監視 | cdk-observers |
| 型強制 | 入力型を強制するユーティリティ | cdk-coercion |
| キーコード | キーボードのキーコード定数 | cdk-keycodes |
上級者向け
| トピック | 説明 | リファレンス |
|---|---|---|
| カスタムフォームフィールドコントロール | カスタム mat-form-field コントロールの作成 | advanced-custom-form-field |
| テーマのカスタマイズ | カスタムコンポーネントでの CSS 変数とユーティリティクラス | advanced-theme-customization |
コメント
Markdown 対応