maui-ui-best-practices

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

.NET MAUI — UI Best Practices Skill

.NET MAUI — UI最佳实践技能

Purpose

目的

This skill defines the recommended UI/UX patterns, layout strategies, styling conventions, accessibility rules, and performance guidelines for .NET MAUI applications. It ensures that all generated UI code is consistent, maintainable, responsive, and aligned with modern cross-platform design expectations.

The goal is to help agents produce clean, scalable, and accessible XAML and C# UI code across Android, iOS, Windows, and MacCatalyst.

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

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

Core Principles

核心原则

Simplicity first Use minimal layout nesting, clear structure, and predictable patterns.
Consistency Centralize styles, colors, and fonts in
```
Resources/Styles
```
.
Responsiveness Use adaptive layouts (
```
OnIdiom
```
,
```
OnPlatform
```
,
```
Grid
```
,
```
FlexLayout
```
) to support all devices.
Accessibility Provide semantic properties, proper contrast, and screen reader support.
Performance Prefer compiled bindings, lightweight controls, and efficient layout containers.

简洁优先 使用最少的布局嵌套、清晰的结构和可预测的模式。
一致性 将样式、颜色和字体集中在
```
Resources/Styles
```
中。
响应式 使用自适应布局（
```
OnIdiom
```
、
```
OnPlatform
```
、
```
Grid
```
、
```
FlexLayout
```
）以支持所有设备。
无障碍访问 提供语义属性、合适的对比度和屏幕阅读器支持。
性能优先使用编译绑定、轻量控件和高效的布局容器。

Categories of Rules

规则分类

Layout & Structure
Styling & Theming
Controls & Components
Accessibility
Performance

Each rule is stored in the

rules/

directory and should be applied whenever generating UI code.

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

每条规则都存储在

rules/

目录中，生成UI代码时应遵循这些规则。

Agent Usage Guidelines

Agent使用指南

When generating XAML, follow the layout and styling rules.
When creating new pages, apply consistent structure:
- Root layout should be
```
Grid
```
  or
```
VerticalStackLayout
```
  .
- Avoid deeply nested layouts.
- Use styles instead of inline properties.
When generating controls, prefer reusable components in
```
/Views/Controls
```
.
When asked to “make the UI responsive,” apply idiom/platform conditions.
When asked to “improve performance,” apply rules from the performance category.

生成XAML时，遵循布局和样式规则。
创建新页面时，应用一致的结构：
- 根布局应为
```
Grid
```
  或
```
VerticalStackLayout
```
  。
- 避免深度嵌套的布局。
- 使用样式而非内联属性。
生成控件时，优先使用
```
/Views/Controls
```
中的可复用组件。
当被要求“让UI具备响应式”时，应用适配设备类型/平台的条件。
当被要求“提升性能”时，应用性能分类中的规则。

Out of Scope

超出范围

Business logic (covered in other skills)
Authentication UI flows (covered in
```
maui-authentication
```
)
Deployment or platform packaging

业务逻辑（由其他技能覆盖）
身份验证UI流程（由
```
maui-authentication
```
覆盖）
部署或平台打包