mcpField
M
maui-ui-best-practices

maui-ui-best-practices

github.com/rimblehelm设计与 UI041 次安装39 周前更新
代码仓库

关于 maui-ui-best-practices

.NET MAUI UI Best Practices Skill 为生成 .NET MAUI 界面的 Agent 提供 XAML 和 C# 开发规则,涵盖布局、样式、无障碍和性能。规则按类别存放在 rules/ 目录中,帮助生成跨设备、易维护的界面代码。

主要功能

  1. 01提供布局与结构规则
  2. 02指导样式和主题管理
  3. 03支持响应式界面布局
  4. 04涵盖无障碍和屏幕阅读器
  5. 05提供性能优化建议

适用场景

  1. 01生成 .NET MAUI 页面
  2. 02统一 XAML 样式与结构
  3. 03为不同设备调整界面
  4. 04改善界面可访问性和性能

安装

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

$npx skills add https://github.com/rimblehelm/.net-maui-skills --skill maui-ui-best-practices

安装后在 Claude Code 中输入/maui-ui-best-practices确认已加载。

包含的文件

除 SKILL.md 外,安装时一起下载的参考资料和脚本。

metadata.json
test-cases.json
rules/
accessibility-semantic-properties.md
controls-reusable-components.md
layout-avoid-deep-nesting.md
performance-use-compiled-bindings.md
styles-use-app-theme.md

详细介绍

.NET MAUI — UI 最佳实践技能

目的

本技能定义了 .NET MAUI 应用的推荐 UI/UX 模式、布局策略、样式约定、无障碍规则和性能指南。它确保生成的所有 UI 代码一致、易于维护、响应迅速,并符合现代跨平台设计预期。

目标是帮助 Agent 在 Android、iOS、Windows 和 MacCatalyst 上编写简洁、可扩展且无障碍的 XAML 和 C# UI 代码。

核心原则

  1. 简单优先 尽量减少布局嵌套,保持结构清晰,并采用可预测的模式。
  2. 一致性 将样式、颜色和字体集中在 Resources/Styles 中。
  3. 响应式 使用自适应布局(OnIdiom、OnPlatform、Grid、FlexLayout)支持所有设备。
  4. 无障碍 提供语义属性、适当的对比度和屏幕阅读器支持。
  5. 性能 优先使用已编译绑定、轻量级控件和高效的布局容器。

规则类别

  • 布局与结构
  • 样式与主题
  • 控件与组件
  • 无障碍
  • 性能

每条规则都存储在 rules/ 目录中,生成 UI 代码时应始终遵循。

Agent 使用指南

  • 生成 XAML 时,遵循布局和样式规则。
  • 创建新页面时,采用一致的结构:
    • 根布局应为 Grid 或 VerticalStackLayout。
    • 避免过深的布局嵌套。
    • 使用样式,而不是内联属性。
  • 生成控件时,优先使用 /Views/Controls 中可复用的组件。
  • 如果要求“让 UI 支持响应式布局”,应用设备类型和平台条件。
  • 如果要求“提升性能”,应用性能类别中的规则。

不在范围内

  • 业务逻辑(由其他技能涵盖)
  • 身份验证 UI 流程(由 maui-authentication 涵盖)
  • 部署或平台打包

评论

支持 Markdown