关于 engram-ui-elements
面向 Engram 仪表板页面和组件开发者的 UX 技能，涵盖导航、空状态和指标设计，并指导卡片、表格与操作控件的布局。
主要功能
- 01关联实体间的导航设计
- 02信息明确的空状态指引
- 03反映系统状态的指标
- 04按内容类型选用卡片或表格
- 05将操作控件放在相关对象旁
适用场景
- 01添加仪表板页面或局部视图
- 02设计实体列表和详情页
- 03在空状态中解释数据缺失
- 04根据内容选择卡片或表格
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/engram-ui-elements确认已加载。
详细介绍
适用场景
在以下情况下使用此技能：
- 向仪表板添加新页面或局部模板
- 创建卡片、指标、表格、列表或详情视图
- 为相关实体设计互联导航
UX 规则
- 存在领域关系时，每个列表项都应指向有用的内容。
- 优先采用互联流程：项目 -> 会话 -> 观察项 -> 完整详情。
- 空状态必须说明缺少什么，以及如何解锁数据。
- 指标必须反映真实的系统状态，而非装饰性计数器。
- 详情页应展示元数据、内容和下一个相关链接。
组件规则
- 使用指标帮助用户了解情况，而不是替代核心内容。
- 使用卡片展示可浏览的实体，使用表格展示密集的对比类管理数据。
- 除非嵌套边框框能够呈现用户需要的层级关系，否则应避免使用。
- 将操作控件放在其影响的实体附近。
评论
支持 Markdown