关于 maui-ui-best-practices
.NET MAUI UI Best Practices Skill 为生成 .NET MAUI 界面的 Agent 提供 XAML 和 C# 开发规则,涵盖布局、样式、无障碍和性能。规则按类别存放在 rules/ 目录中,帮助生成跨设备、易维护的界面代码。
主要功能
- 01提供布局与结构规则
- 02指导样式和主题管理
- 03支持响应式界面布局
- 04涵盖无障碍和屏幕阅读器
- 05提供性能优化建议
适用场景
- 01生成 .NET MAUI 页面
- 02统一 XAML 样式与结构
- 03为不同设备调整界面
- 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.jsontest-cases.jsonrules/accessibility-semantic-properties.mdcontrols-reusable-components.mdlayout-avoid-deep-nesting.mdperformance-use-compiled-bindings.mdstyles-use-app-theme.md详细介绍
.NET MAUI — UI 最佳实践技能
目的
本技能定义了 .NET MAUI 应用的推荐 UI/UX 模式、布局策略、样式约定、无障碍规则和性能指南。它确保生成的所有 UI 代码一致、易于维护、响应迅速,并符合现代跨平台设计预期。
目标是帮助 Agent 在 Android、iOS、Windows 和 MacCatalyst 上编写简洁、可扩展且无障碍的 XAML 和 C# UI 代码。
核心原则
- 简单优先 尽量减少布局嵌套,保持结构清晰,并采用可预测的模式。
- 一致性
将样式、颜色和字体集中在
Resources/Styles中。 - 响应式
使用自适应布局(
OnIdiom、OnPlatform、Grid、FlexLayout)支持所有设备。 - 无障碍 提供语义属性、适当的对比度和屏幕阅读器支持。
- 性能 优先使用已编译绑定、轻量级控件和高效的布局容器。
规则类别
- 布局与结构
- 样式与主题
- 控件与组件
- 无障碍
- 性能
每条规则都存储在 rules/ 目录中,生成 UI 代码时应始终遵循。
Agent 使用指南
- 生成 XAML 时,遵循布局和样式规则。
- 创建新页面时,采用一致的结构:
- 根布局应为
Grid或VerticalStackLayout。 - 避免过深的布局嵌套。
- 使用样式,而不是内联属性。
- 根布局应为
- 生成控件时,优先使用
/Views/Controls中可复用的组件。 - 如果要求“让 UI 支持响应式布局”,应用设备类型和平台条件。
- 如果要求“提升性能”,应用性能类别中的规则。
不在范围内
- 业务逻辑(由其他技能涵盖)
- 身份验证 UI 流程(由
maui-authentication涵盖) - 部署或平台打包
评论
支持 Markdown