企业官网建设流程全解析

Angular 用户界面模式

用于构建针对 AI 代理和大语言模型优化的稳健 Angular 应用的现代 UI 模式。

概览

此技能涵盖以下必要的用户界面模式：

• 加载状态- 骨架屏与加载旋转图的决策树
• 错误处理- 错误边界层级和恢复
• 渐进式显示- 使用@defer进行延迟渲染
• 数据展示- 处理空、加载和错误状态
• 表单模式- 提交状态和验证反馈
• 对话/模态模式- 合理的对话生命周期管理

核心原则

1. 永远不要显示过时的界面- 仅在没有数据时显示加载
2. 显示所有错误- 永不悄悄失败
3. 乐观更新- 在服务器确认前更新用户界面
4. 渐进式披露- 使用@defer加载非关键内容
5. 优雅降级- 功能失败时的备用方案

结构

SKILL.md文件包括：

1. 黄金法则- 不可妥协的遵循模式
2. 决策树- 何时使用骨架与旋转器
3. 代码示例- 正确与错误的实现
4. 反模式- 需要避免的常见错误

快速参考

<!-- Angular template pattern for data states -->@if (error()) {<app-error-state[error]="error()"(retry)="load()"/>} @else if (loading() && !data()) {<app-skeleton-state/>} @else if (!data()?.length) {<app-empty-statemessage="No items found"/>} @else {<app-data-display[data]="data()"/>}

版本

当前版本：1.0.0（2026年2月）

参考文献

• Angular @defer
• Angular Templates