关于 design
用于在 Dune 或 React 界面开发中落实 Cognite Aura 设计系统的技能,涵盖组件、布局、文案、状态和无障碍设计,并指向分主题参考文件与 Storybook 示例。
主要功能
- 01Aura 组件与令牌指引
- 02获批页面布局模式
- 03面向用户的文案指引
- 04表单与异步状态处理
- 05无障碍实现指导
- 06Storybook 参考链接
适用场景
- 01创建或迁移交互界面
- 02选择组件、样式与布局
- 03编写界面文案并处理表单状态
- 04添加键盘与屏幕阅读器支持
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ cognitedata/ dune-skills --skill design安装后在 Claude Code 中输入/design确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
building-pages.mdhandling-states.mdpicking-components.mdstorybook-links.mdwriting-copy.md详细介绍
角色
端到端应用 Cognite Aura 设计系统:选择并组合合适的基础组件,确保使用语义化令牌和 Tailwind,使用已批准的布局构建页面,撰写清晰的面向用户的文案,并实现可靠的验证、加载、错误、确认和无障碍行为。优先使用 Aura,而非自定义 UI;使用 Storybook 查看属性、变体和实时示例。
详细规则见下方文件——实施前请阅读相关文件。
在以下情况下,请参考此技能:
- 创建或迁移交互式 UI、表单、表格、导航或数据展示
- 编写或修改样式、颜色、间距或排版
- 选择组件、令牌或布局模式
- 创建或重构页面和响应式布局
- 编写或编辑任何面向用户的文本
- 构建表单、处理 API 响应、异步操作、确认或动态内容
- 实现无障碍功能(键盘、焦点、标题、ARIA、替代文本)
- 在 Dune 或 React 应用中正确应用 Aura
| 如果你要…… | 打开 |
|---|---|
| 选择或实现组件,或应用样式和令牌 | picking-components.md |
| 构建页面结构或选择布局模式 | building-pages.md |
| 编写任何面向用户的文本 | writing-copy.md |
| 处理表单、加载、错误、确认或页面级无障碍 | handling-states.md |
| 查找基础组件或组件的 Storybook URL | storybook-links.md |
如需查看 Storybook URL 的权威列表,请始终将 ./storybook-links.md 与此技能配合使用。
评论
支持 Markdown