mcpField
A
angular-material

angular-material

github.com/pluginagentmarketplaceデザイン・UI5262 回インストール42 週間前に更新
リポジトリ

angular-material について

Angular Material でレスポンシブかつアクセシブルな UI を構築するための、Angular 開発者向けスキルです。コンポーネント、テーマ設定、CDK の機能を扱います。

主な機能

  1. 01フォーム、ナビゲーション、レイアウト用コンポーネント
  2. 02データテーブル、ページネーション、ダイアログ
  3. 03カスタムテーマ、カラーパレット、ダークモード
  4. 04CDK のオーバーレイ、ドラッグ＆ドロップ、仮想スクロール
  5. 05レスポンシブ設計、アクセシビリティ、性能の実践

活用シーン

  1. 01一貫性のある Angular Material の UI を構築する
  2. 02ブランドに合わせたテーマを作成する
  3. 03アクセシブルなフォームやナビゲーションを実装する
  4. 04CDK でドラッグ＆ドロップや仮想スクロールを使う

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/pluginagentmarketplace/custom-plugin-angular --skill angular-material

インストール後、Claude Code で/angular-materialを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

assets/
config.yaml
schema.json
references/
GUIDE.md
PATTERNS.md
scripts/
validate.py

詳細

Angular Material スキル

概要

Angular Material コンポーネントライブラリを使用して、カスタムテーマとレスポンシブなレイアウトを備えた、美しくアクセシブルな Angular アプリケーションを構築します。

対象トピック

コンポーネントライブラリ
  • フォームコントロール（入力欄、セレクト、チェックボックス）
  • ナビゲーション（ツールバー、サイドナビ、メニュー）
  • レイアウト（カード、リスト、グリッド）
  • データテーブルとページネーション
  • ダイアログとスナックバー
テーマ設定
  • カスタムテーマの作成
  • カラーパレットとタイポグラフィ
  • ダークモードの実装
  • コンポーネントのカスタマイズ
  • CSS 変数の統合
CDK（Component Dev Kit）
  • オーバーレイシステム
  • ドラッグ＆ドロップ
  • 仮想スクロール
  • アクセシビリティユーティリティ
  • カスタムコンポーネントの作成
ベストプラクティス
  • レスポンシブデザインのパターン
  • アクセシビリティへの準拠（a11y）
  • パフォーマンスの最適化
  • Material モジュールの遅延読み込み

前提条件

  • Angular Core の基礎知識
  • CSS/SCSS の基礎知識
  • コンポーネントアーキテクチャ

学習成果

  • 一貫性のある Material UI インターフェースを構築する
  • カスタムテーマとブランディングを作成する
  • アクセシブルなコンポーネントを実装する
  • 高度な機能に CDK を活用する

コメント

Markdown 対応