mcpField
A
angular-material

angular-material

github.com/pluginagentmarketplace设计与 UI5262 次安装42 周前更新
代码仓库

关于 angular-material

面向 Angular 开发者的设计技能，指导使用 Angular Material 构建响应式、无障碍界面。内容涵盖组件、主题定制和 CDK 功能。

主要功能

  1. 01表单、导航与布局组件
  2. 02数据表格、分页与对话框
  3. 03自定义主题、色板与暗色模式
  4. 04使用 CDK 覆盖层、拖放和虚拟滚动
  5. 05响应式设计、无障碍与性能实践

适用场景

  1. 01搭建一致的 Angular Material 界面
  2. 02创建符合品牌的自定义主题
  3. 03实现无障碍表单和导航
  4. 04使用 CDK 构建拖放或虚拟滚动界面

安装

复制下面的命令，在终端中运行。

$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（组件开发工具包）
  • 覆盖层系统
  • 拖放
  • 虚拟滚动
  • 无障碍辅助工具
  • 创建自定义组件
最佳实践
  • 响应式设计模式
  • 无障碍合规（a11y）
  • 性能优化
  • 延迟加载 Material 模块

前置条件

  • Angular Core 基础知识
  • CSS/SCSS 基础
  • 组件架构

学习成果

  • 构建一致的 Material UI 界面
  • 创建自定义主题和品牌形象
  • 实现无障碍组件
  • 使用 CDK 实现高级功能

评论

支持 Markdown