技能 angular-ui-patterns
📦
angular-ui-patterns
安全
使用经过验证的模式构建健壮的 Angular UI
创建可靠的 Angular 界面需要一致地处理加载状态、错误状态和空状态。本技能提供经过实战测试的模式，确保用户始终了解应用程序中正在发生的事情。
支持: Claude Codex Code(CC)
1
下载技能 ZIP
2
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
3
开启并开始使用
测试它
正在使用“angular-ui-patterns”。 一个获取并显示用户帖子的组件
预期结果:
- 组件在初始加载时显示骨架屏加载器（尚无数据时）
- 当数据为空到达时，显示带有"创建帖子"按钮的空状态
- 当 API 返回错误时，在保留缓存数据可见性的同时显示带有重试选项的错误横幅
- 成功加载后，使用适当的可访问性属性呈现完整的帖子列表
正在使用“angular-ui-patterns”。 设置表单中的保存按钮
预期结果:
- 仅在表单有效时启用按钮
- 点击时，按钮变为禁用状态并显示带有"保存中..."文本的加载 spinner
- 成功时，显示绿色勾选标记和"已保存！"，然后 2 秒后恢复
- 错误时，显示红色 X 和错误消息，并重新启用按钮以供重试
安全审计
安全v1 • 2/24/2026
Documentation-only skill containing Angular UI pattern guidance. All 63 static analysis findings are false positives: URLs are documentation references (not network calls), backticks are markdown code fencing (not shell execution), and crypto detections are text pattern misidentifications. No executable code, network requests, or command execution present.
3
已扫描文件
581
分析行数
0
发现项
1
审计总数
未发现安全问题
审计者: claude
质量评分
38
架构
100
可维护性
87
内容
50
社区
100
安全
96
规范符合性
你能构建什么
前端开发者构建数据驱动仪表板
在从多个具有不同延迟的 API 获取数据的仪表板小部件中实现一致的加载、错误和空状态。
团队负责人建立 UI 标准
定义组织范围内的状态管理、错误处理和用户反馈模式，确保跨团队的用户体验一致。
AI 助手生成 Angular 组件
引导 Claude 或 Codex 生成遵循经过验证的状态处理模式的 Angular 组件，避免常见陷阱，如静默错误或缺失的加载状态。
试试这些提示
基本加载状态模式
创建一个显示项目列表的 Angular 组件。当加载且没有数据时显示骨架屏加载器，当列表为空时显示空状态，当加载失败时显示带有重试选项的错误状态，并在数据可用时显示实际数据。使用 Angular Signals 和现代控制流。
带验证和提交状态的表单
构建一个具有响应式表单验证的 Angular 表单组件。为无效字段显示内联错误消息，在表单提交期间禁用提交按钮，在按钮上显示加载指示器，并在异步操作完成后显示成功或错误Toast通知。
使用 @defer 渐进式加载内容
实现一个立即加载关键内容并使用 @defer 延迟非关键部分（如评论、相关内容或分析）的 Angular 页面。为每个延迟块包含占位符、加载和错误状态，并设置适当的最小加载时间。
带乐观更新的确认对话框
创建一个删除确认对话框模式，显示要求确认的模态框，在确认时应用乐观 UI 更新，在服务器请求失败时回滚更改，并在整个过程中向用户显示适当的反馈。
最佳实践
- 始终向用户显示错误 - 永远不要在没有反馈的情况下静默捕获异常
- 仅在没有现有数据时显示加载指示器，以防止内容闪烁
- 在异步操作期间禁用操作按钮以防止重复提交
避免
- 在缓存数据存在时显示 spinner - 在重新获取期间导致不必要的视觉闪烁
- 在 catch 块中吞下错误而不向用户告知失败
- 通过不在处理期间禁用按钮来允许提交按钮的多次快速点击
常见问题
何时应该使用骨架屏加载器 versus spinner？
骨架屏加载器用于初始页面加载和内容形状已知的列表布局。spinner 用于模态操作、按钮提交和内容形状未知或区域较小的内联操作。
当我有关闭数据可用时如何处理错误？
显示现有数据并在受影响部分的顶部或底部显示错误横幅。这种优雅降级方法使 UI 保持功能正常，同时向用户告知部分失败。
spinner 的最小加载时间是多少？
加载状态的最小时间为 200ms，以防止闪烁。如果操作在 200ms 内完成，仍显示完整加载状态以避免突兀的视觉转换。
何时应该使用乐观更新？
使用 aria-live 区域向屏幕阅读器宣布加载状态变化。确保在状态变化后适当管理焦点，并为视觉加载指示器提供文本替代方案。